<x-layout>
    <div class="mb-4">
        <h2 class="text-xl font-semibold text-white">Add Maintenance</h2>
    </div>
    <div class="bg-slate-800 rounded-md shadow-lg border-t-4 border-t-indigo-500 max-w-full">
        <form action="{{ route('maintenance.store') }}" method="POST" enctype="multipart/form-data" id="maintenanceForm">
            @csrf
            
            <div class="pt-3 pb-6 px-6 space-y-4">
                <div class="">
                    <div>
                        <label for="unit_name" class="block text-sm font-medium text-slate-300 mb-2">
                            Unit<span class="text-red-400">*</span>
                        </label>
                        <input type="hidden" name="unit_code" id="unit_code" value="{{ $unitData['unit_code'] }}">
                        <input type="text" name="unit_name" id="unit_name" value="{{ $unitData['unit_code'] . ' - ' . $unitData['unit_name'] }}"
                            class="block w-full rounded-sm border border-slate-700 bg-slate-900/50 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 cursor-not-allowed" readonly>
                        @error('unit_name')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-4 gap-6">
    
                    <!-- Field Maintenance Code (50% atau 2 dari 4 kolom) -->
                    <div class="sm:col-span-2">
                        <label for="mnt_code" class="block text-sm font-medium text-slate-300 mb-2">
                            Maintenance Code <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="mnt_code" id="mnt_code" value="{{ $mnt_code }}"
                            class="block w-full rounded-sm border border-slate-700 bg-slate-900/50 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 cursor-not-allowed" readonly>
                        @error('mnt_code')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Field Step (25% atau 1 dari 4 kolom) -->
                    <div class="sm:col-span-1">
                        <label for="step" class="block text-sm font-medium text-slate-300 mb-2">
                            Step <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="step" id="step" placeholder="Contoh: Step 1" value="{{ $newStep }}"
                            class="block w-full rounded-sm border border-slate-700 bg-slate-900/50 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 cursor-not-allowed" readonly>
                        @error('step')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Field Date (25% atau 1 dari 4 kolom) -->
                    <div class="sm:col-span-1">
                        <label for="mnt_date" class="block text-sm font-medium text-slate-300 mb-2">
                            Date <span class="text-red-400">*</span>
                        </label>
                        <!-- Tambahin class "datepicker" di sini -->
                        <input type="text" name="mnt_date" id="mnt_date" placeholder="Pilih Tanggal..." value="{{ old('mnt_date') }}"
                            class="datepicker 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('mnt_date')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                </div>
                <!-- Field Maintenance Description (Dibuat full width mengambil 2 kolom) -->
                <div class="sm:col-span-2">
                    <label for="mnt_description" class="block text-sm font-medium text-slate-300 mb-2">
                        Maintenance Description
                    </label>
                    <textarea name="mnt_description" id="mnt_description" rows="4" placeholder="Tuliskan detail deskripsi maintenance..."
                        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">{{ old('mnt_description') }}</textarea>
                </div>

                <!-- Field Input File -->
                <div>
                    <label for="file_upload" class="block text-sm font-medium text-slate-300 mb-2">
                        Upload File / Dokumen
                    </label>
                    <!-- Styling khusus input file di Tailwind -->
                    <input type="file" name="file_upload" id="file_upload" accept=".pdf, .PDF"
                        class="block w-full text-sm text-slate-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-sm file:border-0 file:text-sm file:font-semibold file:bg-slate-700 file:text-white hover:file:bg-slate-600 border border-slate-600 bg-slate-900 rounded-sm focus:outline-none transition-colors cursor-pointer">
                    @error('file_upload')
                        <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <!-- Card Footer -->
            <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="/unit/maintenance_list/{{ $unitData['unit_code'] }}" 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 Simpan -->
                <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" /> Simpan
                </button>
                
            </div>
        </form>
    </div>

    <!-- Script Validasi Disesuaikan dengan Field Baru -->
    <script>
        const form = document.getElementById('maintenanceForm');
        form.addEventListener('submit', (event) => {
            event.preventDefault();

            const swalDarkConfig = {
                background: '#1e293b', 
                color: '#f8fafc'       
            };

            Swal.fire({
                title: "Data saved",
                icon: "success",
                ...swalDarkConfig
            }).then(() => {
                form.submit();
            });
            
        })
    </script>
</x-layout>