@php
    use App\Models\eims\settings\academic\ContentType;
    use PhpOffice\PhpSpreadsheet\Calculation\TextData\Format;
@endphp
@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    @include('successMsg')

    <div class="row add-data-form">
        <div class="col-md-10 col-md-offset-1">
            <div class="viewTitle">
                <div class="panel-options">
                    {{-- <a href="{{route('eims_student_course_subject_enroll')}}"
                       class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-list addIcon"></i>{{$pageTitle}} List</a> --}}
                </div>
            </div>
            <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 class="col-md-2 ">
                            {{-- program_id --}}
                            <div class="form-group">
                                {!! Form::label('program_id', 'Program: <sup class="text-danger">*<sup>', ['class' => ' control-label'], false) !!}
                                <div class="">
                                    {!! Form::select('program_id', $programs ?? [], $admissionExam->program_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Program',
                                        'id' => 'program_id',
                                        'required' => true,
                                    ]) !!}
                                    <p id='program_ide' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            {{-- session --}}
                            <div class="form-group">
                                {!! Form::label('session_id', 'Session: <sup class="text-danger">*<sup>', ['class' => ' control-label'], false) !!}
                                <div class="">
                                    {!! Form::select('session_id', $sessions ?? [], $admissionExam->session_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Session',
                                        'id' => 'session_id',
                                        'required' => true,
                                    ]) !!}
                                    <p id='session_ide' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-2">
                            {{-- semester_class_id --}}
                            <div class="form-group ">
                                {!! Form::label(
                                    'semester_class_id',
                                    'Class: <sup class="text-danger">*<sup>',
                                    ['class' => ' control-label'],
                                    false,
                                ) !!}
                                <div class="">
                                    {!! Form::select('semester_class_id', $semesterClasses ?? [], $admissionExam->semester_class_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Class',
                                        'id' => 'semester_class_id',
                                        'required' => true,
                                    ]) !!}
                                    <p id='semester_class_ide' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            {{-- admission_exam --}}
                            <div class="form-group ">
                                {!! Form::label(
                                    'admission_exam_id',
                                    'Admission Exam: <sup class="text-danger">*<sup>',
                                    ['class' => ' control-label'],
                                    false,
                                ) !!}
                                <div class="">
                                    {!! Form::select('admission_exam_id', $admissionExams ?? [], null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Admission Exam',
                                        'id' => 'admission_exam_id',
                                        'required' => true,
                                    ]) !!}
                                    <p id='admission_exam_ide' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        {{-- search buttons --}}
                        <div class="col-md-2">
                            <div class="form-group">
                                <br>
                                <button type="button" class="btn btn-info" id="searchButton">Search</button>
                            </div>
                        </div>


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

                        {{ Form::hidden('program_id', null, ['id' => 'program_id_hidden']) }}
                        {{ Form::hidden('session_id', null, ['id' => 'session_id_hidden']) }}
                        {{ Form::hidden('semester_class_id', null, ['id' => 'semester_class_id_hidden']) }}
                        {{ Form::hidden('admission_exam_id', null, ['id' => 'admission_exam_id_hidden']) }}

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

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

    <script src="{{ asset('js/eims/sheetjs/xlsx.full.min.js') }}"></script>
    <script>
        'use strict';
        const companyType = '{{ $companyType }}';
        let configArr = [];

        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;
        }

        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) {
                totalMarksField.value = total;
            }
        }

        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;
                totalMarksField.value = Math.max(0, currentTotal - valueToSubtract); //
            }
        }

        function toggleInputs(checkbox) {
            const row = checkbox.closest("tr");
            const inputs = row.querySelectorAll(
            '.config-mark-input , .note-input, .total-marks-input'); // 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
                }
            });
        }

        function exportTableToExcel(tableId, fileFormat = 'xlsx') {
            const table = document.getElementById(tableId);
            if (!table) {
                console.error(`Table with ID ${tableId} not found.`);
                return;
            }

            const fileName1 = `student_marks_distribution_${new Date().toISOString().replace(/[:.]/g, '-')}`.toLowerCase();
            const ws = XLSX.utils.table_to_sheet(table);
            const wb = XLSX.utils.book_new();

            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // Define file extension based on format
            let extension;
            switch (fileFormat.toLowerCase()) {
                case 'xls':
                    extension = '.xls';
                    break;
                case 'csv':
                    extension = '.csv';
                    break;
                case 'xlsx':
                default:
                    extension = '.xlsx';
                    break;
            }

            // Generate the file name with the specified extension
            const fileName = `${fileName1}${extension}`;

            // Save file based on format
            if (fileFormat === 'csv') {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'csv'
                });
            } else if (fileFormat === 'xls') {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'xls'
                });
            } else {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'xlsx'
                });
            }
        }

        function importExcelToInputs() {
            const fileInput = document.getElementById('importExcelFile');
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });
                    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                    const jsonData = XLSX.utils.sheet_to_json(firstSheet);

                    // Store the row-wise data in the importedData array
                    jsonData.forEach((row, key) => {
                        let keyofstudent = `${row.admission_no}_${row.sl}`;
                        const formatedAdmissionNo = row.admission_no.replace(/ /g, '_').toLowerCase();
                        let note = row.note;

                        // Loop through configArr to set values dynamically for each config and calculate m_total
                        for (const [key, value] of Object.entries(configArr)) {
                            const formattedKey = key.replace(/ /g, '_').toLowerCase();
                            let value = parseFloat(row[formattedKey]) || 0;
                            $(`#${formattedKey}_${formatedAdmissionNo}`).val(value).trigger('input');
                        }

                        $(`#notes_${formatedAdmissionNo}`).val(note);

                        if (1 == row.exam_attendance) {
                            $(`#attendance_${formatedAdmissionNo}`).prop("checked", true).trigger('change');
                        } else {
                            $(`#attendance_${formatedAdmissionNo}`).prop("checked", false).trigger('change');
                        }
                    });
                };

                reader.readAsArrayBuffer(file);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'No file selected',
                    text: 'Please upload an Excel file.',
                    confirmButtonText: 'OK'
                });
            }
        }

        $(document).ready(function() {
            const admissionExamMarkForm = $('#admissionExamMarkForm');
            const programIdField = $('#program_id');
            const sessionIdField = $('#session_id');
            const semesterClassIdField = $('#semester_class_id');
            const admissionExamIdField = $('#admission_exam_id');
            const searchButton = $('#searchButton');
            const resetButton = $('#resetButton');
            const admissionExamMarkDistributionForm = $('#admissionExamMarkDistributionForm');
            const markDistributionTableContainer = $('#markDistributionTableContainer');


            // get semester_class and session by program
            programIdField.change(function() {
                const program_id = programIdField.val();

                semesterClassIdField.empty();
                let option = '';
                if (companyType === 'UNV') {
                    option = '<option selected="selected" value="">Select Semester</option>';
                } else if (companyType === 'SCL') {
                    option = '<option selected="selected" value="">Select Class</option>';
                } else if (companyType === 'CLG') {
                    option = '<option selected="selected" value="">Select Class</option>';
                } else {
                    option = '<option selected="selected" value="">Select Semester/Class</option>';
                }
                semesterClassIdField.prepend(option)

                sessionIdField.empty().prepend(
                    '<option selected="selected" value="">Select Session</option>');

                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}`,
                    data: {
                        program_id: program_id
                    },
                    dataType: 'json',
                    success: function(_response) {
                        $.each(_response, function(key, value) {
                            {
                                if (key === "semesterClassListByProgramChange") {
                                    $.each(value, function(index, result) {
                                        $('#semester_class_id')
                                            .append(
                                                "<option value='" + result
                                                .id +
                                                "'>" + result.name +
                                                "</option>"
                                            );
                                    });
                                }

                                if (key === "sessionListByProgramChange") {
                                    $.each(value, function(index, result) {
                                        $('#session_id')
                                            .append(
                                                "<option value='" + result
                                                .id +
                                                "'>" + result.name +
                                                "</option>"
                                            );
                                    });
                                }


                            }
                        });
                    }
                });
            });

            // get admission exam by semester_class and session
            semesterClassIdField.change(function() {
                const semester_class_id = semesterClassIdField.val();
                const session_id = sessionIdField.val();

                admissionExamIdField.empty().prepend(
                    '<option selected="selected" value="">Select Admission Exam</option>');
                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_admission_exams') }}`,
                    data: {
                        semester_class_id: semester_class_id,
                        session_id: session_id
                    },
                    dataType: 'json',
                    success: function(_response) {

                        $.each(_response, function(index, result) {
                            $('#admission_exam_id')
                                .append(
                                    "<option value='" + index +
                                    "'>" + result +
                                    "</option>"
                                );
                        });
                    }
                });
            });

            resetButton.click(function() {
                programIdField.val('').trigger('change');
                sessionIdField.val('').trigger('change');
                semesterClassIdField.val('').trigger('change');
                admissionExamIdField.val('').trigger('change');
                admissionExamMarkForm.trigger('reset');
            });

            function setErrorsText(errors) {
                $.each(errors, function(key, value) {
                    // if key has institute_
                    $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' +
                        value + '</span>');
                });
            }

            searchButton.click(function(e) {
                e.preventDefault();
                const program_id = programIdField.val();
                const session_id = sessionIdField.val();
                const semester_class_id = semesterClassIdField.val();
                const admission_exam_id = admissionExamIdField.val();

                $('.errormsg').empty();
                markDistributionTableContainer.empty();
                $.ajax({
                    url: `{{ route('eims_admission_exam_mark_list') }}`,
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        program_id: program_id,
                        session_id: session_id,
                        semester_class_id: semester_class_id,
                        admission_exam_id: admission_exam_id
                    },
                    success: function(_response) {
                        if (_response.responseStatus === 'success') {
                            const {
                                config_marks,
                                max_mark,
                                pre_admissions,
                                admission_exam
                            } = _response.data;
                            configArr = config_marks;
                            $('#program_id_hidden').val(admission_exam.program_id);
                            $('#session_id_hidden').val(admission_exam.session_id);
                            $('#semester_class_id_hidden').val(admission_exam
                            .semester_class_id);
                            $('#admission_exam_id_hidden').val(admission_exam.id);
                            let header = ''
                            header += `
                            <div class="row" style="margin-bottom: 2%">
                                <div class="col-sm-4 col-xs-12 col-sm-offset-4 text-center">
                                    <h4>${admission_exam.name}</h4>
                                    <div>${admission_exam.session_name}</div>
                                    <div>${admission_exam.program_name}</div>
                                    <div>${admission_exam.semester_class_name}</div>
                                </div>
                                <div class="col-sm-4 ${admission_exam.is_result_generated ? 'hidden' : null}">
                                    <div style="margin-top: 8%; display: block;">

                                                <input type="file" id="importExcelFile" accept=".xlsx, .xls, .csv" class="form-control dropify inline " data-height="65" style="max-width: 50%;" autocomplete="off">

                                                <button type="button" onclick="importExcelToInputs()" class="btn btn-sm btn-info inline">Upload</button>

                                            <a class="btn btn-sm inline btn-info" style="float: right" onclick="exportTableToExcel('subjectWiseMarksTableForExcel')">
                                                <i class="fa fa-download"></i> Download Sample
                                            </a>

                                    </div>
                                </div>
                            </div>
                            `;
                            markDistributionTableContainer.append(header);

                            let html = '';
                            if (admission_exam.is_result_generated) {
                                html += `<table class="table table-striped table-bordered"
                                   style="width: 100%; border-collapse: collapse; text-align: center"
                                   >
                                    <td class="text-danger">Result Already Generated</td>
                                </table>
                            `;
                            } else {
                                html += `<table class="table table-striped table-bordered"
                                   style="width: 100%; border-collapse: collapse; text-align: center"

                                >`;
                                html += '<thead>';
                                html += '<tr>';
                                html += '<th class="text-nowrap" rowspan="2">SL</th>';
                                html += '<th class="text-nowrap" rowspan="2">Admission No</th>';
                                html += '<th class="text-nowrap" rowspan="2">Name</th>';
                                html += '<th class="text-nowrap" rowspan="2">Category</th>';
                                html += '<th class="text-nowrap" rowspan="2">Gender</th>';
                                html +=
                                    '<th class="text-nowrap" rowspan="2">Exam Attendance</th>';
                                html +=
                                    `<th class="text-nowrap" colspan="${Object.keys(config_marks).length}">Marks</th>`;
                                html +=
                                    `<th class="text-nowrap" rowspan="2">Total Marks <br>${max_mark}</th>`;
                                html += '<th class="text-nowrap" rowspan="2">Note</th>';
                                html += '</tr>';
                                html += '<tr>';
                                for (const [key, value] of Object.entries(config_marks)) {
                                    html += `<th class='text-nowrap'>${key} (${value})</th>`;
                                }
                                html += '</tr>';
                                html += '</thead>';
                                html += '<tbody>';

                                if (pre_admissions.length > 0) {
                                    pre_admissions.forEach((pre_admission, index) => {
                                        const formatedAdmissionNo = pre_admission
                                            .admission_no.replace(/ /g, '_')
                                            .toLowerCase();

                                        html += '<tr style="color: black">';
                                        html += `<td>${index + 1}</td>`;
                                        html +=
                                            `<td class="text-nowrap">${pre_admission.admission_no ?? 'N/A'}</td>`;
                                        html +=
                                            `<td class="text-nowrap" style="text-align: left"> <input type="hidden" id="pre_admission_id_${index}" name="pre_admission_id[]" value="${pre_admission.id}">${pre_admission.name ?? 'N/A'}</td>`;
                                        html += `<td>${pre_admission.category}</td>`;
                                        html += `<td>${pre_admission.gender}</td>`;
                                        html += `<td>
                                <input type="hidden" name="exam_attendance[${pre_admission.id}]" value="0" />
                                <label for="attendance_${formatedAdmissionNo}">
                                    <input type="checkbox" name="exam_attendance[${pre_admission.id}]" id="attendance_${formatedAdmissionNo}" ${pre_admission.attendance == 1 ? 'checked' : ''}  onchange="toggleInputs(this)" value="1" />
                                    &nbsp; Is Attend
                                </label>
                             </td>`;
                                        for (const [key, value] of Object.entries(
                                                config_marks)) {
                                            const formattedKey = key.replace(/ /g, '_')
                                                .toLowerCase();
                                            html += `<td>
                                            <input id="${formattedKey}_${formatedAdmissionNo}"
                                                class="form-control text-center config-mark-input"
                                                type="number"
                                                step="0.1"
                                                name="class_marks[${pre_admission.id}][${key}]"
                                                value="${pre_admission.config_marks[key] ?? ''}"
                                                max="${value}"
                                                ${pre_admission.attendance == 1 ? '' : 'readonly'}
                                                oninput="checkMaxValue(this, ${value})" oninput="return isNumberKey()" />
                                        </td>`;
                                        }
                                        html +=
                                            `<td><input type="text" class="form-control text-center total-marks-input" id="total_marks_${formatedAdmissionNo}" name="total_marks[${pre_admission.id}]" value="${pre_admission.total_marks ?? ''}" readonly="readonly" /></td>`;
                                        html +=
                                            `<td><input type="text" class="form-control text-center note-input" id="notes_${formatedAdmissionNo}" name="notes[${pre_admission.id}]" value="${pre_admission.note ?? ''}" ${pre_admission.attendance == 1 ? '' : 'readonly'} /></td>`;
                                        html += '</tr>';
                                    });
                                } else {
                                    const countHead = Object.keys(config_marks).length + 8;
                                    html +=
                                        `<tr><td colspan="${countHead}" ><span style="background-color:#e6dcdc !important;color:#b24e4e;font-family:cursive;font-weight:bold;">No Data Found</span></td></tr>`;
                                }

                                html += '</tbody>';
                                html += '</table>';
                            }

                            markDistributionTableContainer.append(html);

                            let htmlForExcel = '';
                            htmlForExcel += `<table class="table table-striped table-bordered hidden"
                                   style="width: 100%; border-collapse: collapse; text-align: center"
                                      id="subjectWiseMarksTableForExcel"
                            >`;
                            htmlForExcel += '<thead>';
                            htmlForExcel += '<tr>';
                            htmlForExcel += '<th>sl</th>';
                            htmlForExcel += '<th>admission_no</th>';
                            htmlForExcel += '<th>exam_attendance</th>';
                            for (const [key, value] of Object.entries(config_marks)) {
                                const formattedName = key.replace(/ /g, '_').toLowerCase();
                                htmlForExcel += `<th>${formattedName}</th>`;
                            }

                            htmlForExcel += '<th>note</th>';
                            htmlForExcel += '</tr>';
                            htmlForExcel += '</thead>';
                            htmlForExcel += '<tbody>';
                            if (pre_admissions.length > 0) {
                                pre_admissions.forEach((pre_admission, index) => {
                                    htmlForExcel += '<tr style="color: black">';
                                    htmlForExcel += `<td>${index + 1}</td>`;
                                    htmlForExcel +=
                                        `<td>${pre_admission.admission_no ?? ''}</td>`;
                                    htmlForExcel +=
                                        `<td><input type="text" class="form-control text-center" id="attendance_${index}" value="1" /></td>`;

                                    for (const [key, value] of Object.entries(
                                            config_marks)) {
                                        htmlForExcel += `<td></td>`;
                                    }
                                    htmlForExcel +=
                                        '<td><input type="text" class="form-control text-center" /></td>';
                                    htmlForExcel += '</tr>';

                                });
                            }
                            htmlForExcel += '</tbody>';
                            htmlForExcel += '</table>';
                            markDistributionTableContainer.append(htmlForExcel);

                            if (!admission_exam.is_result_generated) {
                                const submitButton = ` <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12 text-right">
                                        <button type="submit" class="btn btn-info">Submit</button>
                                    </div>
                                </div>`;
                                markDistributionTableContainer.append(submitButton);
                            }
                        }
                    },
                    error: function(_response) {
                        _response = JSON.parse(_response.responseText);
                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        })

                        setErrorsText(_response.errors);
                    }
                });


            });

            admissionExamMarkDistributionForm.on('submit', function(e) {
                e.preventDefault();

                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_admission_exam_mark_store') }}', // Update with the correct route
                            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
                                    })

                                    $('#subjectWiseMarksDistributionModal').modal(
                                        'hide');
                                } 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