@extends('layouts.app')

@section('title', 'Dashboard Utama')
@section('page-title', 'Dashboard Presensi')
@section('page-subtitle', 'Ringkasan presensi, statistik tim, dan aktivitas kehadiran karyawan secara real-time.')

@section('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>
@endsection

@push('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>
@endpush

@section('content')
<section class="row g-3">
    {{-- Top 4 Vibrant Materialize Stat Cards --}}
    <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">{{ $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">{{ $presentToday }}</h3>
                <small class="text-success text-xs font-semibold"><i class="bi bi-arrow-up-short"></i>{{ $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">{{ $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">{{ $absentToday }}</h3>
                <small class="text-danger text-xs font-semibold">{{ $absentRate }}% Belum Check-in</small>
            </div>
        </div>
    </div>

    {{-- Second Row: Circular Radial Attendance Gauge & Wave Spline Chart (Reference Image Style!) --}}
    <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">
                {{-- SVG Circular Progress Meter --}}
                <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;
                        @endphp
                        <circle class="progress-value" cx="70" cy="70" r="54" 
                            style="stroke-dasharray: {{ $circumference }}; stroke-dashoffset: {{ $offset }};"></circle>
                    </svg>
                    <div class="gauge-center-content">
                        <div class="gauge-percentage">{{ $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">{{ $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: {{ $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">{{ $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: {{ $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">{{ $absentToday }} Karyawan</strong>
                    </div>
                    <div class="progress" style="height: 6px; border-radius: 999px; background-color: #f1f5f9;">
                        <div class="progress-bar bg-danger" style="width: {{ $absentRate }}%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Wave Spline Trend Chart (Reference Image Style!) --}}
    <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>

    {{-- Bottom Section: Recent Activity Table & Pending Leaves --}}
    <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">{{ now()->translatedFormat('l, d F Y') }}</small>
                </div>
                <a href="{{ 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>
                            @forelse($recentAttendances as $attendance)
                                <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);">
                                                @if($attendance->employee->photo)
                                                    <img src="{{ asset($attendance->employee->photo) }}" alt="Avatar" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                @else
                                                    {{ strtoupper(substr($attendance->employee->name, 0, 2)) }}
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0 fw-bold text-dark text-sm">{{ $attendance->employee->name }}</h6>
                                                <small class="text-muted text-xs font-monospace">{{ $attendance->employee->nik }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-sm text-muted">{{ $attendance->employee->department?->name ?? '-' }}</td>
                                    <td>
                                        <span class="fw-bold text-dark text-sm">{{ $attendance->check_in ? \Carbon\Carbon::parse($attendance->check_in)->format('H:i') : '-' }}</span>
                                        @if($attendance->late_minutes > 0)
                                            <span class="badge bg-warning text-dark text-xs py-0 ms-1">+{{ $attendance->late_minutes }}m</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge {{ $attendance->status_badge }} px-2 py-1">
                                            {{ $attendance->status_label }}
                                        </span>
                                    </td>
                                    <td class="text-sm text-dark font-monospace">{{ $attendance->check_out ? \Carbon\Carbon::parse($attendance->check_out)->format('H:i') : '-' }}</td>
                                </tr>
                            @empty
                                <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>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Pending Leave Approvals Widget --}}
    <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">{{ count($pendingLeaves) }} Pending</span>
            </div>
            <div class="card-body p-3">
                @forelse($pendingLeaves as $leave)
                    <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">{{ $leave->employee->name }}</h6>
                            <small class="text-muted text-xs d-block">{{ $leave->type_label }} &bull; {{ \Carbon\Carbon::parse($leave->start_date)->format('d M') }}</small>
                        </div>
                    </div>
                @empty
                    <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>
                @endforelse

                @if(count($pendingLeaves) > 0)
                    <a href="{{ url('/admin/leave-requests') }}" class="btn btn-primary btn-sm w-100 mt-2">
                        Tinjau Semua Pengajuan
                    </a>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ 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: {!! json_encode($dates) !!},
                datasets: [
                    {
                        label: 'Hadir Tepat Waktu',
                        data: {!! 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: {!! 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>
@endpush