@extends('layouts.app')

@section('title', 'Initiate Exit')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('exit.index') }}">Exit Management</a>
        <span class="separator">/</span>
        <span class="current">Initiate Exit</span>
    </div>
@endsection

@section('content')
<div class="max-w-3xl animate-fade-up" x-data="exitForm()">

    <h1 class="font-display text-2xl font-semibold text-gray-900 mb-6">Initiate Exit Process</h1>

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('exit.store') }}">
                @csrf

                <div class="space-y-5">
                    {{-- Employee Selection --}}
                    <div>
                        <label class="form-label">Employee <span class="text-danger-500">*</span></label>
                        <select name="employee_id" class="form-select @error('employee_id') form-input-error @enderror" required x-model="selectedEmployee" @change="updateNoticePeriod()">
                            <option value="">Select employee...</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}" data-contract="{{ $emp->contract_type }}" {{ old('employee_id') == $emp->id ? 'selected' : '' }}>
                                    {{ $emp->employee_code }} — {{ $emp->first_name }} {{ $emp->last_name }} ({{ $emp->department?->name ?? 'No Dept' }})
                                </option>
                            @endforeach
                        </select>
                        @error('employee_id') <p class="form-error">{{ $message }}</p> @enderror
                        @if($employees->count() === 0)
                            <p class="text-xs text-warning-600 mt-1">No eligible employees found. Employees with active exit processes are excluded.</p>
                        @endif
                    </div>

                    {{-- Exit Type --}}
                    <div>
                        <label class="form-label">Exit Type <span class="text-danger-500">*</span></label>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($exitTypes as $key => $label)
                                <label class="flex items-center gap-2 p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary-600 transition-colors has-[:checked]:border-primary-600 has-[:checked]:bg-primary-50">
                                    <input type="radio" name="exit_type" value="{{ $key }}" {{ old('exit_type') == $key ? 'checked' : '' }} class="text-primary-600" required>
                                    <span class="text-sm font-medium text-gray-700">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('exit_type') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {{-- Initiated Date --}}
                        <div>
                            <label class="form-label">Initiated Date <span class="text-danger-500">*</span></label>
                            <input type="date" name="initiated_date" value="{{ old('initiated_date', now()->format('Y-m-d')) }}" class="form-input" required>
                            @error('initiated_date') <p class="form-error">{{ $message }}</p> @enderror
                        </div>

                        {{-- Notice Period --}}
                        <div>
                            <label class="form-label">Notice Period (Days) <span class="text-danger-500">*</span></label>
                            <input type="number" name="notice_period_days" x-model="noticePeriod" class="form-input" min="0" max="365" required>
                            @error('notice_period_days') <p class="form-error">{{ $message }}</p> @enderror
                        </div>

                        {{-- Last Working Date --}}
                        <div>
                            <label class="form-label">Last Working Date</label>
                            <input type="date" name="last_working_date" value="{{ old('last_working_date') }}" class="form-input">
                            <p class="text-xs text-gray-500 mt-1">Leave blank to auto-calculate from notice period</p>
                            @error('last_working_date') <p class="form-error">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Reason --}}
                    <div>
                        <label class="form-label">Exit Reason</label>
                        <textarea name="exit_reason" rows="3" class="form-input" placeholder="Reason for exit...">{{ old('exit_reason') }}</textarea>
                        @error('exit_reason') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    {{-- Exit Interview Notes --}}
                    <div>
                        <label class="form-label">Exit Interview Notes</label>
                        <textarea name="exit_interview_notes" rows="3" class="form-input" placeholder="Notes from exit interview...">{{ old('exit_interview_notes') }}</textarea>
                        @error('exit_interview_notes') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                    <a href="{{ route('exit.index') }}" class="btn-secondary">Cancel</a>
                    <button type="submit" class="btn-danger">Initiate Exit Process</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function exitForm() {
        const noticePeriods = @json($noticePeriods);
        return {
            selectedEmployee: '{{ old("employee_id", "") }}',
            noticePeriod: {{ old('notice_period_days', 30) }},
            updateNoticePeriod() {
                const select = document.querySelector('[name="employee_id"]');
                const option = select.options[select.selectedIndex];
                const contractType = option?.getAttribute('data-contract') || 'permanent';
                this.noticePeriod = noticePeriods[contractType] || 30;
            }
        };
    }
</script>
@endpush
@endsection