@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
@include('successMsg')

<style>
    .container {
        width: 90%;
        margin: 20px auto;
        background: #fff;
        padding: 20px;
        border-radius: 8px;
    }

    h2 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .student-info,
    .footer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .info-group,
    .footer div {
        width: 30%;
        margin-bottom: 10px;
    }

    label {
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
        color: #d9534f;
    }


    input[type="text"],
    textarea,
    input[type="number"] {
        width: 90%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        /* Centers the inputs horizontally */
    }

    textarea {
        resize: none;
    }

    input[readonly] {
        background-color: #f9f9f9;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        font-size: 14px;
        color: black;
    }

    table th,
    table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
    }

    table th {
        background-color: #f5f5f5;
        font-weight: bold;
    }

    .remarks {
        margin-top: 20px;
    }

    .total-marks {
        text-align: right;
        font-size: 14px;
        font-weight: bold;
        margin-top: 10px;
    }

    .total-marks span {
        color: #d9534f;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>


<div class="row add-data-form">
    <div class="col-md-10 col-md-offset-1">

        <div class="panel panel-default panel-border">
            <div class="panel-heading" style="padding-bottom:0; ">
                <div class="panel-title"> {{ $pageTitle }}</div>
            </div>
            <div class="panel-body">
                <div class="row">

                </div>

                {!! Form::open(['id' => 'academic_exam_marks_distribution_form', 'method' => 'POST']) !!}

                {{-- Hidden Inputs --}}
                <input type="hidden" name="student_id" id="student_id_hidden" value="{{ $studentInfo->id }}">
                <input type="hidden" name="exam_program_id" id="exam_program_id_hidden" value="{{ $programInfo->id }}">
                <input type="hidden" name="exam_session_id" id="exam_session_id_hidden" value="{{ $sessionInfo->id }}">
                <input type="hidden" name="exam_semester_class_id" id="exam_semester_class_id_hidden" value="{{ $studentInfo->eims_semester_class->id }}">
                <input type="hidden" name="exam_semester_class_group_id" id="exam_semester_class_group_id_hidden" value="{{ $studentInfo->eims_semester_class_group->id }}">
                <input type="hidden" name="academic_exam_activities_id" id="academic_exam_activities_id_hidden" value="{{ $examActivity->id }}">

                <input type="hidden" name="exam_subject_marks_config_id" id="exam_subject_marks_config_id_hidden_0" value="{{ $examConfigId->exam_mark_config_id }}">


                {{-- Table Section --}}
                <div id="headerSection"></div>

                <div id="tableSection" style=" margin-top: 20px;">

                    <div class="card-box">
                        <div class="row">
                            <div class="col-xs-12">
                                <!-- <h3 class="text-center">Result Entry</h3> -->

                                <div class="row" style="margin-bottom: 2%">
                                    <div class="col-sm-4 col-xs-12 col-sm-offset-4 text-center">
                                        <h5>
                                            <ul>
                                                <li style="list-style-type: none;">
                                                    <h2 style="text-align:center;"><span id="">{{$examActivity->name}}</span></h2>
                                                </li>

                                                <li style="list-style-type: none;">
                                                    <span style="font-weight: bold;" id="program_heading">
                                                        {{ $companyType === 'SCL' ? 'Medium/Version' : ($companyType === 'UNV' ? 'Program' : 'Program/Media') }}
                                                    </span> :
                                                    <span id="program_name">{{$programInfo->name}}</span>
                                                </li>

                                                <li style="list-style-type: none;"><span style="font-weight: bold;">Session</span> : <span id="session_name_heading">{{$sessionInfo->name}}</span></li>

                                                <li style="list-style-type: none;">
                                                    <span style="font-weight: bold;" id="program_heading">
                                                        {{ $companyType === 'SCL' ? 'Class' : ($companyType === 'UNV' ? 'Semester' : 'Program/Media') }}
                                                    </span> :
                                                    <span id="program_name">{{$studentInfo->eims_semester_class->name}}</span>
                                                </li>
                                            </ul>
                                        </h5>
                                    </div>
                                </div>

                                <table class="table-condensed table-bordered" width="100%">
                                    <tr>
                                        <th colspan="6" class="text-center">Student Information</th>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="text-align: left; vertical-align: middle;">
                                            <span class="font_bold">
                                                <strong>ID :</strong> {{$studentInfo->student_id_no}}
                                            </span>
                                        </td>
                                        <td colspan="2" style="text-align: left; vertical-align: middle;">
                                            <span class="font_bold">
                                                <strong>Name :</strong> {{$studentInfo->name}}
                                            </span>
                                        </td>
                                        <td style="text-align: left; vertical-align: middle;">
                                            <span class="font_bold">
                                                <strong>Class :</strong>{{$studentInfo->eims_semester_class->name}}
                                            </span>

                                        </td>
                                        <td style="text-align: left; vertical-align: middle;">
                                            <span class="font_bold">
                                                <strong>Roll :</strong>{{$studentInfo->roll_no}}
                                            </span>
                                                                                    </td>
                                    </tr>

                                </table>

                            </div>
                        </div>



                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-nowrap text-center" rowspan="3" width="2%">#SL</th>
                                    <th class="text-nowrap text-center" rowspan="3" width="10%">Subjects(Codes)</th>
                                    <th class="text-nowrap text-center" rowspan="3" width="8%">Attendance</th>
                                    <th class="text-nowrap text-center" rowspan="3" width="8%">Theory Marks</th>
                                    <th class="text-nowrap text-center" rowspan="3" width="8%">Practical Marks</th>

                                    <!-- Parent <th> for dynamically generated columns with colspan for Config Marks -->
                                    <th colspan="{{ $countExamMarkConfigs }}" width="48%">Config Marks</th>

                                    <th rowspan="3" width="8%">Total Marks</th>
                                    <th rowspan="3" width="8%">Notes</th>

                                </tr>
                                <tr>
                                    <!-- Additional row for dynamic column headers -->
                                    @foreach ($examMarkConfigs as $id => $shortName)
                                    <th width="{{50/$countExamMarkConfigs}}%">{{ $shortName }}</th>
                                    @endforeach
                                </tr>
                            </thead>

                            <tbody>
                                @php
                                $totalMaxMarks = 0;
                                @endphp

                                @if ($studentWiseCourseSubject && $studentWiseCourseSubject->count() > 0)
                                @foreach ($studentWiseCourseSubject as $index => $subject)
                                @php
                                $maxMark = $subject->eims_exam_subject_marks_config_details->max_mark ?? 0;
                                $totalMaxMarks += $maxMark;

                                // Retrieve existing marks for the subject
                                $existingMarks = $editStudentWiseExistingMarks[$subject->id] ?? [];
                                @endphp

                                <tr>
                                    <td class="text-nowrap text-center">{{ $index + 1 }}</td>

                                    <td class="text-nowrap text-left">
                                        {{ $subject->name }} ({{ $subject->course_subject_code }})
                                        <input type="hidden" name="course_subject_id[]" value="{{ $subject->id }}">
                                        <input type="hidden" name="course_subject_type_id[]" value="{{ $subject->course_subject_type_id }}">
                                    </td>


                                    <td class="text-nowrap text-center">
                                        <input type="hidden" name="attendance[{{ $subject->id }}]" value="0">

                                        <input
                                            type="checkbox"
                                            id="attendance_{{ $subject->id }}"
                                            style="float:left;margin-left:5% !important"
                                            name="attendance[{{ $subject->id }}]"
                                            value="1"
                                            onchange="toggleInputs(this, {{ $index + 1 }})"
                                            {{ isset($existingMarks['attendance']) ? $existingMarks['attendance'] == 1 ? 'checked' : '' : 'checked' }}>
                                        <label for="attendance_{{ $subject->id }}">Is Attend?</label>
                                    </td>


                                    <td class="text-nowrap text-center">
                                        @if ($subject->course_subject_type_id != 12)
                                        <input
                                            type="number"
                                            id="theory_marks_{{ $index + 1 }}"
                                            class="form-control text-center"
                                            step="any"
                                            placeholder="Out Of {{ $subject->eims_exam_subject_marks_config_details->theory ?? '' }}"
                                            name="theory_marks[{{ $subject->id }}]"
                                            value="{{ $existingMarks['theory_marks'] ?? '' }}"
                                            max="{{ $subject->eims_exam_subject_marks_config_details->theory ?? '' }}"
                                            min="0"
                                            oninput="checkMaxValue(this, {{ $subject->eims_exam_subject_marks_config_details->theory ?? '0' }})"
                                            onkeypress="return isNumberKey(event)"
                                            autocomplete="off">
                                        @endif
                                    </td>

                                    <td class="text-nowrap text-center">
                                        @if ($subject->course_subject_type_id != 11)
                                        <input
                                            type="number"
                                            id="practical_marks_{{ $index + 1 }}"
                                            class="form-control text-center"
                                            step="any"
                                            placeholder="Out Of {{ $subject->eims_exam_subject_marks_config_details->practical ?? '' }}"
                                            name="practical_marks[{{ $subject->id }}]"
                                            value="{{ $existingMarks['practical_marks'] ?? '' }}"
                                            max="{{ $subject->eims_exam_subject_marks_config_details->practical ?? '0' }}"
                                            min="0"
                                            oninput="checkMaxValue(this, {{ $subject->eims_exam_subject_marks_config_details->practical ?? '0' }})"
                                            onkeypress="return isNumberKey(event)"
                                            autocomplete="off">
                                        @endif
                                    </td>

                                    @foreach ($examMarkConfigs as $id => $shortName)
                                    <td>
                                        @php
                                        $configMarksData = $subject->eims_exam_subject_marks_config_details->config_marks ?? [];
                                        $configMarksArray = is_string($configMarksData) ? json_decode($configMarksData, true) : $configMarksData;
                                        $configMark = $configMarksArray[$id] ?? 0;
                                        $formattedName = str_replace(' ', '_', strtolower($shortName));
                                        @endphp

                                        @if ($configMark > 0)
                                        <input
                                            id="{{ $formattedName }}_{{ $subject->id }}"
                                            class="form-control text-center config_marks_{{ $subject->id }}"
                                            type="number"
                                            step="any"
                                            placeholder="Out Of {{ $configMark }}"
                                            name="class_marks[{{ $subject->id }}][{{ $id }}]"
                                            value="{{ $existingMarks['class_marks'][$id] ?? '' }}"
                                            max="{{ $configMark }}"
                                            oninput="checkMaxValue(this, {{ $configMark }})"
                                            onkeypress="return isNumberKey(event)">
                                        @endif
                                    </td>
                                    @endforeach

                                    <td class="text-nowrap text-center">
                                        <input
                                            type="text"
                                            id="total_marks_{{ $index + 1 }}"
                                            class="form-control text-center total-marks-input"
                                            name="total_marks[{{ $subject->id }}]"
                                            placeholder="Out Of {{ $subject->eims_exam_subject_marks_config_details->max_mark ?? '' }}"
                                            value="{{ $existingMarks['total_marks'] ?? '' }}" readonly>
                                    </td>

                                    <td class="text-nowrap text-center">
                                        <input
                                            type="text"
                                            id="notes_{{ $index + 1 }}"
                                            class="form-control text-center"
                                            placeholder="Enter notes"
                                            name="notes[{{ $subject->id }}]"
                                            value="{{ $existingMarks['notes'] ?? '' }}"
                                            autocomplete="off">
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr class="text-nowrap text-center">
                                    <td class="text-center" colspan="{{ 6 + $countExamMarkConfigs }}">No Data Found</td>
                                </tr>
                                @endif
                            </tbody>


                            <tr style="color: white;background-color: #696969 !important;border: 1px solid white !important;">
                                <td colspan="{{$countExamMarkConfigs + 4}}"></td>
                                <td text-right" style="height: 10px; font-weight: bold;">Total Marks</td>
                                <td id="total-sum">Out Of {{$totalMaxMarks}}</td>
                                <td></td>
                            </tr>

                        </table>

                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-12 text-right">
                            <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                            <a href="{{ url('eims/examination/exam/academic/student-wise-mark-submission') }}" style="margin-bottom: 10px;"
                                class="btn btn-danger">Close</a>
                        </div>
                    </div>

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

</div>


<script src="{{ asset('js/eims/sheetjs/xlsx.full.min.js') }}"></script>
<script type="text/javascript">
    //////////Start Table calculation and validation/////////////////////////////////////////////////

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        // Allow only numbers and one decimal point
        if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 46)
            return false;
        return true;
    }


    /////////////Start Total Marks Calculation////////////////////////////////////////

    function checkMaxValue(input, maxValue) {
        const value = parseFloat(input.value);
        if (value > maxValue) {
            // Use SweetAlert for the alert dialog
            Swal.fire({
                icon: "warning",
                title: "Invalid Value",
                text: "Value cannot exceed " + maxValue,
                confirmButtonText: "OK"
            }).then(() => {
                // Subtract the alerting value from the total
                subtractFromTotal(input);
                // Clear the input value after the alert
                input.value = null;
            });
        }
        calculateTotalMarks(input);
    }

    function calculateTotalMarks(input) {
        const row = input.closest("tr");
        const numberInputs = row.querySelectorAll("input[type='number']");
        let total = 0;
        numberInputs.forEach(function(inputField) {
            const value = parseFloat(inputField.value) || 0;
            total += value;
        });

        const totalMarksField = row.querySelector(".total-marks-input");
        if (totalMarksField) {
            if (total === 0) {
                // Set total marks to an empty string to show placeholder
                totalMarksField.value = '';
                totalMarksField.placeholder = "Out Of {{ $subject->eims_exam_subject_marks_config_details->max_mark ?? '' }}"; // Set placeholder text
            } else {
                totalMarksField.value = total;
                totalMarksField.placeholder = ''; // Clear placeholder
            }
        }

        updateTotalMarksSum(); // Update the total sum whenever a field is updated
    }

    function subtractFromTotal(input) {
        const row = input.closest("tr");
        const totalMarksField = row.querySelector(".total-marks-input");
        const valueToSubtract = parseFloat(input.value) || 0;

        // Subtract the value from the current total
        if (totalMarksField && !isNaN(valueToSubtract)) {
            const currentTotal = parseFloat(totalMarksField.value) || 0;
            const newTotal = Math.max(0, currentTotal - valueToSubtract);
            if (newTotal === 0) {
                totalMarksField.value = ''; // Set to empty string to show placeholder
                totalMarksField.placeholder = "Out Of {{ $subject->eims_exam_subject_marks_config_details->max_mark ?? '' }}"; // Set placeholder text
            } else {
                totalMarksField.value = newTotal;
                totalMarksField.placeholder = ''; // Clear placeholder
            }
        }

        updateTotalMarksSum(); // Update the total sum whenever a field is updated
    }



    //Function to sum all total_marks inputs and display in a < p > tag

    function updateTotalMarksSum() {
        const totalMarksInputs = document.querySelectorAll('.total-marks-input');
        let totalSum = 0;
        totalMarksInputs.forEach(function(input) {
            const value = parseFloat(input.value) || 0;
            totalSum += value;
        });

        // Display the sum in a <p> tag
        const totalSumElement = document.getElementById('total-sum');
        if (totalSumElement) {
            if (totalSum != 0) {
                totalSum = totalSum;
            } else {
                var totalMaxMarks = '{{$totalMaxMarks}}';
                totalSum = 'Out Of ' + totalMaxMarks;
            }
            totalSumElement.textContent = totalSum;
        }

    }


    // Call updateTotalMarksSum when the page is loaded to calculate the sum
    window.addEventListener('load', function() {
        updateTotalMarksSum(); // Calculate the total sum when the page is loaded
    });



    /////////////End Total Marks Calculation////////////////////////////////////////


    // function toggleInputs(checkbox) {
    //     const row = checkbox.closest("tr");
    //     const inputs = row.querySelectorAll(
    //         "input[type=\'number\'],input[type=\'text\'], .total-marks-input, input[name=\'notes\']"); // Select all relevant inputs
    //     inputs.forEach(function(input) {
    //         input.readOnly = !checkbox.checked; // Toggle readonly based on checkbox state
    //         if (!checkbox.checked) {
    //             input.value = ""; // Optionally clear values if unchecked
    //             updateTotalMarksSum();
    //         }
    //     });
    // }


    function toggleInputs(checkbox) {
        const row = checkbox.closest("tr");
        const inputs = row.querySelectorAll(
            "input[type='number'], input[type='text'], .total-marks-input, input[name='notes']"); // Select all relevant inputs

        inputs.forEach(function(input) {
            if (input.classList.contains('total-marks-input')) {
                input.readOnly = true; // Make total-marks-input always readonly
                if (!checkbox.checked) {
                    input.value = ""; // Clear value when unchecked

                    updateTotalMarksSum();
                }
            } else {
                input.readOnly = !checkbox.checked; // Toggle readonly based on checkbox state for other inputs
                if (!checkbox.checked) {
                    input.value = ""; // Optionally clear values if unchecked
                    updateTotalMarksSum();
                }
            }
        });
    }



    // On page load, check the attendance value and apply readonly for relevant rows
    // document.querySelectorAll('input[name^="attendance["]').forEach(function(checkbox) {
    //     const row = checkbox.closest("tr");
    //     const inputs = row.querySelectorAll(
    //         "input[type='number'], input[type='text'], .total-marks-input, input[name='notes']"
    //     );

    //     if (checkbox.checked) {
    //         // If checkbox is checked, remove readonly from all inputs
    //         inputs.forEach(input => input.readOnly = false);
    //     } else {
    //         // If checkbox is unchecked, make all inputs readonly and clear values
    //         inputs.forEach(input => {
    //             input.readOnly = true;
    //         });
    //     }
    // });



    // On page load, check the attendance value and apply readonly for relevant rows

    document.querySelectorAll('input[name^="attendance["]').forEach(checkbox => {
        const row = checkbox.closest("tr");
        const inputs = row.querySelectorAll("input[type='number'], input[type='text'], .total-marks-input, input[name='notes']");
        const totalMarksInput = row.querySelector('.total-marks-input');

        // Set total-marks-input to readonly by default
        if (totalMarksInput) totalMarksInput.readOnly = true;

        // Toggle readonly based on checkbox state
        inputs.forEach(input => input.readOnly = !checkbox.checked);

        // Ensure total-marks-input is always readonly
        if (totalMarksInput) totalMarksInput.readOnly = true;
    });



    //////////End Table calculation and All validation/////////////////////////////////////////////////



    /////////////Store Marks Data/////////////////////////////
    // Handle form submission with AJAX
    $('#academic_exam_marks_distribution_form').on('submit', function(e) {

        e.preventDefault(e);

        Swal.fire({
            title: 'Are you sure?',
            text: "Once submit you won't be able to revert this. Please check marks again!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#7e7979',
            confirmButtonText: 'Yes, submit it!'
        }).then((result) => {
            if (result.isConfirmed) {
                let formData = $(this).serialize();
                $.ajax({

                    url: `{{ route('eims_academic_exam_student_wise_marks_submission_store') }}`,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.responseStatus === 'success') {
                            Swal.fire({
                                icon: response.responseStatus,
                                title: response.responseTitle,
                                text: response.responseText,
                                showConfirmButton: false,
                                timer: 1500
                            })

                            setTimeout(function() {
                                window.location.href = "{{route('eims_academic_exam_student_wise_marks_submission')}}";
                            }, 1000);


                        } else {
                            Swal.fire({
                                icon: response.responseStatus,
                                title: response.responseTitle,
                                text: response.responseText,
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: response.responseStatus,
                            title: response.responseTitle,
                            text: response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        })
                    }
                });
            }
        })
    });
</script>

@endsection