@extends('layouts.app')

@section('title', 'Detail Perpanjangan')
@section('subtitle', 'Review permintaan perpanjangan akses')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <a href="{{ route('extensions.index') }}" class="text-sm font-medium text-secondary-500 hover:text-primary-600">Perpanjangan</a>
    </li>
    <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">Detail</span>
    </li>
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
    
    <!-- Status Banner -->
    <div class="mb-6 p-4 rounded-2xl {{ $extension->approval_status === 'pending' ? 'bg-amber-50 border border-amber-200' : ($extension->approval_status === 'approved' ? 'bg-emerald-50 border border-emerald-200' : 'bg-rose-50 border border-rose-200') }}">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-12 h-12 rounded-xl {{ $extension->approval_status === 'pending' ? 'bg-amber-100 text-amber-600' : ($extension->approval_status === 'approved' ? 'bg-emerald-100 text-emerald-600' : 'bg-rose-100 text-rose-600') }} flex items-center justify-center mr-4">
                    <i class="fas {{ $extension->approval_status === 'pending' ? 'fa-clock' : ($extension->approval_status === 'approved' ? 'fa-check' : 'fa-times') }} text-xl"></i>
                </div>
                <div>
                    <p class="text-sm text-secondary-500">Status Permintaan</p>
                    <p class="text-xl font-bold {{ $extension->approval_status === 'pending' ? 'text-amber-700' : ($extension->approval_status === 'approved' ? 'text-emerald-700' : 'text-rose-700') }}">
                        {{ ucfirst($extension->approval_status) }}
                    </p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-sm text-secondary-500">Diajukan</p>
                <p class="font-medium text-secondary-700">{{ $extension->created_at->format('d M Y H:i') }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Employee Info -->
        <div class="glass-card rounded-2xl p-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4 flex items-center">
                <i class="fas fa-user text-primary-500 mr-2"></i>Informasi Pegawai
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Nama</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->employee->name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">NIP</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->employee->nip }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Departemen</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->employee->department->name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Jabatan</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->employee->position }}</span>
                </div>
            </div>
        </div>

        <!-- Access Info -->
        <div class="glass-card rounded-2xl p-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4 flex items-center">
                <i class="fas fa-key text-primary-500 mr-2"></i>Informasi Akses
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Akses</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->accessCatalog->name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Kode</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->accessCatalog->code }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Kategori</span>
                    <span class="text-sm font-medium text-secondary-800">{{ $extension->employeeAccessDetail->accessCatalog->getCategoryLabelAttribute() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-secondary-500">Expire Saat Ini</span>
                    <span class="text-sm font-medium text-amber-600">{{ $extension->employeeAccessDetail->current_expiry_date->format('d M Y') }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Extension Details -->
    <div class="glass-card rounded-2xl p-6 mt-6">
        <h3 class="text-lg font-bold text-secondary-800 mb-6 flex items-center">
            <i class="fas fa-calendar-alt text-primary-500 mr-2"></i>Detail Perpanjangan
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div class="text-center p-4 bg-primary-50 rounded-xl">
                <p class="text-3xl font-bold text-primary-600">{{ $extension->requested_duration_days }}</p>
                <p class="text-sm text-secondary-500">Hari Diminta</p>
            </div>
            <div class="text-center p-4 bg-emerald-50 rounded-xl">
                <p class="text-lg font-bold text-emerald-600">{{ $extension->new_expiry_date->format('d M Y') }}</p>
                <p class="text-sm text-secondary-500">Tanggal Expire Baru</p>
            </div>
            <div class="text-center p-4 bg-amber-50 rounded-xl">
                <p class="text-sm font-bold text-amber-600">{{ ucfirst(str_replace('_', ' ', $extension->approval_level_required)) }}</p>
                <p class="text-sm text-secondary-500">Level Approval</p>
            </div>
        </div>

        <div class="mb-6">
            <label class="block text-sm font-medium text-secondary-700 mb-2">Alasan Perpanjangan</label>
            <div class="p-4 bg-white/50 rounded-xl text-secondary-700 text-sm">
                {{ $extension->reason }}
            </div>
        </div>

        @if($extension->supporting_document)
            <div class="mb-6">
                <label class="block text-sm font-medium text-secondary-700 mb-2">Dokumen Pendukung</label>
                <a href="{{ asset('storage/' . $extension->supporting_document) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-rose-50 text-rose-600 rounded-lg text-sm font-medium hover:bg-rose-100 transition-colors">
                    <i class="fas fa-file-pdf mr-2"></i>Lihat Dokumen
                </a>
            </div>
        @endif
    </div>

    <!-- Approval Info -->
    @if($extension->approval_status !== 'pending')
        <div class="glass-card rounded-2xl p-6 mt-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4 flex items-center">
                <i class="fas fa-gavel text-primary-500 mr-2"></i>Informasi Approval
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <span class="text-sm text-secondary-500">{{ $extension->approval_status === 'approved' ? 'Disetujui' : 'Ditolak' }} Oleh</span>
                    <p class="font-medium text-secondary-800">{{ $extension->approvedBy->name ?? 'Unknown' }}</p>
                </div>
                <div>
                    <span class="text-sm text-secondary-500">Waktu</span>
                    <p class="font-medium text-secondary-800">{{ $extension->approved_at?->format('d M Y H:i') }}</p>
                </div>
                @if($extension->rejection_reason)
                    <div class="md:col-span-2">
                        <span class="text-sm text-secondary-500">Alasan Penolakan</span>
                        <p class="font-medium text-rose-600">{{ $extension->rejection_reason }}</p>
                    </div>
                @endif
            </div>
        </div>
    @endif

    <!-- Actions -->
    @if($extension->approval_status === 'pending' && auth()->user()->canApproveExtension())
        <div class="flex items-center justify-end space-x-4 mt-6">
            <button onclick="showRejectModal()" class="px-6 py-3 bg-rose-50 hover:bg-rose-100 text-rose-600 font-medium rounded-xl border border-rose-200 transition-all">
                <i class="fas fa-times mr-2"></i>Tolak
            </button>
            <form action="{{ route('extensions.approve', $extension) }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-xl shadow-lg shadow-emerald-500/30 transition-all">
                    <i class="fas fa-check mr-2"></i>Setujui
                </button>
            </form>
        </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 action="{{ route('extensions.reject', $extension) }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-secondary-700 mb-2">Alasan <span class="text-rose-500">*</span></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"></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() {
                document.getElementById('rejectModal').classList.remove('hidden');
            }
            function hideRejectModal() {
                document.getElementById('rejectModal').classList.add('hidden');
            }
        </script>
        @endpush
    @endif
</div>
@endsection