{{-- Trainer Modal --}}
<div class="modal fade" id="trainerModal" tabindex="-1" aria-labelledby="trainerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h1 class="modal-title fs-5" id="trainerModalLabel">Add Trainer</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form action="{{ route('centre.trainers-details.store') }}" method="POST"
                      id="trainer_form" enctype="multipart/form-data" novalidate>
                    @csrf

                    <div class="row g-3">

                        {{-- Name --}}
                        <div class="col-md-6">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- DOB --}}
                        <div class="col-md-6">
                            <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                            <input type="date" name="dob" class="form-control" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Education --}}
                        <div class="col-md-6">
                            <label class="form-label">Highest Education Qualification <span class="text-danger">*</span></label>
                            <select name="education" id="education" class="form-select" required>
                                <option value="" disabled selected>Select your qualification</option>
                                @foreach($qualifications as $qualification)
                                    <option value="{{ $qualification->name }}">
                                        {{ $qualification->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Education Certificate --}}
                        <div class="col-md-6">
                            <label class="form-label">Education Qualification Certificate <span class="text-danger">*</span></label>
                            <input type="file" name="education_certificate" class="form-control"
                                   accept="application/pdf,image/*" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Experience --}}
                        <div class="col-md-6">
                            <label class="form-label">Experience (Years) <span class="text-danger">*</span></label>
                            <input type="number" name="experience" class="form-control" min="0" max="60" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Experience Letter --}}
                        <div class="col-md-6">
                            <label class="form-label">Experience Letter <span class="text-danger">*</span></label>
                            <input type="file" name="experience_letter" class="form-control"
                                   accept="application/pdf,image/*" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- TOT CATEGORY - Radio Buttons --}}
                        <div class="col-md-12">
                            <label class="form-label d-block">Is <span class="text-danger">*</span></label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input tot-radio" type="radio" name="tot_category"
                                       id="cat_trainer" value="Trainer" required>
                                <label class="form-check-label" for="cat_trainer">Trainer</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input tot-radio" type="radio" name="tot_category"
                                       id="cat_assessor" value="Assessor" required>
                                <label class="form-check-label" for="cat_assessor">Assessor</label>
                            </div>
                            <div class="invalid-feedback d-block"></div>
                        </div>

                        {{-- NISD TOT Certificate (only for Trainer) --}}
                        <div class="col-md-6" id="tot_certificate_field" style="display:none;">
                            <label class="form-label">NISD TOT Master Trainer Certificate *</label>
                            <input type="file" name="nisd_tot_certificate" class="form-control"
                                   accept="application/pdf,image/*">
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- TOA Certificate (only for Assessor) --}}
                        <div class="col-md-6" id="toa_certificate_field" style="display:none;">
                            <label class="form-label">NISD TOA (Assessor) Certificate *</label>
                            <input type="file" name="toa_certificate" class="form-control"
                                   accept="application/pdf,image/*">
                            <div class="invalid-feedback"></div>
                        </div>

                    </div>

                    <div class="text-center mt-4">
                        <button type="button" class="btn btn-outline" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-send"></i> Save Trainer
                        </button>
                    </div>

                </form>
            </div>

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

<script>
function toggleTOTFields() {
    const trainer = document.getElementById("cat_trainer").checked;
    const assessor = document.getElementById("cat_assessor").checked;

    const totField = document.getElementById("tot_certificate_field");
    const toaField = document.getElementById("toa_certificate_field");

    if (trainer) {
        totField.style.display = "block";
        toaField.style.display = "none";

        document.querySelector("input[name='nisd_tot_certificate']").required = true;
        document.querySelector("input[name='toa_certificate']").required = false;
    } else if (assessor) {
        totField.style.display = "none";
        toaField.style.display = "block";

        document.querySelector("input[name='nisd_tot_certificate']").required = false;
        document.querySelector("input[name='toa_certificate']").required = true;
    }
}

// Bind radio change event
document.querySelectorAll(".tot-radio").forEach(radio => {
    radio.addEventListener("change", toggleTOTFields);
});

// Reset on modal open
document.getElementById('trainerModal').addEventListener('shown.bs.modal', () => {
    document.getElementById("tot_certificate_field").style.display = "none";
    document.getElementById("toa_certificate_field").style.display = "none";

    // Clear all validation messages
    document.getElementById("trainer_form").querySelectorAll("input, select").forEach(input => {
        input.classList.remove("is-invalid");
    });
    document.getElementById("trainer_form").querySelectorAll(".invalid-feedback").forEach(div => div.textContent = "");
});

// ---------- Inline Validation ----------
document.getElementById("trainer_form").addEventListener("submit", function (e) {
    let form = e.target;
    let errors = false;

    // Clear previous errors
    form.querySelectorAll("input, select").forEach(input => {
        input.classList.remove("is-invalid");
    });
    form.querySelectorAll(".invalid-feedback").forEach(div => div.textContent = "");

    const name = form.querySelector("input[name='name']");
    if (!name.value.trim() || name.value.trim().length < 2) {
        name.classList.add("is-invalid");
        name.nextElementSibling.textContent = "Name must be at least 2 characters";
        errors = true;
    }

    const dob = form.querySelector("input[name='dob']");
    if (!dob.value) {
        dob.classList.add("is-invalid");
        dob.nextElementSibling.textContent = "Date of Birth is required";
        errors = true;
    } else if (new Date(dob.value) >= new Date()) {
        dob.classList.add("is-invalid");
        dob.nextElementSibling.textContent = "Date of Birth must be before today";
        errors = true;
    }

    const education = form.querySelector("select[name='education']");
    if (!education.value) {
        education.classList.add("is-invalid");
        education.nextElementSibling.textContent = "Please select highest education qualification";
        errors = true;
    }

    const educationCertificate = form.querySelector("input[name='education_certificate']");
    if (educationCertificate.files.length === 0) {
        educationCertificate.classList.add("is-invalid");
        educationCertificate.nextElementSibling.textContent = "Education Certificate is required";
        errors = true;
    }

    const experience = form.querySelector("input[name='experience']");
    if (!experience.value || experience.value < 0 || experience.value > 60) {
        experience.classList.add("is-invalid");
        experience.nextElementSibling.textContent = "Experience must be between 0 and 60 years";
        errors = true;
    }

    const experienceLetter = form.querySelector("input[name='experience_letter']");
    if (experienceLetter.files.length === 0) {
        experienceLetter.classList.add("is-invalid");
        experienceLetter.nextElementSibling.textContent = "Experience Letter is required";
        errors = true;
    }

    const totCategory = form.querySelector("input[name='tot_category']:checked");
    const totRadioFeedback = form.querySelector("input[name='tot_category']").closest('.col-md-12').querySelector('.invalid-feedback');
    if (!totCategory) {
        totRadioFeedback.textContent = "Please select Trainer or Assessor";
        errors = true;
    }

    const nisdTOT = form.querySelector("input[name='nisd_tot_certificate']");
    const toaCertificate = form.querySelector("input[name='toa_certificate']");
    if (totCategory && totCategory.value === "Trainer" && nisdTOT.files.length === 0) {
        nisdTOT.classList.add("is-invalid");
        nisdTOT.nextElementSibling.textContent = "NISD TOT Certificate is required for Trainer";
        errors = true;
    }

    if (totCategory && totCategory.value === "Assessor" && toaCertificate.files.length === 0) {
        toaCertificate.classList.add("is-invalid");
        toaCertificate.nextElementSibling.textContent = "TOA Certificate is required for Assessor";
        errors = true;
    }

    if (errors) e.preventDefault();
});
</script>