@extends('layouts.admin_sidebar')

@section('content')
<div x-data="{
    showAddModal: {{ $errors->any() && !old('_method') ? 'true' : 'false' }},
    showEditModal: {{ $errors->any() && old('_method') === 'PUT' ? 'true' : 'false' }},
    addGajiPokok: '{{ old('gaji_pokok') ?? 0 }}',
    addInsentif3kg: '{{ old('insentif_3kg') ?? 500 }}',
    addInsentif12kg: '{{ old('insentif_12kg') ?? 5000 }}',
    editItem: {
        id: '{{ old('id') ?? '' }}',
        name: '{{ old('name') ?? '' }}',
        email: '{{ old('email') ?? '' }}',
        phone: '{{ old('phone') ?? '' }}',
        gaji_pokok: '{{ old('gaji_pokok') ?? 0 }}',
        insentif_3kg: '{{ old('insentif_3kg') ?? 500 }}',
        insentif_12kg: '{{ old('insentif_12kg') ?? 5000 }}',
        uang_makan_harian: '{{ old('uang_makan_harian') ?? 0 }}'
    },
    showPass: false,
    showPassConfirm: false
}">
    <div class="space-y-6">
        <div class="flex items-center justify-between border-b border-slate-200 pb-4">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
                    <i data-lucide="truck" class="w-6 h-6"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-black tracking-tight text-slate-800">Manajemen Kurir</h1>
                    <p class="text-sm text-slate-500 font-medium">Tambah dan kelola akun kurir (Kurir) untuk pengiriman.</p>
                </div>
            </div>
            <button @click="showAddModal = true" class="px-4 py-2 bg-indigo-600 text-white rounded-xl font-bold text-sm shadow-md shadow-indigo-600/20 hover:bg-indigo-700 transition-all flex items-center gap-2">
                <i data-lucide="plus" class="w-4 h-4"></i> Tambah Kurir
            </button>
        </div>

        <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="p-6 border-b border-slate-100 flex items-center justify-between gap-4">
                <form action="{{ route('admin.kurir') }}" method="GET" class="relative flex-1 max-w-sm flex gap-2">
                    <div class="relative flex-1">
                        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                        <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Cari nama, email, atau telepon..." class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-0 focus:border-indigo-400 font-medium">
                    </div>
                    @if(!empty($search))
                        <a href="{{ route('admin.kurir') }}" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 rounded-xl text-slate-650 font-bold text-xs flex items-center justify-center transition-colors">
                            Reset
                        </a>
                    @endif
                </form>
                <div class="text-sm text-slate-500 font-bold">
                    Total Kurir: <span class="text-slate-800">{{ $kurirs->count() }}</span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider font-bold">
                            <th class="p-4">ID Kurir</th>
                            <th class="p-4">Nama Lengkap</th>
                            <th class="p-4">Email</th>
                            <th class="p-4">Telepon</th>
                            <th class="p-4 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($kurirs as $kurir)
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="p-4 text-sm font-black text-slate-400 uppercase tracking-tighter">{{ $kurir->id }}</td>
                                <td class="p-4">
                                    <div class="font-bold text-slate-800">{{ $kurir->name }}</div>
                                </td>
                                <td class="p-4 text-sm text-slate-600 font-medium">{{ $kurir->email }}</td>
                                <td class="p-4 text-sm text-slate-600 font-medium">{{ $kurir->phone ?? '-' }}</td>
                                <td class="p-4 text-right flex justify-end gap-2 items-center">
                                    <button @click="editItem = {
                                                id: '{{ $kurir->id }}',
                                                name: '{{ addslashes($kurir->name) }}',
                                                email: '{{ $kurir->email }}',
                                                phone: '{{ $kurir->phone }}',
                                                gaji_pokok: '{{ $kurir->gaji_pokok }}',
                                                insentif_3kg: '{{ $kurir->insentif_3kg }}',
                                                insentif_12kg: '{{ $kurir->insentif_12kg }}',
                                                uang_makan_harian: '{{ $kurir->uang_makan_harian }}'
                                            }; showEditModal = true" 
                                            class="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all shadow-sm active:scale-95">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <form action="{{ route('admin.kurir.destroy', $kurir->id) }}" method="POST" class="m-0 p-0">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" onclick="confirmDeleteKurir(this)" class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all shadow-sm active:scale-95">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-12 text-center text-slate-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <i data-lucide="user-plus" class="w-16 h-16 text-slate-200 mb-4 text-indigo-600/20"></i>
                                        <p class="font-bold text-slate-600">Belum ada kurir yang terdaftar</p>
                                        <p class="text-xs text-slate-400 mt-1">Gunakan tombol di atas untuk menambahkan kurir baru.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Kurir (Add) -->
    <template x-teleport="body">
        <div x-show="showAddModal" x-cloak class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[9000] flex items-center justify-center p-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <div class="bg-white w-full max-w-md rounded-3xl shadow-2xl p-8 transform transition-transform duration-300 ease-out" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100" @click.away="showAddModal = false">
                <div class="flex justify-between items-center mb-8">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center shadow-inner">
                            <i data-lucide="user-plus" class="w-6 h-6"></i>
                        </div>
                        <h3 class="font-black text-slate-800 text-xl tracking-tight">Tambah Kurir Baru</h3>
                    </div>
                    <button type="button" @click="showAddModal = false" class="text-slate-400 hover:text-slate-600 focus:outline-none bg-slate-50 p-2 rounded-xl">
                        <i data-lucide="x" class="w-6 h-6"></i>
                    </button>
                </div>
                
                <form action="{{ route('admin.kurir.store') }}" method="POST">
                    @csrf
                    <div class="space-y-5">
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Nama Lengkap</label>
                            <input type="text" name="name" value="{{ old('name') && !old('_method') ? old('name') : '' }}" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="Masukkan nama kurir" required>
                            @error('name') @if(!old('_method')) <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Email</label>
                            <input type="email" name="email" value="{{ old('email') && !old('_method') ? old('email') : '' }}" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="kurir@example.com" required>
                            @error('email') @if(!old('_method')) <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Telepon</label>
                            <input type="text" name="phone" value="{{ old('phone') && !old('_method') ? old('phone') : '' }}" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="08123xxx" required>
                            @error('phone') @if(!old('_method')) <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Gaji Pokok</label>
                                <input type="number" name="gaji_pokok" x-model="addGajiPokok" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(addGajiPokok || 0).toLocaleString('id-ID')"></span></p>
                                <input type="hidden" name="uang_makan_harian" value="0">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Insentif 3kg</label>
                                <input type="number" name="insentif_3kg" x-model="addInsentif3kg" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(addInsentif3kg || 0).toLocaleString('id-ID')"></span></p>
                            </div>
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Insentif 12kg</label>
                                <input type="number" name="insentif_12kg" x-model="addInsentif12kg" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(addInsentif12kg || 0).toLocaleString('id-ID')"></span></p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Password</label>
                                <div class="relative">
                                    <input :type="showPass ? 'text' : 'password'" name="password" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••" required>
                                    <button type="button" @click="showPass = !showPass" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                        <i data-lucide="eye" x-show="!showPass" class="w-5 h-5"></i>
                                        <i data-lucide="eye-off" x-show="showPass" class="w-5 h-5" x-cloak></i>
                                    </button>
                                </div>
                                @error('password') @if(!old('_method')) <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                            </div>
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Konfirmasi</label>
                                <div class="relative">
                                    <input :type="showPassConfirm ? 'text' : 'password'" name="password_confirmation" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••" required>
                                    <button type="button" @click="showPassConfirm = !showPassConfirm" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                        <i data-lucide="eye" x-show="!showPassConfirm" class="w-5 h-5"></i>
                                        <i data-lucide="eye-off" x-show="showPassConfirm" class="w-5 h-5" x-cloak></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10 flex gap-4">
                        <button type="button" @click="showAddModal = false" class="flex-1 py-4 px-6 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition-all">Batal</button>
                        <button type="submit" class="flex-1 py-4 px-6 bg-indigo-600 text-white rounded-2xl font-bold shadow-xl shadow-indigo-600/20 hover:bg-indigo-700 transition-all">
                            Simpan Akun
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>

    <!-- Modal Kurir (Edit) -->
    <template x-teleport="body">
        <div x-show="showEditModal" x-cloak class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[9000] flex items-center justify-center p-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <div class="bg-white w-full max-w-md rounded-3xl shadow-2xl p-8 transform transition-transform duration-300 ease-out" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100" @click.away="showEditModal = false">
                <div class="flex justify-between items-center mb-8">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center shadow-inner">
                            <i data-lucide="edit-2" class="w-6 h-6"></i>
                        </div>
                        <h3 class="font-black text-slate-800 text-xl tracking-tight">Edit Data Kurir</h3>
                    </div>
                    <button type="button" @click="showEditModal = false" class="text-slate-400 hover:text-slate-600 focus:outline-none bg-slate-50 p-2 rounded-xl">
                        <i data-lucide="x" class="w-6 h-6"></i>
                    </button>
                </div>
                
                <form :action="`{{ url('/admin/kurir') }}/${editItem.id}`" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" :value="editItem.id">
                    
                    <div class="space-y-5">
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Nama Lengkap</label>
                            <input type="text" name="name" :value="editItem.name" @input="editItem.name = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="Masukkan nama kurir" required>
                            @error('name') @if(old('_method') === 'PUT') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Email</label>
                            <input type="email" name="email" :value="editItem.email" @input="editItem.email = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="kurir@example.com" required>
                            @error('email') @if(old('_method') === 'PUT') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Telepon</label>
                            <input type="text" name="phone" :value="editItem.phone" @input="editItem.phone = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="08123xxx" required>
                            @error('phone') @if(old('_method') === 'PUT') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Gaji Pokok</label>
                                <input type="number" name="gaji_pokok" :value="editItem.gaji_pokok" @input="editItem.gaji_pokok = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(editItem.gaji_pokok || 0).toLocaleString('id-ID')"></span></p>
                                <input type="hidden" name="uang_makan_harian" value="0">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Insentif 3kg</label>
                                <input type="number" name="insentif_3kg" :value="editItem.insentif_3kg" @input="editItem.insentif_3kg = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(editItem.insentif_3kg || 0).toLocaleString('id-ID')"></span></p>
                            </div>
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Insentif 12kg</label>
                                <input type="number" name="insentif_12kg" :value="editItem.insentif_12kg" @input="editItem.insentif_12kg = $event.target.value" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" required>
                                <p class="text-[10px] text-slate-400 font-bold mt-1.5 ml-1">Format: Rp <span x-text="Number(editItem.insentif_12kg || 0).toLocaleString('id-ID')"></span></p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Password</label>
                                <div class="relative">
                                    <input :type="showPass ? 'text' : 'password'" name="password" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••">
                                    <button type="button" @click="showPass = !showPass" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                        <i data-lucide="eye" x-show="!showPass" class="w-5 h-5"></i>
                                        <i data-lucide="eye-off" x-show="showPass" class="w-5 h-5" x-cloak></i>
                                    </button>
                                </div>
                                @error('password') @if(old('_method') === 'PUT') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @endif @enderror
                                <p class="text-[10px] text-slate-400 mt-1">*Biarkan kosong jika tidak diubah</p>
                            </div>
                            <div>
                                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Konfirmasi</label>
                                <div class="relative">
                                    <input :type="showPassConfirm ? 'text' : 'password'" name="password_confirmation" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••">
                                    <button type="button" @click="showPassConfirm = !showPassConfirm" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                        <i data-lucide="eye" x-show="!showPassConfirm" class="w-5 h-5"></i>
                                        <i data-lucide="eye-off" x-show="showPassConfirm" class="w-5 h-5" x-cloak></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10 flex gap-4">
                        <button type="button" @click="showEditModal = false" class="flex-1 py-4 px-6 bg-slate-100 text-slate-650 rounded-2xl font-bold hover:bg-slate-200 transition-all">Batal</button>
                        <button type="submit" class="flex-1 py-4 px-6 bg-indigo-600 text-white rounded-2xl font-bold shadow-xl shadow-indigo-600/20 hover:bg-indigo-700 transition-all">
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });

    function confirmDeleteKurir(button) {
        Swal.fire({
            title: 'Hapus Kurir?',
            text: 'Tindakan ini tidak dapat dibatalkan.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#94a3b8',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                button.closest('form').submit();
            }
        });
    }
</script>
@endpush