@extends('student.layouts.app')

@section('content')
<div class="flex flex-col h-[calc(100dvh-120px)] bg-gray-50">
    <!-- Header -->
    <div class="bg-white border-b border-gray-100 px-4 py-2 flex items-center gap-3 flex-shrink-0">
        <a href="{{ route('student.applications.index', ['slug' => session('student_school_slug')]) }}" class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-600 active:scale-95">
            <i class="fa-solid fa-arrow-left text-xs"></i>
        </a>
        <div>
            <h1 class="text-sm font-extrabold text-gray-800">New Application</h1>
            <p class="text-[10px] text-gray-500">Leave or Document Request</p>
        </div>
    </div>

    <!-- Error Display -->
    @if($errors->any())
    <div class="mx-3 mt-2 bg-red-50 border border-red-200 text-red-700 text-[10px] font-bold px-3 py-2 rounded-xl flex items-center gap-2">
        <i class="fa-solid fa-circle-exclamation"></i> {{ $errors->first() }}
    </div>
    @endif

    <!-- Scrollable Form -->
    <div class="flex-1 overflow-y-auto px-3 py-2">
        <form action="{{ route('student.applications.store', ['slug' => session('student_school_slug')]) }}" method="POST" enctype="multipart/form-data" id="applicationForm">
            @csrf
            
            <!-- Type -->
            <div class="mb-2">
                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Request Type</label>
                <div class="grid grid-cols-2 gap-2">
                    <label class="cursor-pointer">
                        <input type="radio" name="application_type" value="leave" class="peer sr-only" onchange="toggleFormFields()">
                        <div class="py-2 text-center rounded-xl border-2 border-gray-100 bg-white peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 transition-all active:scale-95">
                            <i class="fa-solid fa-calendar text-xs mb-0.5 block"></i>
                            <span class="text-[10px] font-bold">Leave</span>
                        </div>
                    </label>
                    <label class="cursor-pointer">
                        <input type="radio" name="application_type" value="document" class="peer sr-only" onchange="toggleFormFields()">
                        <div class="py-2 text-center rounded-xl border-2 border-gray-100 bg-white peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 transition-all active:scale-95">
                            <i class="fa-solid fa-file-lines text-xs mb-0.5 block"></i>
                            <span class="text-[10px] font-bold">Document</span>
                        </div>
                    </label>
                    <!--<label class="cursor-pointer">
                        <input type="radio" name="application_type" value="other" class="peer sr-only" onchange="toggleFormFields()">
                        <div class="py-2 text-center rounded-xl border-2 border-gray-100 bg-white peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 transition-all active:scale-95">
                            <i class="fa-solid fa-ellipsis text-xs mb-0.5 block"></i>
                            <span class="text-[10px] font-bold">Other</span>
                        </div>
                    </label>-->
                </div>
            </div>

            <!-- Subject -->
            <div class="mb-2">
                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Subject</label>
                <input type="text" name="subject" value="{{ old('subject') }}" placeholder="e.g., Sick leave" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-xs font-semibold text-gray-800" required>
            </div>

            <!-- LEAVE FIELDS -->
            <div id="leaveFields" class="hidden mb-2 p-2 bg-blue-50/50 rounded-xl border border-blue-100 space-y-2">
                               <!-- Days + Leave Type in one row -->
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Days</label>
                        <select name="leave_days" id="leaveDays" onchange="toggleDateFields()" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                            <option value="1">1 Day</option>
                            <option value="2">2 Days</option>
                            <option value="3">3 Days</option>
                            <option value="4">4 Days</option>
                            <option value="5">5 Days</option>
                            <option value="more">More</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Leave Type</label>
                        <select name="leave_type" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                            <option value="sick" {{ old('leave_type')=='sick'?'selected':'' }}>Sick Leave</option>
                            <option value="casual" {{ old('leave_type')=='casual'?'selected':'' }}>Casual Leave</option>
                            <option value="emergency" {{ old('leave_type')=='emergency'?'selected':'' }}>Emergency</option>
                            <option value="function" {{ old('leave_type')=='function'?'selected':'' }}>Function</option>
                            <option value="other" {{ old('leave_type')=='other'?'selected':'' }}>Other</option>
                        </select>
                    </div>
                </div>

                <!-- Single Date -->
                <div id="singleDateField">
                    <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Date</label>
                    <input type="date" name="leave_date" id="leaveDate" min="{{ date('Y-m-d') }}" value="{{ old('leave_date') }}" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                </div>

                <!-- Date Range -->
                <div id="rangeDateFields" class="hidden grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">From</label>
                        <input type="date" name="leave_from" id="leaveFrom" min="{{ date('Y-m-d') }}" value="{{ old('leave_from') }}" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">To</label>
                        <input type="date" name="leave_to" id="leaveTo" min="{{ date('Y-m-d') }}" value="{{ old('leave_to') }}" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                    </div>
                    <p id="dateError" class="col-span-2 hidden text-[10px] font-bold text-red-600 bg-red-50 border border-red-200 rounded-lg px-2 py-1">
                        <i class="fa-solid fa-circle-exclamation mr-1"></i>From Date must be before To Date.
                    </p>
                </div>
                
            </div>

            <!-- DOCUMENT FIELDS -->
            <div id="documentFields" class="hidden mb-2 p-2 bg-purple-50/50 rounded-xl border border-purple-100">
                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Document Type</label>
                <select name="document_type" class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white outline-none text-xs font-semibold text-gray-800 cursor-pointer">
                    <option value="aadhaar" {{ old('document_type')=='aadhaar'?'selected':'' }}>Aadhaar Card</option>
                    <option value="bonafide" {{ old('document_type')=='bonafide'?'selected':'' }}>Bonafide Certificate</option>
                    <option value="tc" {{ old('document_type')=='tc'?'selected':'' }}>Transfer Certificate (TC)</option>
                    <option value="character" {{ old('document_type')=='character'?'selected':'' }}>Character Certificate</option>
                    <option value="marksheet" {{ old('document_type')=='marksheet'?'selected':'' }}>Marksheet</option>
                    <option value="other" {{ old('document_type')=='other'?'selected':'' }}>Other</option>
                </select>
            </div>

            <!-- Description -->
            <div class="mb-2">
                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Reason</label>
                <textarea name="description" rows="2" placeholder="Please provide details..." class="w-full px-3 py-2 rounded-xl border border-gray-200 bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-xs font-semibold text-gray-800 resize-none" required>{{ old('description') }}</textarea>
            </div>

                    <!-- Attachment -->
        <div class="mb-2">
            <label class="block text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Attachment</label>
            <div class="relative">
                <input type="file" name="attachment" id="attachmentInput" accept=".jpg,.jpeg,.png,.pdf" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" onchange="showFileName(this)">
                <div class="flex items-center gap-2 p-2 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 active:border-emerald-400 transition-all">
                    <div class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center flex-shrink-0">
                        <i class="fa-solid fa-cloud-arrow-up text-xs"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-[11px] font-bold text-gray-700">Tap to upload file</p>
                        <!-- This will show the file name -->
                        <p id="fileNameDisplay" class="text-[10px] text-emerald-600 font-bold truncate hidden"></p>
                        <p id="fileHint" class="text-[9px] text-gray-500">JPG, PNG, or PDF (Max 10MB)</p>
                    </div>
                </div>
            </div>
        </div>
            
    <!-- Fixed Submit Button (Above Footer Nav) -->
    <div class="flex-shrink-0 bg-white border-t border-gray-100 p-3">
        <button type="submit" form="applicationForm" class="w-full bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-black py-3 rounded-xl shadow-lg shadow-emerald-500/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2 text-xs uppercase tracking-wide">
            <i class="fa-solid fa-paper-plane"></i> Submit Application
        </button>
    </div>
        </form>
    </div>

</div>

<script>
function toggleFormFields() {
    const type = document.querySelector('input[name="application_type"]:checked')?.value;
    const leaveFields = document.getElementById('leaveFields');
    const documentFields = document.getElementById('documentFields');

    if (!type) return;

    // Reset required
    document.querySelectorAll('#leaveFields input, #leaveFields select, #documentFields select').forEach(el => el.required = false);

    const attachmentInput = document.getElementById('attachmentInput');
const fileHint = document.getElementById('fileHint');

    if (type === 'leave') {
        leaveFields.classList.remove('hidden');
        documentFields.classList.add('hidden');
        document.querySelector('#leaveFields select[name="leave_type"]').required = true;
        document.querySelectorAll('#documentFields select, #documentFields input').forEach(el => el.disabled = true);
        document.querySelectorAll('#leaveFields select, #leaveFields input').forEach(el => el.disabled = false);
        // ✅ Attachment OPTIONAL for leave
        attachmentInput.required = false;
        if (fileHint) fileHint.textContent = 'JPG, PNG, or PDF (Optional for leave)';
        toggleDateFields();
    } else if (type === 'document') {
        leaveFields.classList.add('hidden');
        documentFields.classList.remove('hidden');
        document.querySelectorAll('#documentFields select').forEach(el => { el.required = true; el.disabled = false; });
        document.querySelectorAll('#leaveFields select, #leaveFields input').forEach(el => el.disabled = true);
        // ✅ Attachment REQUIRED for document
        attachmentInput.required = true;
        if (fileHint) fileHint.textContent = 'JPG, PNG, or PDF (Required)';
    } else {
        leaveFields.classList.add('hidden');
        documentFields.classList.add('hidden');
        document.querySelectorAll('#leaveFields select, #leaveFields input, #documentFields select, #documentFields input').forEach(el => el.disabled = true);
    }
}

function toggleDateFields() {
    const days = document.getElementById('leaveDays').value;
    const singleField = document.getElementById('singleDateField');
    const rangeFields = document.getElementById('rangeDateFields');
    const dateInput = document.getElementById('leaveDate');
    const fromInput = document.getElementById('leaveFrom');
    const toInput = document.getElementById('leaveTo');

    if (days === '1') {
        singleField.classList.remove('hidden');
        rangeFields.classList.add('hidden');
        rangeFields.classList.remove('grid');
        dateInput.required = true;
        fromInput.required = false;
        toInput.required = false;
    } else {
        singleField.classList.add('hidden');
        rangeFields.classList.remove('hidden');
        rangeFields.classList.add('grid');
        dateInput.required = false;
        fromInput.required = true;
        toInput.required = true;
    }
}

document.getElementById('applicationForm').addEventListener('submit', function(e) {
    const days = document.getElementById('leaveDays').value;
    const type = document.querySelector('input[name="application_type"]:checked')?.value;
    const errorEl = document.getElementById('dateError');

    if (type === 'leave' && days !== '1') {
        const from = document.getElementById('leaveFrom').value;
        const to = document.getElementById('leaveTo').value;
        if (from && to && from >= to) {
            e.preventDefault();
            errorEl.classList.remove('hidden');
            return;
        } else {
            errorEl.classList.add('hidden');
        }
    }
});

function showFileName(input) {
    const display = document.getElementById('fileNameDisplay');
    const hint = document.getElementById('fileHint');
    
    if (input.files && input.files[0]) {
        display.textContent = '📎 ' + input.files[0].name;
        display.classList.remove('hidden');
        hint.classList.add('hidden');
    } else {
        display.classList.add('hidden');
        hint.classList.remove('hidden');
    }
}
</script>
@endsection