@extends('layouts.app')

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

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.leave-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.leave-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.leave-title-group { display: flex; align-items: center; gap: 14px; }
.leave-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.leave-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.leave-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.leave-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #414662;
    text-decoration: none; padding: 8px 14px;
    border: 1.5px solid #dde0ef; border-radius: 9px;
    background: #fff; transition: all .18s;
    font-family: 'Poppins', sans-serif;
}
.leave-back:hover { background: #414662; color: #fff; border-color: #414662; }

/* ── card ── */
.leave-card {
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.leave-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: leave-shimmer 3s linear infinite;
}
@keyframes leave-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.leave-body { padding: 2rem 2.2rem; }

/* section head */
.leave-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.4rem; margin-top: 1.8rem; }
.leave-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.leave-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.leave-hr { border: none; border-top: 1.5px solid #f0f1f7; margin: 1.8rem 0 0 0; }

/* form field */
.leave-field {
    display: flex; flex-direction: column; gap: 8px;
}
.leave-label {
    font-size: 12px; font-weight: 700; color: #414662;
    letter-spacing: .05em; text-transform: uppercase;
}
.leave-label-required { color: #dc2626; margin-left: 3px; }
.leave-label-optional { color: #9099b8; margin-left: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.leave-input,
.leave-select,
.leave-textarea {
    padding: 12px 14px;
    border: 1.5px solid #dde0ef;
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: #2d2f45;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.leave-input:disabled,
.leave-select:disabled,
.leave-textarea:disabled {
    background: #f7f8fc;
    color: #9099b8;
    cursor: not-allowed;
    border-color: #e5e7f0;
}
.leave-input:focus,
.leave-select:focus,
.leave-textarea:focus {
    outline: none;
    border-color: #f5a623;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}
.leave-textarea {
    resize: vertical;
    min-height: 100px;
}
.leave-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 38px;
}

/* grid */
.leave-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* info tile */
.leave-tile {
    position: relative;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 13px;
    padding: 15px 16px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.leave-tile:hover { border-color: #c0c5da; box-shadow: 0 4px 16px rgba(65,70,98,.07); }
.leave-tile-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 13px 13px 0 0; background: #414662;
    opacity: 0; transition: opacity .2s;
}
.leave-tile:hover .leave-tile-bar { opacity: 1; }
.leave-tile-gold .leave-tile-bar { background: #f5a623; opacity: 1; }
.leave-tlabel {
    font-size: 10px; font-weight: 700; color: #9099b8;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px;
}
.leave-tval { font-size: 15px; font-weight: 700; color: #2d2f45; }
.leave-tval-gold { font-size: 22px; font-weight: 700; color: #f5a623; }

/* buttons */
.leave-buttons {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
    justify-content: end;
}
.leave-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    border: none;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 160px;
}
.leave-btn-submit {
    background: #414662;
    color: #fff;
}
.leave-btn-submit:hover:not(:disabled) {
    background: #f5a623;
}
.leave-btn-submit:disabled {
    background: #9099b8 !important;
    opacity: 0.75;
    cursor: not-allowed !important;
}
.leave-btn-reset {
    background: #f7f8fc;
    border: 1.5px solid #dde0ef;
    color: #414662;
}
.leave-btn-reset:hover {
    background: #414662;
    color: #fff;
    border-color: #414662;
}
.leave-btn-reset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner-svg {
    animation: spin 0.8s linear infinite;
}

/* utility classes */
.hidden {
    display: none !important;
}

@media(max-width:640px){
    .leave-body { padding: 1.4rem 1rem; }
    .leave-grid { grid-template-columns: 1fr; }
    .leave-top-row { flex-direction: column; align-items: flex-start; }
}
.scr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.scr-btn-submit {
    border-color: #f5a623;
    background: #f5a623;
    color: #fff;
}

.scr-btn-submit:hover {
    background: #e89600;
    border-color: #e89600;
    box-shadow: 0 4px 12px rgba(245,166,35,.35);
}
.scr-btn-secondary {
    background: #f7f8fc;
    color: #414662;
    border: 1.5px solid #eceef6;
}

.scr-btn-secondary:hover {
    background: #eceef6;
    border-color: #c0c5da;
}
</style>

<div class="leave-wrap">

    {{-- ── Top row ── --}}
    <div class="leave-top-row">
        <div class="leave-title-group">
            <div class="leave-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div>
                <p class="leave-title">Apply for Leave</p>
                <p class="leave-sub">Submit a new leave request</p>
            </div>
        </div>
        <a href="{{ route('leave.history') }}" class="leave-back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
            Leave History
        </a>
    </div>

    {{-- ── Main card ── --}}
    <div class="leave-card">
        <div class="leave-bar"></div>
        <div class="leave-body">

            @if ($errors->any())
                <div style="margin-bottom: 1.5rem; padding: 1rem; background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px; color: #dc2626;">
                    <div style="font-weight: 700; margin-bottom: 0.5rem;">❌ Please fix the following errors:</div>
                    <ul style="margin: 0; padding-left: 1.5rem;">
                        @foreach ($errors->all() as $error)
                            <li style="font-size: 13px; margin-bottom: 4px;">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('leave.store') }}" method="POST" enctype="multipart/form-data" id="leaveForm">
                @csrf

                {{-- Section: Leave Details --}}
                <div class="leave-sh"><div class="leave-dot"></div><span class="leave-stitle">Leave Details</span></div>

                <div class="leave-grid">

                    {{-- Student Type --}}
                    <div class="leave-field">
                        <label for="student_type" class="leave-label">
                            Student Type
                            <span class="leave-label-required">*</span>
                        </label>
                        <select name="student_type" id="student_type" class="leave-select" required>
                            <option value="">Select Student Type</option>
                            <option value="scholar" {{ old('student_type') === 'scholar' ? 'selected' : '' }}>Day Scholar</option>
                            <option value="hostel" {{ old('student_type') === 'hostel' ? 'selected' : '' }}>Hostel</option>
                        </select>
                    </div>

                    {{-- Leave Type --}}
                    <div class="leave-field">
                        <label for="leave_type" class="leave-label">
                            Leave Type
                            <span class="leave-label-required">*</span>
                        </label>
                        <select name="leave_type" id="leave_type" class="leave-select" required>
                            <option value="">Select Leave Type</option>
                            <option value="CL" {{ old('leave_type') === 'CL' ? 'selected' : '' }}>Casual Leave (CL)</option>
                            <option value="Medical" {{ old('leave_type') === 'Medical' ? 'selected' : '' }}>Medical Leave</option>
                            <option value="Half" {{ old('leave_type') === 'Half' ? 'selected' : '' }}>Half Day Leave</option>
                            <option value="Full" {{ old('leave_type') === 'Full' ? 'selected' : '' }}>Full Day Leave</option>
                        </select>
                    </div>

                    {{-- Warden (Hostel only, auto-selected) --}}
                    <div class="leave-field hidden" id="warden_section">
                        <label for="warden_id" class="leave-label">
                            Hostel Warden
                            <span class="leave-label-required">*</span>
                        </label>
                        <select name="warden_id" id="warden_id" class="leave-select">
                            <option value="">-- Auto Selected --</option>
                            @foreach ($wardens as $warden)
                                <option value="{{ $warden->id }}" data-hostel="{{ $warden->hostel_type }}">
                                    {{ $warden->name }} ({{ ucfirst($warden->hostel_type ?? 'N/A') }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                </div>

                <hr class="leave-hr">

                {{-- Section: Dates --}}
                <div class="leave-sh"><div class="leave-dot"></div><span class="leave-stitle">Leave Dates</span></div>

                <div class="leave-grid" id="date_section">

                    {{-- From Date --}}
                    <div class="leave-field" id="from_date_section">
                        <label for="from_date" class="leave-label" id="from_date_label">
                            From Date
                            <span class="leave-label-required">*</span>
                        </label>
                        <input type="date" name="from_date" id="from_date"
                               class="leave-input"
                               value="{{ old('from_date') }}"
                               required>
                    </div>

                    {{-- To Date --}}
                    <div class="leave-field hidden" id="to_date_section">
                        <label for="to_date" class="leave-label">
                            To Date
                            <span class="leave-label-required">*</span>
                        </label>
                        <input type="date" name="to_date" id="to_date"
                               class="leave-input"
                               value="{{ old('to_date') }}">
                    </div>

                </div>

                {{-- Days Display --}}
                <div class="leave-tile leave-tile-gold" style="margin-top: 16px;">
                    <div class="leave-tlabel">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        Total Days
                    </div>
                    <div class="leave-tval-gold"><span id="number_of_days">0</span> day(s)</div>
                </div>

                <hr class="leave-hr">

                {{-- Section: Reason (OPTIONAL) --}}
                <div class="leave-sh"><div class="leave-dot"></div><span class="leave-stitle">Leave Reason</span></div>

                <div class="leave-field">
                    <label for="leave_reason" class="leave-label">
                        Description
                        <span class="leave-label-optional">(Optional)</span>
                    </label>
                    <textarea name="leave_reason" id="leave_reason"
                              class="leave-textarea"
                              placeholder="Please provide a brief reason for your leave request (optional)...">{{ old('leave_reason') }}</textarea>
                </div>

                <hr class="leave-hr">

                {{-- Section: Attachment (OPTIONAL) --}}
                <div class="leave-sh hidden" id="attachment_label">
                    <div class="leave-dot"></div><span class="leave-stitle">Document Attachment</span>
                </div>

                <div class="leave-field hidden" id="attachment_section">
                    <label for="attachment" class="leave-label">
                        Upload Document
                        <!-- <span class="leave-label-optional">(Optional)</span> -->
                    </label>
                    <input type="file" name="attachment" id="attachment"
                           class="leave-input"
                           accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
                           @error('attachment') aria-invalid="true" @enderror>
                    <p class="leave-hint" style="font-size: 11px; color: #9099b8; margin-top: 4px;">
                        Accepted formats: PDF, JPG, PNG, DOC, DOCX (Max 5MB)
                    </p>
                    @error('attachment')
                        <p style="color: #dc2626; font-size: 11px; margin-top: 4px;">{{ $message }}</p>
                    @enderror
                    <div id="attachment_success_msg" style="display: none; margin-top: 10px; padding: 10px 12px; background: #d1fae5; border: 1px solid #6ee7b7; border-radius: 8px; color: #065f46; font-size: 12px; font-weight: 600;">
                        ✓ Document attached successfully.
                    </div>
                </div>

                {{-- Buttons --}}
                <div class="leave-buttons">
                    <button type="reset" id="resetBtn" class="scr-btn scr-btn-secondary">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4v6h6M23 20v-6h-6"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg>
                        Reset
                    </button>
                    <button type="submit" id="submitBtn" class="scr-btn scr-btn-submit">
                        <span id="submitBtnContent">
                            <svg width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                style="display:inline-block; vertical-align:middle; margin-right:6px;">
                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                                <polyline points="17 21 17 13 7 13 7 21"/>
                                <polyline points="7 3 7 8 15 8"/>
                            </svg>
                            <span style="vertical-align:middle;">Submit Request</span>
                        </span>
                    </button>
                </div>

            </form>

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}

</div>{{-- /wrap --}}

<script>
// ============ Elements ============
const leaveForm = document.getElementById('leaveForm');
const leaveType = document.getElementById('leave_type');
const toDateSection = document.getElementById('to_date_section');
const attachmentSection = document.getElementById('attachment_section');
const attachmentLabel = document.getElementById('attachment_label');
const attachment = document.getElementById('attachment');

const fromDate = document.getElementById('from_date');
const toDate = document.getElementById('to_date');

const studentType = document.getElementById('student_type');
const wardenSection = document.getElementById('warden_section');
const wardenSelect = document.getElementById('warden_id');

const submitBtn = document.getElementById('submitBtn');
const submitBtnContent = document.getElementById('submitBtnContent');
const resetBtn = document.getElementById('resetBtn');

// Student data
const studentGender = '{{ $student->gender }}'; // male or female

// Flag to prevent double submission
let isSubmitting = false;

// ============ STUDENT TYPE CHANGE - Show/Hide Warden ============
studentType.addEventListener('change', function() {
    if (this.value === 'hostel') {
        wardenSection.classList.remove('hidden');
        autoSelectWarden();
    } else {
        wardenSection.classList.add('hidden');
        wardenSelect.value = '';
    }
});

// ============ AUTO-SELECT WARDEN based on gender ============
function autoSelectWarden() {
    const hostelType = studentGender === 'male' ? 'boys' : 'girls';
    const options = wardenSelect.querySelectorAll('option');
    for (let option of options) {
        if (option.dataset.hostel === hostelType) {
            wardenSelect.value = option.value;
            break;
        }
    }
}

// ============ CHANGE EVENT FOR LEAVE TYPE ============
leaveType.addEventListener('change', function () {
    const fromDateLabel = document.getElementById('from_date_label');
    if (this.value === 'Medical') {
        fromDateLabel.innerHTML = 'From Date<span class="leave-label-required">*</span>';
        toDateSection.classList.remove('hidden');
        attachmentLabel.classList.remove('hidden');
        attachmentSection.classList.remove('hidden');
        // Attachment is OPTIONAL — do not set required
    } else if (this.value === 'CL') {
        fromDateLabel.innerHTML = 'Date<span class="leave-label-required">*</span>';
        toDateSection.classList.add('hidden');
        attachmentLabel.classList.remove('hidden');
        attachmentSection.classList.remove('hidden');
        toDate.value = fromDate.value;
        // Attachment is OPTIONAL — do not set required
    } else if (this.value === 'Half' || this.value === 'Full') {
        fromDateLabel.innerHTML = 'Date<span class="leave-label-required">*</span>';
        toDateSection.classList.add('hidden');
        attachmentLabel.classList.add('hidden');
        attachmentSection.classList.add('hidden');
        toDate.value = fromDate.value;
        // No attachment for Half/Full day leaves
    } else {
        fromDateLabel.innerHTML = 'Date<span class="leave-label-required">*</span>';
        toDateSection.classList.add('hidden');
        attachmentLabel.classList.add('hidden');
        attachmentSection.classList.add('hidden');
    }
    // Ensure attachment is never required
    attachment.removeAttribute('required');
    calculateDays();
});

// ============ RESET ATTACHMENT INPUT ============
function resetAttachmentInput() {
    attachment.value = '';
    document.getElementById('attachment_success_msg').style.display = 'none';
    attachment.disabled = false;
}

// ============ HANDLE ATTACHMENT CHANGE ============
attachment.addEventListener('change', function () {
    if (this.files && this.files.length > 0) {
        // Show success message but DO NOT disable the input
        // (user may want to change the file)
        document.getElementById('attachment_success_msg').style.display = 'block';
    } else {
        document.getElementById('attachment_success_msg').style.display = 'none';
    }
});

// ============ CALCULATE DAYS ============
function calculateDays() {
    const toDateValue = toDate.value;

    if (leaveType.value === 'Half') {
        // Half day leave = 0.5 days
        document.getElementById('number_of_days').textContent = '0.5';
    } else if (fromDate.value && toDateValue) {
        const from = new Date(fromDate.value);
        const to = new Date(toDateValue);
        const days = Math.floor((to - from) / (1000 * 60 * 60 * 24)) + 1;
        document.getElementById('number_of_days').textContent = days > 0 ? days : 0;
    } else if (fromDate.value && !toDateValue) {
        document.getElementById('number_of_days').textContent = '1';
    } else {
        document.getElementById('number_of_days').textContent = '0';
    }
}

fromDate.addEventListener('change', calculateDays);
toDate.addEventListener('change', calculateDays);

// ============ RESET BUTTON HANDLER ============
resetBtn.addEventListener('click', function() {
    setTimeout(() => {
        resetAttachmentInput();
        leaveType.dispatchEvent(new Event('change'));
        studentType.dispatchEvent(new Event('change'));
        document.getElementById('number_of_days').textContent = '0';
    }, 50);
});

// ============ FORM SUBMIT — DISABLE BUTTON & SHOW SPINNER ============
leaveForm.addEventListener('submit', function(event) {

    // Prevent double submission
    if (isSubmitting) {
        event.preventDefault();
        return false;
    }

    // If CL leave, sync toDate with fromDate before submit
    if (leaveType.value === 'CL') {
        toDate.value = fromDate.value;
    }

    // Mark as submitting
    isSubmitting = true;

    // Disable submit button
    submitBtn.disabled = true;
    submitBtn.style.opacity = "0.75";
    submitBtn.style.cursor = "not-allowed";

    // Disable reset button too (prevent reset during submit)
    resetBtn.disabled = true;

    // Replace button content with spinner + text
    submitBtnContent.innerHTML = `
        <svg class="spinner-svg" width="16" height="16" viewBox="0 0 24 24"
             fill="none" style="display:inline-block; vertical-align:middle; margin-right:8px;">
            <circle cx="12" cy="12" r="10"
                    stroke="white"
                    stroke-width="3"
                    stroke-dasharray="40 20"
                    stroke-linecap="round"
                    fill="none"
                    opacity="0.9"/>
        </svg>
        <span style="vertical-align:middle;">Submitting...</span>
    `;

    // Allow form to submit normally
    return true;
});

// ============ Initial state ============
leaveType.dispatchEvent(new Event('change'));
studentType.dispatchEvent(new Event('change'));
</script>

@endsection