@extends('layouts.master')
@section('title')
    @lang('SSC ')
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Pages
        @endslot
        @slot('title')
            Online Registration System (SSC)
        @endslot
    @endcomponent



    <form action="{{ route('ssc-registrations.store') }}" method="POST" class="row g-3 needs-validation"
        enctype="multipart/form-data" novalidate>
        @csrf
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">ADD NEW STUDENT</h5>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
                                <div class="row">

                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_candidate_name" class="form-label">
                                                Candidate Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="candidate_name" id="validation_candidate_name"
                                                value="{{ old('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>

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

                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_father_name" class="form-label">
                                                Father Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="father_name" id="validation_father_name"
                                                value="{{ old('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>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_date_of_birth" class="form-label">
                                                Date of Birth <span class="text-danger">*</span>
                                            </label>
                                            <input type="date" name="date_of_birth" id="validation_date_of_birth"
                                                value="{{ old('date_of_birth') }}"
                                                max="{{ now()->subYears(9)->format('Y-m-d') }}" onkeydown="return false"
                                                class="form-control @error('date_of_birth') is-invalid @enderror" required>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_date_of_admission" class="form-label">
                                                Admission/Promotion (In 9th Class) <span class="text-danger">*</span>
                                            </label>
                                            <input type="date" name="date_of_admission" id="validation_date_of_admission"
                                                value="{{ old('date_of_admission') }}"
                                                max="{{ now()->subYears(11)->format('Y-m-d') }}" onkeydown="return false"
                                                class="form-control @error('date_of_admission') is-invalid @enderror"
                                                required>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_gender" class="form-label">
                                                Select Gender <span class="text-danger">*</span>
                                            </label>

                                            <select name="gender" id="validation_gender"
                                                class="form-select @error('gender') is-invalid @enderror" required>

                                                <option value="">Choose...</option>
                                                @if ($gender == 1)
                                                    <option value="1" {{ old('gender') == '1' ? 'selected' : '' }}>
                                                        MALE
                                                    </option>
                                                @elseif ($gender == 2)
                                                    <option value="2" {{ old('gender') == '2' ? 'selected' : '' }}>
                                                        FEMALE
                                                    </option>
                                                @elseif ($gender == 3)
                                                    <option value="1" {{ old('gender') == '1' ? 'selected' : '' }}>
                                                        MALE
                                                    </option>
                                                    <option value="2" {{ old('gender') == '2' ? 'selected' : '' }}>
                                                        FEMALE
                                                    </option>
                                                    <option value="3" {{ old('gender') == '3' ? 'selected' : '' }}>
                                                        TRANSGENDER
                                                    </option>
                                                @endif
                                            </select>

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



                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_religion" class="form-label">
                                                Select Religion <span class="text-danger">*</span>
                                            </label>

                                            <select name="religion_id" id="validation_religion"
                                                class="form-select @error('religion_id') is-invalid @enderror" required>

                                                <option value="">Choose...</option>

                                                @foreach ($religions as $religion)
                                                    <option value="{{ $religion->code }}" @selected(old('religion_id', optional($religions->first())->code) == $religion->code)>
                                                        {{ $religion->description }}
                                                    </option>
                                                @endforeach

                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_nationality" class="form-label">
                                                Select Nationality <span class="text-danger">*</span>
                                            </label>

                                            <select name="nationality_id" id="validation_nationality"
                                                class="form-select @error('nationality_id') is-invalid @enderror" required>

                                                <option value="">Choose...</option>

                                                @foreach ($nationalities as $nationality)
                                                    <option value="{{ $nationality->code }}"
                                                        {{ old('nationality_id') == $nationality->code ? 'selected' : '' }}>
                                                        {{ $nationality->description }}
                                                    </option>
                                                @endforeach
                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_area" class="form-label">
                                                Select Area <span class="text-danger">*</span>
                                            </label>

                                            <select name="area_id" id="validation_area"
                                                class="form-select @error('area_id') is-invalid @enderror" required>

                                                <option value="">Choose...</option>

                                                @foreach ($areas as $area)
                                                    <option value="{{ $area->code }}"
                                                        {{ old('area_id') == $area->code ? 'selected' : '' }}>
                                                        {{ $area->description }}
                                                    </option>
                                                @endforeach
                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_fee_exemption" class="form-label">
                                                Fee Exemption <span class="text-danger">*</span>
                                            </label>

                                            <select name="fee_exemption_reason" id="validation_fee_exemption"
                                                class="form-select @error('fee_exemption_reason') is-invalid @enderror"
                                                required>

                                                <option value="">Choose...</option>
                                                <option value="0"
                                                    {{ old('fee_exemption_reason', '0') == '0' ? 'selected' : '' }}>No
                                                    Exemption
                                                </option>
                                                <option value="1"
                                                    {{ old('fee_exemption_reason') == '1' ? 'selected' : '' }}>
                                                    FBISE Employee Child</option>
                                                <option value="2"
                                                    {{ old('fee_exemption_reason') == '2' ? 'selected' : '' }}>
                                                    Disabled
                                                </option>
                                                <option value="3"
                                                    {{ old('fee_exemption_reason') == '3' ? 'selected' : '' }}>
                                                    Orphan
                                                </option>
                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="cnic" class="form-label">
                                                CNIC / "B" Form (Without Dashes) <span class="text-danger">*</span>
                                            </label>

                                            <input type="text" name="cnic" id="cnic" maxlength="13"
                                                value="{{ old('cnic') }}"
                                                class="form-control @error('cnic') is-invalid @enderror"
                                                oninput="
                                                        this.value = this.value.replace(/[^0-9]/g, '').slice(0, 13);
                                                        if (/^(\d)\1{12}$/.test(this.value)) {
                                                            this.setCustomValidity('CNIC / B-Form cannot contain 13 identical digits.');
                                                        } else {
                                                            this.setCustomValidity('');
                                                        }
                                                    "
                                                placeholder="13-Digit CNIC (Without Dashes)" required>
                                            @error('cnic')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_email" class="form-label">Email</label>

                                            <input type="email" name="email" id="validation_email"
                                                value="{{ old('email') }}"
                                                class="form-control @error('email') is-invalid @enderror"
                                                placeholder="Enter your email" required>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_mobile" class="form-label">
                                                Mobile Number <span class="text-danger">*</span>
                                            </label>

                                            <input type="numeric" name="mobile" id="validation_mobile" maxlength="11"
                                                value="{{ old('mobile') }}" inputmode="numeric" pattern="[0-9]{11}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                class="form-control @error('mobile') is-invalid @enderror"
                                                placeholder="Enter your mobile number" required>

                                            @error('mobile')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end col -->
                                </div>
                                <!-- end row -->
                            </div>
                            <!-- end tab-pane -->
                        </div>
                        <!-- end tab content -->
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </div>
            <!-- end col -->



            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Profile Picture </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="validation_image" class="form-label">
                                Upload <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 />
                            @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="feeExemptionCertificateCard">
                    <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">
                                Upload <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" required />
                            @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 class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Group Selection</h5>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
                                <div class="row">

                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <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 }}"
                                                        {{ old('group_id') == $group->code ? 'selected' : '' }}>
                                                        {{ $group->description }}
                                                    </option>
                                                @endforeach
                                            </select>

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

                                    {{-- Sub Group Selection only for MATRICTECH --}}

                                    <div class="col-lg-4 col-sm-6" id="sub_group_container" style="display: none;">
                                        <div class="mb-3">
                                            <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>


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <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"
                                                    {{ old('subjects.0', '001') == '001' ? 'selected' : '' }}>
                                                    ENGLISH COMPULSORY - I</option>
                                                <option value="040" {{ old('subjects.0') == '040' ? 'selected' : '' }}>
                                                    ENGLISH LIT - I (IN LIEU OF ENG-I)</option>
                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <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"
                                                    {{ old('subjects.1', '002') == '002' ? 'selected' : '' }}>URDU
                                                    COMPULSORY </option>
                                                <option value="003" {{ old('subjects.1') == '003' ? 'selected' : '' }}>
                                                    ENGLISH LIT-I (IN LIEU OF URDU-I) </option>
                                                <option value="004" {{ old('subjects.1') == '004' ? 'selected' : '' }}>
                                                    GEOGRAPHY OF PAKISTAN </option>
                                            </select>

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


                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <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"
                                                    {{ old('subjects.2', '119') == '119' ? 'selected' : '' }}>
                                                    ISLAMIYAT COMPULSORY</option>
                                            </select>

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

                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <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"
                                                    {{ old('subjects.3', '105') == '105' ? 'selected' : '' }}>
                                                    TRANSLATION OF HOLY QURAN-I</option>
                                            </select>

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


                                    {{-- Elective Subject 1 --}}
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_elective_subject_1" class="form-label">
                                                Elective Subject-1 <span class="text-danger">*</span>
                                            </label>

                                            <select id="validation_elective_subject_1"
                                                class="form-select @error('subjects.4') is-invalid @enderror">
                                                <option value="">Select Subject</option>
                                            </select>

                                            <input type="hidden" name="subjects[]" id="matric_tech_elective_1_hidden">

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


                                    {{-- Elective Subject 2 --}}
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_elective_subject_2" class="form-label">
                                                Elective Subject-2 <span class="text-danger">*</span>
                                            </label>

                                            <select id="validation_elective_subject_2"
                                                class="form-select @error('subjects.5') is-invalid @enderror">
                                                <option value="">Select Subject</option>
                                            </select>

                                            <input type="hidden" name="subjects[]" id="elective2_hidden">

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


                                    {{-- Elective Subject 3 --}}
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_elective_subject_3" class="form-label">
                                                Elective Subject-3 <span class="text-danger">*</span>
                                            </label>

                                            <select id="validation_elective_subject_3"
                                                class="form-select @error('subjects.6') is-invalid @enderror">
                                                <option value="">Select Subject</option>
                                            </select>

                                            <input type="hidden" name="subjects[]" id="elective3_hidden">

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


                                    {{-- Elective Subject 4 --}}
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="mb-3">
                                            <label for="validation_elective_subject_4" class="form-label">
                                                Elective Subject-4 <span class="text-danger">*</span>
                                            </label>

                                            <select id="validation_elective_subject_4"
                                                class="form-select @error('subjects.7') is-invalid @enderror">
                                                <option value="">Select Subject</option>
                                            </select>

                                            <input type="hidden" name="subjects[]" id="elective4_hidden">

                                            @error('subjects.7')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end col -->
                                </div>
                                <!-- end row -->
                            </div>
                            <!-- end tab-pane -->

                            <div>
                                <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox"
                                    name="terms" value="1" id="invalidCheck" {{ old('terms') ? 'checked' : '' }}
                                    required>

                                <label class="form-check-label" for="invalidCheck">
                                    Agree to Terms & Conditions

                                </label>

                                @error('terms')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <!-- end tab content -->
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-success w-sm">Submit</button>
                </div>
            </div>
            <!-- end col -->


        </div>
        <!-- end row -->
    </form>
@endsection

<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 elective1 = document.getElementById('validation_elective_subject_1');
        const elective2 = document.getElementById('validation_elective_subject_2');
        const elective3 = document.getElementById('validation_elective_subject_3');
        const elective4 = document.getElementById('validation_elective_subject_4');

        const hiddenE1 = document.getElementById('matric_tech_elective_1_hidden');
        const hiddenE2 = document.getElementById('elective2_hidden');
        const hiddenE3 = document.getElementById('elective3_hidden');
        const hiddenE4 = document.getElementById('elective4_hidden');


        /*
        |--------------------------------------------------------------------------
        | Clear All Elective Fields
        |--------------------------------------------------------------------------
        */

        function clearElectiveFields() {

            elective1.innerHTML = '<option value="">Select Subject</option>';
            elective2.innerHTML = '<option value="">Select Subject</option>';
            elective3.innerHTML = '<option value="">Select Subject</option>';
            elective4.innerHTML = '<option value="">Select Subject</option>';

            elective1.disabled = false;
            elective2.disabled = false;
            elective3.disabled = false;
            elective4.disabled = false;

            hiddenE1.value = '';
            hiddenE2.value = '';
            hiddenE3.value = '';
            hiddenE4.value = '';
        }


        /*
        |--------------------------------------------------------------------------
        | Load Sub Groups
        |--------------------------------------------------------------------------
        */

        function loadSubGroups(groupCode) {

            subGroup.innerHTML = '<option value="">Choose...</option>';

            if (groupCode !== '4') {

                subGroupContainer.style.display = 'none';
                subGroup.removeAttribute('required');

                return;
            }

            subGroupContainer.style.display = 'block';
            subGroup.setAttribute('required', 'required');

            fetch(
                    '{{ route('ssc.sub-groups') }}?group_code=' +
                    encodeURIComponent(groupCode)
                )
                .then(response => {

                    if (!response.ok) {
                        throw new Error('Failed to load sub groups.');
                    }

                    return response.json();
                })
                .then(subGroups => {

                    subGroups.forEach(function(item) {

                        const option = new Option(
                            item.des,
                            item.code
                        );

                        subGroup.appendChild(option);
                    });
                })
                .catch(error => {

                    console.error(
                        'Error loading sub groups:',
                        error
                    );
                });
        }


        /*
        |--------------------------------------------------------------------------
        | Load Normal Group Subjects
        |--------------------------------------------------------------------------
        */

        function loadNormalGroupSubjects(groupCode) {

            clearElectiveFields();

            if (!groupCode || groupCode === '4') {
                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'
                    );


                    /*
                    |--------------------------------------------------------------------------
                    | Fixed / Pre-selected Electives
                    |--------------------------------------------------------------------------
                    */

                    fixedElectives.forEach(function(subject, index) {

                        if (index >= 4) {
                            return;
                        }

                        const fields = [
                            elective1,
                            elective2,
                            elective3,
                            elective4
                        ];

                        const field = fields[index];

                        field.appendChild(
                            new Option(
                                subject.subject_name,
                                subject.subject_code,
                                true,
                                true
                            )
                        );

                        field.disabled = true;
                    });


                    /*
                    |--------------------------------------------------------------------------
                    | Optional Electives
                    |--------------------------------------------------------------------------
                    */

                    const firstOptionalIndex = fixedElectives.length;

                    const fields = [
                        elective1,
                        elective2,
                        elective3,
                        elective4
                    ];

                    for (
                        let i = firstOptionalIndex; i < fields.length; i++
                    ) {

                        const field = fields[i];

                        optionalElectives.forEach(function(subject) {

                            field.appendChild(
                                new Option(
                                    subject.subject_name,
                                    subject.subject_code
                                )
                            );
                        });
                    }

                    setupElectiveDuplicateValidation();
                })
                .catch(error => {

                    console.error(
                        'Error loading elective subjects:',
                        error
                    );
                });
        }


        /*
        |--------------------------------------------------------------------------
        | Matric Tech - Elective Subject 1
        |--------------------------------------------------------------------------
        */

        function loadMatricTechElective1() {

            elective1.innerHTML =
                '<option value="">Select Subject</option>';

            hiddenE1.value = '';

            fetch('{{ route('ssc.matric-tech.elective1') }}')
                .then(response => {

                    if (!response.ok) {
                        throw new Error(
                            'Failed to load Elective Subject-1.'
                        );
                    }

                    return response.json();
                })
                .then(subjects => {

                    if (!Array.isArray(subjects) || subjects.length === 0) {
                        return;
                    }

                    const subject = subjects[0];

                    const option = new Option(
                        subject.subject_name,
                        subject.subject_code,
                        true,
                        true
                    );

                    elective1.appendChild(option);

                    /*
                     * Select is disabled, therefore its value will
                     * NOT be submitted. Store it in hidden input.
                     */
                    hiddenE1.value = subject.subject_code;
                    elective1.disabled = true;
                })
                .catch(error => {

                    console.error(
                        'Error loading Matric Tech E1:',
                        error
                    );
                });
        }


        /*
        |--------------------------------------------------------------------------
        | Matric Tech - Elective Subject 2
        |--------------------------------------------------------------------------
        */

        function loadMatricTechElective2() {

            elective2.innerHTML =
                '<option value="">Select Subject</option>';

            hiddenE2.value = '';

            elective2.disabled = false;

            fetch('{{ route('ssc.matric-tech.elective2') }}')
                .then(response => {

                    if (!response.ok) {
                        throw new Error(
                            'Failed to load Elective Subject-2.'
                        );
                    }

                    return response.json();
                })
                .then(subjects => {

                    subjects.forEach(function(subject) {

                        elective2.appendChild(
                            new Option(
                                subject.subject_name,
                                subject.subject_code
                            )
                        );
                    });

                    // If only one E2 is returned, automatically select it
                    if (subjects.length === 1) {

                        elective2.value =
                            subjects[0].subject_code;

                        hiddenE2.value =
                            subjects[0].subject_code;
                    }
                })
                .catch(error => {

                    console.error(
                        'Error loading Matric Tech E2:',
                        error
                    );
                });
        }

        elective2.addEventListener('change', function() {
            hiddenE2.value = this.value;
        });


        /*
        |--------------------------------------------------------------------------
        | Matric Tech - Elective Subject 3 & 4
        |--------------------------------------------------------------------------
        */

        function loadMatricTechSubjects(subGroupCode) {

            elective3.innerHTML =
                '<option value="">Select Subject</option>';

            elective4.innerHTML =
                '<option value="">Select Subject</option>';

            hiddenE3.value = '';
            hiddenE4.value = '';

            elective3.disabled = false;
            elective4.disabled = false;

            if (!subGroupCode) {
                return;
            }

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

            console.log('Loading Matric Tech subjects:', url);

            fetch(url)
                .then(response => {

                    if (!response.ok) {
                        throw new Error(
                            `HTTP error: ${response.status}`
                        );
                    }

                    return response.json();
                })
                .then(subjects => {

                    console.log('Matric Tech Subjects:', subjects);

                    if (!Array.isArray(subjects)) {
                        console.error('Invalid response:', subjects);
                        return;
                    }

                    subjects.forEach(function(subject) {

                        elective3.appendChild(
                            new Option(
                                subject.subject_name,
                                subject.subject_code
                            )
                        );

                        elective4.appendChild(
                            new Option(
                                subject.subject_name,
                                subject.subject_code
                            )
                        );
                    });

                    if (subjects.length >= 2) {

                        const subject3 =
                            subjects[0].subject_code;

                        const subject4 =
                            subjects[1].subject_code;

                        elective3.value = subject3;
                        elective4.value = subject4;

                        // Actual submitted values
                        hiddenE3.value = subject3;
                        hiddenE4.value = subject4;

                        elective3.disabled = true;
                        elective4.disabled = true;

                        console.log('E3:', hiddenE3.value);
                        console.log('E4:', hiddenE4.value);
                    }
                })
                .catch(error => {

                    console.error(
                        'Error loading Matric Tech subjects:',
                        error
                    );
                });
        }


        /*
        |--------------------------------------------------------------------------
        | Prevent Duplicate Optional Subjects
        |--------------------------------------------------------------------------
        */

        function setupElectiveDuplicateValidation() {

            const fields = [
                elective1,
                elective2,
                elective3,
                elective4
            ];

            const optionalFields = fields.filter(function(field) {

                const realOptions = Array.from(field.options)
                    .filter(option => option.value !== '');

                return realOptions.length > 1;
            });


            function updateDuplicateOptions() {

                const selectedValues = optionalFields
                    .map(field => field.value)
                    .filter(value => value !== '');


                optionalFields.forEach(function(field) {

                    const currentValue = field.value;

                    Array.from(field.options).forEach(function(option) {

                        if (!option.value) {
                            return;
                        }

                        if (
                            selectedValues.includes(option.value) &&
                            option.value !== currentValue
                        ) {

                            option.disabled = true;

                        } else {

                            option.disabled = false;
                        }
                    });
                });
            }


            optionalFields.forEach(function(field) {

                field.onchange = updateDuplicateOptions;
            });

            updateDuplicateOptions();
        }


        /*
        |--------------------------------------------------------------------------
        | Matric Tech Group
        |--------------------------------------------------------------------------
        */

        function loadMatricTech() {

            clearElectiveFields();


            /*
            |--------------------------------------------------------------------------
            | Elective Subject 1
            |--------------------------------------------------------------------------
            */

            loadMatricTechElective1();


            /*
            |--------------------------------------------------------------------------
            | Elective Subject 2
            |--------------------------------------------------------------------------
            */

            loadMatricTechElective2();


            /*
            |--------------------------------------------------------------------------
            | Elective Subject 3 & 4
            |--------------------------------------------------------------------------
            */

            elective3.innerHTML =
                '<option value="">Select Sub Group First</option>';

            elective4.innerHTML =
                '<option value="">Select Sub Group First</option>';

            elective3.addEventListener('change', function() {
                hiddenE3.value = this.value;
            });

            elective4.addEventListener('change', function() {
                hiddenE4.value = this.value;
            });
        }


        /*
        |--------------------------------------------------------------------------
        | Group Change
        |--------------------------------------------------------------------------
        */

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

            const groupCode = this.value;

            if (groupCode === '4') {

                loadSubGroups('4');

                loadMatricTech();

                return;
            }

            loadSubGroups(groupCode);

            loadNormalGroupSubjects(groupCode);
        });


        /*
        |--------------------------------------------------------------------------
        | Sub Group Change
        |--------------------------------------------------------------------------
        */

        subGroup.addEventListener('change', function() {

            const subGroupCode = this.value;

            console.log('Selected Group:', group.value);
            console.log('Selected Sub Group:', subGroupCode);

            if (group.value === '4') {
                loadMatricTechSubjects(subGroupCode);
            }
        });

        if (group.value) {

            if (group.value === '4') {

                loadSubGroups('4');

                loadMatricTech();

            } else {

                loadSubGroups(group.value);

                loadNormalGroupSubjects(group.value);
            }
        }


        /*
        |--------------------------------------------------------------------------
        | Synchronize Elective Subjects Before Submit
        |--------------------------------------------------------------------------
        */

        const registrationForm = document.querySelector(
            'form[action="{{ route('ssc-registrations.store') }}"]'
        );

        registrationForm.addEventListener('submit', function(e) {

            // Copy visible elective values into hidden inputs.
            // These hidden inputs are the actual submitted subjects[] values.

            hiddenE1.value = elective1.value;
            hiddenE2.value = elective2.value;
            hiddenE3.value = elective3.value;
            hiddenE4.value = elective4.value;

            console.log('===== SUBJECT VALUES BEFORE SUBMIT =====');

            console.log(
                'Subject 1:',
                document.getElementById('validation_compulsory_subject_1').value
            );

            console.log(
                'Subject 2:',
                document.getElementById('validation_compulsory_subject_2').value
            );

            console.log(
                'Subject 3:',
                document.getElementById('validation_compulsory_subject_3').value
            );

            console.log(
                'Subject 4:',
                document.getElementById('validation_compulsory_subject_4').value
            );

            console.log('Elective 1:', hiddenE1.value);
            console.log('Elective 2:', hiddenE2.value);
            console.log('Elective 3:', hiddenE3.value);
            console.log('Elective 4:', hiddenE4.value);

        });
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {

        const exemptionSelect =
            document.getElementById('validation_fee_exemption');

        const certificateCard =
            document.getElementById('feeExemptionCertificateCard');

        const certificateInput =
            document.getElementById('fee_exemption_certificate');


        function toggleCertificate() {

            if (
                exemptionSelect.value === '1' ||
                exemptionSelect.value === '2' ||
                exemptionSelect.value === '3'
            ) {

                certificateCard.style.display = 'block';
                certificateInput.required = true;

            } else {

                certificateCard.style.display = 'none';
                certificateInput.required = false;
                certificateInput.value = '';
            }
        }


        toggleCertificate();

        exemptionSelect.addEventListener(
            'change',
            toggleCertificate
        );

    });
</script>


@section('script')
    <script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
@endsection