<?php $__env->startSection('title', 'Dashboard Karyawan'); ?>
<?php $__env->startSection('page-title'); ?>
    Selamat Datang, <?php echo e($employee->name); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('page-subtitle'); ?>
    NIK: <strong class="font-monospace text-dark"><?php echo e($employee->nik); ?></strong> &bull; Departemen: <strong><?php echo e($employee->department?->name ?? '-'); ?></strong> &bull; Jabatan: <strong><?php echo e($employee->position?->name ?? '-'); ?></strong>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .hero-attendance-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        position: relative;
    }
    .clock-widget {
        background: #f8fafc;
        border-radius: 0.75rem;
        padding: 1.25rem;
        border: 1px solid #e2e8f0;
    }
    .clock-digits {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.5px;
    }
    .pulsing-colon {
        animation: blinkColon 1s infinite;
        color: #435ebe;
    }
    @keyframes blinkColon {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.2; }
    }

    @media (max-width: 576px) {
        .clock-digits {
            font-size: 1.5rem;
        }
        .clock-widget {
            padding: 0.85rem;
        }
        .hero-attendance-card .card-body {
            padding: 1.15rem !important;
        }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<section class="row g-3">
    
    <div class="col-12 col-lg-8">
        
        <div class="card hero-attendance-card shadow-xs mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center g-3">
                    <div class="col-md-7">
                        <div class="d-inline-flex align-items-center gap-1 badge bg-light text-primary px-3 py-1 rounded-pill mb-2 fw-semibold text-xs border">
                            <i class="bi bi-geo-alt"></i>
                            <span>Presensi Geofencing GPS</span>
                        </div>
                        <h4 class="text-dark fw-bold mb-2">Presensi Hari Ini</h4>
                        <p class="text-muted text-sm mb-3">
                            <i class="bi bi-calendar3 me-1"></i> <strong><?php echo e(now()->translatedFormat('l, d F Y')); ?></strong><br>
                            <i class="bi bi-clock me-1"></i> Shift: <strong><?php echo e($shift ? $shift->name.' ('.\Carbon\Carbon::parse($shift->start_time)->format('H:i').' - '.\Carbon\Carbon::parse($shift->end_time)->format('H:i').' WIB)' : 'Reguler (08:00 - 17:00 WIB)'); ?></strong>
                        </p>

                        <?php if(!$todayAttendance): ?>
                            <div class="alert alert-warning py-2 px-3 mb-3 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-exclamation-circle-fill fs-6"></i>
                                <span>Anda belum melakukan presensi masuk hari ini.</span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="<?php echo e(url('/employee/scan-qr')); ?>" class="btn btn-primary btn-lg shadow-sm fw-bold">
                                    <i class="bi bi-qr-code-scan me-2"></i> SCAN QR PRESENSI
                                </a>
                                <a href="<?php echo e(url('/employee/attendance/check-in')); ?>" class="btn btn-outline-success btn-lg">
                                    <i class="bi bi-camera me-1"></i> Absen Selfie
                                </a>
                            </div>
                        <?php elseif(!$todayAttendance->check_out): ?>
                            <div class="alert alert-success py-2 px-3 mb-3 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-check-circle-fill fs-6"></i>
                                <span>Sudah absen masuk pukul <strong><?php echo e(\Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i')); ?> WIB</strong> (Status: <strong><?php echo e($todayAttendance->status_label); ?></strong>).</span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="<?php echo e(url('/employee/scan-qr')); ?>" class="btn btn-danger btn-lg shadow-sm fw-bold">
                                    <i class="bi bi-qr-code-scan me-2"></i> SCAN QR PULANG
                                </a>
                                <a href="<?php echo e(url('/employee/attendance/check-out')); ?>" class="btn btn-outline-danger btn-lg">
                                    <i class="bi bi-box-arrow-right me-1"></i> Pulang Manual
                                </a>
                            </div>
                        <?php else: ?>
                            <div class="alert alert-info py-2 px-3 mb-0 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-check2-all fs-6"></i>
                                <span>Presensi hari ini telah lengkap (Masuk: <strong><?php echo e(\Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i')); ?></strong> &bull; Pulang: <strong><?php echo e(\Carbon\Carbon::parse($todayAttendance->check_out)->format('H:i')); ?></strong>).</span>
                            </div>
                        <?php endif; ?>
                    </div>

                    
                    <div class="col-md-5 text-center">
                        <div class="clock-widget">
                            <span class="badge bg-white text-muted text-xs px-2 py-1 border rounded-pill mb-2 fw-medium">Waktu Server (WIB)</span>
                            <div class="clock-digits mb-1" id="live-clock-container">
                                <span id="clock-hours"><?php echo e(now()->format('H')); ?></span><span class="pulsing-colon">:</span><span id="clock-minutes"><?php echo e(now()->format('i')); ?></span><span class="pulsing-colon">:</span><span id="clock-seconds"><?php echo e(now()->format('s')); ?></span>
                            </div>
                            <small class="text-muted text-xs">Sinkronisasi Real-Time</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">STATUS HARI INI</div>
                        <h6 class="fw-bold mb-0">
                            <?php if($todayAttendance): ?>
                                <span class="badge <?php echo e($todayAttendance->status_badge); ?>"><?php echo e($todayAttendance->status_label); ?></span>
                            <?php else: ?>
                                <span class="badge bg-light text-secondary border">Belum Absen</span>
                            <?php endif; ?>
                        </h6>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">JAM MASUK</div>
                        <h5 class="fw-bold mb-0 text-success">
                            <?php echo e($todayAttendance?->check_in ? \Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i') : '--:--'); ?>

                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">JAM PULANG</div>
                        <h5 class="fw-bold mb-0 text-danger">
                            <?php echo e($todayAttendance?->check_out ? \Carbon\Carbon::parse($todayAttendance->check_out)->format('H:i') : '--:--'); ?>

                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">SISA CUTI</div>
                        <h5 class="fw-bold mb-0 text-primary">
                            <?php echo e($employee->leave_balance); ?> Hari
                        </h5>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="card border shadow-xs">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold text-dark">Riwayat Kehadiran Terakhir</h5>
                <a href="<?php echo e(url('/employee/attendance/history')); ?>" class="btn btn-sm btn-outline-primary">
                    <span>Lihat Semua</span>
                    <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Tanggal</th>
                                <th>Masuk</th>
                                <th>Pulang</th>
                                <th>Status</th>
                                <th>Keterlambatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__empty_1 = true; $__currentLoopData = $recentAttendances; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $att): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td class="ps-4"><strong><?php echo e(\Carbon\Carbon::parse($att->attendance_date)->translatedFormat('d M Y')); ?></strong></td>
                                    <td><span class="font-monospace fw-semibold"><?php echo e($att->check_in ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '-'); ?></span></td>
                                    <td><span class="font-monospace fw-semibold"><?php echo e($att->check_out ? \Carbon\Carbon::parse($att->check_out)->format('H:i') : '-'); ?></span></td>
                                    <td>
                                        <span class="badge <?php echo e($att->status_badge); ?>"><?php echo e($att->status_label); ?></span>
                                    </td>
                                    <td>
                                        <?php if($att->late_minutes > 0): ?>
                                            <span class="text-danger fw-bold text-xs">+<?php echo e($att->late_minutes); ?> Menit</span>
                                        <?php else: ?>
                                            <span class="text-success text-xs fw-semibold">Tepat Waktu</span>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">Belum ada riwayat absensi yang tercatat.</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    
    <div class="col-12 col-lg-4">
        
        <div class="card border shadow-xs text-center mb-3">
            <div class="card-body py-4">
                <div class="avatar avatar-xl mx-auto mb-3 shadow-xs position-relative" style="width: 72px; height: 72px;">
                    <?php if($employee->photo): ?>
                        <img src="<?php echo e(asset($employee->photo)); ?>" alt="Avatar" style="width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid #e2e8f0;">
                    <?php else: ?>
                        <div class="bg-primary text-white fs-4 fw-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 72px; height: 72px;">
                            <?php echo e(strtoupper(substr($employee->name, 0, 2))); ?>

                        </div>
                    <?php endif; ?>
                </div>
                <h5 class="fw-bold text-dark mb-1"><?php echo e($employee->name); ?></h5>
                <p class="text-muted text-xs mb-3 font-monospace"><?php echo e($employee->email); ?></p>
                <div class="d-flex justify-content-center gap-2 mb-3">
                    <span class="badge bg-light text-primary border"><?php echo e($employee->position?->name ?? 'Staff'); ?></span>
                    <span class="badge bg-light text-success border"><?php echo e(ucfirst($employee->employment_status)); ?></span>
                </div>
                <a href="<?php echo e(url('/employee/profile')); ?>" class="btn btn-sm btn-outline-secondary w-100">
                    <i class="bi bi-pencil me-1"></i> Edit Profil Saya
                </a>
            </div>
        </div>

        
        <div class="card border shadow-xs">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold text-dark mb-0">Pengajuan Izin / Cuti</h6>
                <a href="<?php echo e(url('/employee/leave-requests')); ?>" class="btn btn-sm btn-outline-primary">+ Ajukan</a>
            </div>
            <div class="card-body p-3">
                <?php $__empty_1 = true; $__currentLoopData = $recentLeaves; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $leave): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="mb-0 fw-bold text-dark text-sm"><?php echo e($leave->type_label); ?></h6>
                            <small class="text-muted text-xs"><?php echo e(\Carbon\Carbon::parse($leave->start_date)->format('d M')); ?> s/d <?php echo e(\Carbon\Carbon::parse($leave->end_date)->format('d M Y')); ?> (<?php echo e($leave->total_days); ?> Hari)</small>
                        </div>
                        <span class="badge <?php echo e($leave->status_badge); ?>"><?php echo e(ucfirst($leave->status)); ?></span>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-calendar-check fs-2 d-block mb-1 text-secondary opacity-50"></i>
                        <small class="text-muted">Belum ada pengajuan izin atau cuti aktif.</small>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    function updateClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        const elH = document.getElementById('clock-hours');
        const elM = document.getElementById('clock-minutes');
        const elS = document.getElementById('clock-seconds');
        
        if (elH) elH.innerText = hours;
        if (elM) elM.innerText = minutes;
        if (elS) elS.innerText = seconds;
    }
    setInterval(updateClock, 1000);
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\absensi\resources\views/employee/dashboard.blade.php ENDPATH**/ ?>