@extends('layouts.app')

@section('title', 'Apply for Leave')
@section('header', 'Apply for Leave')

@section('content')
    <div class="card table-wrapper">
        <div class="card-body">
            <form method="POST" action="{{ route('leave-requests.store') }}">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="leave_type_id" class="form-label">Leave Type <span class="text-danger">*</span></label>
                        <select id="leave_type_id" name="leave_type_id" class="form-select @error('leave_type_id') is-invalid @enderror" required>
                            <option value="">Select…</option>
                            @foreach ($leaveTypes as $type)
                                @php $remaining = $balances->get($type->id)?->remaining ?? $type->days_allowed; @endphp
                                <option value="{{ $type->id }}" @selected(old('leave_type_id') == $type->id)>
                                    {{ $type->name }} — {{ rtrim(rtrim(number_format((float) $remaining, 1), '0'), '.') }} day(s) remaining
                                </option>
                            @endforeach
                        </select>
                        @error('leave_type_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                        <input type="date" id="start_date" name="start_date" value="{{ old('start_date') }}"
                            class="form-control @error('start_date') is-invalid @enderror" required>
                        @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                        <input type="date" id="end_date" name="end_date" value="{{ old('end_date') }}"
                            class="form-control @error('end_date') is-invalid @enderror" required>
                        @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-12">
                        <label for="reason" class="form-label">Reason <span class="text-danger">*</span></label>
                        <textarea id="reason" name="reason" rows="3"
                            class="form-control @error('reason') is-invalid @enderror" required>{{ old('reason') }}</textarea>
                        @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-send me-1"></i>Submit Request</button>
                    <a href="{{ route('leave-requests.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection