@extends('app')

@section('title', 'Papan Pemuka')

@section('content')
    <style>
        .gradient-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
        }
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.4);
        }
    </style>

    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Papan Pemuka</h1>
        <p class="text-base text-gray-600">Selamat kembali! Berikut adalah situasi terkini hari ini.</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 gap-5 mb-8 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Jumlah Pekerja -->
        <div class="bg-white rounded-xl shadow-md hover:shadow-xl border border-slate-100/50 p-6 stat-card">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-500 mb-1">Jumlah Pekerja</p>
                    <p class="text-3xl font-bold text-gray-900" id="totalEmployees">
                        <span class="loading loading-spinner loading-md"></span>
                    </p>
                </div>
                <div class="p-4 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg">
                    <i data-lucide="users" class="w-8 h-8 text-white"></i>
                </div>
            </div>
        </div>

        <!-- Hadir Hari Ini -->
        <div class="bg-white rounded-xl shadow-md hover:shadow-xl border border-slate-100/50 p-6 stat-card">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-500 mb-1">Hadir Hari Ini</p>
                    <p class="text-3xl font-bold text-gray-900" id="presentToday">
                        <span class="loading loading-spinner loading-md"></span>
                    </p>
                </div>
                <div class="p-4 rounded-2xl bg-gradient-to-br from-green-500 to-green-600 shadow-lg">
                    <i data-lucide="user-check" class="w-8 h-8 text-white"></i>
                </div>
            </div>
        </div>

        <!-- Tidak Hadir Hari Ini -->
        <div class="bg-white rounded-xl shadow-md hover:shadow-xl border border-slate-100/50 p-6 stat-card">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-500 mb-1">Tidak Hadir Hari Ini</p>
                    <p class="text-3xl font-bold text-gray-900" id="absentToday">
                        <span class="loading loading-spinner loading-md"></span>
                    </p>
                </div>
                <div class="p-4 rounded-2xl bg-gradient-to-br from-red-500 to-red-600 shadow-lg">
                    <i data-lucide="user-x" class="w-8 h-8 text-white"></i>
                </div>
            </div>
        </div>

        <!-- Dalam Cuti -->
        <div class="bg-white rounded-xl shadow-md hover:shadow-xl border border-slate-100/50 p-6 stat-card">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-500 mb-1">Dalam Cuti</p>
                    <p class="text-3xl font-bold text-gray-900" id="onLeaveToday">
                        <span class="loading loading-spinner loading-md"></span>
                    </p>
                </div>
                <div class="p-4 rounded-2xl bg-gradient-to-br from-yellow-500 to-yellow-600 shadow-lg">
                    <i data-lucide="calendar-x" class="w-8 h-8 text-white"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Kehadiran Terkini & Tertangguh Leaves -->
    <div class="grid grid-cols-1 gap-6 mb-8 lg:grid-cols-2">
        <!-- Kehadiran Terkini -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 overflow-hidden">
            <div class="px-6 py-4 bg-gradient-to-r from-slate-50 to-white border-b border-slate-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i data-lucide="clock" class="w-5 h-5 text-blue-600"></i>
                        <h2 class="text-lg font-bold text-gray-900">Kehadiran Terkini</h2>
                    </div>
                    <a href="/attendance" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors flex items-center gap-1">
                        Lihat Semua
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-3" id="recentAttendances">
                    <div class="flex justify-center py-8">
                        <span class="loading loading-spinner loading-lg text-blue-600"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Permohonan Cuti Tertangguh -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 overflow-hidden">
            <div class="px-6 py-4 bg-gradient-to-r from-slate-50 to-white border-b border-slate-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i data-lucide="calendar-clock" class="w-5 h-5 text-blue-600"></i>
                        <h2 class="text-lg font-bold text-gray-900">Permohonan Cuti Tertangguh</h2>
                    </div>
                    <a href="/leaves" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors flex items-center gap-1">
                        Lihat Semua
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-3" id="pendingLeaves">
                    <div class="flex flex-col items-center justify-center py-8 text-center">
                        <div class="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-3">
                            <i data-lucide="inbox" class="w-8 h-8 text-blue-600"></i>
                        </div>
                        <p class="text-sm font-medium text-gray-500">Tiada permohonan cuti tertangguh</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            loadDashboardData();
        });

        function loadDashboardData() {
            window.authHelper.apiRequest('/api/dashboard/statistics', {
                    method: 'GET'
                })
                .then(function(response) {
                    const data = response.data.data;
                    const stats = data.statistics;
                    const attendances = data.recent_attendances;

                    // Update stats cards
                    $('#totalEmployees').text(stats.total_employees);
                    $('#presentToday').text(stats.present_today);
                    $('#absentToday').text(stats.absent_today);
                    $('#onLeaveToday').text(stats.on_leave_today);

                    // Update recent attendances
                    renderRecentAttendances(attendances);

                    // Refresh Lucide icons
                    setTimeout(function() {
                        if (window.lucide && typeof window.lucide.createIcons === 'function') {
                            window.lucide.createIcons();
                        }
                    }, 50);
                })
                .catch(function(error) {
                    console.error('Error loading dashboard data:', error);
                    $('#totalEmployees').text('N/A');
                    $('#presentToday').text('N/A');
                    $('#absentToday').text('N/A');
                    $('#onLeaveToday').text('N/A');
                });
        }

        function renderRecentAttendances(attendances) {
            if (!attendances || attendances.length === 0) {
                $('#recentAttendances').html(`
                    <div class="flex flex-col items-center justify-center py-8 text-center">
                        <div class="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-3">
                            <i data-lucide="user-x" class="w-8 h-8 text-blue-600"></i>
                        </div>
                        <p class="text-sm font-medium text-gray-500">Tiada kehadiran direkod hari ini</p>
                    </div>
                `);
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
                return;
            }

            let html = '';
            attendances.slice(0, 5).forEach(function(att, index) {
                const avatarUrl = `https://ui-avatars.com/api/?name=${encodeURIComponent(att.employee_name)}&background=667eea&color=fff`;
                const checkInTime = att.check_in_time;

                html += `
                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors border border-gray-100">
                        <div class="flex items-center gap-3">
                            <div class="relative">
                                <img class="w-12 h-12 rounded-full ring-2 ring-slate-100" src="${avatarUrl}" alt="${att.employee_name}">
                                <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900">${att.employee_name}</p>
                                <p class="text-xs text-gray-500 flex items-center gap-1">
                                    <i data-lucide="building" class="w-3 h-3"></i>
                                    ${att.department}
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-green-600">${checkInTime}</p>
                            <p class="text-xs text-gray-500">Daftar Masuk</p>
                        </div>
                    </div>
                `;
            });

            $('#recentAttendances').html(html);

            // Refresh icons
            if (window.lucide && typeof window.lucide.createIcons === 'function') {
                window.lucide.createIcons();
            }
        }
    </script>
@endpush