@extends('layouts.admin', ['title' => 'Employee Profile'])

@section('content')
    <div x-data="employeeProfilePage()" class="mx-auto max-w-3xl">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Employee Profile</h1>
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <template x-if="emp">
            <div>
                {{-- View Mode --}}
                <div x-show="!editing">
                    <div class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden mb-6">
                        <div class="px-8 py-6 border-b border-slate-100 flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-amber-100 text-xl font-bold text-amber-700" x-text="(emp.name || '?')[0]"></div>
                                <div>
                                    <h2 class="text-xl font-semibold text-slate-900" x-text="emp.name"></h2>
                                    <p class="text-sm text-slate-500" x-text="'ID: ' + emp.employee_id"></p>
                                </div>
                            </div>
                            <span x-text="emp.status"
                                  :class="emp.status === 'Active' ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'"
                                  class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ring-1 ring-inset"></span>
                        </div>

                        <div class="px-8 py-6 space-y-6">
                            {{-- Personal --}}
                            <div>
                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Personal</h4>
                                <div class="grid gap-4 sm:grid-cols-3">
                                    <div>
                                        <p class="text-xs text-slate-500">Email</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.email || '—'"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Contact</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.contact_number || '—'"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Joining Date</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.joining_date || '—'"></p>
                                    </div>
                                </div>
                            </div>

                            {{-- Work --}}
                            <div>
                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Work</h4>
                                <div class="grid gap-4 sm:grid-cols-3">
                                    <div>
                                        <p class="text-xs text-slate-500">Designation</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.designation || '—'"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Department</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.department || '—'"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Kafala Status</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.kafala_status || '—'"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Branch</p>
                                        <p class="mt-0.5 text-sm text-slate-900" x-text="emp.branch?.name || emp.branch_name || '—'"></p>
                                    </div>
                                </div>
                            </div>

                            {{-- Salary --}}
                            <div>
                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Salary Components</h4>
                                <div class="grid gap-4 sm:grid-cols-3">
                                    <div>
                                        <p class="text-xs text-slate-500">Basic</p>
                                        <p class="mt-0.5 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.basic).toLocaleString()"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">House Rent</p>
                                        <p class="mt-0.5 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.house_rent).toLocaleString()"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Food</p>
                                        <p class="mt-0.5 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.food).toLocaleString()"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Commission</p>
                                        <p class="mt-0.5 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.commission).toLocaleString()"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Per Day Payment</p>
                                        <p class="mt-0.5 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.per_day_payment).toLocaleString()"></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500">Company Investment</p>
                                        <div x-show="!editingInvestment" class="flex items-center gap-2 mt-0.5">
                                            <p class="text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(emp.company_investment).toLocaleString()"></p>
                                            <button @click="editInvestment = emp.company_investment; editingInvestment = true" type="button" class="text-xs text-amber-600 hover:text-amber-700 font-medium">Edit</button>
                                        </div>
                                        <div x-show="editingInvestment" class="flex items-center gap-2 mt-0.5">
                                            <input type="number" step="0.01" min="0" x-model="editInvestment"
                                                   class="w-32 rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                            <button @click="saveCompanyInvestment()" :disabled="investmentSaving"
                                                    class="rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-amber-700 transition-colors">
                                                <span x-show="!investmentSaving">Save</span>
                                                <span x-show="investmentSaving">...</span>
                                            </button>
                                            <button @click="editingInvestment = false" type="button" class="text-xs text-slate-400 hover:text-slate-600">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Legal Documents --}}
                            <div x-show="emp.legal_documents && emp.legal_documents.length">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Legal Documents</h4>
                                    <button @click="downloadAllDocs()"
                                            class="inline-flex items-center gap-1.5 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-700 hover:bg-amber-100 transition-colors">
                                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                        Download All PDF
                                    </button>
                                </div>
                                <div class="space-y-2">
                                    <template x-for="doc in emp.legal_documents" :key="doc.id">
                                        <div class="flex items-center gap-3 rounded-xl bg-slate-50 px-4 py-3">
                                            <svg class="h-5 w-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-medium text-slate-900 truncate" x-text="doc.title"></p>
                                                <p class="text-xs text-slate-500" x-text="doc.file_name"></p>
                                            </div>
                                            <button @click="downloadDoc(doc.id)"
                                                    class="shrink-0 rounded-lg bg-white border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-colors">
                                                PDF
                                            </button>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            {{-- Promotion History --}}
                            <div x-show="emp.promotion_histories && emp.promotion_histories.length">
                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Promotion History</h4>
                                <div class="space-y-2">
                                    <template x-for="ph in emp.promotion_histories" :key="ph.id">
                                        <div class="flex items-center gap-3 rounded-xl bg-amber-50 px-4 py-3">
                                            <svg class="h-5 w-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-medium text-slate-900" x-text="ph.title || '—'"></p>
                                                <p class="text-xs text-slate-500" x-text="ph.year || '—'"></p>
                                                <p class="text-xs font-medium text-amber-700" x-text="'SAR ' + parseFloat(ph.salary || 0).toLocaleString()"></p>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <div class="px-8 py-4 bg-slate-50 border-t border-slate-100 flex items-center gap-4">
                            <button @click="startEdit()" class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg">
                                Edit Employee
                            </button>
                            <button @click="confirmDelete = true" class="rounded-xl border border-red-200 px-5 py-2.5 text-sm font-semibold text-red-600 transition-all hover:bg-red-50">
                                Delete
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Edit Mode --}}
                <div x-show="editing">
                    <div class="mb-4">
                        <a @click="cancelEdit()" class="text-sm font-medium text-slate-500 hover:text-slate-700 cursor-pointer transition-colors">&larr; Back to view</a>
                    </div>
                    <form @submit.prevent="update" class="space-y-8">
                        {{-- Personal --}}
                        <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                            <h3 class="text-lg font-semibold text-slate-900 mb-6">Personal Information</h3>
                            <div class="grid gap-6 sm:grid-cols-2">
                                <div class="sm:col-span-2">
                                    <label class="block text-sm font-medium text-slate-700">Full Name</label>
                                    <input type="text" x-model="editForm.name" required
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Email</label>
                                    <input type="email" x-model="editForm.email"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Contact</label>
                                    <input type="text" x-model="editForm.contact_number"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Joining Date</label>
                                    <input type="date" x-model="editForm.joining_date"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Photo</label>
                                    <input type="file" accept="image/*" @change="editForm.photo = $event.target.files[0]"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-amber-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-amber-700 hover:file:bg-amber-100">
                                </div>
                            </div>
                        </div>

                        {{-- Work --}}
                        <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                            <h3 class="text-lg font-semibold text-slate-900 mb-6">Work Information</h3>
                            <div class="grid gap-6 sm:grid-cols-2">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Designation</label>
                                    <input type="text" x-model="editForm.designation"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Department</label>
                                    <input type="text" x-model="editForm.department"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Kafala Status</label>
                                    <select x-model="editForm.kafala_status"
                                            class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                        <option value="Under Kafala">Under Kafala</option>
                                        <option value="Outside Kafala">Outside Kafala</option>
                                        <option value="Saudi Employee">Saudi Employee</option>
                                        <option value="Under Sponsorship">Under Sponsorship</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Branch</label>
                                    <select x-model="editForm.branch_id"
                                            class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                        <option value="">Select branch</option>
                                        <template x-for="b in branches" :key="b.id">
                                            <option :value="b.id" x-text="b.name"></option>
                                        </template>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Status</label>
                                    <select x-model="editForm.status"
                                            class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Salary --}}
                        <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                            <h3 class="text-lg font-semibold text-slate-900 mb-6">Salary Components</h3>
                            <div class="grid gap-6 sm:grid-cols-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Basic</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.basic"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">House Rent</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.house_rent"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Food</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.food"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Commission</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.commission"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Per Day Payment</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.per_day_payment"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Company Investment</label>
                                    <input type="number" step="0.01" min="0" x-model="editForm.company_investment"
                                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                </div>
                            </div>
                        </div>

                        {{-- Promotions --}}
                        <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                            <h3 class="text-lg font-semibold text-slate-900 mb-4">Promotion History</h3>
                            <div class="space-y-2 mb-4" x-show="emp.promotion_histories && emp.promotion_histories.length">
                                <template x-for="ph in emp.promotion_histories" :key="ph.id">
                                    <div class="flex items-center gap-3 rounded-xl bg-amber-50 px-4 py-3">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-slate-900" x-text="ph.title"></p>
                                            <p class="text-xs text-slate-500" x-text="ph.year"></p>
                                            <p class="text-xs font-medium text-amber-700" x-text="'SAR ' + parseFloat(ph.salary || 0).toLocaleString()"></p>
                                        </div>
                                        <button @click="deletePromotion(ph.id)" type="button" class="text-red-500 hover:text-red-700 transition-colors">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="text" x-model="newPromotion.title" placeholder="Title"
                                       class="block w-48 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                <input type="number" x-model="newPromotion.year" placeholder="Year"
                                       class="block w-28 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                <input type="number" step="0.01" x-model="newPromotion.salary" placeholder="Salary"
                                       class="block w-32 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                <button @click="addPromotion()" type="button"
                                        class="rounded-xl bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-amber-700">Add</button>
                            </div>
                        </div>

                        {{-- Legal Documents --}}
                        <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                            <h3 class="text-lg font-semibold text-slate-900 mb-4">Legal Documents</h3>
                            <div class="space-y-2 mb-4">
                                <template x-for="(doc, idx) in emp.legal_documents" :key="doc.id">
                                    <div class="flex items-center gap-3 rounded-xl bg-slate-50 px-4 py-3">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-slate-900 truncate" x-text="doc.title"></p>
                                            <p class="text-xs text-slate-500" x-text="doc.file_name"></p>
                                        </div>
                                        <button @click="removeDoc(doc, idx)" type="button" class="text-red-500 hover:text-red-700 transition-colors">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </div>
                                </template>
                                <template x-for="(doc, idx) in pendingDocs" :key="'pending-'+idx">
                                    <div class="flex items-center gap-3 rounded-xl bg-amber-50/50 px-4 py-3">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-slate-900 truncate" x-text="doc.title || 'Untitled'"></p>
                                        </div>
                                        <button @click="removeDoc(doc, idx)" type="button" class="text-red-500 hover:text-red-700 transition-colors">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button @click="addDoc()" type="button"
                                    class="rounded-xl border-2 border-dashed border-slate-200 px-4 py-2 text-sm font-medium text-slate-500 transition-colors hover:border-amber-400 hover:text-amber-600 w-full">
                                + Add Document
                            </button>
                            <template x-for="(doc, idx) in pendingDocs" :key="'form-'+idx">
                                <div class="mt-3 flex items-center gap-3">
                                    <input type="text" x-model="doc.title" placeholder="Document title"
                                           class="block w-48 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                                    <input type="file" @change="doc.file = $event.target.files[0]"
                                           class="block w-48 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-amber-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-amber-700 hover:file:bg-amber-100">
                                </div>
                            </template>
                        </div>

                        <div class="flex items-center gap-4 pt-2">
                            <button type="submit" :disabled="saving"
                                    :class="saving ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200'"
                                    class="rounded-2xl bg-gradient-to-r from-slate-950 via-slate-900 to-amber-700 px-6 py-3 text-sm font-semibold text-white transition-all">
                                <span x-show="!saving">Save Changes</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                            <button @click="cancelEdit()" type="button" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</button>
                        </div>
                    </form>
                </div>

                {{-- Delete Modal --}}
                <div x-show="confirmDelete" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="confirmDelete = false">
                    <div class="rounded-2xl bg-white p-8 shadow-2xl max-w-md w-full mx-4">
                        <h3 class="text-lg font-semibold text-slate-900">Delete Employee?</h3>
                        <p class="mt-2 text-sm text-slate-500">Are you sure you want to delete <strong x-text="emp.name"></strong>? This action cannot be undone.</p>
                        <div class="mt-6 flex items-center gap-4">
                            <button @click="destroy()" :disabled="deleting"
                                    class="rounded-xl bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-red-700">
                                <span x-show="!deleting">Delete</span>
                                <span x-show="deleting">Deleting...</span>
                            </button>
                            <button @click="confirmDelete = false" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection