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

@section('content')
    <div x-data="addEmployeePage()" class="mx-auto max-w-3xl">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Add Employee</h1>
        <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>

        <form @submit.prevent="submit" class="space-y-8">
            {{-- Personal Info --}}
            <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 <span class="text-red-500">*</span></label>
                        <input type="text" x-model="form.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 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                               placeholder="Employee name">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Email</label>
                        <input type="email" x-model="form.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 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                               placeholder="email@example.com">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Contact Number</label>
                        <input type="text" x-model="form.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 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                               placeholder="Phone number">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Joining Date</label>
                        <input type="date" x-model="form.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="form.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 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                    </div>
                </div>
            </div>

            {{-- Work Info --}}
            <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="form.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 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                               placeholder="e.g. Staff">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Department</label>
                        <input type="text" x-model="form.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 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                               placeholder="e.g. Kitchen">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Kafala Status</label>
                        <select x-model="form.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="form.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="form.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="form.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="form.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="form.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="form.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="form.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="form.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>

            {{-- Legal Documents --}}
            <div class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-slate-900">Legal Documents</h3>
                    <button @click="addDoc()" type="button" class="rounded-xl bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-all hover:bg-slate-200">
                        + Add Document
                    </button>
                </div>
                <template x-for="(doc, i) in form.legal_docs" :key="i">
                    <div class="flex items-start gap-4 mb-4 p-4 rounded-xl bg-slate-50">
                        <div class="flex-1">
                            <label class="block text-xs font-medium text-slate-500 mb-1">Title</label>
                            <input type="text" x-model="doc.title" placeholder="e.g. Passport Copy"
                                   class="block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                        </div>
                        <div class="flex-1">
                            <label class="block text-xs font-medium text-slate-500 mb-1">File</label>
                            <input type="file" @change="doc.file = $event.target.files[0]"
                                   class="block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-500 file:mr-3 file:rounded-lg file:border-0 file:bg-amber-50 file:px-3 file:py-1 file:text-xs file:font-semibold file:text-amber-700 hover:file:bg-amber-100">
                        </div>
                        <button @click="form.legal_docs.splice(i, 1)" type="button" class="mt-6 rounded-lg p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 transition-colors">
                            <svg class="h-5 w-5" 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>
                <p x-show="form.legal_docs.length === 0" class="text-sm text-slate-400 text-center py-4">No documents added yet.</p>
            </div>

            {{-- Submit --}}
            <div class="flex items-center gap-4">
                <button type="submit" :disabled="loading"
                        :class="loading ? '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="!loading">Create Employee</span>
                    <span x-show="loading">Creating...</span>
                </button>
                <a href="/admin/employees" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</a>
            </div>
        </form>
    </div>
@endsection