

<?php $__env->startSection('title', 'Laporan Perpanjangan'); ?>
<?php $__env->startSection('subtitle', 'Analisis dan statistik perpanjangan akses'); ?>

<?php $__env->startSection('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>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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">

    
    <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">
        <?php for($y = date('Y'); $y >= date('Y')-5; $y--): ?>
            <option value="<?php echo e($y); ?>" <?php echo e($year == $y ? 'selected' : ''); ?>>
                <?php echo e($y); ?>

            </option>
        <?php endfor; ?>
    </select>

    
    <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>

        
        <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="<?php echo e(route('reports.export-excel', 'extension')); ?>?year=<?php echo e($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="<?php echo e(route('reports.export-pdf', 'extension')); ?>?year=<?php echo e($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>
    
</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"><?php echo e($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:<?php echo e($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 <?php echo e($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">
            <?php $__empty_1 = true; $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $request): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        <?php echo e($request->created_at->format('d M Y')); ?>

                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800"><?php echo e($request->employeeAccessDetail->employee->name ?? 'Unknown'); ?></p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800"><?php echo e($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">
                            <?php echo e($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
                            <?php echo e($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')); ?>">
                            <?php echo e(ucfirst($request->approval_status)); ?>

                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        <?php echo e($request->approvedBy->name ?? '-'); ?>

                    </td>
                </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <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>
            <?php endif; ?>
        </tbody>
    </table>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('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("<?php echo e(route('reports.export-excel', 'extension')); ?>?year=<?php echo e($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-<?php echo e($year); ?>.xlsx";
                document.body.appendChild(a);
                a.click();
                a.remove();
                hideLoader();
            })
            .catch(() => hideLoader());
    }

    function exportPDF() {
        showLoader();

        fetch("<?php echo e(route('reports.export-pdf', 'extension')); ?>?year=<?php echo e($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-<?php echo e($year); ?>.pdf";
                document.body.appendChild(a);
                a.click();
                a.remove();
                hideLoader();
            })
            .catch(() => hideLoader());
    }
</script>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    
    .animate-\[shimmer_1\.5s_infinite\] {
        animation: shimmer 1.5s infinite;
    }
</style>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\codingan\access-control-management\resources\views/reports/extension.blade.php ENDPATH**/ ?>