<x-layout>
    <!-- Header Halaman -->
    <div class="flex justify-between mb-2 mt-0">
        <div>
            <h2 class="text-2xl font-bold text-white">Master Unit</h2>
        </div>
        <div class="">
            <a href="master_unit/create" class="inline-flex items-center rounded-sm bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-colors cursor-pointer border border-indigo-500">
                <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
                Tambah
            </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">Unit</th>
                        <th scope="col" width="15" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-200">Project</th>
                        <th scope="col" width="40" 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">Status</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 ($masterUnit as $unit)
                    <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">{{ $unit->unit_name }}</div>
                            <div class="text-slate-400 text-sm">{{ $unit->unit_code }}</div>
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm">
                            <div class="font-medium text-white">{{ $unit->project_code }}</div>
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm text-slate-400">
                            {{ Str::limit($unit->description, 50) }}
                        </td>
                        <td class="whitespace-nowrap px-3 py-3 text-sm">
                            <span class="inline-flex items-center rounded-sm {{ ($unit->status == 1) ? 'bg-green-500/10 text-green-400 ring-green-500/20' : 'bg-red-500/10 text-red-400 ring-red-500/20' }} px-2 py-1 text-xs font-medium ring-1 ring-inset">
                                {{ ($unit->status == 1) ? 'Active' : 'Non Active' }}
                            </span>
                        </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="master_unit/unit_form/{{ $unit->unit_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('{{ $unit->unit_code }}', '{{ $unit->unit_name }}')" 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">
            {{ $masterUnit->links() }}
        </div>
    </div>
    
    <script>
        function handleClickDelete(unit_code, unit_name)
        {
            // Tambahkan config Dark Mode untuk SweetAlert
            const swalDarkConfig = {
                background: '#1e293b', 
                color: '#f8fafc'       
            };

            Swal.fire({
                title: "Are you sure want to delete "+unit_name+" unit?",
                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/master_unit/'+unit_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: "Unit "+unit_name+" 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>