@extends('layouts.app')

@section('title', 'Add Student')

@section('content')

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

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

/* ── header row ── */
.scr-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.scr-title-group { display: flex; align-items: center; gap: 14px; }
.scr-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.scr-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.scr-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.scr-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;
}
.scr-back:hover { background: #414662; color: #fff; border-color: #414662; }

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

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

/* ── form grid ── */
.scr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 1.6rem;
}

.scr-form-group {
    display: flex;
    flex-direction: column;
}

.scr-label {
    font-size: 12px;
    font-weight: 600;
    color: #414662;
    letter-spacing: .04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scr-label span.scr-req { color: #dc2626; }

.scr-input, .scr-select, .scr-textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    color: #2d2f45;
    transition: border-color .2s, background .2s;
    width: 100%;
}

.scr-input:focus, .scr-select:focus, .scr-textarea:focus {
    outline: none;
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}

/* invalid state */
.scr-input.is-invalid,
.scr-select.is-invalid,
.scr-textarea.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.scr-input.is-invalid:focus,
.scr-select.is-invalid:focus,
.scr-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.scr-input::placeholder { color: #9099b8; }
.scr-textarea {
    resize: vertical;
    min-height: 100px;
}

.scr-file-input { display: none; }

.scr-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    color: #414662;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.scr-file-label:hover {
    border-color: #f5a623;
    background: #fef9f4;
    color: #f5a623;
}

.scr-file-hint {
    font-size: 11px;
    color: #9099b8;
    margin-top: 6px;
}

.scr-error {
    display: none;
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    gap: 4px;
    align-items: center;
    padding: 6px 8px;
    background: #fef2f2;
    border-left: 2px solid #dc2626;
    border-radius: 4px;
    animation: scr-slideDown 0.2s ease;
}

.scr-error.show {
    display: flex;
}

@keyframes scr-slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.scr-alert {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 1.2rem;
    font-size: 12px;
    color: #991b1b;
    line-height: 1.6;
}

.scr-alert strong { display: block; margin-bottom: 8px; }
.scr-alert ul { margin: 0; padding-left: 20px; }
.scr-alert li { margin-bottom: 4px; }

/* ── gender & shift buttons ── */
.scr-btn-group {
    display: flex;
    gap: 8px;
}

.scr-toggle-btn {
    flex: 1;
    padding: 14px 8px;
    border: 2px solid #dde0ef;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #414662;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
}

.scr-toggle-btn:hover {
    border-color: #f5a623;
    background: #fef9f4;
    color: #f5a623;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.2);
    transform: translateY(-2px);
}

.scr-toggle-btn.active {
    background: #f5a623;
    border-color: #f5a623;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(245, 166, 35, 0.3);
}

/* ── custom dropdown ── */
.scr-custom-select {
    position: relative;
    width: 100%;
}

.scr-custom-trigger {
    height: 46px;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 13px;
}

.scr-custom-trigger:hover {
    border-color: #f5a623;
    background: #fff;
}

.scr-custom-select.active .scr-custom-trigger {
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}

.scr-custom-trigger .scr-selected-text {
    font-weight: 500;
    color: #9099b8;
}

.scr-custom-trigger .scr-selected-text.has-value {
    color: #2d2f45;
}

.scr-custom-options {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden auto;
    max-height: 220px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}

.scr-custom-select.active .scr-custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scr-custom-option {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #2d2f45;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scr-custom-option:hover {
    background: #414662;
    color: #fff;
}

/* ── photo preview ── */
.scr-photo-preview {
    margin-top: 8px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid #eceef6;
    display: none;
}

.scr-photo-preview.show {
    display: block;
}

/* ── form actions ── */
.scr-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-top: 1.5px solid #f0f1f7;
}

.scr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border: 1.5px solid;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

.scr-btn-cancel {
    border-color: #dde0ef;
    background: #fff;
    color: #414662;
}

.scr-btn-cancel:hover {
    background: #f0f1f7;
    border-color: #c5cce0;
}

.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-submit:disabled {
    background: #999;
    border-color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .scr-form-grid { grid-template-columns: 1fr; }
    .scr-body { padding: 1.4rem; }
}
.scr-note {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 4px solid #f5a623;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 1.6rem;
    line-height: 1.6;
}
</style>

<div class="scr-wrap">
    <div class="scr-top-row">
        <div class="scr-title-group">
            <div class="scr-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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div>
                <p class="scr-title uppercase">Add New Student</p>
                <p class="scr-sub">Register a new student to the system</p>
            </div>
        </div>
        <a href="{{ route('dashboard') }}" class="scr-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>
            Back
        </a>
    </div>

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

            {{-- Server-side errors summary --}}
            @if ($errors->any())
                <div class="scr-alert">
                    <strong>⚠️ Please correct the following errors:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                {{-- Section: Personal Information --}}
                <div class="scr-sh"><div class="scr-dot"></div><span class="scr-stitle">👤 Personal Information</span></div>

                    <div class="scr-form-grid">

                        {{-- Name --}}
                        <div class="scr-form-group">
                            <label class="scr-label" for="f_name">Name <span class="scr-req">*</span></label>
                            <input type="text" name="name" id="f_name"
                                class="scr-input @error('name') is-invalid @enderror"
                                placeholder="Full name" value="{{ old('name') }}" autocomplete="off">
                            <div class="scr-error @error('name') show @enderror" id="err_name">
                                ⚠️ <span>@error('name'){{ $message }}@else Please enter a valid name @enderror</span>
                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="scr-form-group">
                            <label class="scr-label" for="f_email">Email <span class="scr-req">*</span></label>
                            <input type="email" name="email" id="f_email"
                                class="scr-input @error('email') is-invalid @enderror"
                                placeholder="student@email.com" value="{{ old('email') }}" autocomplete="off">
                            <div class="scr-error @error('email') show @enderror" id="err_email">
                                ⚠️ <span>@error('email'){{ $message }}@else Please enter a valid email @enderror</span>
                            </div>
                        </div>

                        {{-- Mobile --}}
                        <div class="scr-form-group">
                            <label class="scr-label" for="f_mobile">Mobile <span class="scr-req">*</span></label>
                            <input type="tel" name="mobile" id="f_mobile"
                                class="scr-input @error('mobile') is-invalid @enderror"
                                placeholder="10 digit number" value="{{ old('mobile') }}" maxlength="10" autocomplete="off">
                            <div class="scr-error @error('mobile') show @enderror" id="err_mobile">
                                ⚠️ <span>@error('mobile'){{ $message }}@else Please enter a valid mobile number @enderror</span>
                            </div>
                        </div>

                        {{-- Gender (buttons) --}}
                        <div class="scr-form-group">
                            <label class="scr-label">Gender <span class="scr-req">*</span></label>
                            <div class="scr-btn-group">
                                <button type="button" class="scr-toggle-btn gender-btn {{ old('gender')=='male' ? 'active' : '' }}" onclick="selectGender('male', this)">♂ Male</button>
                                <button type="button" class="scr-toggle-btn gender-btn {{ old('gender')=='female' ? 'active' : '' }}" onclick="selectGender('female', this)">♀ Female</button>
                                <button type="button" class="scr-toggle-btn gender-btn {{ old('gender')=='other' ? 'active' : '' }}" onclick="selectGender('other', this)">Other</button>
                            </div>
                            <input type="hidden" name="gender" id="f_gender" value="{{ old('gender') }}">
                            <div class="scr-error @error('gender') show @enderror" id="err_gender">
                                ⚠️ <span>@error('gender'){{ $message }}@else Please select a gender @enderror</span>
                            </div>
                        </div>

                        {{-- CITS No --}}
                        <div class="scr-form-group">
                            <label class="scr-label" for="f_roll_no">CITS Number <span class="scr-req">*</span></label>
                            <input type="text" name="roll_no" id="f_roll_no"
                                class="scr-input @error('roll_no') is-invalid @enderror"
                                placeholder="e.g., CITS25AU000102" value="{{ old('roll_no') }}" autocomplete="off">
                            <div class="scr-error @error('roll_no') show @enderror" id="err_roll_no">
                                ⚠️ <span>@error('roll_no'){{ $message }}@else Please enter roll number @enderror</span>
                            </div>
                        </div>

                        {{-- Trade (custom dropdown) --}}
                        <div class="scr-form-group">
                            <label class="scr-label">Trade <span class="scr-req">*</span></label>
                            <div class="scr-custom-select">
                                <div class="scr-custom-trigger" onclick="toggleDropdown(this)">
                                    <span id="selected-trade" class="scr-selected-text {{ old('trade') ? 'has-value' : '' }}">
                                        {{ old('trade') ?: '-- Select Trade --' }}
                                    </span>
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9099b8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                </div>
                                <div class="scr-custom-options">
                                    @foreach($trades as $trade)
                                        <div class="scr-custom-option"
                                            data-value="{{ $trade->trade_name }}"
                                            onclick="selectOption(this, 'f_trade', 'selected-trade')">
                                            {{ $trade->trade_name }}
                                        </div>
                                    @endforeach
                                </div>
                                <input type="hidden" name="trade" id="f_trade" value="{{ old('trade') }}">
                            </div>
                            <div class="scr-error @error('trade') show @enderror" id="err_trade">
                                ⚠️ <span>@error('trade'){{ $message }}@else Please select a trade @enderror</span>
                            </div>
                        </div>

                        {{-- Course (hidden default) --}}
                        <input type="hidden" name="course" id="f_course" value="1st Year">

                        {{-- Photo --}}
                        <div class="scr-form-group">
                            <label class="scr-label">Photo</label>
                            <label for="photo-input" class="scr-file-label">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                <span id="photo-label-text">Choose Photo</span>
                            </label>
                            <input type="file" id="photo-input" name="photo" accept="image/jpeg,image/png,image/jpg,image/gif" class="scr-file-input" onchange="previewPhoto(event)">
                            <div class="scr-file-hint">JPG, PNG (Max 2MB)</div>
                            <img id="photo-preview" class="scr-photo-preview" src="" alt="Preview">
                            <div class="scr-error @error('photo') show @enderror" id="err_photo">
                                ⚠️ <span>@error('photo'){{ $message }}@enderror</span>
                            </div>
                        </div>

                        {{-- Shift (buttons - full width) --}}
                        <div class="scr-form-group" style="grid-column: 1 / -1;">
                            <label class="scr-label">Shift <span class="scr-req">*</span></label>
                            <div class="scr-btn-group">
                                <button type="button" class="scr-toggle-btn shift-btn {{ old('shift')=='morning' ? 'active' : '' }}" onclick="selectShift('morning', this)">First (8AM – 04:30PM)</button>
                                <button type="button" class="scr-toggle-btn shift-btn {{ old('shift')=='afternoon' ? 'active' : '' }}" onclick="selectShift('afternoon', this)">Second (10AM – 06:30PM)</button>
                                <button type="button" class="scr-toggle-btn shift-btn {{ old('shift')=='night' ? 'active' : '' }}" onclick="selectShift('night', this)">General (9AM – 5PM)</button>
                            </div>
                            <input type="hidden" name="shift" id="f_shift" value="{{ old('shift') }}">
                            <div class="scr-error @error('shift') show @enderror" id="err_shift">
                                ⚠️ <span>@error('shift'){{ $message }}@else Please select a shift @enderror</span>
                            </div>
                        </div>

                    </div>

                    {{-- Address (Full width) --}}
                    <div class="scr-form-group" style="grid-column: 1 / -1;">
                        <label class="scr-label" for="f_address">Address <span class="scr-req">*</span></label>
                        <textarea name="address" id="f_address"
                            class="scr-textarea @error('address') is-invalid @enderror"
                            placeholder="Enter complete address" autocomplete="off">{{ old('address') }}</textarea>
                        <div class="scr-error @error('address') show @enderror" id="err_address">
                            ⚠️ <span>@error('address'){{ $message }}@else Please enter address @enderror</span>
                        </div>
                    </div>
                    <br>

                     <div class="scr-note">
                        <strong>📝 Default Password:</strong> "default@123" — User should change it after first login for security.
                    </div>


                </div>

                {{-- Form Actions --}}
                <div class="scr-actions mr-10 pt-6">
                    <a href="{{ route('student.list') }}" class="scr-btn scr-btn-cancel">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
                        Cancel
                    </a>
                    <button type="submit" class="scr-btn scr-btn-submit" id="submitBtn">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                        Add Student
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
// ═══════════════════════════════════════════════════════════════
// VALIDATION HELPERS
// ═══════════════════════════════════════════════════════════════

function showError(fieldId, message) {
    const errorEl = document.getElementById(`err_${fieldId}`);
    const inputEl = document.getElementById(`f_${fieldId}`);

    if (errorEl) {
        const span = errorEl.querySelector('span');
        if (span) span.textContent = message;
        errorEl.classList.add('show');
    }
    if (inputEl) {
        inputEl.classList.add('is-invalid');
    }
}

function clearError(fieldId) {
    const errorEl = document.getElementById(`err_${fieldId}`);
    const inputEl = document.getElementById(`f_${fieldId}`);

    if (errorEl) errorEl.classList.remove('show');
    if (inputEl) inputEl.classList.remove('is-invalid');
}

// ═══════════════════════════════════════════════════════════════
// VALIDATION FUNCTIONS
// ═══════════════════════════════════════════════════════════════

function validateName() {
    const value = document.getElementById('f_name')?.value?.trim() || '';

    if (!value) {
        showError('name', '❌ Name is required');
        return false;
    }
    if (value.length < 3) {
        showError('name', '❌ Name must be at least 3 characters');
        return false;
    }
    if (/\d/.test(value)) {
        showError('name', '❌ Name cannot contain numbers');
        return false;
    }
    if (!/^[a-zA-Z\s]+$/.test(value)) {
        showError('name', '❌ Name can only contain letters and spaces');
        return false;
    }
    clearError('name');
    return true;
}

function validateEmail() {
    const value = document.getElementById('f_email')?.value?.trim() || '';

    if (!value) {
        showError('email', '❌ Email is required');
        return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
        showError('email', '❌ Please enter a valid email address');
        return false;
    }
    clearError('email');
    return true;
}

function validateMobile() {
    const value = document.getElementById('f_mobile')?.value?.trim() || '';

    if (!value) {
        showError('mobile', '❌ Mobile number is required');
        return false;
    }
    if (!/^\d+$/.test(value)) {
        showError('mobile', '❌ Mobile number must contain only digits');
        return false;
    }
    if (value.length !== 10) {
        showError('mobile', '❌ Mobile number must be exactly 10 digits');
        return false;
    }
    clearError('mobile');
    return true;
}

function validateGender() {
    const value = document.getElementById('f_gender')?.value?.trim() || '';

    if (!value) {
        showError('gender', '❌ Please select a gender');
        return false;
    }
    clearError('gender');
    return true;
}

function validateRollNo() {
    const value = document.getElementById('f_roll_no')?.value?.trim() || '';

    if (!value) {
        showError('roll_no', '❌ Roll number is required');
        return false;
    }
    clearError('roll_no');
    return true;
}

function validateTrade() {
    const value = document.getElementById('f_trade')?.value?.trim() || '';

    if (!value) {
        showError('trade', '❌ Please select a trade');
        return false;
    }
    clearError('trade');
    return true;
}

function validateCourse() {
    // Course is auto-set to 1st Year, no validation needed
    return true;
}

function validateShift() {
    const value = document.getElementById('f_shift')?.value?.trim() || '';

    if (!value) {
        showError('shift', '❌ Please select a shift');
        return false;
    }
    clearError('shift');
    return true;
}

function validateAddress() {
    const value = document.getElementById('f_address')?.value?.trim() || '';

    if (!value) {
        showError('address', '❌ Address is required');
        return false;
    }
    if (value.length < 5) {
        showError('address', '❌ Address must be at least 5 characters');
        return false;
    }
    clearError('address');
    return true;
}

// ═══════════════════════════════════════════════════════════════
// TOGGLE FUNCTIONS (Gender, Shift, Dropdown, Photo)
// ═══════════════════════════════════════════════════════════════

function selectGender(val, el) {
    document.querySelectorAll('.gender-btn').forEach(b => b.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('f_gender').value = val;
    validateGender();
}

function selectShift(val, el) {
    document.querySelectorAll('.shift-btn').forEach(b => b.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('f_shift').value = val;
    validateShift();
}

function toggleDropdown(el) {
    const parent = el.parentElement;
    document.querySelectorAll('.scr-custom-select').forEach(item => {
        if (item !== parent) item.classList.remove('active');
    });
    parent.classList.toggle('active');
}

function selectOption(option, inputId, textId) {
    const textEl = document.getElementById(textId);
    textEl.innerText = option.innerText;
    textEl.classList.add('has-value');

    document.getElementById(inputId).value = option.getAttribute('data-value');
    option.closest('.scr-custom-select').classList.remove('active');

    // Trigger validation
    if (inputId === 'f_trade') validateTrade();
    if (inputId === 'f_shift') validateShift();
    if (inputId === 'f_course') validateCourse();
}

// Close dropdown when clicking outside
window.addEventListener('click', function(e) {
    if (!e.target.closest('.scr-custom-select')) {
        document.querySelectorAll('.scr-custom-select').forEach(item => {
            item.classList.remove('active');
        });
    }
});

function previewPhoto(e) {
    const file = e.target.files[0];
    if (!file) return;

    // Update label text
    const labelText = document.getElementById('photo-label-text');
    if (labelText) labelText.textContent = file.name.length > 20 ? file.name.substring(0, 20) + '...' : file.name;

    const reader = new FileReader();
    reader.onload = function(ev) {
        const img = document.getElementById('photo-preview');
        img.src = ev.target.result;
        img.classList.add('show');
    };
    reader.readAsDataURL(file);
}

// ═══════════════════════════════════════════════════════════════
// REAL-TIME VALIDATION LISTENERS
// ═══════════════════════════════════════════════════════════════

document.addEventListener('DOMContentLoaded', function() {

    // Name
    const nameEl = document.getElementById('f_name');
    if (nameEl) {
        nameEl.addEventListener('blur', validateName);
        nameEl.addEventListener('input', function() {
            this.value = this.value.replace(/[0-9]/g, '');
            if (this.value.trim()) validateName();
        });
    }

    // Email
    const emailEl = document.getElementById('f_email');
    if (emailEl) {
        emailEl.addEventListener('blur', validateEmail);
        emailEl.addEventListener('input', function() {
            if (this.value.trim()) validateEmail();
        });
    }

    // Mobile
    const mobileEl = document.getElementById('f_mobile');
    if (mobileEl) {
        mobileEl.addEventListener('blur', validateMobile);
        mobileEl.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
            if (this.value.length > 0) validateMobile();
        });
    }

    // Roll No
    const rollEl = document.getElementById('f_roll_no');
    if (rollEl) {
        rollEl.addEventListener('blur', validateRollNo);
        rollEl.addEventListener('input', function() {
            if (this.value.trim()) validateRollNo();
        });
    }

    // Course is auto-set to 1st Year, no listeners needed

    // Address
    const addressEl = document.getElementById('f_address');
    if (addressEl) {
        addressEl.addEventListener('blur', validateAddress);
        addressEl.addEventListener('input', function() {
            if (this.value.trim()) validateAddress();
        });
    }

    // Form submission
    const form = document.getElementById('studentCreateForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            const validations = [
                validateName(),
                validateEmail(),
                validateMobile(),
                validateGender(),
                validateRollNo(),
                validateTrade(),
                validateCourse(),
                validateShift(),
                validateAddress()
            ];

            if (validations.includes(false)) {
                e.preventDefault();
                const firstError = document.querySelector('.scr-error.show');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                return false;
            }

            // Disable submit button to prevent double submission
            const submitBtn = document.getElementById('submitBtn');
            if (submitBtn && !submitBtn.disabled) {
                submitBtn.disabled = true;
                const originalHTML = submitBtn.innerHTML;
                submitBtn.innerHTML = '⏳ Adding Student...';

                setTimeout(() => {
                    if (submitBtn.disabled) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalHTML;
                    }
                }, 30000);
            }
        });
    }
});
</script>

@endsection