@extends('layouts.admin')

@section('header')
<h2 class="font-semibold text-xl text-gray-800">Edit Leave</h2>
@endsection

@section('content')
<form action="{{ route('leaves.update', $leave) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium">Leave Type</label>
            <select name="leave_type" id="leave_type" class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required onchange="toggleReasonField()">
                <option value="">Select Leave Type</option>
                <option value="Annual" {{ $leave->leave_type === 'Annual' ? 'selected' : '' }}>Annual Leave</option>
                <option value="Sick Leave" {{ $leave->leave_type === 'Sick Leave' ? 'selected' : '' }}>Sick Leave</option>
                <option value="Unpaid Leave" {{ $leave->leave_type === 'Unpaid Leave' ? 'selected' : '' }}>Unpaid Leave</option>
                <option value="Maternity" {{ $leave->leave_type === 'Maternity' ? 'selected' : '' }}>Maternity Leave</option>
                <option value="Paternity" {{ $leave->leave_type === 'Paternity' ? 'selected' : '' }}>Paternity Leave</option>
                <option value="Compassionate" {{ $leave->leave_type === 'Compassionate' ? 'selected' : '' }}>Compassionate Leave</option>
                <option value="Others" {{ $leave->leave_type === 'Others' ? 'selected' : '' }}>Others (Please specify reason)</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium">Start Date</label>
            <input type="date" name="start_date" value="{{ $leave->start_date }}" class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required>
        </div>

        <div>
            <label class="block text-sm font-medium">End Date</label>
            <input type="date" name="end_date" value="{{ $leave->end_date }}" class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-medium">
                Reason
                <span id="reason_required" class="text-red-500" style="display:none;">*</span>
            </label>
            <textarea name="reason" id="reason" rows="3" class="mt-1 w-full border-gray-300 rounded-md shadow-sm">{{ $leave->reason }}</textarea>
            <p id="reason_note" class="text-xs text-red-500 mt-1" style="display:none;">Reason is required for "Others" leave type</p>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-medium">Supporting Document (PDF)</label>
            <p class="text-xs text-gray-500 mb-2">Upload a PDF file (e.g., Medical Certificate, MC) - Max 5MB</p>
            @if($leave->document_path)
                <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded">
                    <p class="text-sm text-gray-700">Current document:
                        <a href="{{ asset('storage/' . $leave->document_path) }}" target="_blank" class="text-blue-600 hover:underline">
                            📄 View Document
                        </a>
                    </p>
                </div>
            @endif
            <input type="file" name="document" accept=".pdf" class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
            <p class="text-xs text-gray-500 mt-1">Leave blank to keep current document</p>
            @error('document')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>
    </div>

    <div class="mt-6">
        <button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Update</button>
    </div>
</form>

<script>
function toggleReasonField() {
    const leaveType = document.getElementById('leave_type').value;
    const reasonField = document.getElementById('reason');
    const reasonRequired = document.getElementById('reason_required');
    const reasonNote = document.getElementById('reason_note');

    if (leaveType === 'Others') {
        reasonRequired.style.display = 'inline';
        reasonNote.style.display = 'block';
        reasonField.required = true;
    } else {
        reasonRequired.style.display = 'none';
        reasonNote.style.display = 'none';
        reasonField.required = false;
    }
}

// Check on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleReasonField();
});
</script>
@endsection