@extends('layouts.app')

@section('title', 'Create Staff Member')

@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;
    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;
}

.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);
}

/* valid state */
.scr-input.is-valid,
.scr-select.is-valid,
.scr-textarea.is-valid {
    border-color: #10b981;
}

.scr-input::placeholder, .scr-select::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: 500;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

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

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

/* inline error – hidden by default */
.scr-error {
    font-size: 11px;
    color: #dc2626;
    margin-top: 6px;
    display: none;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
.scr-error.show {
    display: flex;
}
.scr-error svg {
    flex-shrink: 0;
}

.scr-success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 1.6rem;
    font-size: 13px;
    color: #15803d;
    display: flex;
    align-items: center;
    gap: 10px;
}

.scr-alert {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 1.6rem;
    font-size: 13px;
    color: #b91c1c;
}

.scr-alert ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.scr-alert li {
    margin-bottom: 4px;
}

.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;
}

/* ── action buttons ── */
.scr-actions {
    display: flex;
    gap: 12px;
    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: 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-primary {
    background: linear-gradient(135deg, #414662 0%, #f5a623 100%);
    color: #fff;
}

.scr-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(65,70,98,.3);
    transform: translateY(-2px);
}

.scr-btn-secondary {
    background: #f7f8fc;
    color: #414662;
    border: 1.5px solid #eceef6;
}

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

@media(max-width:768px) {
    .scr-form-grid { grid-template-columns: 1fr; }
    .scr-body { padding: 1.4rem 1rem; }
    .scr-top-row { flex-direction: column; align-items: flex-start; }
    .scr-actions { flex-direction: column-reverse; }
    .scr-btn { width: 100%; justify-content: center; }
}
.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;
}
</style>

{{-- Reusable error icon (for inline use) --}}
@php
    $errorIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';
@endphp

<div class="scr-wrap">

    {{-- ── Top row ── --}}
    <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">Create New Staff Member</p>
                <p class="scr-sub">Add a new staff member 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 (only on failed submit) --}}
            @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('staff.store') }}" method="POST" enctype="multipart/form-data" id="staffCreateForm" 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">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">
                            {!! $errorIconSvg !!}
                            <span>@error('name'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="scr-form-group">
                        <label class="scr-label">Email <span class="scr-req">*</span></label>
                        <input type="email" name="email" id="f_email" class="scr-input @error('email') is-invalid @enderror" placeholder="user@gmail.com" value="{{ old('email') }}" autocomplete="off">
                        <div class="scr-error @error('email') show @enderror" id="err_email">
                            {!! $errorIconSvg !!}
                            <span>@error('email'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Mobile -->
                    <div class="scr-form-group">
                        <label class="scr-label">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">
                            {!! $errorIconSvg !!}
                            <span>@error('mobile'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="scr-form-group">
                        <label class="scr-label">Location <span class="scr-req">*</span></label>
                        <input type="text" name="location" id="f_location" class="scr-input @error('location') is-invalid @enderror" placeholder="e.g., Block A" value="{{ old('location') }}" autocomplete="off">
                        <div class="scr-error @error('location') show @enderror" id="err_location">
                            {!! $errorIconSvg !!}
                            <span>@error('location'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Role -->
                    <div class="scr-form-group">
                        <label class="scr-label">Role <span class="scr-req">*</span></label>
                        <select name="role" id="f_role" class="scr-select @error('role') is-invalid @enderror">
                            <option value="">-- Select Role --</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role }}" @selected(old('role') == $role)>
                                    {{ ucfirst(str_replace('_', ' ', $role)) }}
                                </option>
                            @endforeach
                        </select>
                        <div class="scr-error @error('role') show @enderror" id="err_role">
                            {!! $errorIconSvg !!}
                            <span>@error('role'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Photo -->
                    <div class="scr-form-group">
                        <label class="scr-label">Photo</label>
                        <label for="img-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="img-label-text">Choose Photo</span>
                        </label>
                        <input type="file" id="img-input" name="img" accept="image/jpeg,image/png,image/jpg,image/gif" class="scr-file-input">
                        <div class="scr-file-hint">JPG, PNG (Max 2MB)</div>
                        <div class="scr-error @error('img') show @enderror" id="err_img">
                            {!! $errorIconSvg !!}
                            <span>@error('img'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>

                <hr class="scr-hr">

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

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

                    {{-- Trade — only shown for role "training_officer" — hidden by default --}}
                    <div class="scr-form-group" id="trade-group" style="display: none;">
                        <label class="scr-label">
                            Trade <span class="scr-req" id="trade-req"></span>
                        </label>
                        <select name="trade_id" id="f_trade_id" class="scr-select @error('trade_id') is-invalid @enderror">
                            <option value="">-- Select Trade --</option>
                            @foreach($trades as $trade)
                                <option value="{{ $trade->trade_name }}" @selected(old('trade_id') == $trade->trade_name)>
                                    {{ $trade->trade_name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="scr-error @error('trade_id') show @enderror" id="err_trade_id">
                            {!! $errorIconSvg !!}
                            <span>@error('trade'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="scr-form-group">
                        <label class="scr-label">Status <span class="scr-req">*</span></label>
                        <select name="status" id="f_status" class="scr-select @error('status') is-invalid @enderror">
                            <option value="">-- Select Status --</option>
                            <option value="active" @selected(old('status') === 'active' || !old('status'))>Active</option>
                            <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
                        </select>
                        <div class="scr-error @error('status') show @enderror" id="err_status">
                            {!! $errorIconSvg !!}
                            <span>@error('status'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Hostel Type (for Warden only) -->
                    <div class="scr-form-group" id="hostel-type-group" style="display: none;">
                        <label class="scr-label">Hostel Type <span class="scr-req" id="hostel-req"></span></label>
                        <select name="hostel_type" id="f_hostel_type" class="scr-select @error('hostel_type') is-invalid @enderror">
                            <option value="">-- Select Hostel --</option>
                            <option value="boys" @selected(old('hostel_type') === 'boys')>Boys Hostel</option>
                            <option value="girls" @selected(old('hostel_type') === 'girls')>Girls Hostel</option>
                        </select>
                        <div class="scr-error @error('hostel_type') show @enderror" id="err_hostel_type">
                            {!! $errorIconSvg !!}
                            <span>@error('hostel_type'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>

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

                <!-- Form Actions -->
                <div class="scr-actions pt-10">
                    <a href="{{ route('dashboard') }}" class="scr-btn scr-btn-secondary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6l-12 12M6 6l12 12"/></svg>
                        Cancel
                    </a>
                    <button type="submit" class="scr-btn scr-btn-submit">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                        Create Staff Member
                    </button>
                </div>

            </form>

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

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

<script>
// ═══════════════════════════════════════════════════════════════
// VANILLA JS VALIDATION (jQuery-style behaviour, no alerts)
// All errors render INLINE under each field, hidden until needed.
// ═══════════════════════════════════════════════════════════════

(function () {
    'use strict';

    // ── Helpers ────────────────────────────────────────────────
    function $(sel) { return document.querySelector(sel); }

    function showError(fieldId, message) {
        const field = document.getElementById(fieldId);
        const errBox = document.getElementById('err_' + fieldId.replace('f_', ''));
        if (field) {
            field.classList.add('is-invalid');
            field.classList.remove('is-valid');
        }
        if (errBox) {
            errBox.querySelector('span').textContent = message;
            errBox.classList.add('show');
        }
    }

    function clearError(fieldId) {
        const field = document.getElementById(fieldId);
        const errBox = document.getElementById('err_' + fieldId.replace('f_', ''));
        if (field) {
            field.classList.remove('is-invalid');
            field.classList.add('is-valid');
        }
        if (errBox) {
            errBox.classList.remove('show');
            errBox.querySelector('span').textContent = '';
        }
    }

    function resetField(fieldId) {
        const field = document.getElementById(fieldId);
        const errBox = document.getElementById('err_' + fieldId.replace('f_', ''));
        if (field) {
            field.classList.remove('is-invalid');
            field.classList.remove('is-valid');
        }
        if (errBox) {
            errBox.classList.remove('show');
            errBox.querySelector('span').textContent = '';
        }
    }

    // ── Validators ────────────────────────────────────────────
    function validateName() {
        const el = $('#f_name');
        const v = el.value.trim();
        if (!v) { showError('f_name', 'Name is required.'); return false; }
        if (v.length < 3) { showError('f_name', 'Name must be at least 3 characters.'); return false; }
        if (/[0-9]/.test(v)) { showError('f_name', 'Name cannot contain numbers.'); return false; }
        if (!/^[A-Za-z\s.'-]+$/.test(v)) { showError('f_name', 'Name can only contain letters, spaces, dots, hyphens.'); return false; }
        clearError('f_name');
        return true;
    }

    function validateEmail() {
        const el = $('#f_email');
        const v = el.value.trim();
        if (!v) { showError('f_email', 'Email is required.'); return false; }
        // basic shape: something@something.tld
        const emailRe = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
        if (!emailRe.test(v)) { showError('f_email', 'Enter a valid email (e.g. name@gmail.com).'); return false; }
        if (!v.includes('@')) { showError('f_email', 'Email must contain "@".'); return false; }
        const parts = v.split('@');
        if (parts.length !== 2 || !parts[1].includes('.')) {
            showError('f_email', 'Email must contain a domain like @gmail.com');
            return false;
        }
        clearError('f_email');
        return true;
    }

    function validateMobile() {
        const el = $('#f_mobile');
        const v = el.value.trim();
        if (!v) { showError('f_mobile', 'Mobile number is required.'); return false; }
        if (!/^\d{10}$/.test(v)) { showError('f_mobile', 'Mobile number must be exactly 10 digits.'); return false; }
        if (/^[01]/.test(v)) { showError('f_mobile', 'Mobile number cannot start with 0 or 1.'); return false; }
        clearError('f_mobile');
        return true;
    }

    function validateLocation() {
        const el = $('#f_location');
        const v = el.value.trim();
        if (!v) { showError('f_location', 'Location is required.'); return false; }
        if (v.length < 2) { showError('f_location', 'Location must be at least 2 characters.'); return false; }
        clearError('f_location');
        return true;
    }

    function validateRole() {
        const el = $('#f_role');
        if (!el.value) { showError('f_role', 'Please select a role.'); return false; }
        clearError('f_role');
        return true;
    }

    function validateStatus() {
        const el = $('#f_status');
        if (!el.value) { showError('f_status', 'Please select a status.'); return false; }
        clearError('f_status');
        return true;
    }

    function validateTrade() {
        const group = $('#trade-group');
        if (group.style.display === 'none') return true; // not required when hidden
        const el = $('#f_trade_id');
        if (!el.value) { showError('f_trade_id', 'Please select a trade.'); return false; }
        clearError('f_trade_id');
        return true;
    }

    function validateHostel() {
        const group = $('#hostel-type-group');
        if (group.style.display === 'none') return true;
        const el = $('#f_hostel_type');
        if (!el.value) { showError('f_hostel_type', 'Please select a hostel type.'); return false; }
        clearError('f_hostel_type');
        return true;
    }

    function validateImg() {
        const el = $('#img-input');
        if (!el) return true; // element doesn't exist, skip validation
        if (!el.files || !el.files[0]) return true; // optional
        const file = el.files[0];
        if (file.size > 2097152) {
            const errBox = $('#err_img');
            if (errBox && errBox.querySelector('span')) {
                errBox.querySelector('span').textContent = 'File size must be less than 2 MB.';
                errBox.classList.add('show');
            }
            return false;
        }
        const allowed = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        if (!allowed.includes(file.type)) {
            const errBox = $('#err_img');
            if (errBox && errBox.querySelector('span')) {
                errBox.querySelector('span').textContent = 'Only JPG, PNG, GIF images are allowed.';
                errBox.classList.add('show');
            }
            return false;
        }
        const errBox = $('#err_img');
        if (errBox) errBox.classList.remove('show');
        return true;
    }

    // ── Input sanitization (live) ─────────────────────────────
    // Name — block digits as user types
    const elName = $('#f_name');
    if (elName) {
        elName.addEventListener('input', function () {
            // strip digits silently; validate visually
            this.value = this.value.replace(/[0-9]/g, '');
            validateName();
        });
        elName.addEventListener('blur', validateName);
    }

    // Email
    const elEmail = $('#f_email');
    if (elEmail) {
        elEmail.addEventListener('input', function () {
            // remove spaces
            this.value = this.value.replace(/\s/g, '');
            // light live check — only show error once user has typed something with shape
            if (this.value.length > 0) validateEmail();
            else resetField('f_email');
        });
        elEmail.addEventListener('blur', validateEmail);
    }

    // Mobile — digits only, max 10
    const elMobile = $('#f_mobile');
    if (elMobile) {
        elMobile.addEventListener('input', function () {
            this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
            if (this.value.length > 0) validateMobile();
            else resetField('f_mobile');
        });
        elMobile.addEventListener('blur', validateMobile);
    }

    // Location
    const elLocation = $('#f_location');
    if (elLocation) {
        elLocation.addEventListener('blur', validateLocation);
        elLocation.addEventListener('input', function () {
            if (this.value.trim().length > 0) validateLocation();
            else resetField('f_location');
        });
    }

    // Role — drives conditional fields
    const elRole = $('#f_role');
    if (elRole) {
        elRole.addEventListener('change', function () {
            validateRole();
            toggleConditionalFields();
        });
    }

    // Status
    const elStatus = $('#f_status');
    if (elStatus) {
        elStatus.addEventListener('change', validateStatus);
    }

    // Trade — FIXED: Changed from #f_trade to #f_trade_id to match actual form element ID
    const elTradeId = $('#f_trade_id');
    if (elTradeId) {
        elTradeId.addEventListener('change', validateTrade);
    }

    // Hostel
    const elHostelType = $('#f_hostel_type');
    if (elHostelType) {
        elHostelType.addEventListener('change', validateHostel);
    }

    // Image
    const elImgInput = $('#img-input');
    if (elImgInput) {
        elImgInput.addEventListener('change', function () {
            const labelText = $('#img-label-text');
            if (labelText) {
                if (this.files && this.files[0]) {
                    if (validateImg()) {
                        labelText.textContent = '✓ ' + this.files[0].name;
                    } else {
                        this.value = '';
                        labelText.textContent = 'Choose Photo';
                    }
                } else {
                    labelText.textContent = 'Choose Photo';
                }
            }
        });
    }

    // ── Conditional field toggling ────────────────────────────
    function toggleConditionalFields() {
        const role = $('#f_role').value;

        // Trade — show when role is training_officer
        const tradeRoles = ['training_officer'];
        const tradeGroup = $('#trade-group');
        const tradeReq = $('#trade-req');
        const tradeInput = $('#f_trade_id');

        if (tradeRoles.includes(role)) {
            tradeGroup.style.display = 'flex';
            tradeReq.textContent = '*';
        } else {
            tradeGroup.style.display = 'none';
            tradeReq.textContent = '';
            tradeInput.value = '';
            resetField('f_trade_id');
        }

        // Hostel — show when role is warden
        const hostelGroup = $('#hostel-type-group');
        const hostelReq = $('#hostel-req');
        const hostelInput = $('#f_hostel_type');

        if (role === 'warden') {
            hostelGroup.style.display = 'flex';
            hostelReq.textContent = '*';
        } else {
            hostelGroup.style.display = 'none';
            hostelReq.textContent = '';
            hostelInput.value = '';
            resetField('f_hostel_type');
        }
    }

    // run on page load (handles old() value after validation redirect)
    document.addEventListener('DOMContentLoaded', toggleConditionalFields);

    // ── Submit handler ────────────────────────────────────────
    const formElement = $('#staffCreateForm');
    if (formElement) {
        formElement.addEventListener('submit', function (e) {
            console.log('[STAFF FORM] Form submit clicked');
            e.preventDefault();

            const checks = [
                validateName(),
                validateEmail(),
                validateMobile(),
                validateLocation(),
                validateRole(),
                validateStatus(),
                validateTrade(),
                validateHostel(),
                validateImg(),
            ];

            console.log('[STAFF FORM] Validation results:', checks);

            if (checks.includes(false)) {
                console.log('[STAFF FORM] Validation failed, preventing submission');
                e.preventDefault();
                // scroll to first invalid field
                const firstInvalid = document.querySelector('.is-invalid');
                if (firstInvalid) {
                    firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstInvalid.focus({ preventScroll: true });
                }
            } else {
                console.log('[STAFF FORM] All validations passed, disabling button and submitting');

                // Find and disable submit button to prevent duplicate submissions
                const submitBtn = formElement.querySelector('button[type="submit"]');
                if (submitBtn) {
                    // Store original text for restoration if needed
                    const originalText = submitBtn.textContent;

                    // Disable button and update text
                    submitBtn.disabled = true;
                    submitBtn.style.opacity = '0.6';
                    submitBtn.style.cursor = 'not-allowed';

                    // Update button text with loading indicator
                    const svg = submitBtn.querySelector('svg');
                    if (svg) {
                        svg.style.display = 'none';
                    }
                    submitBtn.textContent = '⏳ Creating...';

                    console.log('[STAFF FORM] Submit button disabled to prevent duplicate submissions');

                    // Re-enable button after 30 seconds (in case of failure)
                    setTimeout(function() {
                        submitBtn.disabled = false;
                        submitBtn.style.opacity = '1';
                        submitBtn.style.cursor = 'pointer';
                        submitBtn.textContent = originalText;
                        if (svg) svg.style.display = 'inline';
                        console.log('[STAFF FORM] Submit button re-enabled (30s timeout)');
                    }, 30000);
                }

                // Now allow the form to submit
                this.submit();
            }
        });
    }

})();
</script>

@endsection