<x-layout>
    <!-- Header Halaman -->
    <div class="flex justify-between mb-2 mt-0">
        <div>
            <h2 class="text-2xl font-bold text-white">{{ $unitData['unit_name'] }} Maintenance List</h2>
        </div>
        <div class="">
            <a href="/unit/maintenance" title="Back" class="inline-flex items-center gap-2 text-sm font-medium bg-slate-700 text-white hover:bg-slate-600 px-4 py-3 rounded-sm transition-colors border border-slate-600">
                <x-iconpark-back class="w-4 h-4" />
            </a>
            <a href="/unit/maintenance_list/{{ $unitData['unit_code'] }}/maintenance_form" title="Add Maintenance" class="inline-flex items-center gap-2 text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 px-4 py-3 rounded-sm transition-colors border border-slate-600">
                <x-iconpark-pluscross class="w-4 h-4"/>
            </a>
        </div>
    </div>

    <!-- CARD 1: Filter / Action Bar (Dark Mode & AdminLTE style top border) -->
    <div class="mb-4 p-4 bg-slate-800 rounded-md shadow-lg border border-slate-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h3 class="text-sm font-medium text-slate-100">Filter Data</h3>
            <p class="text-xs text-slate-400 mt-1">Saring unit berdasarkan status saat ini.</p>
        </div>
        <div class="w-full sm:w-56">
            <label for="filter-status" class="sr-only">Filter Status</label>
            <select id="filter-status" name="filter-status" class="block w-full rounded-sm border border-slate-600 py-2 pl-3 pr-10 text-white focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm sm:leading-6 cursor-pointer bg-slate-900 shadow-sm transition-colors [&>option]:bg-slate-800">
                <option value="">Semua Status</option>
                <option value="active">Active</option>
                <option value="in_progress">In Progress</option>
                <option value="pending">Pending</option>
            </select>
        </div>
    </div>

    <!-- CARD 2: Tabel Data (Dark Mode) -->
    <div class="bg-slate-800 rounded-sm shadow-lg border border-slate-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-700/50">
                <thead class="bg-slate-900/50">
                    <tr>
                        <th scope="col" width="20" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-200 sm:pl-6">Maintenance Code</th>
                        <th scope="col" width="25" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-200">Date</th>
                        <th scope="col" width="50" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-200">Description</th>
                        <th scope="col" width="10" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-200">Step</th>
                        <th scope="col" width="15" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                            <span class="sr-only">Action</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-700/50 bg-transparent">
                    @forelse ($maintenanceList as $maintenance)
                    <tr class="even:bg-slate-900/30 hover:bg-slate-700/50 transition-colors">
                        <td class="whitespace-nowrap py-3 pl-4 pr-3 sm:pl-6">
                            <div class="font-medium text-white">{{ $maintenance->mnt_code }}</div>
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm">
                            <div class="font-medium text-white">{{ $maintenance->mnt_date }}</div>
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm text-white">
                            {{ Str::limit($maintenance->description, 50) }}
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm text-white">
                            {{ $maintenance->step }}
                        </td>
                        <td class="whitespace-nowrap py-3 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                            <div class="flex items-center justify-end gap-2">
                                <a href="/unit/maintenance_list/maintenance_form/{{ $maintenance->mnt_code }}" title="Edit" class="inline-flex items-center justify-center rounded-sm bg-indigo-600 p-1.5 text-white shadow-sm hover:bg-indigo-500 transition-colors cursor-pointer">
                                    <x-iconpark-edittwo class="h-4 w-4"/>
                                </a>
                                <div title="Hapus" onclick="handleClickDelete('{{ $maintenance->mnt_code }}', '{{ $maintenance->step }}')" class="inline-flex items-center justify-center rounded-sm bg-red-600 p-1.5 text-white shadow-sm hover:bg-red-500 transition-colors cursor-pointer">
                                    <x-iconpark-delete-o class="h-4 w-4"/>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-6 text-slate-400 text-sm"><span>Unit not found</span></td>
                        </tr>
                    @endforelse

                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="p-3 border-t border-slate-700 bg-slate-800">
            {{ $maintenanceList->links() }}
        </div>
    </div>
    
    <script>
        function handleClickDelete(mnt_code, step)
        {
            // Tambahkan config Dark Mode untuk SweetAlert
            const swalDarkConfig = {
                background: '#1e293b', 
                color: '#f8fafc'       
            };

            Swal.fire({
                title: "Are you sure want to delete maintenance step "+step+"?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                confirmButtonColor: "#d33",
                focusCancel: true,
                ...swalDarkConfig // <-- Terapkan warnanya di sini
                }).then((result) => {
                if (result.isConfirmed){
                    async function deleteUnit(){
                        try {
                            const response      = await fetch('/unit/maintenance_list/'+mnt_code, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                    'Accept': 'application/json'
                                }
                            });

                            if (!response.ok) {
                                throw new Error(`HTTP error! Status: ${response.status}`);
                            }

                            const data = await response.json();
                            
                            if(data.success){
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Maintenance step "+step+" has been deleted",
                                    icon: "success",
                                    ...swalDarkConfig // <-- Terapkan juga di alert sukses
                                }).then(() => {
                                    window.location.reload();
                                });
                            }
                        } catch (error) {
                           console.error('Fetch failed:', error); 
                        }
                    }

                    deleteUnit();
                }
            });
        }
    </script>
</x-layout>