@extends('layouts.app')

@section('title', 'Manajemen Pencabutan')
@section('subtitle', 'Monitoring dan eksekusi pencabutan hak 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">Pencabutan Akses</span>
    </li>
@endsection

@section('actions')
    <button onclick="openBulkModal()" 
            class="px-5 py-2.5 bg-rose-500 hover:bg-rose-600 text-white font-medium rounded-xl shadow-lg shadow-rose-500/25 transition-all flex items-center">
        <i class="fas fa-ban mr-2"></i>
        Bulk Revoke
    </button>
@endsection

@section('content')
@php
    // Helper function untuk format overdue time
    function formatOverdueTime($daysUntilExpiry) {
        if (!$daysUntilExpiry || $daysUntilExpiry >= 0) {
            return null;
        }
        
        $hoursOverdue = abs($daysUntilExpiry) * 24;
        $daysOverdue = abs($daysUntilExpiry);
        
        if ($hoursOverdue < 1) {
            // Kurang dari 1 jam - hitung menit
            $minutesOverdue = ceil($hoursOverdue * 60);
            return $minutesOverdue . ' menit';
        } elseif ($hoursOverdue < 24) {
            // Kurang dari 24 jam - tampilkan jam
            return ceil($hoursOverdue) . ' jam';
        } else {
            // Lebih dari 24 jam - tampilkan hari
            return ceil($daysOverdue) . ' hari';
        }
    }
    
    // Helper function untuk format time remaining (untuk this week)
    function formatTimeRemaining($date) {
        if (!$date) return null;
        
        $now = now();
        
        if ($date->isPast()) {
            return ['label' => 'Sudah lewat', 'color' => 'text-gray-500', 'urgent' => false];
        }
        
        $diffInHours = $now->diffInHours($date, false);
        $diffInDays = $now->diffInDays($date, false);
        $diffInMinutes = $now->diffInMinutes($date, false);
        
        if ($diffInMinutes < 60) {
            return [
                'label' => ceil($diffInMinutes) . ' menit lagi',
                'color' => 'text-rose-600',
                'urgent' => true
            ];
        } elseif ($diffInHours < 24) {
            return [
                'label' => ceil($diffInHours) . ' jam lagi',
                'color' => 'text-rose-600',
                'urgent' => true
            ];
        } else {
            return [
                'label' => ceil($diffInDays) . ' hari lagi',
                'color' => $diffInDays <= 2 ? 'text-rose-500' : 'text-amber-600',
                'urgent' => $diffInDays <= 3
            ];
        }
    }
@endphp

<!-- Debug Info (hapus setelah fixed) -->
@if(app()->environment('local'))
<div class="mb-4 p-2 bg-blue-50 text-xs text-blue-700 rounded">
    Loaded at: {{ now()->format('H:i:s') }} | 
    Overdue: {{ $overdue->count() ?? 0 }} | 
    This Week: {{ $thisWeek->count() ?? 0 }} |
    Revoked Today: {{ $revokedToday->count() ?? 0 }}
</div>
@endif

<!-- Calendar View Toggle -->
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center space-x-2 bg-white/60 p-1 rounded-xl border border-secondary-200">
        <button class="px-4 py-2 rounded-lg bg-primary-500 text-white text-sm font-medium shadow-sm">
            <i class="fas fa-list mr-2"></i>List View
        </button>
        <button class="px-4 py-2 rounded-lg text-secondary-600 hover:bg-white text-sm font-medium transition-all">
            <i class="fas fa-calendar-alt mr-2"></i>Calendar View
        </button>
    </div>
    
    <div class="flex items-center space-x-4 text-sm">
        <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-rose-500 mr-2"></span>
            <span class="text-secondary-600">Overdue</span>
        </div>
        <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-amber-500 mr-2"></span>
            <span class="text-secondary-600">This Week</span>
        </div>
        <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-emerald-500 mr-2"></span>
            <span class="text-secondary-600">Completed</span>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="glass-card rounded-2xl p-6 border-l-4 border-rose-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-secondary-500 mb-1">Overdue (Belum Dicabut)</p>
                <h3 class="text-3xl font-bold text-rose-600">{{ $overdue->count() ?? 0 }}</h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center">
                <i class="fas fa-exclamation-triangle text-xl"></i>
            </div>
        </div>
        <a href="#overdue-section" class="mt-3 inline-flex items-center text-sm text-rose-600 hover:text-rose-700 font-medium">
            Proses sekarang <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="glass-card rounded-2xl p-6 border-l-4 border-amber-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-secondary-500 mb-1">Minggu Ini</p>
                <h3 class="text-3xl font-bold text-amber-600">{{ $thisWeek->count() ?? 0 }}</h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center">
                <i class="fas fa-calendar-week text-xl"></i>
            </div>
        </div>
        <p class="mt-3 text-sm text-secondary-500">Akses yang akan dicabut minggu ini</p>
    </div>

    <div class="glass-card rounded-2xl p-6 border-l-4 border-emerald-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-secondary-500 mb-1">Dicabut Hari Ini</p>
                <h3 class="text-3xl font-bold text-emerald-600">{{ $revokedToday->count() ?? 0 }}</h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                <i class="fas fa-check-circle text-xl"></i>
            </div>
        </div>
        <p class="mt-3 text-sm text-secondary-500">Sudah diproses hari ini</p>
    </div>
</div>

<!-- Overdue Section (Priority) -->
@if(isset($overdue) && $overdue->count() > 0)
<div id="overdue-section" class="mb-8">
    <div class="flex items-center mb-4">
        <div class="w-8 h-8 rounded-lg bg-rose-100 text-rose-600 flex items-center justify-center mr-3">
            <i class="fas fa-fire"></i>
        </div>
        <h3 class="text-lg font-bold text-rose-700">Prioritas: Overdue Access</h3>
    </div>
    
    <div class="glass-card rounded-2xl overflow-hidden border-2 border-rose-200">
        <table class="w-full">
            <thead class="bg-rose-50/50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-rose-700 uppercase">Pegawai</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-rose-700 uppercase">Akses</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-rose-700 uppercase">Expired Date</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-rose-700 uppercase">Overdue</th>
                    <th class="px-6 py-4 text-right text-xs font-semibold text-rose-700 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-rose-100">
                @foreach($overdue as $access)
                    @php
                        $overdueTime = formatOverdueTime($access->daysUntilExpiry());
                        $hoursOverdue = abs($access->daysUntilExpiry() ?? 0) * 24;
                        
                        // Determine urgency color
                        if ($hoursOverdue < 1) {
                            $overdueColor = 'bg-rose-600 text-white'; // Very urgent - minutes
                            $overdueIcon = 'fa-bolt';
                        } elseif ($hoursOverdue < 24) {
                            $overdueColor = 'bg-rose-500 text-white'; // Urgent - hours
                            $overdueIcon = 'fa-fire';
                        } else {
                            $overdueColor = 'bg-rose-100 text-rose-700'; // Days
                            $overdueIcon = 'fa-exclamation';
                        }
                    @endphp
                    <tr class="bg-white/50 hover:bg-rose-50/30 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 text-white flex items-center justify-center font-bold text-sm">
                                    {{ isset($access->employee) ? substr($access->employee->name ?? '??', 0, 2) : '??' }}
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-semibold text-secondary-800">{{ $access->employee->name ?? 'Unknown' }}</p>
                                    <p class="text-xs text-secondary-500">{{ $access->employee->nip ?? '-' }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm font-medium text-secondary-800">{{ $access->accessCatalog->name ?? 'Unknown' }}</p>
                            <span class="text-xs px-2 py-0.5 bg-rose-100 text-rose-600 rounded-full">{{ $access->accessCatalog->code ?? '-' }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm text-secondary-700">
                                {{ isset($access->current_expiry_date) ? $access->current_expiry_date->format('d M Y') : '-' }}
                            </p>
                            <p class="text-xs text-secondary-500">
                                {{ isset($access->current_expiry_date) ? $access->current_expiry_date->format('H:i') : '' }}
                            </p>
                        </td>
                        <td class="px-6 py-4">
                            @if($overdueTime)
                                <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold {{ $overdueColor }}">
                                    <i class="fas fa-fire mr-1.5"></i>
                                    {{ $overdueTime }} overdue
                                </span>
                            @else
                                <span class="text-xs text-secondary-400">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <form action="{{ route('revocations.revoke', $access) }}" method="POST" class="inline" onsubmit="return confirm('Cabut akses ini sekarang?')">
                                @csrf
                                <input type="hidden" name="confirm" value="REVOKE">
                                <button type="submit" class="px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium rounded-lg shadow-lg shadow-rose-500/30 transition-all hover:shadow-xl hover:shadow-rose-500/40">
                                    <i class="fas fa-ban mr-1"></i> Revoke Now
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

<!-- This Week 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-amber-50/30 to-transparent flex items-center justify-between">
        <div class="flex items-center">
            <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
                <i class="fas fa-calendar-week"></i>
            </div>
            <div>
                <h3 class="text-lg font-bold text-secondary-800">Jadwal Pencabutan Minggu Ini</h3>
                <p class="text-sm text-secondary-500">{{ $thisWeek->count() ?? 0 }} akses terjadwal</p>
            </div>
        </div>
    </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">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">Tanggal</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Status</th>
                <th class="px-6 py-4 text-center text-xs font-semibold text-secondary-500 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
            @forelse($thisWeek ?? [] as $schedule)
                @php 
                    $access = $schedule->employeeAccessDetail ?? null;
                    if (!$access) continue;
                @endphp
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center font-bold text-sm">
                                {{ isset($access->employee) ? substr($access->employee->name ?? '??', 0, 2) : '??' }}
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-semibold text-secondary-800">{{ $access->employee->name ?? 'Unknown' }}</p>
                                <p class="text-xs text-secondary-500">{{ $access->employee->department->name ?? '-' }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $access->accessCatalog->name ?? 'Unknown' }}</p>
                        <span class="text-xs text-secondary-500">{{ $access->accessCatalog->category ?? '-' }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center text-sm text-secondary-700">
                            <i class="far fa-calendar mr-2 text-amber-500"></i>
                            {{ isset($schedule->scheduled_date) ? $schedule->scheduled_date->format('d M Y') : '-' }}
                        </div>
                        <p class="text-xs text-amber-600 mt-1">
                            {{ isset($schedule->scheduled_date) ? $schedule->scheduled_date->diffForHumans() : '-' }}
                        </p>
                    </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-amber-100 text-amber-800">
                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 mr-1.5 animate-pulse"></span>
                            Scheduled
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center justify-center space-x-2">
                            <a href="{{ route('extensions.create', $access) }}" class="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors" title="Extend">
                                <i class="fas fa-clock"></i>
                            </a>
                            <form action="{{ route('revocations.revoke', $access) }}" method="POST" class="inline" onsubmit="return confirm('Cabut akses ini?')">
                                @csrf
                                <input type="hidden" name="confirm" value="REVOKE">
                                <button type="submit" class="p-2 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors" title="Revoke Now">
                                    <i class="fas fa-ban"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="px-6 py-12 text-center text-secondary-400">
                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-100 flex items-center justify-center">
                            <i class="fas fa-check text-emerald-500 text-2xl"></i>
                        </div>
                        <p class="font-medium">Tidak ada jadwal pencabutan minggu ini</p>
                        <p class="text-sm mt-1">Semua akses aman atau sudah dicabut</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>


<!-- Bulk Revoke Modal -->
<div id="bulkRevokeModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-secondary-900/75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="closeBulkModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom glass-card rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="px-6 py-4 border-b border-secondary-100 bg-rose-50">
                <h3 class="text-lg font-bold text-rose-800 flex items-center">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Bulk Revoke Access
                </h3>
            </div>
            <div class="px-6 py-4">
                <p class="text-sm text-secondary-600 mb-4">Pilih akses yang akan dicabut secara massal:</p>
                <form action="{{ route('revocations.bulk') }}" method="POST" id="bulkRevokeForm">
                    @csrf
                    <div class="max-h-64 overflow-y-auto space-y-2 mb-4">
                        @foreach($overdue ?? [] as $access)
                            @php
                                $modalOverdueTime = formatOverdueTime($access->daysUntilExpiry());
                            @endphp
                            <label class="flex items-center p-3 rounded-lg bg-white/50 hover:bg-white border border-secondary-200 cursor-pointer">
                                <input type="checkbox" name="access_ids[]" value="{{ $access->id }}" class="w-4 h-4 text-rose-600 rounded focus:ring-rose-500">
                                <div class="ml-3 flex-1">
                                    <p class="text-sm font-medium text-secondary-800">{{ $access->employee->name ?? 'Unknown' }}</p>
                                    <p class="text-xs text-secondary-500">{{ $access->accessCatalog->name ?? 'Unknown' }}</p>
                                </div>
                                @if($modalOverdueTime)
                                    <span class="text-xs text-rose-600 font-medium">{{ $modalOverdueTime }} overdue</span>
                                @endif
                            </label>
                        @endforeach
                    </div>
                    <div class="mb-4">
                        <label class="block text-xs font-medium text-secondary-700 mb-1">Catatan</label>
                        <textarea name="notes" rows="2" class="w-full px-3 py-2 bg-white/60 border border-secondary-200 rounded-lg text-sm" placeholder="Catatan untuk pencabutan massal..."></textarea>
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-secondary-50 flex justify-end space-x-3">
                <button onclick="closeBulkModal()" class="px-4 py-2 bg-white text-secondary-700 rounded-lg border border-secondary-200 hover:bg-secondary-50">Batal</button>
                <button onclick="submitBulkRevoke()" class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600 shadow-lg shadow-rose-500/30">
                    <i class="fas fa-ban mr-1"></i> Revoke Selected
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function openBulkModal() {
        document.getElementById('bulkRevokeModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeBulkModal() {
        document.getElementById('bulkRevokeModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
    
    function submitBulkRevoke() {
        const checked = document.querySelectorAll('input[name="access_ids[]"]:checked');
        if (checked.length === 0) {
            alert('Pilih minimal satu akses untuk dicabut');
            return;
        }
        if (confirm('Yakin mencabut ' + checked.length + ' akses yang dipilih?')) {
            document.getElementById('bulkRevokeForm').submit();
        }
    }
    
    // Close modal on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeBulkModal();
        }
    });
    
    // Debug: Log jika ada reload yang tidak diinginkan
    window.addEventListener('beforeunload', function(e) {
        console.log('Page unloading at:', new Date().toISOString());
    });
</script>
@endpush
@endsection