@extends('layouts.app')

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

@section('content')
<div class="mb-4">
    <a href="{{ route('leaves.index') }}" class="text-secondary text-decoration-none small">&larr; Back to Leaves</a>
    <h4 class="fw-bold mt-1">Apply for Leave</h4>
    <p class="text-secondary small">Submit a paid or unpaid leave application for departmental and HR review</p>
</div>

<div class="row g-4">
    <div class="col-12 col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h6 class="mb-0 fw-bold"><i class="bi bi-calendar-plus me-2 text-primary"></i> Leave Application Form</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('leaves.store') }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Leave Type *</label>
                        <select name="leave_type_id" class="form-select form-select-sm" required>
                            <option value="">Select Leave Category</option>
                            @foreach($leaveTypes as $type)
                                @php $rem = $balances[$type->id] ?? 0; @endphp
                                <option value="{{ $type->id }}" {{ old('leave_type_id') == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }} (Available: {{ $rem }} days)
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Start Date *</label>
                            <input type="date" name="start_date" id="start_date" class="form-control form-control-sm" value="{{ old('start_date', date('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">End Date *</label>
                            <input type="date" name="end_date" id="end_date" class="form-control form-control-sm" value="{{ old('end_date', date('Y-m-d')) }}" required>
                        </div>
                    </div>

                    <div class="mb-3 p-3 bg-light rounded-3 border">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="is_half_day" value="1" id="is_half_day" onchange="toggleHalfDay()">
                            <label class="form-check-label small fw-semibold" for="is_half_day">Half-Day Leave (0.5 Day)</label>
                        </div>
                        <div id="half_day_options" style="display: none;">
                            <label class="form-label text-xs fw-semibold">Select Session:</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="half_day_type" id="first_half" value="first_half" checked>
                                    <label class="form-check-label small" for="first_half">First Half (09:00 - 13:30)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="half_day_type" id="second_half" value="second_half">
                                    <label class="form-check-label small" for="second_half">Second Half (14:00 - 18:00)</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label small fw-semibold">Reason for Leave *</label>
                        <textarea name="reason" class="form-control form-control-sm" rows="3" required placeholder="State clear operational reason or family emergency...">{{ old('reason') }}</textarea>
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('leaves.index') }}" class="btn btn-sm btn-light">Cancel</a>
                        <button type="submit" class="btn btn-sm btn-primary px-4 fw-semibold">
                            <i class="bi bi-send-check me-1"></i> Submit Leave Request
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Leave Quota Rules & Notes -->
    <div class="col-12 col-lg-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h6 class="mb-0 fw-bold"><i class="bi bi-info-circle me-2 text-primary"></i> Leave Entitlements</h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled small mb-0">
                    @foreach($leaveTypes as $type)
                        <li class="mb-3 pb-2 border-bottom">
                            <div class="fw-semibold text-dark">{{ $type->name }}</div>
                            <div class="text-secondary small">{{ $type->description ?? 'Standard corporate allowance.' }}</div>
                            <span class="badge bg-light text-secondary border mt-1">Quota: {{ $type->days_per_year }} Days/Year</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
function toggleHalfDay() {
    const isChecked = document.getElementById('is_half_day').checked;
    document.getElementById('half_day_options').style.display = isChecked ? 'block' : 'none';
    if (isChecked) {
        document.getElementById('end_date').value = document.getElementById('start_date').value;
    }
}
</script>
@endsection