{{-- Status Change Modal --}}
<template x-if="showStatusModal">
    <div class="modal-backdrop" @click.self="showStatusModal = false">
        <div class="modal">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-900">Change Employee Status</h3>
            </div>
            <form method="POST" action="{{ route('employees.status', $employee) }}">
                @csrf
                <div class="modal-body space-y-4">
                    <p class="text-sm text-gray-600">Changing status for <strong>{{ $employee->full_name }}</strong></p>
                    <p class="text-xs text-gray-500">Current status: <span class="badge {{ $employee->status_badge_class }}"><span class="badge-dot"></span> {{ $employee->status_label }}</span></p>

                    <div>
                        <label class="form-label">New Status <span class="text-danger-500">*</span></label>
                        <select name="status" class="form-select" required>
                            <option value="">Select Status</option>
                            <option value="active">Active</option>
                            <option value="on_probation">On Probation</option>
                            <option value="on_notice">On Notice</option>
                            <option value="suspended">Suspended</option>
                            <option value="terminated">Terminated</option>
                            <option value="resigned">Resigned</option>
                            <option value="absconding">Absconding</option>
                        </select>
                    </div>

                    <div>
                        <label class="form-label">Reason <span class="text-danger-500">*</span></label>
                        <textarea name="reason" rows="3" class="form-input" required placeholder="Provide a reason for the status change..."></textarea>
                    </div>

                    <div>
                        <label class="form-label">Effective Date</label>
                        <input type="date" name="effective_date" value="{{ date('Y-m-d') }}" class="form-input">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="showStatusModal = false" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</template>