@extends('layouts.sidebar')
@section('title', 'Leave Request Form')
@section('content')

    <div class="max-w-4xl mx-auto bg-white p-10 rounded shadow border border-gray-300">
        <h2 class="text-3xl font-semibold text-gray-900 text-center mb-6">Leave Request Form</h2>

        <form action="{{ route('leaves.update', $leave->id) }}" method="POST">
            @csrf
            @method('PUT')

            <!-- Employee Name -->
            <div class="mb-6">
                <label for="employee_id" class="block text-gray-700 text-lg font-semibold">Employee Name:</label>
                <select name="employee_id" id="employee_id" class="w-full border-b border-gray-700 px-2 py-1" required>
                    <option value="" disabled>Select Employee</option>
                    @foreach ($employees as $employee)
                        <option value="{{ $employee->id }}" {{ $leave->employee_id == $employee->id ? 'selected' : '' }}>
                            {{ $employee->last_name }}, {{ $employee->first_name }}
                            {{ $employee->middle_name ? substr($employee->middle_name, 0, 1) . '.' : '' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Leave Type -->
            <div class="mb-6">
                <label for="leave_type" class="block text-gray-700 text-lg font-semibold">Type of Leave:</label>
                <select name="leave_type" id="leave_type" class="w-full border-b border-gray-700 px-2 py-1" required>
                    <option value="Sick Leave" {{ $leave->leave_type == 'Sick Leave' ? 'selected' : '' }}>Sick Leave
                    </option>
                    <option value="Vacation Leave" {{ $leave->leave_type == 'Vacation Leave' ? 'selected' : '' }}>Vacation
                        Leave</option>
                    <option value="Emergency Leave" {{ $leave->leave_type == 'Emergency Leave' ? 'selected' : '' }}>
                        Emergency Leave</option>
                    <option value="Maternity/Paternity Leave"
                        {{ $leave->leave_type == 'Maternity/Paternity Leave' ? 'selected' : '' }}>Maternity/Paternity Leave
                    </option>
                    <option value="Other" {{ $leave->leave_type == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>

            <!-- Leave Duration -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <label for="start_date" class="block text-gray-700 text-lg font-semibold">Start Date:</label>
                    <input type="date" name="start_date" id="start_date" value="{{ $leave->start_date }}"
                        class="w-full border-b border-gray-700 px-2 py-1" required>
                </div>
                <div>
                    <label for="end_date" class="block text-gray-700 text-lg font-semibold">End Date:</label>
                    <input type="date" name="end_date" id="end_date" value="{{ $leave->end_date }}"
                        class="w-full border-b border-gray-700 px-2 py-1" required>
                </div>
            </div>

            <!-- Total Days -->
            <div class="mb-6">
                <label class="block text-gray-700 text-lg font-semibold">Total Days:</label>
                <input type="number" name="days" id="days" value="{{ $leave->days }}"
                    class="w-full border-b border-gray-700 px-2 py-1" readonly required>
            </div>

            <!-- Reason for Leave -->
            <div class="mb-6">
                <label for="reason" class="block text-gray-700 text-lg font-semibold">Reason for Leave:</label>
                <textarea name="reason" id="reason" rows="4" class="w-full border-b border-gray-700 px-2 py-1" required>{{ $leave->reason }}</textarea>
            </div>

            <!-- Paid Leave Checkbox -->
            <div class="mb-6">
                <label class="block text-gray-700 text-lg font-semibold">Paid Leave:</label>
                <input type="checkbox" name="paid" value="1" class="form-checkbox text-blue-600"
                    {{ $leave->paid ? 'checked' : '' }}>
                <span class="ml-2 text-gray-700">This is a paid leave</span>
            </div>

            <!-- Signature Section -->
            <div class="grid grid-cols-2 gap-10 mt-8">
                <div class="text-center">
                    <p class="border-t border-gray-700 w-full py-1 font-semibold">Employee Signature</p>
                </div>
                <div class="text-center">
                    <p class="border-t border-gray-700 w-full py-1 font-semibold">Manager's Approval</p>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="mt-10 text-center">
                <button type="submit" class="bg-blue-600 text-white text-lg px-6 py-2 rounded hover:bg-blue-700">Update
                    Leave</button>
            </div>
        </form>
    </div>

    <!-- Select2 & Auto Calculation Script -->
    <script>
        $(document).ready(function() {
            $('#employee_id').select2({
                placeholder: "Select Employee",
                allowClear: true,
                width: '100%'
            });

            // Auto-calculate days between dates
            $('#start_date, #end_date').on('change', function() {
                let startDate = new Date($('#start_date').val());
                let endDate = new Date($('#end_date').val());

                if (startDate && endDate && endDate >= startDate) {
                    let difference = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
                    $('#days').val(difference);
                } else {
                    $('#days').val('');
                }
            });
        });
    </script>
@endsection