@extends('layouts.app')

@section('title', 'Laporan Pensiun')
@section('subtitle', 'Analisis dan statistik pegawai pensiun')

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

<!-- Summary Cards -->
<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-users text-xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-secondary-800">{{ $summary['total'] }}</h3>
        <p class="text-sm text-secondary-500">Total Pensiun {{ $year }}</p>
    </div>

    @foreach($summary['by_month'] as $month => $count)
        <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-calendar text-xl"></i>
            </div>
            <h3 class="text-2xl font-bold text-secondary-800">{{ $count }}</h3>
            <p class="text-sm text-secondary-500">{{ $month }}</p>
        </div>
    @endforeach
</div>

<!-- Chart -->
<div class="glass-card rounded-2xl p-6 mb-8">
    <h3 class="text-lg font-bold text-secondary-800 mb-4">
        Grafik Pensiun per Bulan {{ $year }}
    </h3>
    <div class="h-80">
        <canvas id="retirementChart"></canvas>
    </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', 'retirement') }}?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', 'retirement') }}?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>

<!-- Data 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-primary-50/30 to-transparent">
        <h3 class="text-lg font-bold text-secondary-800">
            Detail Pegawai Pensiun {{ $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">Bulan</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">NIP</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Nama</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Departemen</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Tanggal Pensiun</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Tipe</th>
            </tr>
        </thead>

        <tbody class="divide-y divide-secondary-100">
            @forelse($data as $employee)
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4 text-sm font-medium text-secondary-700">
                        {{ $employee->retirement_date->format('F') }}
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-600">{{ $employee->nip }}</td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center text-xs font-bold">
                                {{ substr($employee->name, 0, 2) }}
                            </div>
                            <span class="ml-3 text-sm font-medium text-secondary-800">
                                {{ $employee->name }}
                            </span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-600">
                        {{ $employee->department->name }}
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-medium bg-rose-100 text-rose-700">
                            <i class="far fa-calendar mr-1.5"></i>
                            {{ $employee->retirement_date->format('d M Y') }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-700 capitalize">
                            {{ str_replace('_', ' ', $employee->retirement_type) }}
                        </span>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-secondary-400">
                        <i class="fas fa-inbox text-4xl mb-3"></i>
                        <p>Tidak ada data pensiun untuk tahun {{ $year }}</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection

@push('scripts')
<script>
    const ctx = document.getElementById('retirementChart').getContext('2d');
    const data = @json($summary['by_month']);

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Object.keys(data),
            datasets: [{
                label: 'Jumlah Pensiun',
                data: Object.values(data),
                backgroundColor: 'rgba(59, 130, 246, 0.8)',
                borderColor: '#3b82f6',
                borderWidth: 2,
                borderRadius: 8,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { stepSize: 1 }
                }
            }
        }
    });

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

    // Optional: Auto-hide loading when download starts (browser specific)
    // Note: This is a fallback - ideally you should handle this in your export controller
    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