@extends('layouts.app')

@section('title', 'Permintaan Perpanjangan')
@section('subtitle', 'Kelola approval 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">Perpanjangan</span>
    </li>
@endsection

@section('content')
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    @php
        $stats = [
            'pending' => $requests->where('approval_status', 'pending')->count(),
            'approved' => $requests->where('approval_status', 'approved')->count(),
            'rejected' => $requests->where('approval_status', 'rejected')->count(),
            'total_days' => $requests->where('approval_status', 'approved')->sum('requested_duration_days'),
        ];
    @endphp
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-amber-500">
        <p class="text-2xl font-bold text-amber-600">{{ $stats['pending'] }}</p>
        <p class="text-xs text-secondary-500">Pending</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-emerald-500">
        <p class="text-2xl font-bold text-emerald-600">{{ $stats['approved'] }}</p>
        <p class="text-xs text-secondary-500">Disetujui</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-rose-500">
        <p class="text-2xl font-bold text-rose-600">{{ $stats['rejected'] }}</p>
        <p class="text-xs text-secondary-500">Ditolak</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-primary-500">
        <p class="text-2xl font-bold text-primary-600">{{ $stats['total_days'] }}</p>
        <p class="text-xs text-secondary-500">Total Hari Extended</p>
    </div>
</div>

<!-- Filters -->
<div class="glass-card rounded-2xl p-4 mb-6">
    <div class="flex flex-wrap items-center gap-4">
        <div class="flex items-center space-x-2">
            <span class="text-sm text-secondary-500">Filter:</span>
            <a href="{{ route('extensions.index') }}" class="px-3 py-1.5 rounded-lg text-sm {{ !request('status') ? 'bg-primary-500 text-white' : 'bg-white text-secondary-600 hover:bg-primary-50' }} transition-all">Semua</a>
            <a href="?status=pending" class="px-3 py-1.5 rounded-lg text-sm {{ request('status') == 'pending' ? 'bg-amber-500 text-white' : 'bg-white text-secondary-600 hover:bg-amber-50' }} transition-all">Pending</a>
            <a href="?status=approved" class="px-3 py-1.5 rounded-lg text-sm {{ request('status') == 'approved' ? 'bg-emerald-500 text-white' : 'bg-white text-secondary-600 hover:bg-emerald-50' }} transition-all">Disetujui</a>
            <a href="?status=rejected" class="px-3 py-1.5 rounded-lg text-sm {{ request('status') == 'rejected' ? 'bg-rose-500 text-white' : 'bg-white text-secondary-600 hover:bg-rose-50' }} transition-all">Ditolak</a>
        </div>
    </div>
</div>

<!-- Table -->
<div class="glass-card rounded-2xl overflow-hidden">
    <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">Durasi</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Tanggal Baru</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-right text-xs font-semibold text-secondary-500 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
            @forelse($requests as $request)
                <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">
                                {{ substr($request->employeeAccessDetail->employee->name, 0, 2) }}
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-semibold text-secondary-800">{{ $request->employeeAccessDetail->employee->name }}</p>
                                <p class="text-xs text-secondary-500">{{ $request->requestedBy->name }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $request->employeeAccessDetail->accessCatalog->name }}</p>
                        <p class="text-xs text-secondary-500">{{ $request->employeeAccessDetail->accessCatalog->code }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1 rounded-full text-sm font-medium bg-primary-100 text-primary-700">
                            {{ $request->requested_duration_days }} hari
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $request->new_expiry_date->format('d M Y') }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        @if($request->approval_status === 'pending')
                            <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 animate-pulse">Pending</span>
                        @elseif($request->approval_status === 'approved')
                            <span class="px-3 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">Approved</span>
                        @else
                            <span class="px-3 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-800">Rejected</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        <a href="{{ route('extensions.show', $request) }}" class="p-2 text-primary-600 hover:bg-primary-50 rounded-lg">
                            <i class="fas fa-eye"></i>
                        </a>
                        @if($request->approval_status === 'pending' && auth()->user()->canApproveExtension())
                            <form action="{{ route('extensions.approve', $request) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="p-2 text-emerald-600 hover:bg-emerald-50 rounded-lg">
                                    <i class="fas fa-check"></i>
                                </button>
                            </form>
                            <button onclick="showRejectModal({{ $request->id }})" class="p-2 text-rose-600 hover:bg-rose-50 rounded-lg">
                                <i class="fas fa-times"></i>
                            </button>
                        @endif
                    </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 permintaan perpanjangan</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-secondary-900/75" onclick="hideRejectModal()"></div>
        <div class="relative glass-card rounded-2xl p-6 w-full max-w-md">
            <h3 class="text-lg font-bold text-secondary-800 mb-4">Tolak Permintaan</h3>
            <form id="rejectForm" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-secondary-700 mb-2">Alasan Penolakan</label>
                    <textarea name="rejection_reason" required rows="3" class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm resize-none" placeholder="Jelaskan alasan penolakan..."></textarea>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="hideRejectModal()" class="px-4 py-2 text-secondary-600 hover:bg-secondary-50 rounded-lg">Batal</button>
                    <button type="submit" class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600">Tolak</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function showRejectModal(requestId) {
        document.getElementById('rejectForm').action = '/extensions/' + requestId + '/reject';
        document.getElementById('rejectModal').classList.remove('hidden');
    }
    function hideRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
    }
</script>
@endpush
@endsection