@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" 
     x-data="{ 
        showCols: { id: true, code: true, name: true, action: true },
        exportOpen: false,
        columnOpen: false
     }">
    
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Manajemen Departemen</h2>
            <p class="text-sm text-slate-500 mt-1">Total <span class="font-bold text-indigo-600">{{ $departments instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator ? $departments->total() : $departments->count() }}</span> rekor ditemukan.</p>
        </div>
        <a href="{{ route('admin.departments.create') }}" class="inline-flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 shadow-sm transition-all">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Tambah Departemen
        </a>
    </div>

    <div class="bg-white p-4 rounded-t-2xl border border-slate-200 border-b-0 flex flex-col md:flex-row gap-4 justify-between items-center relative z-10">
        
        <form action="{{ route('admin.departments.index') }}" method="GET" class="w-full md:w-96 relative">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama atau kode..." 
                class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-600 transition-all">
            <svg class="w-4 h-4 text-slate-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            @if(request('search'))
                <a href="{{ route('admin.departments.index') }}" class="absolute right-3 top-2.5 text-xs text-red-500 hover:underline">Clear</a>
            @endif
        </form>

        <div class="flex items-center space-x-3 w-full md:w-auto">
            <div class="relative">
                <button @click="columnOpen = !columnOpen" @click.away="columnOpen = false" class="px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-xl text-sm font-semibold hover:bg-slate-50 flex items-center shadow-sm">
                    <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg>
                    Kolom
                </button>
                <div x-show="columnOpen" x-transition class="absolute right-0 mt-2 w-48 bg-white border border-slate-100 rounded-xl shadow-xl py-2 z-50" style="display: none;">
                    <label class="flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer text-sm"><input type="checkbox" x-model="showCols.id" class="rounded border-slate-300 text-indigo-600 mr-3"> ID</label>
                    <label class="flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer text-sm"><input type="checkbox" x-model="showCols.code" class="rounded border-slate-300 text-indigo-600 mr-3"> Kode</label>
                    <label class="flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer text-sm"><input type="checkbox" x-model="showCols.name" class="rounded border-slate-300 text-indigo-600 mr-3"> Nama Departemen</label>
                </div>
            </div>

            <div class="relative">
                <button @click="exportOpen = !exportOpen" @click.away="exportOpen = false" class="px-4 py-2 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm font-semibold hover:bg-emerald-100 flex items-center transition-all">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    Export Data
                </button>
                <div x-show="exportOpen" x-transition class="absolute right-0 mt-2 w-48 bg-white border border-slate-100 rounded-xl shadow-xl py-2 z-50" style="display: none;">
                    <p class="px-4 py-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pilih Format</p>
                    <a href="{{ url('admin/departments/export/excel?search=' . request('search')) }}" class="flex items-center px-4 py-2 hover:bg-slate-50 text-sm text-slate-700">
                        <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span> Excel (.xlsx)
                    </a>
                    <a href="{{ url('admin/departments/export/pdf?search=' . request('search')) }}" class="flex items-center px-4 py-2 hover:bg-slate-50 text-sm text-slate-700">
                        <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span> PDF (.pdf)
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-b-2xl overflow-hidden shadow-sm relative z-0">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm whitespace-nowrap">
                <thead class="bg-slate-50/80 text-slate-500 text-xs uppercase tracking-wider border-b border-slate-200">
                    <tr>
                        <th x-show="showCols.id" class="px-6 py-4 font-semibold">ID</th>
                        <th x-show="showCols.code" class="px-6 py-4 font-semibold">Kode</th>
                        <th x-show="showCols.name" class="px-6 py-4 font-semibold">Nama Departemen</th>
                        <th x-show="showCols.action" class="px-6 py-4 font-semibold text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700">
                    @forelse($departments as $dept)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td x-show="showCols.id" class="px-6 py-4 font-medium text-slate-500">#{{ $dept->id }}</td>
                        <td x-show="showCols.code" class="px-6 py-4">
                            <span class="bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md text-xs font-bold border border-slate-200">{{ $dept->code ?? 'N/A' }}</span>
                        </td>
                        <td x-show="showCols.name" class="px-6 py-4 font-bold text-slate-900">{{ $dept->name }}</td>
                        <td x-show="showCols.action" class="px-6 py-4 text-right space-x-3">
                            <a href="{{ route('admin.departments.show', $dept->id) }}" class="text-slate-400 hover:text-indigo-600 font-medium text-sm transition-colors">Detail</a>
                            <a href="{{ route('admin.departments.edit', $dept->id) }}" class="text-indigo-600 hover:text-indigo-800 font-medium text-sm transition-colors">Edit</a>
                            
                            <form action="{{ route('admin.departments.destroy', $dept->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Apakah Anda yakin ingin menghapus departemen ini?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 font-medium text-sm transition-colors">Hapus</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center text-slate-500">
                            <svg class="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
                            Tidak ada data departemen yang ditemukan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if(method_exists($departments, 'hasPages') && $departments->hasPages())
        <div class="p-4 border-t border-slate-100 bg-slate-50/50">
            {{ $departments->links() }}
        </div>
        @endif
    </div>
</div>
@endsection