@extends('layouts.master')
@section('title')
    SSC Edit
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            SSC Registrations
        @endslot
        @slot('title')
            Edit Registration
        @endslot
    @endcomponent

    @if ($errors->any())
        <div class="alert alert-warning" role="alert">
            <strong>Please correct the following:</strong>
            <ul class="mb-0 mt-1">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-warning" role="alert">{{ session('error') }}</div>
    @endif

    <form action="{{ route('ssc-registrations.update', $sscRegistration->id) }}" method="POST" enctype="multipart/form-data"
        class="needs-validation" novalidate>
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">{{ $sscRegistration->reg_no }}</h5>
                        <a href="{{ route('ssc-registrations.show', $sscRegistration->id) }}"
                            class="btn btn-sm btn-light">Cancel</a>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">


                            <div class="col-md-4">
                                <label for="candidate_name" class="form-label">Candidate Name <span
                                        class="text-danger">*</span></label>
                                <input id="candidate_name" name="candidate_name"
                                    class="form-control @error('candidate_name') is-invalid @enderror"
                                    pattern="[A-Za-z .-]+"
                                    oninput="this.value = this.value.toUpperCase().replace(/[^A-Z .-]/g, '')"
                                    placeholder="Enter with correct spellings" required
                                    value="{{ old('candidate_name', $sscRegistration->name) }}">

                                @error('candidate_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="father_name" class="form-label">Father Name <span
                                        class="text-danger">*</span></label>
                                <input id="father_name" name="father_name"
                                    class="form-control @error('father_name') is-invalid @enderror" pattern="[A-Za-z .-]+"
                                    oninput="this.value = this.value.toUpperCase().replace(/[^A-Z .-]/g, '')"
                                    placeholder="Enter with correct spellings" required
                                    value="{{ old('father_name', $sscRegistration->fname) }}">
                                @error('father_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="col-md-4">
                                <label for="date_of_birth" class="form-label">Date of Birth <span
                                        class="text-danger">*</span></label>
                                <input type="date" id="date_of_birth" name="date_of_birth"
                                    class="form-control @error('date_of_birth') is-invalid @enderror" required
                                    max="{{ now()->subYears(10)->format('Y-m-d') }}" onkeydown="return false"
                                    value="{{ old('date_of_birth', substr((string) $sscRegistration->dob, 0, 10)) }}">

                                @error('date_of_birth')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="col-md-4">
                                <label for="date_of_admission" class="form-label">Admission/Promotion (In 9th Class)
                                    <span class="text-danger">*</span></label>
                                <input type="date" id="date_of_admission" name="date_of_admission"
                                    class="form-control @error('date_of_admission') is-invalid @enderror" required
                                    onkeydown="return false"
                                    value="{{ old('date_of_admission', substr((string) $sscRegistration->adm_date, 0, 10)) }}">

                                @error('date_of_admission')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="col-md-4">
                                <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                                @if (in_array((string) $gender, ['1', '2'], true))
                                    <select id="gender_display" class="form-select" disabled>
                                        <option selected>{{ $gender == 1 ? 'MALE' : 'FEMALE' }}</option>
                                    </select>
                                    <input type="hidden" name="gender" value="{{ $gender }}">
                                @else
                                    <select id="gender" name="gender" class="form-select" required>
                                        <option value="">Choose...</option>
                                        <option value="1" @selected(old('gender', $sscRegistration->gender) == 1)>MALE</option>
                                        <option value="2" @selected(old('gender', $sscRegistration->gender) == 2)>FEMALE</option>
                                        <option value="3" @selected(old('gender', $sscRegistration->gender) == 3)>TRANSGENDER</option>
                                    </select>
                                @endif
                                @error('gender')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="religion_id" class="form-label">Select Religion <span
                                        class="text-danger">*</span></label>
                                <select id="religion_id" name="religion_id" class="form-select" required>
                                    @foreach ($religions as $religion)
                                        <option value="{{ $religion->code }}" @selected(old('religion_id', $sscRegistration->religion) == $religion->code)>
                                            {{ $religion->description }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="nationality_id" class="form-label">Select Nationality <span
                                        class="text-danger">*</span></label>

                                <select id="nationality_id" name="nationality_id" class="form-select" required>
                                    @foreach ($nationalities as $nationality)
                                        <option value="{{ $nationality->code }}" @selected(old('nationality_id', $sscRegistration->nationality) == $nationality->code)>
                                            {{ $nationality->description }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('nationality_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="area_id" class="form-label">Select Area <span
                                        class="text-danger">*</span></label></label>
                                <select id="area_id" name="area_id" class="form-select" required>
                                    @foreach ($areas as $area)
                                        <option value="{{ $area->code }}" @selected(old('area_id', $sscRegistration->area) == $area->code)>
                                            {{ $area->description }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('area_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>




                            <div class="col-md-4">
                                <label for="cnic" class="form-label">CNIC / B-Form</label>
                                <input id="cnic" name="cnic"
                                    class="form-control @error('cnic') is-invalid @enderror" inputmode="numeric"
                                    minlength="13" maxlength="13" pattern="[0-9]{13}" required
                                    oninput="validateSscCnicInput(this)"
                                    value="{{ old('cnic', $sscRegistration->cnic) }}">
                            </div>
                            <div class="col-md-4">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" id="email" name="email"
                                    class="form-control @error('email') is-invalid @enderror" required
                                    value="{{ old('email', $sscRegistration->email) }}">
                            </div>
                            <div class="col-md-4">
                                <label for="mobile" class="form-label">Mobile (92xxxxxxxxxx)</label>
                                <input id="mobile" name="mobile" type="text"
                                    class="form-control @error('mobile') is-invalid @enderror" inputmode="numeric"
                                    pattern="92[0-9]{10}" maxlength="12" required
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 12)"
                                    value="{{ old('mobile', $sscRegistration->mobile) }}">
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="fee_exemption_reason" class="form-label">Fee Exemption</label>
                                <select id="fee_exemption_reason" name="fee_exemption_reason" class="form-select"
                                    required>
                                    <option value="0" @selected(old('fee_exemption_reason', $sscRegistration->fee_exempt) == 0)>No exemption</option>
                                    <option value="1" @selected(old('fee_exemption_reason', $sscRegistration->fee_exempt) == 1)>FBISE employee child</option>
                                    <option value="2" @selected(old('fee_exemption_reason', $sscRegistration->fee_exempt) == 2)>Disabled</option>
                                    <option value="3" @selected(old('fee_exemption_reason', $sscRegistration->fee_exempt) == 3)>Orphan</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Profile Picture Update </h5>
                    </div>

                    <div class="card-body">
                        <div class="mb-3">
                            <label for="validation_image" class="form-label">
                                Replace Candidate Photo <span class="text-danger">*</span>
                            </label>

                            <input class="form-control @error('picture') is-invalid @enderror" type="file"
                                id="validation_image" name="picture" accept=".jpg,.jpeg" required />
                            @if ($sscRegistration->pic)
                                <small class="text-muted">Current: {{ basename($sscRegistration->pic) }}</small>
                            @endif
                            @error('picture')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <p class="text-muted">Please upload recent image in school uniform. Size should
                                be less than <code>40 KB</code> and in <code>JPG format</code>.
                                Height and Width Should Not Exceed <code>413x530 pixels</code> Respectively.
                            </p>
                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card" id="certificate-field">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Fee-Exemption Certificate</h5>
                    </div>
                    <!-- end card body -->
                    <div class="card-body">
                        <div>
                            <label for="validation_image" class="form-label">
                                Replace Fee-Exemption Certificate <span class="text-danger">*</span>
                            </label>

                            <input class="form-control @error('fee_exemption_certificate') is-invalid @enderror"
                                type="file" id="fee_exemption_certificate" name="fee_exemption_certificate"
                                accept=".jpg,.jpeg" />
                            @if ($sscRegistration->fee_exmt_pdf)
                                <small class="text-muted">Current certificate is on file.</small>
                            @endif
                            @error('fee_exemption_certificate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <p class="text-muted">Please upload any image related to the selected option and must
                                be less than <code>100 KB</code> and in <code>JPG format</code>. Respectively.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- end card -->
            </div>
        </div>


        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">{{ $sscRegistration->reg_no }}</h5>
                        <a href="{{ route('ssc-registrations.show', $sscRegistration->id) }}"
                            class="btn btn-sm btn-light">Cancel</a>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-lg-4 col-sm-6">
                                <label for="validation_group_name" class="form-label">Select Group <span
                                        class="text-danger">*</span></label>
                                <select name="group_id" id="validation_group_name"
                                    class="form-select @error('group_id') is-invalid @enderror" required>
                                    <option value="">Select Group</option>
                                    @foreach ($groups as $group)
                                        <option value="{{ $group->code }}" @selected(old('group_id', $sscRegistration->sub_group) == $group->code)>
                                            {{ $group->description }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('group_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 col-sm-6" id="sub_group_container" style="display: none;">
                                <label for="validation_sub_group" class="form-label">Select Sub Group <span
                                        class="text-danger">*</span></label>
                                <select name="sub_group_code" id="validation_sub_group"
                                    class="form-select @error('sub_group_code') is-invalid @enderror">
                                    <option value="">Choose...</option>
                                </select>
                                @error('sub_group_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 col-sm-6">
                                <label for="validation_compulsory_subject_1" class="form-label">Compulsory Subject-1
                                    <span class="text-danger">*</span></label>
                                <select name="subjects[]" id="validation_compulsory_subject_1"
                                    class="form-select @error('subjects.0') is-invalid @enderror" required>
                                    <option value="">Select Subject</option>
                                    <option value="001" @selected(old('subjects.0', $selectedSubjectCodes[0] ?? '001') == '001')>
                                        ENGLISH COMPULSORY - I</option>
                                    <option value="040" @selected(old('subjects.0', $selectedSubjectCodes[0] ?? '') == '040')>
                                        ENGLISH LIT - I (IN LIEU OF ENG-I)</option>
                                </select>
                                @error('subjects.0')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 col-sm-6">
                                <label for="validation_compulsory_subject_2" class="form-label">Compulsory Subject-2
                                    <span class="text-danger">*</span></label>
                                <select name="subjects[]" id="validation_compulsory_subject_2"
                                    class="form-select @error('subjects.1') is-invalid @enderror">
                                    <option value="">Select Subject</option>
                                    <option value="002" @selected(old('subjects.1', $selectedSubjectCodes[1] ?? '002') == '002')>URDU COMPULSORY</option>
                                    <option value="003" @selected(old('subjects.1', $selectedSubjectCodes[1] ?? '') == '003')>ENGLISH LIT-I (IN LIEU OF URDU-I)
                                    </option>
                                    <option value="004" @selected(old('subjects.1', $selectedSubjectCodes[1] ?? '') == '004')>GEOGRAPHY OF PAKISTAN</option>
                                </select>
                                @error('subjects.1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 col-sm-6">
                                <label for="validation_compulsory_subject_3" class="form-label">Compulsory Subject-3
                                    <span class="text-danger">*</span></label>
                                <select name="subjects[]" id="validation_compulsory_subject_3"
                                    class="form-select @error('subjects.2') is-invalid @enderror" required>
                                    <option value="">Select Subject</option>
                                    <option value="119" @selected(old('subjects.2', $selectedSubjectCodes[2] ?? '119') == '119')>
                                        ISLAMIYAT COMPULSORY</option>
                                </select>
                                @error('subjects.2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 col-sm-6">
                                <label for="validation_compulsory_subject_4" class="form-label">Compulsory Subject-4
                                    <span class="text-danger">*</span></label>
                                <select name="subjects[]" id="validation_compulsory_subject_4"
                                    class="form-select @error('subjects.3') is-invalid @enderror" required>
                                    <option value="">Select Subject</option>
                                    <option value="105" @selected(old('subjects.3', $selectedSubjectCodes[3] ?? '105') == '105')>
                                        TRANSLATION OF HOLY QURAN-I</option>
                                </select>
                                @error('subjects.3')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            @foreach (range(1, 4) as $electiveNumber)
                                @php($electiveIndex = $electiveNumber + 3)
                                <div class="col-lg-4 col-sm-6">
                                    <label for="validation_elective_subject_{{ $electiveNumber }}" class="form-label">
                                        Elective Subject-{{ $electiveNumber }} <span class="text-danger">*</span>
                                    </label>
                                    <select id="validation_elective_subject_{{ $electiveNumber }}"
                                        class="form-select @error('subjects.' . $electiveIndex) is-invalid @enderror">
                                        <option value="">Select Subject</option>
                                    </select>
                                    <input type="hidden" name="subjects[]" id="elective_{{ $electiveNumber }}_hidden"
                                        value="{{ old('subjects.' . $electiveIndex, $selectedSubjectCodes[$electiveIndex] ?? '') }}">
                                    @error('subjects.' . $electiveIndex)
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <div class="card-footer d-flex justify-content-end gap-2">
                        <a href="{{ route('ssc-registrations.show', $sscRegistration->id) }}"
                            class="btn btn-light">Cancel</a>
                        <button type="submit" class="btn btn-primary"><i class="ri-save-line me-1"></i> Save
                            Changes</button>
                    </div>
                </div>
            </div>
        </div>


    </form>

    <script>
        function validateSscCnicInput(input) {
            input.value = input.value.replace(/[^0-9]/g, '').slice(0, 13);
            const value = input.value;
            let patterned = false;

            if (value.length === 13) {
                const counts = value.split('').reduce((result, digit) => {
                    result[digit] = (result[digit] || 0) + 1;
                    return result;
                }, {});
                patterned = Object.values(counts).some(count => count >= 5) || /(\d)\1{3,}/.test(value);

                for (let period = 1; period <= 4 && !patterned; period++) {
                    patterned = value.slice(period).split('').every((digit, index) =>
                        digit === value[index % period]
                    );
                }

                let ascending = true;
                let descending = true;
                for (let index = 1; index < value.length; index++) {
                    const previous = Number(value[index - 1]);
                    const current = Number(value[index]);
                    ascending = ascending && current === (previous + 1) % 10;
                    descending = descending && current === (previous + 9) % 10;
                }
                patterned = patterned || ascending || descending;
            }

            input.setCustomValidity(patterned ?
                'CNIC / B-Form cannot contain repeated or sequential digit patterns.' :
                '');
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const feeExemption = document.getElementById('fee_exemption_reason');
            const certificateField = document.getElementById('certificate-field');
            const certificateInput = document.getElementById('fee_exemption_certificate');
            const dobInput = document.getElementById('date_of_birth');
            const admissionInput = document.getElementById('date_of_admission');
            const hasExistingCertificate = @json((bool) $sscRegistration->fee_exmt_pdf);

            function updateCertificateRequirement() {
                const required = ['1', '2', '3'].includes(feeExemption.value) && !hasExistingCertificate;
                certificateField.hidden = feeExemption.value === '0';
                certificateInput.required = required;
            }

            feeExemption.addEventListener('change', updateCertificateRequirement);
            updateCertificateRequirement();

            dobInput.addEventListener('change', function() {
                if (!this.value) {
                    admissionInput.value = '';
                    admissionInput.removeAttribute('min');
                    return;
                }

                const dob = new Date(this.value + 'T00:00:00');
                dob.setFullYear(dob.getFullYear() + 10);

                const minAdmissionDate = dob.getFullYear() + '-' +
                    String(dob.getMonth() + 1).padStart(2, '0') + '-' +
                    String(dob.getDate()).padStart(2, '0');

                admissionInput.min = minAdmissionDate;

                if (admissionInput.value && admissionInput.value < minAdmissionDate) {
                    admissionInput.value = '';
                }
            });

            if (dobInput.value) {
                dobInput.dispatchEvent(new Event('change'));
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const group = document.getElementById('validation_group_name');
            const subGroupContainer = document.getElementById('sub_group_container');
            const subGroup = document.getElementById('validation_sub_group');
            const electiveFields = [1, 2, 3, 4].map(number =>
                document.getElementById(`validation_elective_subject_${number}`)
            );
            const electiveHiddenFields = [1, 2, 3, 4].map(number =>
                document.getElementById(`elective_${number}_hidden`)
            );
            const selectedSubjects = @json(old('subjects', $selectedSubjectCodes->all()));
            const initialSubGroup = @json((string) old('sub_group_code', $sscRegistration->subject_sub_group ?? ''));

            function resetElectives() {
                electiveFields.forEach(field => {
                    field.innerHTML = '<option value="">Select Subject</option>';
                    field.disabled = false;
                });
                electiveHiddenFields.forEach(field => field.value = '');
            }

            function loadSubGroups(groupCode, selectedCode = '') {
                subGroup.innerHTML = '<option value="">Choose...</option>';

                if (groupCode !== '4') {
                    subGroupContainer.style.display = 'none';
                    subGroup.removeAttribute('required');
                    return Promise.resolve();
                }

                subGroupContainer.style.display = 'block';
                subGroup.required = true;

                return fetch('{{ route('ssc.sub-groups') }}?group_code=' + encodeURIComponent(groupCode))
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Failed to load subgroups.');
                        }
                        return response.json();
                    })
                    .then(items => {
                        items.forEach(item => subGroup.appendChild(new Option(item.des, item.code)));
                        subGroup.value = selectedCode;
                    });
            }

            function loadNormalGroupSubjects(groupCode) {
                resetElectives();

                return fetch('{{ route('ssc.group-subjects') }}?group_code=' + encodeURIComponent(groupCode))
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Failed to load group subjects.');
                        }
                        return response.json();
                    })
                    .then(subjects => {
                        const fixedElectives = subjects.filter(subject => String(subject.comp_elective) ===
                            '3');
                        const optionalElectives = subjects.filter(subject => String(subject.comp_elective) ===
                            '2');

                        fixedElectives.slice(0, 4).forEach((subject, index) => {
                            const field = electiveFields[index];
                            field.appendChild(new Option(subject.subject_name, subject.subject_code,
                                true, true));
                            field.disabled = true;
                            electiveHiddenFields[index].value = subject.subject_code;
                        });

                        for (let index = fixedElectives.length; index < electiveFields.length; index++) {
                            optionalElectives.forEach(subject => {
                                electiveFields[index].appendChild(
                                    new Option(subject.subject_name, subject.subject_code)
                                );
                            });
                            electiveFields[index].value = selectedSubjects[index + 4] || '';
                            electiveHiddenFields[index].value = electiveFields[index].value;
                        }

                        setupElectiveDuplicateValidation();
                    });
            }

            function loadMatricTechElective1() {
                const field = electiveFields[0];
                field.innerHTML = '<option value="">Select Subject</option>';
                electiveHiddenFields[0].value = '';

                return fetch('{{ route('ssc.matric-tech.elective1') }}')
                    .then(response => response.json())
                    .then(subjects => {
                        subjects.forEach(subject => {
                            field.appendChild(new Option(subject.subject_name, subject.subject_code));
                        });
                        const savedCode = String(selectedSubjects[4] || '');
                        field.value = Array.from(field.options).some(option => option.value === savedCode) ?
                            savedCode :
                            (field.options[1]?.value || '');
                        field.disabled = true;
                        electiveHiddenFields[0].value = field.value;
                    });
            }

            function loadMatricTechElective2() {
                const field = electiveFields[1];
                field.innerHTML = '<option value="">Select Subject</option>';
                electiveHiddenFields[1].value = '';

                return fetch('{{ route('ssc.matric-tech.elective2') }}')
                    .then(response => response.json())
                    .then(subjects => {
                        subjects.forEach(subject => {
                            field.appendChild(new Option(subject.subject_name, subject.subject_code));
                        });
                        field.value = selectedSubjects[5] || '';
                        electiveHiddenFields[1].value = field.value;
                    });
            }

            function loadMatricTechSubjects(subGroupCode) {
                const third = electiveFields[2];
                const fourth = electiveFields[3];
                third.innerHTML = '<option value="">Select Subject</option>';
                fourth.innerHTML = '<option value="">Select Subject</option>';
                electiveHiddenFields[2].value = '';
                electiveHiddenFields[3].value = '';

                if (!subGroupCode) {
                    return Promise.resolve();
                }

                const url = '{{ route('ssc.matric-tech.subjects') }}?group_code=4&sub_group_code=' +
                    encodeURIComponent(subGroupCode);

                return fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Failed to load Matric Tech subjects.');
                        }
                        return response.json();
                    })
                    .then(subjects => {
                        subjects.forEach(subject => {
                            third.appendChild(new Option(subject.subject_name, subject.subject_code));
                            fourth.appendChild(new Option(subject.subject_name, subject.subject_code));
                        });

                        const availableCodes = subjects.map(subject => String(subject.subject_code));
                        const savedThird = String(selectedSubjects[6] || '');
                        const savedFourth = String(selectedSubjects[7] || '');
                        third.value = availableCodes.includes(savedThird) ?
                            savedThird :
                            (subjects[0]?.subject_code || '');
                        fourth.value = availableCodes.includes(savedFourth) && savedFourth !== third.value ?
                            savedFourth :
                            (subjects.find(subject => String(subject.subject_code) !== third.value)
                                ?.subject_code || '');
                        electiveHiddenFields[2].value = third.value;
                        electiveHiddenFields[3].value = fourth.value;
                    });
            }

            function loadMatricTech() {
                resetElectives();
                return Promise.all([loadMatricTechElective1(), loadMatricTechElective2()]);
            }

            function setupElectiveDuplicateValidation() {
                const optionalFields = electiveFields.filter(field =>
                    Array.from(field.options).filter(option => option.value !== '').length > 1
                );

                function updateOptions() {
                    const selected = optionalFields.map(field => field.value).filter(Boolean);
                    optionalFields.forEach(field => {
                        Array.from(field.options).forEach(option => {
                            if (option.value) {
                                option.disabled = selected.includes(option.value) && option
                                    .value !== field.value;
                            }
                        });
                    });
                }

                electiveFields.forEach((field, index) => {
                    field.onchange = function() {
                        electiveHiddenFields[index].value = this.value;
                        updateOptions();
                    };
                });
                updateOptions();
            }

            group.addEventListener('change', function() {
                resetElectives();

                if (this.value === '4') {
                    loadSubGroups('4').then(() => loadMatricTech());
                } else {
                    loadSubGroups(this.value);
                    if (this.value) {
                        loadNormalGroupSubjects(this.value);
                    }
                }
            });

            subGroup.addEventListener('change', function() {
                loadMatricTechSubjects(this.value);
            });

            if (group.value === '4') {
                loadMatricTech().then(() =>
                    loadSubGroups('4', initialSubGroup).then(() => loadMatricTechSubjects(subGroup.value))
                );
            } else if (group.value) {
                loadNormalGroupSubjects(group.value);
            }

            document.querySelector('form[action="{{ route('ssc-registrations.update', $sscRegistration->id) }}"]')
                .addEventListener('submit', function() {
                    electiveFields.forEach((field, index) => {
                        electiveHiddenFields[index].value = field.value;
                    });
                });
        });
    </script>
@endsection