@extends('layouts.app')

@section('title', 'Submit Resignation')
@section('heading', 'Submit Resignation')

@section('content')
    <x-card class="max-w-3xl">
        @if(session('success'))
            <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">{{ session('error') }}</div>
        @endif

        @if($existing)
            <p class="text-sm text-slate-600">You already have a <strong>{{ $existing->status }}</strong> resignation submitted on {{ $existing->resignation_date?->format('d M Y') }}.</p>
            @if($existing->offboarding_id)
                <a href="{{ route('offboardings.show', $existing->offboarding_id) }}" class="mt-3 inline-block text-sm text-primary hover:underline">View offboarding progress</a>
            @endif
        @else
            <p class="mb-4 text-sm text-slate-600">Submit your resignation for manager and HR approval. Once approved, offboarding will start automatically.</p>
            <form action="{{ route('resignations.self.store') }}" method="post" class="space-y-6" novalidate data-resignation-form="self">
                @csrf
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Resignation date <span class="text-red-500">*</span></label>
                        <input type="date" name="resignation_date" value="{{ old('resignation_date', date('Y-m-d')) }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('resignation_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        <p data-js-error="resignation_date" class="mt-1 text-sm text-red-600 hidden"></p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Last working day</label>
                        <input type="date" name="last_working_date" value="{{ old('last_working_date') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('last_working_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        <p data-js-error="last_working_date" class="mt-1 text-sm text-red-600 hidden"></p>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-slate-700">Reason <span class="text-red-500">*</span></label>
                        <textarea name="reason" rows="4" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ old('reason') }}</textarea>
                        @error('reason')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        <p data-js-error="reason" class="mt-1 text-sm text-red-600 hidden"></p>
                    </div>
                </div>
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Submit resignation</button>
            </form>
        @endif
    </x-card>
@endsection

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/hr-lifecycle-form-validation.js') }}"></script>
@endpush