@extends('layouts.app')

@section('title', 'Ajukan Perpanjangan')
@section('subtitle', 'Perpanjang masa berlaku akses pegawai')

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

@section('content')
<div class="max-w-4xl mx-auto" x-data="{ 
    duration: 7, 
    maxDate: 90,
    get newDate() {
        const date = new Date('{{ $accessDetail->current_expiry_date }}');
        date.setDate(date.getDate() + parseInt(this.duration));
        return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    },
    get requiresApproval() {
        return this.duration > 7;
    }
}">
    
    <!-- Info Card -->
    <div class="glass-card rounded-2xl p-6 mb-6 border-l-4 border-primary-500">
        <div class="flex items-start">
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center flex-shrink-0 shadow-lg">
                <i class="fas fa-user-clock text-2xl"></i>
            </div>
            <div class="ml-5 flex-1">
                <h3 class="text-xl font-bold text-secondary-800 mb-1">{{ $accessDetail->employee->name }}</h3>
                <p class="text-sm text-secondary-500 mb-3">{{ $accessDetail->employee->nip }} • {{ $accessDetail->employee->department->name }}</p>
                
                <div class="flex flex-wrap gap-3">
                    <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-primary-50 text-primary-700 border border-primary-100">
                        <i class="fas fa-key mr-2"></i>
                        {{ $accessDetail->accessCatalog->name }}
                    </span>
                    <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-amber-50 text-amber-700 border border-amber-100">
                        <i class="far fa-calendar mr-2"></i>
                        Expire: {{ $accessDetail->current_expiry_date->format('d M Y') }}
                    </span>
                    <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-rose-50 text-rose-700 border border-rose-100">
                        <i class="fas fa-hourglass-half mr-2"></i>
                        {{ $accessDetail->daysUntilExpiry() }} hari lagi
                    </span>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('extensions.store', $accessDetail) }}" method="POST" enctype="multipart/form-data" class="glass-card rounded-2xl p-8">
        @csrf
        
        <div class="text-center mb-8">
            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-purple-100 text-purple-600 flex items-center justify-center">
                <i class="fas fa-clock text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-secondary-800 mb-2">Pengaturan Perpanjangan</h3>
            <p class="text-sm text-secondary-500">Tentukan durasi perpanjangan dan alasan</p>
        </div>

        <!-- Duration Slider -->
        <div class="mb-8">
            <label class="block text-sm font-medium text-secondary-700 mb-4">Durasi Perpanjangan (hari)</label>
            
            <div class="relative mb-6">
                <input type="range" x-model="duration" min="1" max="90" 
                       class="w-full h-2 bg-secondary-200 rounded-lg appearance-none cursor-pointer accent-primary-500">
                <div class="flex justify-between text-xs text-secondary-400 mt-2">
                    <span>1 hari</span>
                    <span>30 hari</span>
                    <span>60 hari</span>
                    <span>90 hari</span>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-3">
                <button type="button" @click="duration = 7" 
                        :class="duration == 7 ? 'bg-primary-500 text-white shadow-lg shadow-primary-500/30' : 'bg-white text-secondary-600 hover:bg-primary-50'"
                        class="py-3 rounded-xl text-sm font-medium transition-all border border-secondary-200">
                    7 Hari
                </button>
                <button type="button" @click="duration = 14" 
                        :class="duration == 14 ? 'bg-primary-500 text-white shadow-lg shadow-primary-500/30' : 'bg-white text-secondary-600 hover:bg-primary-50'"
                        class="py-3 rounded-xl text-sm font-medium transition-all border border-secondary-200">
                    14 Hari
                </button>
                <button type="button" @click="duration = 30" 
                        :class="duration == 30 ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/30' : 'bg-white text-secondary-600 hover:bg-amber-50'"
                        class="py-3 rounded-xl text-sm font-medium transition-all border border-secondary-200">
                    30 Hari
                    <span class="block text-xs opacity-75">Butuh Approval</span>
                </button>
                <button type="button" @click="duration = 60" 
                        :class="duration == 60 ? 'bg-rose-500 text-white shadow-lg shadow-rose-500/30' : 'bg-white text-secondary-600 hover:bg-rose-50'"
                        class="py-3 rounded-xl text-sm font-medium transition-all border border-secondary-200">
                    60+ Hari
                    <span class="block text-xs opacity-75">Approval 2 Level</span>
                </button>
            </div>

            <input type="hidden" name="duration_days" x-model="duration">
            
            <!-- Approval Warning -->
            <div x-show="requiresApproval" x-transition class="mt-4 p-4 rounded-xl bg-amber-50 border border-amber-200 flex items-start">
                <i class="fas fa-exclamation-triangle text-amber-500 mt-0.5 mr-3"></i>
                <div>
                    <p class="text-sm font-medium text-amber-800">Memerlukan Persetujuan</p>
                    <p class="text-xs text-amber-600 mt-1">
                        Perpanjangan >7 hari membutuhkan approval dari atasan. 
                        <span x-show="duration > 30">Perpanjangan >30 hari membutuhkan approval dari HRD.</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- New Date Preview -->
        <div class="mb-8 p-6 rounded-xl bg-gradient-to-r from-primary-50 to-purple-50 border border-primary-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-secondary-500 mb-1">Tanggal Expire Baru</p>
                    <p class="text-2xl font-bold text-primary-700" x-text="newDate"></p>
                </div>
                <div class="w-12 h-12 rounded-full bg-white text-primary-600 flex items-center justify-center shadow-sm">
                    <i class="fas fa-calendar-check text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Reason -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-secondary-700 mb-2">
                Alasan Perpanjangan <span class="text-rose-500">*</span>
            </label>
            <textarea name="reason" rows="4" required
                      class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all resize-none"
                      placeholder="Jelaskan alasan perpanjangan (min. 10 karakter)...">{{ old('reason') }}</textarea>
            @error('reason')<p class="mt-1 text-xs text-rose-500">{{ $message }}</p>@enderror
        </div>

        <!-- Supporting Document -->
        <div class="mb-8">
            <label class="block text-sm font-medium text-secondary-700 mb-2">Dokumen Pendukung</label>
            <div class="relative">
                <input type="file" name="supporting_document" accept=".pdf,.jpg,.jpeg,.png"
                       class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
            </div>
            <p class="mt-1 text-xs text-secondary-500">Upload memo direksi atau surat tugas jika diperlukan (Max 2MB)</p>
        </div>

        <!-- Submit Buttons -->
        <div class="flex items-center justify-end space-x-4">
            <a href="{{ route('employees.show', $accessDetail->employee) }}" class="px-6 py-3 bg-white hover:bg-secondary-50 text-secondary-700 font-medium rounded-xl border border-secondary-200 transition-all">
                Batal
            </a>
            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium rounded-xl shadow-lg shadow-primary-500/30 hover:shadow-xl transition-all flex items-center">
                <i class="fas fa-paper-plane mr-2"></i>
                Ajukan Perpanjangan
            </button>
        </div>
    </form>
</div>
@endsection