@extends('teacher.teacher_dashboard')

@section('admin')
<!--**********************************
    Content body start
***********************************-->
<div class="content-body default-height">
    <div class="container-fluid">

        {{-- Breadcrumb --}}
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('teacher.applications.index') }}">Leave Applications</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Apply for Leave</a></li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-8 offset-xl-2">

                {{-- Application Form Card --}}
                <div class="card">
                    <div class="card-header bg-primary">
                        <h4 class="card-title text-white mb-0">
                            <i class="fas fa-file-alt me-2"></i>Apply for Leave
                        </h4>
                    </div>
                    <div class="card-body">
                        
                        {{-- Info Alert --}}
                        <div class="alert alert-info alert-dismissible fade show">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Note:</strong> Please fill out all required fields. Your application will be reviewed by the admin.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>

                        <form action="{{ route('teacher.applications.store') }}" method="POST">
                            @csrf

                            {{-- Leave Type --}}
                            <div class="mb-4">
                                <label class="form-label required">Leave Type <span class="text-danger">*</span></label>
                                <select name="leave_type" 
                                        class="form-select @error('leave_type') is-invalid @enderror" 
                                        required>
                                    <option value="">Select Leave Type</option>
                                    <option value="sick" {{ old('leave_type') == 'sick' ? 'selected' : '' }}>Sick Leave</option>
                                    <option value="casual" {{ old('leave_type') == 'casual' ? 'selected' : '' }}>Casual Leave</option>
                                    <option value="annual" {{ old('leave_type') == 'annual' ? 'selected' : '' }}>Annual Leave</option>
                                    <option value="emergency" {{ old('leave_type') == 'emergency' ? 'selected' : '' }}>Emergency Leave</option>
                                    <option value="maternity" {{ old('leave_type') == 'maternity' ? 'selected' : '' }}>Maternity Leave</option>
                                    <option value="paternity" {{ old('leave_type') == 'paternity' ? 'selected' : '' }}>Paternity Leave</option>
                                    <option value="duty" {{ old('leave_type') == 'duty' ? 'selected' : '' }}>Duty Leave</option>
                                    <option value="unpaid" {{ old('leave_type') == 'unpaid' ? 'selected' : '' }}>Unpaid Leave</option>
                                    <option value="other" {{ old('leave_type') == 'other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('leave_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Date Range --}}
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label class="form-label required">From Date <span class="text-danger">*</span></label>
                                    <input type="date" 
                                           name="from_date" 
                                           class="form-control @error('from_date') is-invalid @enderror" 
                                           value="{{ old('from_date') }}"
                                           min="{{ date('Y-m-d') }}"
                                           id="from_date"
                                           required>
                                    @error('from_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label required">To Date <span class="text-danger">*</span></label>
                                    <input type="date" 
                                           name="to_date" 
                                           class="form-control @error('to_date') is-invalid @enderror" 
                                           value="{{ old('to_date') }}"
                                           min="{{ date('Y-m-d') }}"
                                           id="to_date"
                                           required>
                                    @error('to_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Days Calculation Display --}}
                            <div class="mb-4">
                                <div class="alert alert-secondary d-flex align-items-center" id="days_display" style="display: none !important;">
                                    <i class="fas fa-calendar-days me-2"></i>
                                    <span>Total Leave Days: <strong id="total_days">0</strong> day(s)</span>
                                </div>
                            </div>

                            {{-- Reason --}}
                            <div class="mb-4">
                                <label class="form-label required">Reason for Leave <span class="text-danger">*</span></label>
                                <textarea name="reason" 
                                          class="form-control @error('reason') is-invalid @enderror" 
                                          rows="5" 
                                          placeholder="Please provide a detailed reason for your leave application (minimum 10 characters)"
                                          required>{{ old('reason') }}</textarea>
                                <small class="form-text text-muted">
                                    <span id="char_count">0</span>/1000 characters (minimum 10 characters required)
                                </small>
                                @error('reason')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Teacher Information (Read Only) --}}
                            <div class="card bg-light mb-4">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">Applicant Information</h5>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Name:</strong> {{ $teacher->name }}</p>
                                            <p class="mb-2"><strong>Email:</strong> {{ $teacher->email }}</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Phone:</strong> {{ $teacher->phone }}</p>
                                            <p class="mb-2"><strong>Teacher ID:</strong> {{ $teacher->teacherid ?? 'N/A' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Action Buttons --}}
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('teacher.applications.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-primary" id="submit_btn">
                                    <i class="fas fa-paper-plane me-1"></i> Submit Application
                                </button>
                            </div>

                        </form>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<!--**********************************
    Content body end
***********************************-->
@endsection

@section('customjs')
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Character count for reason textarea
    const reasonTextarea = document.querySelector('textarea[name="reason"]');
    const charCountSpan = document.getElementById('char_count');
    
    if (reasonTextarea) {
        reasonTextarea.addEventListener('input', function() {
            const count = this.value.length;
            charCountSpan.textContent = count;
            
            if (count < 10) {
                charCountSpan.classList.add('text-danger');
                charCountSpan.classList.remove('text-success');
            } else {
                charCountSpan.classList.add('text-success');
                charCountSpan.classList.remove('text-danger');
            }
        });
        
        // Initial count
        charCountSpan.textContent = reasonTextarea.value.length;
    }

    // Calculate days between dates
    const fromDateInput = document.getElementById('from_date');
    const toDateInput = document.getElementById('to_date');
    const daysDisplay = document.getElementById('days_display');
    const totalDaysSpan = document.getElementById('total_days');

    function calculateDays() {
        const fromDate = new Date(fromDateInput.value);
        const toDate = new Date(toDateInput.value);

        if (fromDateInput.value && toDateInput.value && fromDate <= toDate) {
            const diffTime = Math.abs(toDate - fromDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
            
            totalDaysSpan.textContent = diffDays;
            daysDisplay.style.display = 'flex';
        } else {
            daysDisplay.style.display = 'none';
        }
    }

    if (fromDateInput && toDateInput) {
        fromDateInput.addEventListener('change', function() {
            // Update minimum date for to_date
            toDateInput.min = this.value;
            calculateDays();
        });

        toDateInput.addEventListener('change', calculateDays);

        // Initial calculation if dates are already set
        if (fromDateInput.value && toDateInput.value) {
            calculateDays();
        }
    }

    // Form validation before submit
    const form = document.querySelector('form');
    const submitBtn = document.getElementById('submit_btn');

    if (form && submitBtn) {
        form.addEventListener('submit', function(e) {
            const reason = reasonTextarea.value.trim();
            
            if (reason.length < 10) {
                e.preventDefault();
                alert('Please provide at least 10 characters for the reason.');
                reasonTextarea.focus();
                return false;
            }

            // Disable submit button to prevent double submission
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Submitting...';
        });
    }

});
</script>
@endsection