<?php
// Cek modul, jika kosong arahkan ke 404
if (empty($mod)) {
    header('location:../404');
    echo 'kosong';
    exit;
}

include_once 'sw-mod/sw-header.php';
?>

<style>
    /* Efek Dinamis Global untuk Semua Card & Stat-Box */
    .card, .wallet-card, .stat-box {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    }
    .card:hover, .wallet-card:hover, .stat-box:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 12px 24px rgba(0,0,0,0.5) !important;
    }
</style>

<?php if (!isset($_COOKIE['COOKIES_MEMBER'])): ?>
    <style>
        /* Mengubah tema dasar menjadi dark mode bertema pemetaan GIS / Radar */
        body, html, .appHeader, .appBottomMenu, #appCapsule {
            background: #0b0f19 !important; /* Biru dongker gelap khas software pemetaan */
            color: #ffffff !important;
        }
        
        /* Layout Fullscreen dengan pola Grid Koordinat Spasial */
        .space-bg-fullscreen {
            background: radial-gradient(circle at center, rgba(30, 215, 127, 0.05) 0%, #060911 100%),
                        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
            background-size: 100% 100%, 40px 40px, 40px 40px !important;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important; 
            align-items: center !important;
            padding: 15px 20px 20px 20px !important; 
        }
        
        /* Efek Gelombang Lingkaran Radar Di Latar Belakang */
        .space-bg-fullscreen::before {
            content: "";
            position: absolute;
            top: 15%;
            width: 320px;
            height: 320px;
            border: 1px solid rgba(30, 215, 127, 0.15);
            border-radius: 50%;
            background: conic-gradient(from 0deg, transparent 40%, rgba(30, 215, 127, 0.12) 100%);
            animation: radarSweep 5s linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        /* Lingkaran pembantu untuk efek konsentris radar */
        .space-bg-fullscreen::after {
            content: "";
            position: absolute;
            top: 21%;
            width: 200px;
            height: 200px;
            border: 1px dashed rgba(30, 215, 127, 0.1);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }

        /* Titik Pemetaan Dinamis (Mapping Nodes) */
        .mapping-nodes {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0; left: 0;
            z-index: 0;
            pointer-events: none;
        }
        .node {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #1ed77f;
            border-radius: 50%;
            box-shadow: 0 0 10px #1ed77f, 0 0 20px #1ed77f;
            animation: nodeBlink 2.5s infinite ease-in-out;
        }
        .node-1 { top: 12%; left: 15%; animation-delay: 0.3s; }
        .node-2 { top: 28%; right: 10%; animation-delay: 0.9s; }
        .node-3 { top: 45%; left: 8%; animation-delay: 1.5s; }

        .space-bg-fullscreen > * {
            position: relative;
            z-index: 1;
            width: 100%; 
        }

        .section.mt-2.text-center {
            margin-top: 5px !important;
            margin-bottom: 10px !important;
        }

        /* Glow Efek pada Logo Perusahaan */
        .login-logo {
            max-width: 105px; 
            height: auto;
            margin-bottom: 8px;
            border: none; 
            filter: drop-shadow(0 0 15px rgba(30, 215, 127, 0.8));
            animation: logoGlow 3s ease-in-out infinite alternate;
        }
        @keyframes logoGlow {
            0% { filter: drop-shadow(0 0 10px rgba(30, 215, 127, 0.5)); }
            100% { filter: drop-shadow(0 0 22px rgba(30, 215, 127, 0.9)); }
        }

        /* EFEK GLASSMORPHISM KEKINIAN (CARD LOGIN & MAP) */
        .glass-effect {
            background: rgba(18, 26, 43, 0.65) !important;
            backdrop-filter: blur(12px) -webkit-backdrop-filter(12px) !important;
            border-radius: 15px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
            transition: all 0.4s ease-in-out !important;
        }
        .glass-effect:hover {
            background: rgba(18, 26, 43, 0.8) !important;
            box-shadow: 0 0 25px rgba(30, 215, 127, 0.2) !important;
            transform: translateY(-3px);
        }
        .glass-effect .card-body { background: transparent !important; }
        
        /* Label & Input Form Profesional */
        .glass-effect .form-group .label-custom-center { 
            font-size: 11px !important;
            letter-spacing: 1.5px;
            color: rgba(30, 215, 127, 0.8) !important; /* Hijau Radar */
            font-weight: bold; 
            display: block !important;
            text-align: center !important;
            width: 100%;
            transition: color 0.3s ease; 
        }
        .glass-effect .form-control {
            background: rgba(6, 9, 17, 0.7) !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 10px;
            text-align: center;
            padding: 12px !important;
            height: auto !important;
        }
        .glass-effect .form-control::placeholder { color: rgba(255, 255, 255, 0.25) !important; text-align: center; }
        .glass-effect .form-control:focus {
            border-color: #1ed77f !important;
            box-shadow: 0 0 12px rgba(30, 215, 127, 0.3) !important;
        }
        .glass-effect .form-group:focus-within .label-custom-center {
            color: #ffffff !important;
            text-shadow: 0 0 8px rgba(30, 215, 127, 0.6);
        }

        /* Area Button Group Modern HUD style */
        .form-button-group-custom {
            background: rgba(6, 9, 17, 0.9) !important;
            padding: 12px 15px;
            border-radius: 12px;
            margin-top: 15px !important;
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        }
        .form-button-group-custom .btn-success {
            background-color: #1ed77f !important;
            border: none !important;
            color: #060911 !important;
            font-weight: 700 !important;
            letter-spacing: 2px;
            padding: 12px !important;
            border-radius: 10px !important;
            transition: all 0.3s ease;
        }
        .form-button-group-custom .btn-success:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(30, 215, 127, 0.6);
        }
        
        .space-bg-fullscreen h4 {
            color: #ffffff !important;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-shadow: 0 0 10px rgba(255,255,255,0.2);
        }
        
        /* Frame Khusus Peta agar Mirip Monitor Pemetaan Satelit */
        #mini-map {
            width: 100%;
            height: 180px;
            border-radius: 10px;
            border: 1px solid rgba(30, 215, 127, 0.3) !important;
            box-shadow: inset 0 0 15px rgba(30, 215, 127, 0.15);
        }
        .leaflet-popup-content { color: #000000 !important; }
        .section.mb-5 { margin-bottom: 5px !important; padding: 0px !important; }

        /* Animasi Label Deteksi Radar */
        .radar-text {
            color: #1ed77f !important;
            font-weight: bold; 
            display: block; 
            text-align: center;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 2px;
            animation: pulseRadarText 1.5s ease-in-out infinite alternate;
            position: relative;
        }

        /* KEYFRAMES ANIMASI BARU */
        @keyframes radarSweep {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes nodeBlink {
            0%, 100% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        @keyframes pulseRadarText {
            0% { opacity: 0.5; text-shadow: 0 0 2px rgba(30, 215, 127, 0.2); }
            100% { opacity: 1; text-shadow: 0 0 10px rgba(30, 215, 127, 0.7); }
        }
    </style>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

    <div id="appCapsule" class="space-bg-fullscreen">
        
        <div class="mapping-nodes">
            <div class="node node-1"></div>
            <div class="node node-2"></div>
            <div class="node node-3"></div>
        </div>

        <div class="section mt-2 text-center">
            <img src="../../sw-content/bml.png" alt="Logo Perusahaan" class="login-logo">
            <center><h4>PT. BERKAT MANDIRI LESTARI</h4></center>
        </div>

        <div class="section mb-5 p-2">
            <form id="form-login">
                
                <div class="card glass-effect mb-3" style="border: 1px solid rgba(30, 215, 127, 0.25) !important;">
                    <div class="card-body pb-3 pt-3">
                        
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label-custom-center" for="email">USER NAME & PASSWORD</label>
                                <input type="email" class="form-control mt-1" id="email" name="email" placeholder="User Name Anda">
                                <i class="clear-input"><ion-icon name="close-circle"></ion-icon></i>
                            </div>
                        </div>
        
                        <div class="form-group basic mt-2">
                            <div class="input-wrapper">
                                <input type="password" class="form-control" id="password" name="password" placeholder="Kata sandi Anda">
                                <i class="clear-input"><ion-icon name="close-circle"></ion-icon></i>
                            </div>
                        </div>
                        
                    </div>
                </div>

                <div class="card glass-effect" style="border: 1px solid rgba(30, 215, 127, 0.35) !important;">
                    <div class="card-body">
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="radar-text mb-1">DETECTING YOUR LOCATION</label>
                                <div id="mini-map"></div>
                                
                                <small class="text-muted mt-2 d-block text-center" id="map-location-text" style="color: rgba(255, 255, 255, 0.6) !important; font-size: 11px; font-family: monospace;">
                                    Mendeteksi Koordinat Satelit...
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-button-group form-button-group-custom mt-3">
                    <button type="submit" class="btn btn-success btn-block"><ion-icon name="log-in-outline"></ion-icon> L O G I N</button>
                </div>
                    
            </form>
        </div>
    </div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const latDefault = -1.2950172093668686;
    const lngDefault = 114.65963883775926;
    
    const statusText = document.getElementById('map-location-text');
    let map, marker;
    
    try {
        map = L.map('mini-map', {
            center: [latDefault, lngDefault],
            zoom: 10, 
            zoomControl: false
        });

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        marker = L.marker([latDefault, lngDefault]).addTo(map);
        marker.bindPopup("<b style='color:#000;'>PT. BML</b>").openPopup();
        
        setTimeout(function(){
            map.invalidateSize();
        }, 400);

        if ("geolocation" in navigator) {
            statusText.innerText = "MEMUAT AKSES GPS...";
            
            navigator.geolocation.watchPosition(
                function(position) {
                    const userLat = position.coords.latitude;
                    const userLng = position.coords.longitude;
                    
                    const newPos = new L.LatLng(userLat, userLng);
                    map.setView(newPos, 16);
                    marker.setLatLng(newPos);
                    
                    marker.bindPopup("<b style='color:#000;'>Lokasi Anda Saat Ini</b>").openPopup();
                    statusText.innerHTML = `LAT: ${userLat.toFixed(6)} | LNG: ${userLng.toFixed(6)} <span style="color:#1ed77f; font-weight:bold;">[GPS ACTIVE]</span>`;
                    
                    if(position.coords.accuracy > 150) {
                        statusText.innerHTML += "<br><span style='color:#ff3333; font-weight:bold;'>⚠️ WARNING: FAKE GPS DETECTED</span>";
                    }
                }, 
                function(error) {
                    switch(error.code) {
                        case error.PERMISSION_DENIED:
                            statusText.innerText = "GPS PERMISSION DENIED";
                            break;
                        case error.POSITION_UNAVAILABLE:
                            statusText.innerText = "POSITION UNAVAILABLE";
                            break;
                        case error.TIMEOUT:
                            statusText.innerText = "GPS TIMEOUT";
                            break;
                        default:
                            statusText.innerText = "FAILED TO FETCH GPS";
                    }
                }, 
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                }
            );
        } else {
            statusText.innerText = "Browser tidak mendukung GPS.";
        }

    } catch (e) {
        console.error("Gagal inisialisasi peta: ", e);
        if(statusText) statusText.innerText = "Gagal merender peta satelit.";
    }
});
</script>

<?php else: ?>

    <div id="appCapsule">
        <div class="section wallet-card-section pt-1">
            <div class="card" style="background: linear-gradient(135deg, #128c4b 0%, #1dcc70 100%) !important; border: 2px solid #ffffff !important; border-radius: 20px !important; padding: 18px 10px !important; box-shadow: 0 0 20px rgba(29, 204, 112, 0.6), 0 0 10px rgba(255, 255, 255, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.5) !important;">
                <div class="balance" style="padding: 0 10px;">
                    <div class="left">
                        <span class="title" style="color: #ffffff !important; opacity: 0.85; font-size: 13px; font-weight: 500; letter-spacing: 0.5px;">Selamat <?= htmlspecialchars($salam); ?></span>
                        <h1 class="total" style="color: #ffffff !important; font-size: 26px; font-weight: 800; margin-top: 4px; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);"><?= htmlspecialchars(ucfirst($row_user['employees_name'])); ?></h1>
                    </div>
                </div>
                
                <div style="text-align: center; margin: 15px 0 10px 0;">
                    <p style="color: #ffffff !important; font-weight: 900; letter-spacing: 1.5px; font-size: 13px; margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">PT. BERKAT MANDIRI LESTARI</p>
                </div>
                
                <hr style="border-top: 1px solid rgba(255, 255, 255, 0.3) !important; margin: 10px 10px 15px 10px;">
                
                <div class="wallet-footer" style="display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 0 5px;">
                    <div class="item">
                        <a href="./absent" style="text-decoration: none; display: block;">
                            <div class="icon-wrapper" style="background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 14px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                                <ion-icon name="camera-outline" style="color: #ffffff !important; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));"></ion-icon>
                            </div>
                            <strong style="color: #ffffff !important; font-size: 12px; font-weight: bold; letter-spacing: 0.3px;">Absen</strong>
                        </a>
                    </div>

                    <div class="item">
                        <a href="./izin" style="text-decoration: none; display: block;">
                            <div class="icon-wrapper" style="background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 14px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                               <ion-icon name="documents-outline" style="color: #ffffff !important; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));"></ion-icon>
                            </div>
                            <strong style="color: #ffffff !important; font-size: 12px; font-weight: bold; letter-spacing: 0.3px;">Izin</strong>
                        </a>
                    </div>
                    
                    <div class="item">
                        <a href="./history" style="text-decoration: none; display: block;">
                            <div class="icon-wrapper" style="background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 14px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                               <ion-icon name="document-text-outline" style="color: #ffffff !important; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));"></ion-icon>
                            </div>
                            <strong style="color: #ffffff !important; font-size: 12px; font-weight: bold; letter-spacing: 0.3px;">History</strong>
                        </a>
                    </div>
                    
                    <div class="item">
                        <a href="./profile" style="text-decoration: none; display: block;">
                            <div class="icon-wrapper" style="background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 14px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                               <ion-icon name="person-outline" style="color: #ffffff !important; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));"></ion-icon>
                            </div>
                            <strong style="color: #ffffff !important; font-size: 12px; font-weight: bold; letter-spacing: 0.3px;">Profil</strong>
                        </a>
                    </div> 
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="row mt-2">
                <?php if ($result_absent->num_rows > 0): 
                    $row_absent = $result_absent->fetch_assoc(); ?>
                    <div class="col-6">
                        <div class="stat-box bg-primary">
                            <div class="title text-white">ABSEN MASUK</div>
                            <div class="value text-white"><?= $row_absent['time_in']; ?></div>
                        </div>
                    </div>

                    <?php if ($row_absent['time_out'] == '00:00:00'): ?>
                        <div class="col-6">
                            <a href="./absent" style="text-decoration:none;">
                                <div class="stat-box bg-success">
                                    <div class="title text-white">Absen Pulang</div>
                                    <div class="value text-white">Belum absen</div>
                                </div>
                            </a>
                        </div>
                    <?php else: ?>
                        <div class="col-6">
                            <div class="stat-box bg-warning">
                                <div class="title text-white">ABSEN PULANG</div>
                                <div class="value text-white"><?= $row_absent['time_out']; ?></div>
                            </div>
                        </div>
                    <?php endif; ?>
                    
                <?php else: ?>
                    <div class="col-12">
                        <a href="./absent" style="text-decoration: none; display: block;">
                            <div class="stat-box" style="background: linear-gradient(135deg, #128c4b 0%, #1dcc70 100%) !important; border: 2px solid #ffffff !important; border-radius: 12px !important; padding: 20px 15px !important; box-shadow: 0 0 15px rgba(29, 204, 112, 0.6), 0 0 8px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3), 0 4px 15px rgba(0, 0, 0, 0.4) !important;">
                                <div style="text-align: center; margin-bottom: 8px;">
                                    <center><ion-icon name="camera-outline" style="font-size: 36px; color: #ffffff !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));"></ion-icon></center>
                                    <div class="value" style="color: #ffffff !important; font-size: 16px; font-weight: bold; letter-spacing: 0.8px; text-transform: uppercase; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);">
                                        Absen Masuk / Pulang
                                    </div> 
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        
            <div class="col-12 mt-2">
                <div class="card" style="background: #ffcc00 !important; border: 6px solid transparent !important; border-image: repeating-linear-gradient(-45deg, #000000, #000000 10px, #ffcc00 10px, #ffcc00 20px) 6 !important; border-radius: 4px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;">
                    <div class="card-body p-1" style="background: #ffcc00 !important;">
                        <center>
                            <marquee scrollamount="4">
                                <div class="value" style="font-weight: 900; font-size: 16px; color: #cc0000 !important; letter-spacing: 1px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);">
                                    ⚠️ ATTENTION: HARAP LEBIH TERTIB P2H BAGI PENGGUNA UNIT BERGERAK RODA 2 / RODA 4, DAN HARAP AGAR DAPAT MELAPORKAN KEGIATAN HARIAN PADA FORM <i>DAILY ACTIVITY</i>
                                </div>
                            </marquee>
                        </center>
                    </div>
                </div>
            </div>
        </div>

        <div class="section mt-4">
            <div class="section-title mb-1" style="background: linear-gradient(135deg, #128c4b 0%, #1dcc70 100%) !important; border: 2px solid #ffffff !important; border-radius: 10px !important; padding: 8px 15px !important; color: #ffffff !important; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 0 15px rgba(29, 204, 112, 0.5), 0 0 8px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2) !important;">
                <span>Absensi Bulan:</span>
                <div>
                    <select class="select select-change" required style="background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; border-radius: 6px !important; padding: 3px 8px !important; font-weight: bold; font-size: 13px; outline: none; cursor: pointer;">
                        <?php
                        $months = [
                            "01" => "Januari", "02" => "Februari", "03" => "Maret", "04" => "April",
                            "05" => "Mei", "06" => "Juni", "07" => "Juli", "08" => "Agustus",
                            "09" => "September", "10" => "Oktober", "11" => "November", "12" => "Desember"
                        ];
                        foreach ($months as $m_num => $m_name) {
                            $selected = ($month == intval($m_num)) ? 'selected' : '';
                            echo "<option value=\"$m_num\" $selected style=\"background: #128c4b; color: #fff;\">$m_name</option>";
                        }
                        ?>
                    </select>
                    <span style="font-weight: bold; margin-left: 8px; color: #ffffff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);"><?= $year; ?></span>
                </div>
            </div>
            
            <div class="transactions">
                <div class="row">
                    <div class="load-home" style="display:contents"></div>   
                </div>
            </div>
        </div>

        <div class="section mt-2 mb-2">
            <div class="icon-wrapper" style="background: linear-gradient(135deg, #128c4b 0%, #1dcc70 100%) !important; border: 2px solid #ffffff !important; border-radius: 12px !important; padding: 12px 15px !important; display: block; width: 100%; box-shadow: 0 0 15px rgba(29, 204, 112, 0.6), 0 0 8px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;">
                <div style="text-align: center;">
                    <p style="margin: 0; padding: 0;">
                        <b style="color: #ffffff !important; font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);">
                            Absensi 1 Minggu Terakhir
                        </b>
                    </p>
                </div>
            </div>
            <br>
            <div class="card" style="background: linear-gradient(135deg, #128c4b 0%, #1dcc70 100%) !important; border: 2px solid #ffffff !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 0 15px rgba(29, 204, 112, 0.6), 0 0 8px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;">
                <div class="table-responsive">
                    <table class="table" style="background: transparent !important; margin-bottom: 0 !important; color: #ffffff !important;">
                        <thead>
                            <tr style="background: rgba(0, 0, 0, 0.15) !important;">
                                <th scope="col" style="color: #ffffff !important; font-weight: bold; border-bottom: 2px solid rgba(255,255,255,0.3) !important; font-size: 13px; padding: 12px 10px;">Tanggal</th>
                                <th scope="col" style="color: #ffffff !important; font-weight: bold; border-bottom: 2px solid rgba(255,255,255,0.3) !important; font-size: 13px; padding: 12px 10px;">Jam Masuk</th>
                                <th scope="col" style="color: #ffffff !important; font-weight: bold; border-bottom: 2px solid rgba(255,255,255,0.3) !important; font-size: 13px; padding: 12px 10px;">Jam Pulang</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $query_absen = "SELECT presence_date, presence_date_out, time_in, time_out FROM presence WHERE WEEKOFYEAR(presence_date)=WEEKOFYEAR(NOW()) AND employees_id='{$row_user['id']}' ORDER BY presence_id DESC LIMIT 6";
                            $result_absen = $connection->query($query_absen);
                            if ($result_absen && $result_absen->num_rows > 0) {
                                while ($row_absen = $result_absen->fetch_assoc()) {
                                    $date_out = ($row_absen['time_out'] == '00:00:00') ? '' : ' - ' . tanggal_ind($row_absen['presence_date_out']);
                                    ?>
                                    <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;">
                                        <th scope="row" style="color: #ffffff !important; font-weight: 500; font-size: 12px; padding: 12px 10px; vertical-align: middle;"><?= tanggal_ind($row_absen['presence_date']) . $date_out; ?></th>
                                        <td style="color: #ffffff !important; font-weight: bold; font-size: 13px; padding: 12px 10px; vertical-align: middle;"><?= $row_absen['time_in']; ?></td>
                                        <td style="color: #ffffff !important; font-weight: bold; font-size: 13px; padding: 12px 10px; vertical-align: middle;"><?= $row_absen['time_out']; ?></td>
                                    </tr>
                                    <?php
                                }
                            }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<?php 
endif;

include_once 'sw-mod/sw-footer.php';
?>