{{-- Leave Types Management Section --}}
<div class="border-t border-gray-100" x-data="leaveTypes()">
    <div class="card-body">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="font-display text-lg font-semibold text-gray-800">Leave Types</h3>
                <p class="text-sm text-gray-500 mt-0.5">Configure global leave type templates for all companies</p>
            </div>
            <button type="button" @click="openAdd()" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Add Leave Type
            </button>
        </div>

        @php
            $leaveTypes = \Modules\Leave\Models\LeaveType::whereNull('company_id')->orderBy('sort_order')->get();
        @endphp

        @if($leaveTypes->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-16 h-16 mx-auto text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <p class="empty-state-title">No Leave Types</p>
                <p class="empty-state-text">Add leave types to configure entitlements for employees</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Code</th>
                            <th class="text-center">Days/Year</th>
                            <th class="text-center">Paid</th>
                            <th class="text-center">Carry Forward</th>
                            <th class="text-center">Document</th>
                            <th class="text-center">Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($leaveTypes as $type)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{ $type->color ?? '#64748B' }}"></div>
                                        <span class="font-medium text-gray-800">{{ $type->name }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="inline-flex px-2 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-600">{{ $type->code }}</span>
                                </td>
                                <td class="text-center font-medium">{{ number_format($type->days_per_year, 1) }}</td>
                                <td class="text-center">
                                    @if($type->is_paid)
                                        <span class="badge-active">Paid</span>
                                    @else
                                        <span class="badge-inactive">Unpaid</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($type->is_carry_forward)
                                        <span class="text-sm text-success-600">Max {{ number_format($type->max_carry_forward_days, 0) }}d</span>
                                    @else
                                        <span class="text-xs text-gray-400">No</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($type->requires_document)
                                        <span class="text-sm text-warning-600">After {{ $type->document_required_after_days }}d</span>
                                    @else
                                        <span class="text-xs text-gray-400">No</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($type->is_active)
                                        <span class="badge-active"><span class="badge-dot"></span> Active</span>
                                    @else
                                        <span class="badge-inactive"><span class="badge-dot"></span> Inactive</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button" @click="openEdit({{ $type->toJson() }})" class="btn-icon" title="Edit">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                        </button>
                                        <button type="button" @click="confirmDelete({{ $type->id }}, '{{ addslashes($type->name) }}')" class="btn-icon text-danger-500 hover:text-danger-600" title="Delete">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Add / Edit Modal --}}
    <template x-teleport="body">
        <div x-show="showModal" x-cloak class="modal-backdrop" @click.self="showModal = false" x-transition.opacity>
            <div class="modal max-w-2xl" @click.stop x-show="showModal" x-transition>
                <div class="modal-header flex items-center justify-between">
                    <h3 class="font-display text-lg font-semibold text-gray-800" x-text="editId ? 'Edit Leave Type' : 'Add Leave Type'"></h3>
                    <button type="button" @click="showModal = false" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    </button>
                </div>
                <form :action="editId ? '{{ url('admin/leave-types') }}/' + editId : '{{ route('leave-types.store') }}'" method="POST">
                    @csrf
                    <template x-if="editId">
                        <input type="hidden" name="_method" value="PUT">
                    </template>
                    <div class="modal-body space-y-4 max-h-[70vh] overflow-y-auto">
                        {{-- Name & Code --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Name <span class="text-danger-500">*</span></label>
                                <input type="text" name="name" x-model="form.name" class="form-input" placeholder="e.g. Annual Leave" required>
                            </div>
                            <div>
                                <label class="form-label">Code <span class="text-danger-500">*</span></label>
                                <input type="text" name="code" x-model="form.code" class="form-input" placeholder="e.g. AL" maxlength="10" required>
                            </div>
                        </div>

                        {{-- Days, Color, Sort --}}
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="form-label">Days Per Year <span class="text-danger-500">*</span></label>
                                <input type="number" name="days_per_year" x-model="form.days_per_year" class="form-input" step="0.5" min="0" required>
                            </div>
                            <div>
                                <label class="form-label">Color</label>
                                <div class="flex items-center gap-2">
                                    <input type="color" name="color" x-model="form.color" class="w-10 h-10 rounded border border-gray-300 cursor-pointer p-0.5">
                                    <span class="text-sm font-mono text-gray-500" x-text="form.color"></span>
                                </div>
                            </div>
                            <div>
                                <label class="form-label">Sort Order</label>
                                <input type="number" name="sort_order" x-model="form.sort_order" class="form-input" min="0">
                            </div>
                        </div>

                        {{-- Toggles --}}
                        <div class="flex flex-wrap gap-6">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="hidden" name="is_paid" value="0">
                                <input type="checkbox" name="is_paid" value="1" :checked="form.is_paid" @change="form.is_paid = $el.checked" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm text-gray-700">Paid Leave</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" name="is_active" value="1" :checked="form.is_active" @change="form.is_active = $el.checked" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm text-gray-700">Active</span>
                            </label>
                        </div>

                        {{-- Carry Forward --}}
                        <div class="p-4 bg-gray-50 rounded-lg space-y-3">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="hidden" name="is_carry_forward" value="0">
                                <input type="checkbox" name="is_carry_forward" value="1" :checked="form.is_carry_forward" @change="form.is_carry_forward = $el.checked" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm font-medium text-gray-700">Allow Carry Forward</span>
                            </label>
                            <div x-show="form.is_carry_forward" x-collapse>
                                <label class="form-label">Max Carry Forward Days</label>
                                <input type="number" name="max_carry_forward_days" x-model="form.max_carry_forward_days" class="form-input w-40" step="0.5" min="0">
                            </div>
                        </div>

                        {{-- Document Requirement --}}
                        <div class="p-4 bg-gray-50 rounded-lg space-y-3">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="hidden" name="requires_document" value="0">
                                <input type="checkbox" name="requires_document" value="1" :checked="form.requires_document" @change="form.requires_document = $el.checked" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm font-medium text-gray-700">Require Supporting Document</span>
                            </label>
                            <div x-show="form.requires_document" x-collapse>
                                <label class="form-label">After How Many Days</label>
                                <input type="number" name="document_required_after_days" x-model="form.document_required_after_days" class="form-input w-40" min="0">
                                <p class="form-hint">Require document for leave longer than this many days</p>
                            </div>
                        </div>

                        {{-- Limits --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Min Days Advance Notice</label>
                                <input type="number" name="min_days_before_request" x-model="form.min_days_before_request" class="form-input" min="0">
                                <p class="form-hint">0 = no notice required</p>
                            </div>
                            <div>
                                <label class="form-label">Max Consecutive Days</label>
                                <input type="number" name="max_consecutive_days" x-model="form.max_consecutive_days" class="form-input" min="0">
                                <p class="form-hint">0 = no limit</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" @click="showModal = false" class="btn-secondary">Cancel</button>
                        <button type="submit" class="btn-primary" x-text="editId ? 'Update Leave Type' : 'Create Leave Type'"></button>
                    </div>
                </form>
            </div>
        </div>
    </template>

    {{-- Delete Confirmation Modal --}}
    <template x-teleport="body">
        <div x-show="showDelete" x-cloak class="modal-backdrop" @click.self="showDelete = false" x-transition.opacity>
            <div class="modal max-w-md" @click.stop x-show="showDelete" x-transition>
                <div class="modal-header">
                    <h3 class="font-display text-lg font-semibold text-gray-800">Delete Leave Type</h3>
                </div>
                <form :action="'{{ url('admin/leave-types') }}/' + deleteId" method="POST">
                    @csrf @method('DELETE')
                    <div class="modal-body">
                        <p class="text-gray-600">Are you sure you want to delete <strong x-text="deleteName" class="text-gray-800"></strong>? This cannot be undone.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" @click="showDelete = false" class="btn-secondary">Cancel</button>
                        <button type="submit" class="btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>

<script>
function leaveTypes() {
    return {
        showModal: false,
        showDelete: false,
        editId: null,
        deleteId: null,
        deleteName: '',
        form: {
            name: '', code: '', days_per_year: 0, is_paid: true,
            is_carry_forward: false, max_carry_forward_days: 0,
            requires_document: false, document_required_after_days: 0,
            min_days_before_request: 0, max_consecutive_days: 0,
            is_active: true, color: '#2563EB', sort_order: 0,
        },
        openAdd() {
            this.editId = null;
            this.form = {
                name: '', code: '', days_per_year: 0, is_paid: true,
                is_carry_forward: false, max_carry_forward_days: 0,
                requires_document: false, document_required_after_days: 0,
                min_days_before_request: 0, max_consecutive_days: 0,
                is_active: true, color: '#2563EB', sort_order: 0,
            };
            this.showModal = true;
        },
        openEdit(type) {
            this.editId = type.id;
            this.form = {
                name: type.name || '',
                code: type.code || '',
                days_per_year: type.days_per_year || 0,
                is_paid: !!type.is_paid,
                is_carry_forward: !!type.is_carry_forward,
                max_carry_forward_days: type.max_carry_forward_days || 0,
                requires_document: !!type.requires_document,
                document_required_after_days: type.document_required_after_days || 0,
                min_days_before_request: type.min_days_before_request || 0,
                max_consecutive_days: type.max_consecutive_days || 0,
                is_active: !!type.is_active,
                color: type.color || '#2563EB',
                sort_order: type.sort_order || 0,
            };
            this.showModal = true;
        },
        confirmDelete(id, name) {
            this.deleteId = id;
            this.deleteName = name;
            this.showDelete = true;
        }
    }
}
</script>