@extends('izin_tamu.layout')

@section('title', 'Edit Data Tamu')

@section('content')
<div class="bg-slate-800 p-8 rounded-3xl shadow-2xl">
    <h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-teal-500 mb-8">
        Edit Izin Penerimaan Tamu
    </h2>

    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-800/50 text-red-300 rounded-xl border border-red-700">
            <h3 class="font-semibold mb-2">Terjadi Kesalahan!</h3>
            <ul class="list-disc list-inside text-sm space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('izin_tamu.update', $izin->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Perusahaan -->
        <div>
            <label class="block font-semibold text-gray-400 mb-1">Perusahaan</label>
            <input type="text" name="perusahaan" value="{{ old('perusahaan', $izin->perusahaan) }}"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>
        </div>

        <!-- Nama Tamu -->
        <div>
            <label class="block font-semibold text-gray-400 mb-1">Nama Tamu</label>
            <textarea name="nama_tamu" rows="2"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>{{ old('nama_tamu', $izin->nama_tamu) }}</textarea>
        </div>

        <!-- Jumlah & Jenis Tamu -->
        <div class="grid grid-cols-2 gap-6">
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Jumlah Tamu</label>
                <input type="number" name="jumlah_tamu" value="{{ old('jumlah_tamu', $izin->jumlah_tamu) }}" min="1"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Jenis Tamu</label>
                <select name="jenis_tamu"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>
                    <option value="Customer" {{ $izin->jenis_tamu=='Customer'?'selected':'' }}>Customer</option>
                    <option value="Supplier" {{ $izin->jenis_tamu=='Supplier'?'selected':'' }}>Supplier</option>
                    <option value="Kedinasan" {{ $izin->jenis_tamu=='Kedinasan'?'selected':'' }}>Kedinasan</option>
                    <option value="Tamu BOD" {{ $izin->jenis_tamu=='Tamu BOD'?'selected':'' }}>Tamu BOD</option>
                    <option value="Lainnya" {{ $izin->jenis_tamu=='Lainnya'?'selected':'' }}>Lainnya</option>
                </select>
            </div>
        </div>

        <!-- Waktu -->
        <div class="grid grid-cols-2 gap-6">
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Waktu Mulai</label>
                <input type="datetime-local" name="waktu_mulai"
                    value="{{ old('waktu_mulai', \Carbon\Carbon::parse($izin->waktu_mulai)->format('Y-m-d\TH:i')) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Waktu Selesai</label>
                <input type="datetime-local" name="waktu_selesai"
                    value="{{ old('waktu_selesai', \Carbon\Carbon::parse($izin->waktu_selesai)->format('Y-m-d\TH:i')) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200" required>
            </div>
        </div>

        <!-- Jam Masuk & Jam Keluar -->
        <div class="grid grid-cols-2 gap-6">
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Jam Masuk</label>
                <input type="datetime-local" name="jam_masuk"
                    value="{{ old('jam_masuk', $izin->jam_masuk ? \Carbon\Carbon::parse($izin->jam_masuk)->format('Y-m-d\TH:i') : '') }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Jam Keluar</label>
                <input type="datetime-local" name="jam_keluar"
                    value="{{ old('jam_keluar', $izin->jam_keluar ? \Carbon\Carbon::parse($izin->jam_keluar)->format('Y-m-d\TH:i') : '') }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
        </div>

        <!-- Agenda -->
        <div>
            <label class="block font-semibold text-gray-400 mb-1">Agenda Kunjungan</label>
            <textarea name="agenda_kunjungan" rows="2"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">{{ old('agenda_kunjungan', $izin->agenda_kunjungan) }}</textarea>
        </div>

        <!-- Lokasi & Tujuan -->
        <div class="grid grid-cols-3 gap-6">
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Lokasi Penerimaan</label>
                <input type="text" name="lokasi_penerimaan" value="{{ old('lokasi_penerimaan', $izin->lokasi_penerimaan) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Dept. Tujuan</label>
                <input type="text" name="yang_ditemui" value="{{ old('yang_ditemui', $izin->yang_ditemui) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">User Ditemui</label>
                <input type="text" name="user_ditemui" value="{{ old('user_ditemui', $izin->user_ditemui) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
        </div>

        <!-- Security Data -->
        <div class="grid grid-cols-3 gap-6">
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Jenis Kendaraan</label>
                <input type="text" name="jenis_kendaraan" value="{{ old('jenis_kendaraan', $izin->jenis_kendaraan) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">No. Polisi</label>
                <input type="text" name="no_pol" value="{{ old('no_pol', $izin->no_pol) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Petugas Jaga</label>
                <input type="text" name="petugas_jaga" value="{{ old('petugas_jaga', $izin->petugas_jaga) }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
            </div>
        </div>

        <!-- Checklist Resepsionis (UPDATE: Added Porsi Input) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            <!-- 1. Status Konsumsi -->
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Status Konsumsi</label>
                <select name="sudah_konsumsi" id="select_konsumsi" 
                        class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200"
                        onchange="togglePorsiInput()">
                    <option value="0" {{ $izin->sudah_konsumsi == 0 ? 'selected' : '' }}>Belum</option>
                    <option value="1" {{ $izin->sudah_konsumsi == 1 ? 'selected' : '' }}>Sudah</option>
                </select>
            </div>

            <!-- 2. Jumlah Porsi (Hidden by default unless Sudah) -->
            <div id="input_porsi_container" class="{{ $izin->sudah_konsumsi == 1 ? '' : 'hidden' }}">
                <label class="block font-semibold text-gray-400 mb-1">Jumlah Porsi</label>
                <input type="number" name="konsumsi_porsi" min="1"
                       value="{{ old('konsumsi_porsi', $izin->konsumsi_porsi) }}"
                       class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200"
                       placeholder="Contoh: 5">
            </div>

            <!-- 3. Status APD -->
            <div>
                <label class="block font-semibold text-gray-400 mb-1">Status APD</label>
                <select name="sudah_apd" class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200">
                    <option value="0" {{ $izin->sudah_apd == 0 ? 'selected' : '' }}>Belum</option>
                    <option value="1" {{ $izin->sudah_apd == 1 ? 'selected' : '' }}>Sudah</option>
                </select>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end pt-4 space-x-4">
            <a href="{{ route('izin_tamu.index_admin') }}"
                class="px-6 py-3 bg-slate-700 text-gray-300 rounded-full shadow-lg hover:bg-slate-600">
                Batal
            </a>
            <button type="submit"
                class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-indigo-600 text-white rounded-full shadow-lg hover:shadow-cyan-500/50">
                Update Data
            </button>
        </div>
    </form>
</div>

<script>
    // Script Sederhana untuk Toggle Porsi
    function togglePorsiInput() {
        const select = document.getElementById('select_konsumsi');
        const container = document.getElementById('input_porsi_container');
        
        if (select.value == '1') {
            container.classList.remove('hidden');
        } else {
            container.classList.add('hidden');
        }
    }
    
    // Jalankan sekali saat load (untuk handle jika validasi gagal dan kembali ke form)
    document.addEventListener("DOMContentLoaded", togglePorsiInput);
</script>

@endsection