@extends('izin_tamu.layout')

@section('title', 'Form Penerimaan 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">
        Form 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 id="izinForm" action="{{ route('izin_tamu.store') }}" method="POST" class="space-y-6">
        @csrf

        <!-- Perusahaan -->
        <div>
            <label for="perusahaan" class="block font-semibold text-gray-400 mb-1">Perusahaan/Instansi</label>
            <input type="text" name="perusahaan" id="perusahaan" value="{{ old('perusahaan') }}"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
        </div>

        <!-- Nama Tamu -->
        <div>
            <label for="nama_tamu" class="block font-semibold text-gray-400 mb-1">Nama Tamu (PIC)</label>
            <textarea name="nama_tamu" id="nama_tamu" rows="2"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" 
                placeholder="jika tamu lebih dari 1 pake pemisah koma (,) contoh bapak, ibu"
                required>{{ old('nama_tamu') }}</textarea>
        </div>

        <!-- Tanggal Kunjungan -->
        <div>
            <label for="tanggal_kunjungan" class="block font-semibold text-gray-400 mb-1">Tanggal Kunjungan</label>
            <input type="date" name="tanggal_kunjungan" id="tanggal_kunjungan" value="{{ old('tanggal_kunjungan', Carbon::now()->format('Y-m-d')) }}"
                min="{{ Carbon::now()->format('Y-m-d') }}"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
        </div>

        <!-- Waktu Mulai & Selesai -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="waktu_mulai_jam" class="block font-semibold text-gray-400 mb-1">Waktu Mulai</label>
                <input type="time" name="waktu_mulai_jam" id="waktu_mulai_jam" value="{{ old('waktu_mulai_jam') }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
            </div>
            <div>
                <label for="waktu_selesai_jam" class="block font-semibold text-gray-400 mb-1">Waktu Selesai</label>
                <input type="time" name="waktu_selesai_jam" id="waktu_selesai_jam" value="{{ old('waktu_selesai_jam') }}"
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
            </div>
        </div>

        <!-- Agenda Kunjungan -->
        <div>
            <label for="agenda_kunjungan" class="block font-semibold text-gray-400 mb-1">Agenda Kunjungan</label>
            <textarea name="agenda_kunjungan" id="agenda_kunjungan" rows="2"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200">{{ old('agenda_kunjungan') }}</textarea>
        </div>

        <!-- Lokasi, Yang Ditemui, User -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="lokasi_penerimaan" class="block text-sm font-medium text-gray-400 mb-1">Lokasi Penerimaan</label>
                <select id="lokasi_penerimaan" name="lokasi_penerimaan" required
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200">
                    <option value="">-- Pilih Lokasi --</option>
                    <option value="Meeting Room 1">Meeting Room 1</option>
                    <option value="Meeting Room 4">Meeting Room 4</option>
                    <option value="Meeting Room 5">Meeting Room 5</option>
                    <option value="Guest Room 1">Guest Room 1</option>
                    <option value="Guest Room 2">Guest Room 2</option>
                    <option value="Training Room 1">Training Room 1</option>
                    <option value="Training Room 2">Training Room 2</option>
                    <option value="Training Room 2">Training Room 3</option>
                    <option value="Lobby">Lobby</option>
                    <option value="Lobby">Lobby QC</option>
                </select>
            </div>
        </div>

        <div>
            <label for="yang_ditemui" class="block font-semibold text-gray-400 mb-1">Department Yang Ditemui</label>
            <select id="yang_ditemui" name="yang_ditemui" required
                    class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200">
                    <option value="">-- Pilih Departemen --</option>
                        <option value="IT">IT</option>
                        <option value="Finance & Accounting">Finance & Accounting</option>
                        <option value="Casting">Casting</option>
                        <option value="Casting Engineering">Casting Engineering</option>
                        <option value="Finishing">Finishing</option>
                        <option value="HSE">HSE</option>
                        <option value="Machining">Machining</option>
                        <option value="Machining Engineering">Machining Engineering</option>
                        <option value="Maintenance">Maintenance</option>
                        <option value="PGA">PGA</option>
                        <option value="PPSC">PPSC</option>
                        <option value="Purchasing">Purchasing</option>
                        <option value="Quality">Quality</option>
                        <option value="Sales">Sales</option>
                        <option value="New Model">New Model</option>
                </select>
            </div>

        <div>
            <label for="user_ditemui" class="block font-semibold text-gray-400 mb-1">User yang Ditemui</label>
            <input type="text" name="user_ditemui" id="user_ditemui" value="{{ old('user_ditemui') }}"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200">
        </div>

        <!-- Jumlah Tamu -->
        <div>
            <label for="jumlah_tamu" class="block font-semibold text-gray-400 mb-1">Jumlah Tamu</label>
            <input type="number" name="jumlah_tamu" id="jumlah_tamu" value="{{ old('jumlah_tamu', 1) }}" min="1"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 
                    focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
        </div>

        <!-- Jenis Tamu -->
        <div>
            <label for="jenis_tamu" class="block font-semibold text-gray-400 mb-1">Jenis Tamu</label>
            <select name="jenis_tamu" id="jenis_tamu"
                class="w-full bg-slate-700 border-slate-600 border rounded-xl p-3 text-gray-200 
                    focus:ring focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-200" required>
                <option value="">-- Pilih Jenis Tamu --</option>
                <option value="Customer" {{ old('jenis_tamu') == 'Customer' ? 'selected' : '' }}>Customer</option>
                <option value="Supplier" {{ old('jenis_tamu') == 'Supplier' ? 'selected' : '' }}>Supplier</option>
                <option value="Kedinasan" {{ old('jenis_tamu') == 'Kedinasan' ? 'selected' : '' }}>Kedinasan</option>
                <option value="Tamu BOD" {{ old('jenis_tamu') == 'Tamu BOD' ? 'selected' : '' }}>Tamu BOD</option>
                <option value="Lainnya" {{ old('jenis_tamu') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
            </select>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end pt-4 space-x-4">
            <a href="{{ route('izin_tamu.index') }}"
               class="px-6 py-3 bg-slate-700 text-gray-300 rounded-full shadow-lg hover:bg-slate-600 transition duration-200 font-semibold">
                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 transition-all duration-300 transform hover:-translate-y-1 font-semibold">
                Simpan Data
            </button>
        </div>
    </form>
</div>

{{-- Modal Checklist setelah submit --}}
@if(session('success') && session('new_id'))
    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
        <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
            <h3 class="text-lg font-bold mb-4">Checklist Resepsionis</h3>
            <form action="{{ route('izin_tamu.update_checklist', session('new_id')) }}" method="POST">
                @csrf
                <div class="space-y-3 text-base text-gray-800">
                    <label class="flex items-center space-x-3">
                        <input type="checkbox" name="sudah_konsumsi" value="1" class="form-checkbox h-5 w-5 text-blue-600">
                        <span>Apakah Memerlukan Konsumsi?</span>
                    </label>
                    <label class="flex items-center space-x-3">
                        <input type="checkbox" name="sudah_apd" value="1" class="form-checkbox h-5 w-5 text-blue-600">
                        <span>Apakah Memerlukan APD?</span>
                    </label>
                </div>

                {{-- Catatan Penting --}}
                <div class="mt-6 flex items-start bg-yellow-100 border-l-4 border-yellow-600 p-4 rounded-lg shadow">
                    <svg class="w-6 h-6 text-yellow-600 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" 
                            d="M18 10c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 
                                8-8 8 3.582 8 8zm-7-4a1 1 0 11-2 
                                0 1 1 0 012 0zm-1 2a1 1 0 
                                00-1 1v4a1 1 0 102 0v-4a1 1 
                                0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <p class="text-lg font-bold text-yellow-900">
                            ⚠️ Jangan lupa membuat <span class="underline">Welcome Note</span>.
                        </p>
                        <p class="text-base text-yellow-800 mt-1">
                            Jika membutuhkan ruangan meeting, segera lakukan <span class="font-semibold">booking ruangan</span>.
                        </p>
                    </div>
                </div>  


                <div class="flex justify-end mt-6 space-x-3">
                    <button type="button" onclick="this.closest('.fixed').remove()" 
                        class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">
                        Tutup
                    </button>
                    <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endif

@endsection