@extends('layouts.app')

@section('title', 'Laporan Pencabutan')
@section('subtitle', 'Analisis dan statistik pencabutan 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 Pencabutan</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>

<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', 'revocation') }}"
                   @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', 'revocation') }}"
                   @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>

<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="glass-card rounded-2xl p-6 text-center">
        <div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center">
            <i class="fas fa-ban text-xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-secondary-800">{{ $summary['total'] }}</h3>
        <p class="text-sm text-secondary-500">Total Dicabut</p>
    </div>
    <div class="glass-card rounded-2xl p-6 text-center">
        <div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
            <i class="fas fa-robot text-xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-secondary-800">{{ $summary['automatic'] }}</h3>
        <p class="text-sm text-secondary-500">Otomatis</p>
    </div>
    <div class="glass-card rounded-2xl p-6 text-center">
        <div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center">
            <i class="fas fa-user-check text-xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-secondary-800">{{ $summary['manual'] }}</h3>
        <p class="text-sm text-secondary-500">Manual</p>
    </div>
    <div class="glass-card rounded-2xl p-6 text-center">
        <div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center">
            <i class="fas fa-percentage text-xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-secondary-800">{{ $summary['total'] > 0 ? round(($summary['automatic'] / $summary['total']) * 100) : 0 }}%</h3>
        <p class="text-sm text-secondary-500">Auto Rate</p>
    </div>
</div>

<!-- Chart -->
<div class="glass-card rounded-2xl p-6 mb-8">
    <h3 class="text-lg font-bold text-secondary-800 mb-4">Pencabutan per Akses</h3>
    <div class="h-64">
        <canvas id="revocationChart"></canvas>
    </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-rose-50/30 to-transparent">
        <h3 class="text-lg font-bold text-secondary-800">Detail Pencabutan</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">Waktu</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">Metode</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Oleh</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
            @forelse($data as $log)
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $log->revoked_at->format('d M Y H:i') }}
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $log->employeeAccessDetail->employee->name ?? 'Unknown' }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $log->employeeAccessDetail->accessCatalog->name ?? 'Unknown' }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 rounded-full text-xs font-medium {{ $log->method === 'automatic' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                            {{ ucfirst($log->method) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $log->revokedBy->name ?? 'System' }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="px-6 py-12 text-center text-secondary-400">
                        <i class="fas fa-inbox text-3xl mb-2"></i>
                        <p>Tidak ada data pencabutan</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection

@push('scripts')
<script>
    const ctx = document.getElementById('revocationChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($summary['by_access']->toArray())) !!},
            datasets: [{
                data: {!! json_encode(array_values($summary['by_access']->toArray())) !!},
                backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });

    // 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);
    });
</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