@extends('layouts.app')

@section('title', 'Laporan Perpanjangan')
@section('subtitle', 'Analisis dan statistik perpanjangan akses')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <span class="text-sm font-medium text-secondary-700">Laporan Perpanjangan</span>
    </li>
@endsection

@section('content')

<!-- Loading Overlay -->
<div x-data="{ loading: false, message: '' }" 
     x-show="loading" 
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-[9999] flex items-center justify-center bg-secondary-900/60 backdrop-blur-sm"
     style="display: none;">
    
    <div class="bg-white rounded-2xl p-8 shadow-2xl flex flex-col items-center max-w-sm mx-4 transform transition-all"
         x-show="loading"
         x-transition:enter="transition ease-out duration-300 delay-150"
         x-transition:enter-start="opacity-0 scale-90"
         x-transition:enter-end="opacity-100 scale-100">
        
        <!-- Animated Spinner -->
        <div class="relative w-16 h-16 mb-4">
            <div class="absolute inset-0 rounded-full border-4 border-secondary-200"></div>
            <div class="absolute inset-0 rounded-full border-4 border-primary-500 border-t-transparent animate-spin"></div>
            
            <!-- Icon inside spinner -->
            <div class="absolute inset-0 flex items-center justify-center">
                <i class="fas fa-file-export text-primary-600 text-lg"></i>
            </div>
        </div>
        
        <h3 class="text-lg font-bold text-secondary-800 mb-1" x-text="message"></h3>
        <p class="text-sm text-secondary-500">Mohon tunggu sebentar...</p>
        
        <!-- Progress bar animation -->
        <div class="mt-4 w-full h-1 bg-secondary-100 rounded-full overflow-hidden">
            <div class="h-full bg-gradient-to-r from-primary-500 to-primary-600 animate-[shimmer_1.5s_infinite] w-1/2 rounded-full"></div>
        </div>
    </div>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
    <div class="glass-card rounded-xl p-4 text-center">
        <p class="text-2xl font-bold text-primary-600">{{ $summary['total'] }}</p>
        <p class="text-xs text-secondary-500">Total Request</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center">
        <p class="text-2xl font-bold text-emerald-600">{{ $summary['approved'] }}</p>
        <p class="text-xs text-secondary-500">Disetujui</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center">
        <p class="text-2xl font-bold text-rose-600">{{ $summary['rejected'] }}</p>
        <p class="text-xs text-secondary-500">Ditolak</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center">
        <p class="text-2xl font-bold text-amber-600">{{ $summary['pending'] }}</p>
        <p class="text-xs text-secondary-500">Pending</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center">
        <p class="text-2xl font-bold text-purple-600">{{ $summary['total_days_extended'] }}</p>
        <p class="text-xs text-secondary-500">Total Hari</p>
    </div>
</div>

<div class="flex items-center space-x-3 mb-8">

    {{-- YEAR FILTER --}}
    <select id="yearSelect"
        class="px-4 py-2 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20">
        @for($y = date('Y'); $y >= date('Y')-5; $y--)
            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                {{ $y }}
            </option>
        @endfor
    </select>

    {{-- EXPORT DROPDOWN --}}
    <div x-data="{ open: false }" class="relative">
        <button @click="open = !open"
            class="px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium rounded-xl shadow-lg transition-all flex items-center hover:shadow-primary-500/25 hover:scale-105 active:scale-95">
            <i class="fas fa-download mr-2"></i>
            Export
            <i class="fas fa-chevron-down ml-2 text-xs transition-transform" :class="{ 'rotate-180': open }"></i>
        </button>

        {{-- DROPDOWN MENU --}}
        <div x-show="open"
             @click.away="open = false"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-0 scale-95 -translate-y-2"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
             x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 -translate-y-2"
             class="absolute right-0 mt-2 w-44 bg-white rounded-xl shadow-xl border border-secondary-100 overflow-hidden z-40">

            <a href="{{ route('reports.export-excel', 'extension') }}?year={{ $year }}"
               @click="$dispatch('set-loading', { message: 'Mengekspor Excel...' }); open = false"
               class="flex items-center px-4 py-3 text-sm text-secondary-700 hover:bg-emerald-50 hover:text-emerald-600 transition group">
                <div class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-file-excel"></i>
                </div>
                Export Excel
            </a>

            <a href="{{ route('reports.export-pdf', 'extension') }}?year={{ $year }}"
               @click="$dispatch('set-loading', { message: 'Mengekspor PDF...' }); open = false"
               class="flex items-center px-4 py-3 text-sm text-secondary-700 hover:bg-rose-50 hover:text-rose-600 transition group">
                <div class="w-8 h-8 rounded-lg bg-rose-100 text-rose-600 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-file-pdf"></i>
                </div>
                Export PDF
            </a>
        </div>
    </div>
    {{-- END EXPORT DROPDOWN --}}
</div>

<!-- Approval Rate -->
<div class="glass-card rounded-2xl p-6 mb-8">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-bold text-secondary-800">Approval Rate</h3>
        <span class="text-3xl font-bold text-primary-600">{{ $summary['approval_rate'] ?? 0 }}%</span>
    </div>
    <div class="w-full bg-secondary-200 rounded-full h-4">
        <div class="bg-gradient-to-r from-emerald-400 to-emerald-600 h-4 rounded-full transition-all" style="width:{{ $summary['approval_rate'] ?? 0 }}%"></div>
    </div>
</div>

<!-- Table -->
<div class="glass-card rounded-2xl overflow-hidden">
    <div class="px-6 py-4 border-b border-secondary-100 bg-gradient-to-r from-purple-50/30 to-transparent">
        <h3 class="text-lg font-bold text-secondary-800">Detail Perpanjangan {{ $year }}</h3>
    </div>
    <table class="w-full">
        <thead class="bg-secondary-50/50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Tanggal</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Pegawai</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Akses</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Durasi</th>
                <th class="px-6 py-4 text-center text-xs font-semibold text-secondary-500 uppercase">Status</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Approved By</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
            @forelse($data as $request)
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $request->created_at->format('d M Y') }}
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $request->employeeAccessDetail->employee->name ?? 'Unknown' }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $request->employeeAccessDetail->accessCatalog->name ?? 'Unknown' }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 rounded-lg text-xs font-medium bg-primary-100 text-primary-700">
                            {{ $request->requested_duration_days }} hari
                        </span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span class="px-2 py-1 rounded-full text-xs font-medium
                            {{ $request->approval_status === 'approved' ? 'bg-emerald-100 text-emerald-800' : ($request->approval_status === 'rejected' ? 'bg-rose-100 text-rose-800' : 'bg-amber-100 text-amber-800') }}">
                            {{ ucfirst($request->approval_status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $request->approvedBy->name ?? '-' }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-secondary-400">
                        <i class="fas fa-inbox text-3xl mb-2"></i>
                        <p>Tidak ada data perpanjangan</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection

@push('scripts')
<script>
    document.getElementById('yearSelect').addEventListener('change', function() {
        window.location.href = '?year=' + this.value;
    });

    // Handle loading events
    document.addEventListener('set-loading', (event) => {
        const overlay = document.querySelector('[x-data*="loading"]');
        if (overlay) {
            const alpineData = Alpine.$data(overlay);
            alpineData.loading = true;
            alpineData.message = event.detail.message;
        }
    });

    // Auto-hide loading when download starts (browser specific)
    window.addEventListener('blur', () => {
        setTimeout(() => {
            const overlay = document.querySelector('[x-data*="loading"]');
            if (overlay) {
                const alpineData = Alpine.$data(overlay);
                if (alpineData.loading) {
                    alpineData.loading = false;
                }
            }
        }, 2000);
    });

    function showLoader() {
        const overlay = document.querySelector('[x-data*="loading"]');
        if (overlay) {
            const alpineData = Alpine.$data(overlay);
            alpineData.loading = true;
            alpineData.message = 'Mengekspor...';
        }
    }

    function hideLoader() {
        const overlay = document.querySelector('[x-data*="loading"]');
        if (overlay) {
            const alpineData = Alpine.$data(overlay);
            alpineData.loading = false;
        }
    }

    function exportExcel() {
        showLoader();

        fetch("{{ route('reports.export-excel', 'extension') }}?year={{ $year }}")
            .then(response => response.blob())
            .then(blob => {
                let url = window.URL.createObjectURL(blob);
                let a = document.createElement('a');
                a.href = url;
                a.download = "laporan-perpanjangan-{{ $year }}.xlsx";
                document.body.appendChild(a);
                a.click();
                a.remove();
                hideLoader();
            })
            .catch(() => hideLoader());
    }

    function exportPDF() {
        showLoader();

        fetch("{{ route('reports.export-pdf', 'extension') }}?year={{ $year }}")
            .then(response => response.blob())
            .then(blob => {
                let url = window.URL.createObjectURL(blob);
                let a = document.createElement('a');
                a.href = url;
                a.download = "laporan-perpanjangan-{{ $year }}.pdf";
                document.body.appendChild(a);
                a.click();
                a.remove();
                hideLoader();
            })
            .catch(() => hideLoader());
    }
</script>
@endpush

@push('styles')
<style>
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    
    .animate-\[shimmer_1\.5s_infinite\] {
        animation: shimmer 1.5s infinite;
    }
</style>
@endpush