<x-layout>
    <!-- Header Halaman -->
    <div class="mb-4">
        <h2 class="text-xl font-semibold text-white">Edit Project</h2>
    </div>

    <!-- CARD: Dark Mode AdminLTE Style (Garis indigo di atas) -->
    <div class="bg-slate-800 rounded-md shadow-lg border-t-4 border-t-indigo-500 max-w-full">
        
        <!-- Card Header -->
        <div class="border-b border-slate-700 px-6 py-3.5">
            <h3 class="text-base font-medium text-slate-100">Project Details Form</h3>
        </div>

        <!-- Form Action -->
        <form action="{{ route('project.update', $data->project_code) }}" method="POST" id="projectForm">
            @method('PUT')
            @csrf
            
            <!-- Card Body -->
            <div class="p-6 space-y-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <!-- Field Project Code (Readonly / Disabled Style) -->
                    <div>
                        <label for="project_code" class="block text-sm font-medium text-slate-300 mb-2">
                            Project Code <span class="text-red-400">*</span>
                        </label>
                        <!-- Background lebih pudar (bg-slate-900/50), teks abu-abu (text-slate-500), cursor silang -->
                        <input type="text" name="project_code" id="project_code" placeholder="Contoh: PRJ-001" value="{{ $data->project_code }}"
                            class="block w-full rounded-sm border border-slate-700 bg-slate-900/50 py-2.5 px-3 text-slate-400 shadow-sm cursor-not-allowed focus:ring-0 sm:text-sm sm:leading-6" readonly>
                        @error('project_code')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <!-- Field Project Name -->
                    <div>
                        <label for="project_name" class="block text-sm font-medium text-slate-300 mb-2">
                            Project Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="project_name" id="project_name" placeholder="Masukkan nama project..." value="{{ $data->project_name }}"
                            class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2.5 px-3 text-white placeholder:text-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors">
                        @error('project_name')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Field Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-slate-300 mb-2">
                        Description
                    </label>
                    <textarea name="description" id="description" rows="4" placeholder="Tuliskan detail atau deskripsi singkat mengenai project ini..."
                        class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2.5 px-3 text-white placeholder:text-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors">{{ $data->description }}</textarea>
                </div>

                <!-- Field Status -->
                <div class="w-full sm:w-1/2">
                    <label for="status" class="block text-sm font-medium text-slate-300 mb-2">
                        Status <span class="text-red-400">*</span>
                    </label>
                    <select id="status" name="status"
                        class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2.5 pl-3 pr-10 text-white focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer [&>option]:bg-slate-800">
                        <option value="" disabled> --- </option>
                        <option value="1" {{ ($data->status == 1) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ ($data->status == 0) ? 'selected' : '' }}>Inactive</option>
                    </select>
                    @error('status')
                        <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <!-- Card Footer -->
            <!-- Dibuat sedikit transparan buat footernya -->
            <div class="bg-slate-900/50 border-t border-slate-700 px-6 py-4 flex items-center justify-end gap-3 rounded-b-md">
                
                <!-- Tombol Batal -->
                <a href="/project" class="inline-flex items-center gap-2 text-sm font-medium bg-slate-700 text-white hover:bg-slate-600 px-4 py-2.5 rounded-sm transition-colors border border-slate-600">
                     <x-iconpark-back class="w-4 h-4" /> Batal
                </a>
                
                <!-- Tombol Update -->
                <button type="submit" class="inline-flex items-center gap-2 text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 px-4 py-2.5 rounded-sm transition-colors cursor-pointer shadow-sm">
                    <x-iconpark-save class="w-4 h-4" /> Update
                </button>
                
            </div>
        </form>
    </div>

    <!-- Script Validasi & SweetAlert -->
    <script>
        const form = document.getElementById('projectForm');
        form.addEventListener('submit', (event) => {
            event.preventDefault();

            let project_code        = document.getElementById('project_code');
            let project_name        = document.getElementById('project_name');
            let status              = document.getElementById('status');

            // Konfigurasi warna default untuk SweetAlert agar Dark Mode
            const swalDarkConfig = {
                background: '#1e293b', // bg-slate-800
                color: '#f8fafc'       // text-slate-50
            };

            if(project_code.value == ''){
                project_code.blur();
                Swal.fire({
                    text: "Project code is required",
                    icon: "warning",
                    ...swalDarkConfig
                }).then(() =>{
                    project_code.focus()
                })
                return false;
            }

            // [BUG FIX]: Tadi di kode kamu tertulis 'project_name == ""'
            if(project_name.value == ''){
                project_name.blur();
                Swal.fire({
                    text: "Project name is required",
                    icon: "warning",
                    ...swalDarkConfig
                }).then(() =>{
                    project_name.focus()
                })
                return false;
            }

            // [BUG FIX]: Tadi di kode kamu tertulis 'status == ""'
            if(status.value == ''){
                Swal.fire({
                    text: "Project status is required",
                    icon: "warning",
                    ...swalDarkConfig
                });
                return false;
            }

            Swal.fire({
                title: "Data updated",
                icon: "success",
                ...swalDarkConfig
            }).then(() => {
                // Submit form setelah user klik OK di notif sukses
                form.submit();
            });
            
        })
    </script>
</x-layout>