@php use App\Models\eims\settings\academic\ContentType; @endphp
@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
@include('successMsg')

<style>
    /* General styling for the table */
    table#exam_subject_mark_config_table th,
    table#exam_subject_mark_config_table td {
        width: auto;
        padding: 4px;
        word-wrap: break-word;
        text-align: center;
    }

    /* General styling for form labels and inputs */
    .control-label {
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }

    /* Input fields shared styles */
    table#exam_subject_mark_config_table td input[type="number"] {
        text-align: center;
        width: 70%;
        display: inline-block;
        margin-left: 5px;
    }

    /* Adjust input field widths */
    table#exam_subject_mark_config_table .min-mark-input,
    table#exam_subject_mark_config_table .max-number-input,
    table#exam_subject_mark_config_table .theory-input,
    table#exam_subject_mark_config_table .practical-input {
        width: 90% !important;
    }

    /* Design card styling */
    .design_card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding-top: 12px;
        box-shadow: 0 2px 5px #e9e4e4ec;
    }

    /* Each subject panel styling */
    .each_subject_panel {
        border-radius: 10px;
        background-color: #e5e7e9;
        margin-top: 10px;
    }

    .panel-heading {
        padding: 0 !important;
    }

    /* Control the size of the inputs */
    .exam-config-input {
        width: 70%;
        margin-left: 10px;
    }

    /* Additional spacing for rows, if needed */
    .new-row {
        margin-bottom: 10px;
    }

    /* Optional: Adjust container widths */
    .custom-width {
        width: 400px;
    }

    /* Center align checkboxes */
    .form-check {
        display: flex;
        align-items: center;
    }

    /* Input-checkbox container styling */
    .input-checkbox-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* Hide number input spinners for WebKit browsers (Chrome, Safari) */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        /* Remove spinner */
        margin: 0;
        text-align: center;
        /* Reset margin */
    }

    /* Hide number input spinners for Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
        text-align: center;
        /* Remove spinner */
    }
</style>

<div class="row page-wrap">
    <div class="col-md-12">
        <div class="viewTitle">
            <div class="panel-options">
                <a class="btn btn-info pull-right addViewBtn"
                    href="{{route('eims_exam_subject_marks_config_list')}}">
                    <i class="glyphicon glyphicon-plus-sign addIcon" aria-hidden="true"></i>
                    {{ $data['pageTitle'] }} List
                </a>
            </div>
            <h1 class="text-center ls-2 text-white" style="font-family: Antiqua,serif;">
                {{ $data['pageTitle'] }}
            </h1>
        </div>
        <div class="panel panel-default">
            <div class="panel-body panelBodyView" style="color: #000000 !important;">
                @php
                if ($data['companyType'] == 'UNV') {
                $searchElements[] = ['element' => 'fillFacultyId', 'defaultValue' => request()->fillFacultyId];
                }
                $searchElements[] = ['element' => 'fillProgramId', 'defaultValue' => request()->fillProgramId];
                $searchElements[] = ['element' => 'fillSemesterClassId', 'defaultValue' => request()->fillSemesterClassId];
                @endphp
                @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                @if(count($examCourseSubject) > 0)
                {{-- Form Collection using Laravel Collective --}}
                {!! Form::open([
                'route' => 'eims_exam_subject_marks_config_store',
                'id' => 'examSubjectMarkConfigurationForm',
                'class' => 'form-horizontal form-groups', 'autocomplete' => 'off'
                ]) !!}

                <div id="exam_subject_mark_config_table" class="col-sm-12 design_card" style="margin-top: 40px">

                    <div style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px;">
                        <div class="custom-card-body">
                            <div class="row" style="margin: 20px 7px">
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        {!! Form::label('name', 'Exam Subject Config Name: <sup class="text-danger">*<sup>', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                                <div class="col-sm-8">
                                                    {!! Form::text('name', null, [
                                                    'id' => 'name',
                                                    'class' => 'form-control',
                                                    'placeholder' => 'Enter Exam Subject Config Name/Title',
                                                    ]) !!}
                                                    <div id="namee" class="text-danger name_error"></div>
                                                </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        {!! Form::label('effective_date', 'Effective Date: <sup class="text-danger">*<sup>', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                                <div class="col-sm-8">
                                                    {!! Form::text('effective_date', null, [
                                                    'id' => 'effective_date',
                                                    'class' => 'form-control',
                                                    'placeholder' => 'Enter Effective Date',
                                                    'readonly' => 'readonly',
                                                    ]) !!}
                                                    <div id="effective_datee"
                                                        class="text-danger effective_date_error"></div>
                                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- @if ($data['companyType'] == 'SCL' || $data['companyType'] == 'CLG' || $data['companyType'] == 'UNV')--}}
                    <div id="tableBody">

                        @foreach ($examCourseSubject as $subject)
                        {{-- Start of a new card --}}
                        <div id="each_subject_card_1" class="each_subject_panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-heading">
                                    <h4 class="left" style="margin-left: 10px">
                                        {{ $subject->name }} - {{ $subject->course_subject_code }}
                                        [{{$subject->course_subject_type->name}}]

                                        {{Form::hidden('course_subject_ids[]', $subject->id)}}
                                    </h4>
                                </div>
                            </div>
                            <div class="panel-body" id="each_subject" style="color: #000000;">

                                <div class="row" style="margin-left: 0px">
                                    <div class="col-sm-2">
                                        <h5 class="card-title">Exam Marking Range</h5>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="marking-card"
                                            style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                                            <div class="custom-card-body">
                                                <div class="form-group row" style="margin-top: 20px;">
                                                    {!! Form::label("max_mark_$subject->id", 'Max Marks: <sup class="text-danger">*</sup>',[
                                                    'class' => 'control-label text-gray col-sm-2',
                                                    'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                                                    ], false) !!}
                                                    <div class="col-sm-3">
                                                        {!! Form::number("max_marks[$subject->id]", null, [
                                                        'class' => 'form-control max-mark-input',
                                                        'placeholder' => 'Enter Max Marks',
                                                        'id' => "max_mark_$subject->id", // Unique input ID
                                                        'step' => 1
                                                        ]) !!}
                                                        <div id="max_marks{{$subject->id}}e"
                                                            class="text-danger max-mark-error"></div>
                                                    </div>

                                                    {!! Form::label("min_mark_$subject->id",'Min Marks: <sup class="text-danger">*</sup>', [
                                                    'class' => 'control-label text-gray col-sm-2',
                                                    'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                                                    'id' => "min_mark_$subject->id", // Unique label ID
                                                    'step' => 1
                                                    ], false) !!}
                                                    <div class="col-sm-3">
                                                        {!! Form::number("min_marks[$subject->id]", null, [
                                                        'class' => 'form-control min-mark-input',
                                                        'placeholder' => 'Enter Min Marks',
                                                        'id' => "min_mark_$subject->id", // Unique input ID
                                                        ]) !!}
                                                        <div id="min_marks{{$subject->id}}e"
                                                            class="text-danger min-mark-error"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <br><br>
                                    </div>
                                </div>


                                <div class="row" style="margin-left: 0px">
                                    <div class="col-sm-2">
                                        <h5 class="card-title">Duration</h5>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="marking-card"
                                            style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                                            <div class="custom-card-body">



                                                <div class="form-group row" style="margin-top: 20px; margin-left:5px">


                                                    @php($required = $subject->course_subject_type_id !== ContentType::COURSE_SUBJECT_TYPE_PRACTICAL)
                                                    {!! Form::label("theory_$subject->id", 'Theory: ' . ($required ? '<sup class="text-danger">*</sup>' : null), [
                                                    'class' => 'control-label text-gray col-sm-1',
                                                    ], false) !!}


                                                    <div class="col-sm-2">
                                                        {!! Form::number("theory[$subject->id]", null, [
                                                        'class' => 'form-control exam-config-input',
                                                        'placeholder' => 'Enter Theory Marks',
                                                        'id' => "theory_$subject->id",
                                                        'disabled' => !$required,
                                                        ]) !!}
                                                        <div id="theory{{$subject->id}}e"
                                                            class="text-danger exam-config-error theory_error"></div>
                                                    </div>


                                                    {!! Form::label("theory_exam_duration_$subject->id", 'Duration: <sup class="text-danger">*</sup>',[
                                                    'class' => 'control-label text-gray col-sm-1',
                                                    'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important;',
                                                    ], false) !!}
                                                    <div class="col-sm-2">
                                                        {!! Form::number("theory_exam_duration[$subject->id]", null, [
                                                        'class' => 'form-control max-mark-input',
                                                        'placeholder' => 'Enter Duration Minute',
                                                        'id' => "theory_exam_duration_$subject->id", // Unique input ID
                                                        'disabled' => !$required,
                                                        'step' => 1
                                                        ]) !!}
                                                        <div id="theory_exam_duration{{$subject->id}}e"
                                                            class="text-danger theory_exam_duration-error"></div>
                                                    </div>


                                                    @php($required = $subject->course_subject_type_id !== ContentType::COURSE_SUBJECT_TYPE_THEORY)
                                                    {!! Form::label("practical_$subject->id" , 'Practical: ' . ($required ? '<sup class="text-danger">*</sup>' : null), [
                                                    'class' => 'control-label text-gray col-sm-1'
                                                    ], false) !!}


                                                    <div class="col-sm-2">
                                                        {!! Form::number("practical[$subject->id]", null, [
                                                        'class' => 'form-control exam-config-input',
                                                        'placeholder' => 'Enter Min Marks',
                                                        'autocomplete' => 'off',
                                                        'id' => "practical_$subject->id" ,
                                                        'disabled' => !$required,
                                                        ]) !!}
                                                        <div id="practical{{$subject->id}}e"
                                                            class="text-danger exam-config-error practical_error"></div>
                                                    </div>


                                                    {!! Form::label("practical_exam_duration_$subject->id", 'Duration: <sup class="text-danger">*</sup>',[
                                                    'class' => 'control-label text-gray col-sm-1',
                                                    'style' => 'color: #454545; flex: 0 0 20%;',
                                                    ], false) !!}
                                                    <div class="col-sm-2">
                                                        {!! Form::number("practical_exam_duration[$subject->id]", null, [
                                                        'class' => 'form-control max-mark-input',
                                                        'placeholder' => 'Enter Duration Minute',
                                                        'id' => "practical_exam_duration_$subject->id", // Unique input ID
                                                        'disabled' => !$required,
                                                        'step' => 1
                                                        ]) !!}
                                                        <div id="practical_exam_duration{{$subject->id}}e"
                                                            class="text-danger practical_exam_duration-error"></div>
                                                    </div>

                                                </div>


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






                                <div class="row" style="margin-left: 0px; margin-bottom: 5px;">
                                    <div class="col-sm-2">
                                        <h5 class="card-title">Exam Criteria</h5>
                                    </div>

                                    <div class="col-sm-10">
                                        <div class="exam_criteria_card"
                                            style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                                            <div class="custom-card-body"
                                                style="margin: 10px 5px; padding: 4px !important;">
                                                <div class="form-group row">


                                                    <!-- <div class="col-sm-3">
                                                                    <div class="row">
                                                                        @php($required = $subject->course_subject_type_id !== ContentType::COURSE_SUBJECT_TYPE_PRACTICAL)
                                                                        {!! Form::label("theory_$subject->id", 'Theory: ' . ($required ? '<sup class="text-danger">*</sup>' : null), [
                                                                            'class' => 'control-label text-gray col-sm-4',
                                                                        ], false) !!}
                                                                        <div class="col-sm-8">
                                                                            {!! Form::number("theory[$subject->id]", null, [
                                                                                'class' => 'form-control exam-config-input',
                                                                                'placeholder' => 'Enter Min Marks',
                                                                                'id' => "theory_$subject->id",
                                                                                'disabled' => !$required
                                                                            ]) !!}
                                                                            <div id="theory{{$subject->id}}e"
                                                                                 class="text-danger exam-config-error theory_error"></div>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-3">
                                                                    <div class="row">
                                                                        @php($required = $subject->course_subject_type_id !== ContentType::COURSE_SUBJECT_TYPE_THEORY)
                                                                        {!! Form::label("practical_$subject->id" , 'Practical: ' . ($required ? '<sup class="text-danger">*</sup>' : null), [
                                                                            'class' => 'control-label text-gray col-sm-4'
                                                                        ], false) !!}
                                                                        <div class="col-sm-8">
                                                                            {!! Form::number("practical[$subject->id]", null, [
                                                                            'class' => 'form-control exam-config-input',
                                                                            'placeholder' => 'Enter Min Marks',
                                                                            'autocomplete' => 'off',
                                                                            'id' => "practical_$subject->id" ,
                                                                            'disabled' => !$required
                                                                        ]) !!}
                                                                            <div id="practical{{$subject->id}}e"
                                                                                 class="text-danger exam-config-error practical_error"></div>
                                                                        </div>

                                                                    </div>
                                                                </div>  -->


                                                    @foreach ($examConfig as $examConfigId => $examConfigName)
                                                    <div class="col-sm-4">
                                                        <div class="input-checkbox-container">
                                                            <div class="form-check">
                                                                {!! Form::checkbox("config_checked[$subject->id][$examConfigId]", 1, null, [
                                                                'class' => 'form-check-input exam-mark-config-check',
                                                                'id' => "config_checkbox_$subject->id". "_$examConfigId"
                                                                ]) !!}
                                                            </div>
                                                            {!! Form::label("config_checkbox_$subject->id". "_$examConfigId", $examConfigName . ':', [
                                                            'class' => 'control-label text-gray',
                                                            'style' => 'color: #454545;',
                                                            ]) !!}

                                                            {!! Form::number("config_marks[$subject->id][$examConfigId]", null, [
                                                            'class' => 'form-control exam-config-input',
                                                            'placeholder' => 'Enter ' . $examConfigName . ' Marks',
                                                            'id' => 'config_input_' . $examConfigId,
                                                            'autocomplete' => 'off',
                                                            'disabled' => 'disabled',
                                                            ]) !!}

                                                        </div><br>
                                                        <div
                                                            id="config_marks{{$subject->id}}_{{ $examConfigId }}e"
                                                            class="text-danger exam-config-error"></div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <br>
                    {{--@elseif ($data['companyType'] == 'UNV')
                                <div id="tableBody">

                                    Start of a new card
                                    <div id="each_subject_card_1" class="each_subject_panel panel-default">

                                        <div class="panel-heading"
                                             style="display: flex; justify-content: space-between; align-items: center;">
                                            <!-- Subject Name Label and Select Input (aligned left) -->


                                            <div class="col-sm-12" style="margin-left: 3px;">

                                                <div class="form-group row" style="font-size: 15px">


                                                    {!! Form::label('theory', 'Subject Name:*', [
                                                        'class' => 'control-label text-gray col-sm-2',
                                                        'style' => 'color: #454545; padding: 4px !important;',
                                                        'id' => 'theory_label_' . '1',
                                                    ]) !!}

                                                    <div class="col-sm-3">
                                                        <select name="theory[]"
                                                                class="form-control custom-select2 control_selected_subject"
                                                                id="theory_select_1">
                                                            <option value="" disabled selected>Select Subject</option>
                                                            @foreach ($examCourseSubject as $subject)
                                                                <option value="{{ $subject->id }}">
                    {{ $subject->course_subject_code }}
                    - {{ $subject->name }}
                    </option>
                    @endforeach
                    </select>
                </div>

            </div>


        </div>


        <!-- Add Button (aligned at the right) -->
        <div class="button-group" style="margin-left: auto; margin-right: 10px;">
            <button type="button" class="btn btn-primary btn-sm add-new-card">+
            </button>
        </div>
    </div>


    <div class="panel-body" id="each_subject"
        style="color: #454545; margin-left: -8px;">

        <div class="row" style="margin-left: 0px">
            <div class="col-sm-2">
                <h5 class="card-title">Exam Marking Range</h5>
            </div>
            <div class="col-md-10">
                <div class="marking-card"
                    style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                    <div class="custom-card-body">
                        <div class="form-group row" style="margin-top: 20px;">
                            <!-- First Label and Input -->
                            {!! Form::label(
                            'min_marks[]',
                            'Min Marks: <sup class="text-danger">*</sup>',
                            [
                            'class' => 'control-label text-gray col-sm-2',
                            'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                            'id' => 'min_number_label_' . '1', // Unique label ID
                            ],
                            false,
                            ) !!}
                            <div class="col-sm-3">
                                {!! Form::number('min_marks[]', null, [
                                'class' => 'form-control min-mark-input',
                                'placeholder' => 'Enter Min Marks',
                                'id' => 'min_mark_' . '1', // Unique input ID
                                ]) !!}
                            </div>

                            <!-- Second Label and Input -->
                            {!! Form::label(
                            'min_marks[]',
                            'Max Marks: <sup class="text-danger">*</sup>',
                            [
                            'class' => 'control-label text-gray col-sm-2',
                            'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                            'id' => 'max_number_label_' . '1', // Unique label ID
                            ],
                            false,
                            ) !!}
                            <div class="col-sm-3">
                                {!! Form::number('min_marks[]', null, [
                                'class' => 'form-control max-mark-input',
                                'placeholder' => 'Enter Max Marks',
                                'id' => 'max_mark_' . '1', // Unique input ID
                                ]) !!}
                            </div>
                        </div>
                    </div>
                </div>
                <br><br>
            </div>
        </div>

        <div class="row" style="margin-left: 0px; margin-bottom: 5px;">
            <div class="col-sm-2">
                <h5 class="card-title">Exam Criteria</h5>
            </div>

            <div class="col-sm-10">
                <div class="exam_criteria_card"
                    style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                    <div class="custom-card-body" style="margin: 10px 5px">
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="input-checkbox-container">
                                    {!! Form::label('theory', 'Theory:*', [
                                    'class' => 'control-label text-gray',
                                    'style' => 'color: #454545; padding: 4px !important;',
                                    'id' => 'theory_label_' . '1',
                                    ]) !!}
                                    {!! Form::number('theory[]', null, [
                                    'class' => 'form-control exam-config-input',
                                    'placeholder' => 'Enter Min Marks',
                                    'id' => 'theory_' . '1',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <div class="input-checkbox-container">
                                    {!! Form::label('practical', 'Practical:*', [
                                    'class' => 'control-label text-gray',
                                    'style' => 'color: #454545; padding: 4px !important;',
                                    'id' => 'practical_label_' . '1',
                                    ]) !!}
                                    {!! Form::number('practical[]', null, [
                                    'class' => 'form-control exam-config-input',
                                    'placeholder' => 'Enter Min Marks',
                                    'id' => 'practical_' . '1',
                                    ]) !!}
                                </div>
                            </div>

                            @foreach ($examConfig as $examConfigId => $examConfigName)
                            <div class="col-sm-3">
                                <div class="input-checkbox-container">
                                    <div class="form-check">
                                        {!! Form::checkbox("config_checked[$subject->id][$examConfigId]" , 1, null, [
                                        'class' => 'form-check-input exam-mark-config-check',
                                        'id' => 'config_checkbox_' . $examConfigId,
                                        ]) !!}
                                    </div>
                                    {!! Form::label('config_' . $examConfigId, $examConfigName . ':', [
                                    'class' => 'control-label text-gray',
                                    'style' => 'color: #454545;',
                                    ]) !!}



                                    {!! Form::number("config_marks[$subject->id][$examConfigId]", null, [
                                    'class' => 'form-control exam-config-input',
                                    'placeholder' => 'Enter ' . $examConfigName . ' Marks',
                                    'id' => 'config_input_' . $examConfigId,
                                    'disabled' => 'disabled',
                                    ]) !!}
                                </div>
                                @if ($examConfigName === 'C.T')
                                <br>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                        </div>
                    </div>
                </div>
                <br>
            </div>
        </div>

        </div><br>--}}
        {{-- @endif--}}

        </div>

                            {{-- Submit Button --}}
                            <div class="text-right">
                                <button type="submit" class="btn btn-success" style="margin-top: 10px">Submit</button>
                            </div>

                            {!! Form::close() !!}
                            @endif
                            </div>
                            </div>
                            </div>
                            </div>

                            <script>
                                'use strict';

                                $(document).ready(function() {

                                    // Start Date picker for Add data
                                    $("#effective_date").datepicker({
                                        dateFormat: "dd-mm-yy",
                                        changeMonth: true,
                                        changeYear: true,
                                    });

                                    // Event listener for both min and max number inputs
                                    $('.min-mark-input, .max-mark-input').on('input', function() {
                                        const container = $(this).parent().parent();
                                        const minInput = container.find('.min-mark-input');
                                        const maxInput = container.find('.max-mark-input');
                                        const minErrorElement = container.find('.min-mark-error');
                                        const maxErrorElement = container.find('.max-mark-error');


                                        const minNumber = parseFloat(minInput.val()) || 0;
                                        const maxNumber = parseFloat(maxInput.val()) || 0;

                                        // Clear both error messages initially
                                        minErrorElement.html('');
                                        minErrorElement.html('');

                                        if (minNumber >= maxNumber) {
                                            if ($(this).hasClass('min-mark-input')) {
                                                minErrorElement.html(`<span class="errormsg" style="color:red;">Min number cannot be greater than or equal to max number</span>`);
                                            } else if ($(this).hasClass('max-mark-input')) {
                                                maxErrorElement.html(` <span class="errormsg" style="color:red;">Max number cannot be less than or equal to min number</span>`);
                                            }
                                        }
                                    });

                                    // on .exam-config-input change sum the total
                                    $('.exam-config-input').on('input', function() {
                                        const row = $(this).closest('.each_subject_panel');
                                        // row.find('.exam-config-error').text('');
                                        const examConfigInputs = row.find('.exam-config-input');
                                        const maxInput = row.find('.max-mark-input');

                                        const total = Array.from(examConfigInputs).reduce((sum, input) => sum + (parseInt(input.value) || 0), 0);
                                        const maxValue = parseInt(maxInput.val()) || 0;

                                        const examConfigErrorField = $(this).parent().parent().find('.exam-config-error');
                                        examConfigErrorField.html('');

                                        if (maxValue < total) {
                                            examConfigErrorField.html(`<span class="errormsg" style="color:red;">For this value the Total marks exceeds the maximum marks value</span>`);
                                            $(this).val(0);
                                            /*row.find('.exam-mark-config-check').each(function () {
                                                if (!this.checked) {
                                                    $(this).prop('disabled', false);
                                                }
                                            });*/
                                        } else if (maxValue === total) {
                                            // disable the check box which is not checked
                                            /*row.find('.exam-mark-config-check').each(function () {
                                                if (!this.checked) {
                                                    $(this).prop('disabled', true);
                                                }
                                            });*/
                                        }
                                    });

                                    // exam-mark-config-check on check make the input enabled else disable
                                    $('.exam-mark-config-check').on('change', function() {
                                        const row = $(this).parent().parent();
                                        const examConfigInputs = row.find('.exam-config-input');

                                        row.parent().find('.exam-config-error').text('');

                                        if (this.checked) {
                                            examConfigInputs.prop('disabled', false);
                                        } else {
                                            examConfigInputs.val('');
                                            examConfigInputs.prop('disabled', true);
                                        }
                                    });


                                    let cardCount = 1; // Initialize card count
                                    let fieldsCount = 1; // Initialize fields count
                                    // Function to clone the card when the add button is clicked
                                    $(document).on('click', '.add-new-card', function() {
                                        cardCount++; // Increment the card count
                                        fieldsCount++; // Increment the fields count

                                        // Create a new card with a unique ID
                                        var newCard = `
                                            <div id="each_subject_card_${cardCount}" class="each_subject_panel panel-default">
                                                <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                                                    <div class="col-sm-12" style="margin-left: 3px;">
                                                        <div class="form-group row" style="font-size: 15px">
                                                            {!! Form::label('theory', 'Subject Name:*', [
                                                                'class' => 'control-label text-gray col-sm-2',
                                                                'style' => 'color: #454545; padding: 4px !important;',
                                                                'id' => 'theory_label_' . '1',
                                                            ]) !!}
                                            <div class="col-sm-3">
                                                <select name="theory[]" class="form-control custom-select2 item-select" id="theory_select_${cardCount}">
                                                                    <option value="" disabled selected>Select Subject</option>
                                                                    @foreach ($examCourseSubject as $subject)
                                            <option value="{{ $subject->id }}">
                                                                            {{ $subject->course_subject_code }} - {{ $subject->name }}
                                            </option>
                            @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="button-group" style="margin-left: auto; margin-right: 10px;">
                                    <button type="button" class="btn btn-danger btn-sm remove-card" style="margin-left: 5px;">&times;</button>
                                </div>
                            </div>
                            <div class="panel-body" id="each_subject" style="color: #454545; margin-left: -8px;">
                                <div class="row" style="margin-left: 0px">
                                    <div class="col-sm-2">
                                        <h5 class="card-title">Exam Marking Range</h5>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="marking-card" style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                                            <div class="custom-card-body">
                                                <div class="form-group row" style="margin-top: 20px;">
                            {!! Form::label(
                                                                            'min_marks[]',
                                                                            'Min Marks: <sup class="text-danger">*</sup>',
                                                                            [
                                                                                'class' => 'control-label text-gray col-sm-2',
                                                                                'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                                                                            ],
                                                                            false,
                                                                        ) !!}
                                            <div class="col-sm-3">
                            {!! Form::number('min_marks[]', null, [
                                                                                'class' => 'form-control min-mark-input',
                                                                                'placeholder' => 'Enter Min Marks',
                                                                                'id' => 'min_number_${fieldsCount}',
                                                                            ]) !!}
                                            </div>
                            {!! Form::label(
                                                                            'min_marks[]',
                                                                            'Max Marks: <sup class="text-danger">*</sup>',
                                                                            [
                                                                                'class' => 'control-label text-gray col-sm-2',
                                                                                'style' => 'color: #454545; flex: 0 0 20%; padding: 4px !important; margin-left: 30px !important;',
                                                                            ],
                                                                            false,
                                                                        ) !!}
                                            <div class="col-sm-3">
                            {!! Form::number('min_marks[]', null, [
                                                                                'id' => 'max_number_${fieldsCount}',
                                                                                'class' => 'form-control max-mark-input',
                                                                                'placeholder' => 'Enter Max Marks',
                                                                            ]) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div><br><br>
                            </div>
                            </div>
                            <div class="row" style="margin-left: 0px; margin-bottom: 5px;">
                            <div class="col-sm-2">
                                <h5 class="card-title">Exam Criteria</h5>
                            </div>
                            <div class="col-sm-10">
                                <div class="exam_criteria_card" style="background-color: #f8f9fa; padding: 1px 0px; border-radius: 8px; width: 90%; margin: -15px 0px;">
                                    <div class="custom-card-body" style="margin: 10px 5px">
                                        <div class="form-group row">
                                            <div class="col-sm-3">
                                                <div class="input-checkbox-container">
                            {!! Form::label('theory', 'Theory:*', [
                                                                                    'class' => 'control-label text-gray',
                                                                                    'style' => 'color: #454545; padding: 4px !important;',
                                                                                ]) !!}
                                            {!! Form::number('theory[]', null, [
                                                'id' => 'theory_${fieldsCount}',
                                                'class' => 'form-control exam-config-input',
                                                'placeholder' => 'Enter Min Marks',
                                            ]) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="input-checkbox-container">
                            {!! Form::label('practical', 'Practical:*', [
                                                                                    'class' => 'control-label text-gray',
                                                                                    'style' => 'color: #454545; padding: 4px !important;',
                                                                                ]) !!}
                                            {!! Form::number('practical[]', null, [
                                                'id' => 'practical_${fieldsCount}',
                                                'class' => 'form-control exam-config-input',
                                                'placeholder' => 'Enter Min Marks',
                                            ]) !!}
                                            </div>
                                        </div>
                            @foreach ($examConfig as $examConfigId => $examConfigName)
                                            <div class="col-sm-3">
                                                <div class="input-checkbox-container">
                                                    <div class="form-check">
                            {!! Form::checkbox('config_' . $examConfigId, 1, null, ['class' => 'form-check-input exam-mark-config-check']) !!}
                                            </div>
                            {!! Form::label('config_' . $examConfigId, $examConfigName . ':', [
                                                                                        'class' => 'control-label text-gray',
                                                                                        'style' => 'color: #454545;',
                                                                                    ]) !!}
                                            {!! Form::number('config_marks_' . $examConfigId, null, [
                                                'id' => $examConfigName . '_${fieldsCount}',
                                                'class' => 'form-control exam-config-input',
                                                'placeholder' => 'Enter ' . $examConfigName . ' Marks',
                                                'disabled' => 'disabled',
                                            ]) !!}
                                            </div>
                            @if ($examConfigName === 'C.T')
                                            <br>
                            @endif
                                            </div>
                            @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><br>
                            </div>
                            </div>
                            `;

                                        // Append the new card to the table body
                                        $('#tableBody').append(newCard);

                                        // Reinitialize Select2 for all select elements with custom-select2 class
                                        $('.custom-select2').select2();


                                        ///////////////////////////////Start Disable Enable the Subject Name Dropdown///////////////////////////////////////

                                        // Update dropdowns initially
                                        updateDropdowns();

                                        // Add change event for the newly added select element
                                        $('#theory_select_' + cardCount).on('change', function() {
                                            updateDropdowns(); // Call updateDropdowns whenever a selection is made
                                        });
                                    });

                                    // Function to remove a card when the cross button is clicked
                                    $(document).on('click', '.remove-card', function() {
                                        const card = $(this).closest('.each_subject_panel');
                                        const selectElement = card.find('.item-select');
                                        const selectedValue = selectElement.val();

                                        card.remove(); // Remove the card
                                        cardCount--; // Decrement card count

                                        // Update dropdowns after card removal
                                        updateDropdowns(selectedValue);
                                    });

                                    // Function to update dropdowns to disable selected subjects
                                    function updateDropdowns(unselectedValue = null) {
                                        // Get all the selected values
                                        const selectedValues = Array.from(document.querySelectorAll('.item-select'))
                                            .map(select => select.value)
                                            .filter(value => value !== "");

                                        // Get all dropdowns and update their options
                                        document.querySelectorAll('.item-select').forEach(select => {
                                            const options = select.querySelectorAll('option');

                                            options.forEach(option => {
                                                // Enable all options initially
                                                option.disabled = false;

                                                // Disable selected options from other dropdowns
                                                if (selectedValues.includes(option.value) && option.value !== select
                                                    .value) {
                                                    option.disabled = true;
                                                }

                                                // If an option was previously selected and is now unselected, enable it again
                                                if (unselectedValue && option.value === unselectedValue) {
                                                    option.disabled = false;
                                                }
                                            });
                                        });
                                    }

                                    // Call updateDropdowns on page load to set initial state
                                    updateDropdowns();

                                    /////////////////////////////// End Disable Enable the Subject Name Dropdown///////////////////////////////////////


                                    const programIdField = $('#fillProgramId');
                                    const semesterClassIdField = $("#fillSemesterClassId");

                                    const currentProgramId = `{{ request()->fillProgramId }}`;
                                    const currentSemesterClassId = `{{ request()->fillSemesterClassId }}`;
                                    $('#examSubjectMarkConfigurationForm').on('submit', function(e) {
                                        e.preventDefault(); // Prevent the default form submission

                                        const programId = programIdField.val();
                                        const semesterClassId = semesterClassIdField.val();

                                        if (currentProgramId !== programId || currentSemesterClassId !== semesterClassId) {
                                            Swal.fire({
                                                icon: 'error',
                                                title: 'Form Error',
                                                text: 'Please complete the search first. You have changed the program or semester class.',
                                                showConfirmButton: true,
                                                timer: 2000
                                            });
                                            return false;
                                        }

                                        let tableFormData = $(this).serializeArray();
                                        let searchFormData = $('#searchForm').serializeArray();

                                        // Combine both serialized data
                                        const combinedData = $.param(searchFormData.concat(tableFormData));

                                        $.ajax({
                                            url: $(this).attr('action'),
                                            method: $(this).attr('method'),
                                            data: combinedData,
                                            beforeSend: function() {
                                                $('.errormsg').hide();
                                            },
                                            success: function(_response) {
                                                Swal.fire({
                                                    icon: _response.responseStatus,
                                                    title: _response.responseTitle,
                                                    text: _response.responseText,
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                })
                                                if (_response.responseStatus === 'success') {
                                                    setTimeout(function() {
                                                        window.location.href = "{{route('eims_exam_subject_marks_config_list')}}";
                                                    }, 1000);
                                                }
                                            },
                                            error: function(_response) {
                                                const responseJSON = _response.responseJSON;
                                                Swal.fire({
                                                    icon: responseJSON.responseStatus,
                                                    title: responseJSON.responseTitle,
                                                    text: responseJSON.responseText,
                                                });

                                                const errors = responseJSON.errors;
                                                if (errors) {
                                                    // Show subject-specific errors
                                                    $.each(errors, function(key, value) {

                                                        let id = '';
                                                        if (key.includes('.')) {
                                                            id = key.slice(key.indexOf('.') + 1);
                                                            if (id.includes('.')) {
                                                                const subjectId = id.slice(0, id.indexOf('.'));
                                                                const configId = id.slice(id.indexOf('.') + 1);
                                                                id = subjectId + '_' + configId;
                                                            }
                                                            key = key.slice(0, key.indexOf('.'));
                                                        }

                                                        $(`#${key}${id}e`).empty().show().append(`<span class="errormsg" style="color:red;">${value}</span>`);

                                                    });
                                                }
                                            },
                                        });
                                    });
                                });
                            </script>
    @endsection