<?php $__env->startSection('title', 'Dashboard Utama'); ?>
<?php $__env->startSection('page-title', 'Dashboard Presensi'); ?>
<?php $__env->startSection('page-subtitle', 'Ringkasan presensi, statistik tim, dan aktivitas kehadiran karyawan secara real-time.'); ?>

<?php $__env->startSection('page-actions'); ?>
<div class="d-flex align-items-center gap-2">
    <div class="badge bg-white text-dark px-3 py-2 border-0 rounded-pill d-flex align-items-center gap-2 shadow-sm">
        <span class="pulse-live"></span>
        <span class="fw-bold text-xs text-secondary">Real-Time Sync</span>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    /* Radial Gauge Card */
    .gauge-card-box {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }

    .circular-progress-wrap {
        position: relative;
        width: 140px;
        height: 140px;
    }

    .circular-progress-svg {
        transform: rotate(-90deg);
        width: 140px;
        height: 140px;
    }

    .progress-meter, .progress-value {
        fill: none;
        stroke-width: 12;
    }

    .progress-meter {
        stroke: #f1f5f9;
    }

    .progress-value {
        stroke: url(#progressGradient);
        stroke-linecap: round;
        transition: stroke-dashoffset 1s ease-in-out;
    }

    .gauge-center-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .gauge-percentage {
        font-size: 1.4rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1;
    }

    .gauge-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<section class="row g-3">
    
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="material-stat-card">
            <div class="stat-icon-glow stat-icon-purple">
                <i class="bi bi-people-fill"></i>
            </div>
            <div class="stat-info-box">
                <div class="stat-info-label">Total Karyawan</div>
                <h3 class="stat-info-val"><?php echo e($totalEmployees); ?></h3>
                <small class="text-muted text-xs font-semibold">Database Master</small>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="material-stat-card">
            <div class="stat-icon-glow stat-icon-green">
                <i class="bi bi-check2-circle"></i>
            </div>
            <div class="stat-info-box">
                <div class="stat-info-label">Hadir Hari Ini</div>
                <h3 class="stat-info-val text-success"><?php echo e($presentToday); ?></h3>
                <small class="text-success text-xs font-semibold"><i class="bi bi-arrow-up-short"></i><?php echo e($attendanceRate); ?>% Kehadiran</small>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="material-stat-card">
            <div class="stat-icon-glow stat-icon-orange">
                <i class="bi bi-clock-history"></i>
            </div>
            <div class="stat-info-box">
                <div class="stat-info-label">Terlambat</div>
                <h3 class="stat-info-val text-warning"><?php echo e($lateToday); ?></h3>
                <small class="text-warning text-xs font-semibold">Tercatat Sistem</small>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="material-stat-card">
            <div class="stat-icon-glow stat-icon-rose">
                <i class="bi bi-person-x"></i>
            </div>
            <div class="stat-info-box">
                <div class="stat-info-label">Belum Hadir</div>
                <h3 class="stat-info-val text-danger"><?php echo e($absentToday); ?></h3>
                <small class="text-danger text-xs font-semibold"><?php echo e($absentRate); ?>% Belum Check-in</small>
            </div>
        </div>
    </div>

    
    <div class="col-12 col-lg-4 mt-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Rasio Kehadiran</h5>
                <span class="badge bg-light text-primary">Hari Ini</span>
            </div>
            <div class="card-body gauge-card-box">
                
                <div class="circular-progress-wrap mb-3">
                    <svg class="circular-progress-svg" viewBox="0 0 140 140">
                        <defs>
                            <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" stop-color="#4f46e5" />
                                <stop offset="50%" stop-color="#7c3aed" />
                                <stop offset="100%" stop-color="#ec4899" />
                            </linearGradient>
                        </defs>
                        <circle class="progress-meter" cx="70" cy="70" r="54"></circle>
                        <?php
                            $circumference = 2 * 3.14159 * 54;
                            $offset = $circumference - ($attendanceRate / 100) * $circumference;
                        ?>
                        <circle class="progress-value" cx="70" cy="70" r="54" 
                            style="stroke-dasharray: <?php echo e($circumference); ?>; stroke-dashoffset: <?php echo e($offset); ?>;"></circle>
                    </svg>
                    <div class="gauge-center-content">
                        <div class="gauge-percentage"><?php echo e($attendanceRate); ?>%</div>
                        <div class="gauge-label">Hadir</div>
                    </div>
                </div>

                <div class="w-100 mt-2">
                    <div class="d-flex justify-content-between text-xs font-semibold text-muted mb-1">
                        <span>Hadir Tepat Waktu</span>
                        <strong class="text-dark"><?php echo e($presentToday - $lateToday); ?> Karyawan</strong>
                    </div>
                    <div class="progress mb-3" style="height: 6px; border-radius: 999px; background-color: #f1f5f9;">
                        <div class="progress-bar bg-success" style="width: <?php echo e($totalEmployees > 0 ? (($presentToday - $lateToday) / $totalEmployees) * 100 : 0); ?>%;"></div>
                    </div>

                    <div class="d-flex justify-content-between text-xs font-semibold text-muted mb-1">
                        <span>Terlambat</span>
                        <strong class="text-warning"><?php echo e($lateToday); ?> Karyawan</strong>
                    </div>
                    <div class="progress mb-3" style="height: 6px; border-radius: 999px; background-color: #f1f5f9;">
                        <div class="progress-bar bg-warning" style="width: <?php echo e($totalEmployees > 0 ? ($lateToday / $totalEmployees) * 100 : 0); ?>%;"></div>
                    </div>

                    <div class="d-flex justify-content-between text-xs font-semibold text-muted mb-1">
                        <span>Belum Hadir / Absen</span>
                        <strong class="text-danger"><?php echo e($absentToday); ?> Karyawan</strong>
                    </div>
                    <div class="progress" style="height: 6px; border-radius: 999px; background-color: #f1f5f9;">
                        <div class="progress-bar bg-danger" style="width: <?php echo e($absentRate); ?>%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="col-12 col-lg-8 mt-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">Tren Kehadiran Tim</h5>
                    <small class="text-muted">Statistik pergerakan kehadiran 7 hari terakhir</small>
                </div>
                <div class="d-flex gap-2">
                    <span class="badge bg-light text-success"><i class="bi bi-circle-fill fs-6 me-1" style="font-size: 6px !important;"></i> Hadir</span>
                    <span class="badge bg-light text-warning"><i class="bi bi-circle-fill fs-6 me-1" style="font-size: 6px !important;"></i> Terlambat</span>
                </div>
            </div>
            <div class="card-body p-4">
                <div style="height: 250px;">
                    <canvas id="splineChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    
    <div class="col-12 col-lg-8 mt-4">
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">Aktivitas Presensi Hari Ini</h5>
                    <small class="text-muted"><?php echo e(now()->translatedFormat('l, d F Y')); ?></small>
                </div>
                <a href="<?php echo e(url('/admin/attendance')); ?>" 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>
                            <tr>
                                <th class="ps-4">Karyawan</th>
                                <th>Departemen</th>
                                <th>Jam Masuk</th>
                                <th>Status</th>
                                <th>Jam Pulang</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__empty_1 = true; $__currentLoopData = $recentAttendances; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $attendance): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle me-3 d-flex align-items-center justify-content-center fw-bold shadow-xs text-white" 
                                                style="width: 38px; height: 38px; font-size: 0.85rem; background: var(--primary-gradient);">
                                                <?php if($attendance->employee->photo): ?>
                                                    <img src="<?php echo e(asset($attendance->employee->photo)); ?>" alt="Avatar" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                <?php else: ?>
                                                    <?php echo e(strtoupper(substr($attendance->employee->name, 0, 2))); ?>

                                                <?php endif; ?>
                                            </div>
                                            <div>
                                                <h6 class="mb-0 fw-bold text-dark text-sm"><?php echo e($attendance->employee->name); ?></h6>
                                                <small class="text-muted text-xs font-monospace"><?php echo e($attendance->employee->nik); ?></small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-sm text-muted"><?php echo e($attendance->employee->department?->name ?? '-'); ?></td>
                                    <td>
                                        <span class="fw-bold text-dark text-sm"><?php echo e($attendance->check_in ? \Carbon\Carbon::parse($attendance->check_in)->format('H:i') : '-'); ?></span>
                                        <?php if($attendance->late_minutes > 0): ?>
                                            <span class="badge bg-warning text-dark text-xs py-0 ms-1">+<?php echo e($attendance->late_minutes); ?>m</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <span class="badge <?php echo e($attendance->status_badge); ?> px-2 py-1">
                                            <?php echo e($attendance->status_label); ?>

                                        </span>
                                    </td>
                                    <td class="text-sm text-dark font-monospace"><?php echo e($attendance->check_out ? \Carbon\Carbon::parse($attendance->check_out)->format('H:i') : '-'); ?></td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="bi bi-inbox fs-2 d-block mb-2 text-secondary opacity-50"></i>
                                        Belum ada aktivitas presensi yang tercatat hari ini.
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    
    <div class="col-12 col-lg-4 mt-4">
        <div class="card shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pengajuan Izin</h5>
                <span class="badge bg-warning text-dark"><?php echo e(count($pendingLeaves)); ?> Pending</span>
            </div>
            <div class="card-body p-3">
                <?php $__empty_1 = true; $__currentLoopData = $pendingLeaves; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $leave): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                        <div class="stat-icon-glow stat-icon-orange me-3" style="width: 40px; height: 40px; font-size: 1rem; border-radius: 10px;">
                            <i class="bi bi-calendar-event"></i>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <h6 class="mb-0 fw-bold text-dark text-sm text-truncate"><?php echo e($leave->employee->name); ?></h6>
                            <small class="text-muted text-xs d-block"><?php echo e($leave->type_label); ?> &bull; <?php echo e(\Carbon\Carbon::parse($leave->start_date)->format('d M')); ?></small>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-check2-circle fs-3 d-block mb-1 text-success opacity-60"></i>
                        <small class="text-muted">Tidak ada pengajuan izin pending.</small>
                    </div>
                <?php endif; ?>

                <?php if(count($pendingLeaves) > 0): ?>
                    <a href="<?php echo e(url('/admin/leave-requests')); ?>" class="btn btn-primary btn-sm w-100 mt-2">
                        Tinjau Semua Pengajuan
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="<?php echo e(asset('mazer/assets/vendors/chartjs/Chart.min.js')); ?>"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('splineChart').getContext('2d');

        // Linear Gradient for Spline Curve Fill (Materialize Style)
        const gradientPresent = ctx.createLinearGradient(0, 0, 0, 240);
        gradientPresent.addColorStop(0, 'rgba(79, 70, 229, 0.35)');
        gradientPresent.addColorStop(1, 'rgba(79, 70, 229, 0.0)');

        const gradientLate = ctx.createLinearGradient(0, 0, 0, 240);
        gradientLate.addColorStop(0, 'rgba(245, 158, 11, 0.25)');
        gradientLate.addColorStop(1, 'rgba(245, 158, 11, 0.0)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: <?php echo json_encode($dates); ?>,
                datasets: [
                    {
                        label: 'Hadir Tepat Waktu',
                        data: <?php echo json_encode($chartPresent); ?>,
                        borderColor: '#4f46e5',
                        backgroundColor: gradientPresent,
                        borderWidth: 3,
                        pointBackgroundColor: '#4f46e5',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        lineTension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Terlambat',
                        data: <?php echo json_encode($chartLate); ?>,
                        borderColor: '#f59e0b',
                        backgroundColor: gradientLate,
                        borderWidth: 2.5,
                        pointBackgroundColor: '#f59e0b',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        lineTension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            fontFamily: "'Plus Jakarta Sans', sans-serif",
                            fontColor: '#94a3b8'
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            color: '#f1f5f9',
                            drawBorder: false
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1,
                            fontFamily: "'Plus Jakarta Sans', sans-serif",
                            fontColor: '#94a3b8'
                        }
                    }]
                }
            }
        });
    });
</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/admin/dashboard.blade.php ENDPATH**/ ?>