@php use App\Models\gnr\GnrCompany; @endphp
<!-- Custom CSS for finer control -->


<!-- Add the necessary CDNs -->
<script src="{{asset('js/html2canvas/1.4.1/html2canvas.min.js')}}"></script>
<script src="{{asset('js/html2pdf.js/0.9.2/html2pdf.bundle.min.js')}}"></script>


{{-- ------- Start Admit Download Modal ------------------ --}}
<div id="myAdmitViewModal" class="modal fade" style="margin-top:5%">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Add a download button in the modal footer -->
            <div class="modal-header">
                <button type="button" class="btn btn-primary" id="downloadButton" onclick="downloadAdmitCardAsPDF()">
                    Download as PDF
                </button>
            </div>


            <div class="modal-body" style="color: #0c0c0c" id="contentToPrint">
                <style>
                    .remarks tr > td, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
                        padding: 6px !important;
                    }

                    .student_information tr > td {
                        padding: 3px !important;
                    }

                    .table-bordered {
                        width: 100%;
                        border: 1px solid black;
                        text-align: center;
                        border-collapse: collapse;
                    }

                    .table-bordered tr {
                        border: 1px solid black;
                    }

                    .table-bordered td {
                        border: 1px solid black;
                    }

                    .table-bordered .text-left {
                        text-align: left;
                        padding-left: 2%;
                    }

                    .remarks, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
                        border: 1px solid #000 !important;
                    }

                    .custom_box {
                        height: 15px;
                        width: 15px;
                        border: 1px solid black;
                    }

                    .value {
                        font-size: 12px !important;
                    }

                    .s_name {
                        font-size: 10px !important;
                    }

                    .line_height {
                        line-height: 1.00;
                    }

                    .v_align {
                        vertical-align: middle !important;
                    }

                    .underline {
                        padding: 0px;
                        display: inline-block;
                        border-top: 1px solid #000000;
                    }

                    .fail {
                        border-bottom: 2px solid red;
                    }

                    .modal-dialog {
                        width: 210mm;
                        max-width: 210mm;
                        height: 297mm;
                        max-height: 297mm;
                        margin: auto;
                    }

                    .modal-content {
                        width: 100%;
                        height: 100%;
                        padding: 20mm;
                        box-sizing: border-box;
                    }

                    .modal-body {
                        width: 100%;
                        height: 100%;
                        overflow: auto;
                    }

                    .cut-line {
                        position: relative;
                        text-align: center;
                        padding: 10px 0;
                    }

                    .cut-line hr {
                        border: none;
                        border-top: 2px dotted #000;
                        margin: 0;
                    }

                    .scissor {
                        position: absolute;
                        top: 50%;
                        left: 10px;
                        transform: translateY(-50%);
                        font-size: 20px;
                    }

                    .content-to-print {
                        page-break-inside: avoid;
                    }

                    @page {
                        size: A4;
                        margin: 20mm;
                    }

                    @media print {
                        body {
                            width: 210mm;
                            height: 297mm;
                            margin: 0;
                            padding: 0;
                        }

                        .modal-dialog,
                        .modal-content {
                            width: 100%;
                            height: 100%;
                            margin: 0;
                            padding: 0;
                        }

                        .modal-body {
                            width: 100%;
                            height: 100%;
                            overflow: visible;
                        }
                    }
                </style>
                <div class="content-to-print" style="padding:20px 0.8in 20px !important; margin-bottom: 2px;">
                    <!--start this row is for mark_sheet header -->
                    @php
                        $company = GnrCompany::find(1);
                    @endphp
                    <div class="row" style="margin-bottom: 1%">
                        <div class="col-xs-1 text-right" style="padding-right: 0 !important;">
                            @if(is_null($company->image))
                                <div style="width:50px;height: 50px;"></div>
                            @else
                                <img src="{{ asset("images/company/$company->image") }}"
                                     style="width:50px;height: 50px;" alt="{{ $company->name }}">
                            @endif

                        </div>
                        <div class="col-xs-3 text-left">
                            <h6 class="line_height">{{$company->name}}</h6>
                            @if(!empty($company->address))
                                <div style="font-size: 9px;" class="line_height">{{$company->address}}</div>
                            @endif
                        </div>
                        <div class="col-xs-4 text-center" style="padding-top: 10px">
                            <h5 style="font-weight: bold; margin: 0 0">Admit Card</h5>
                            <h6 id="title_view" style=" margin-top: 0">### Examination XXXX</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-10">
                            <div class="row" style="font-size: 8px;">
                                <div id="roll_number_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="roll_number_label">ROLL NO</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="roll_number">xx</div>
                                </div>
                                <div id="admission_no_student_id_no_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="admission_no_student_id_no_label">ADMISSION NO</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="admission_no_student_id_no">18S168375</div>
                                </div>
                                <div id="student_name_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="student_name_label">STUDENT NAME</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="student_name">XXXX XXXX XXXX</div>
                                </div>
                                <div id="semester_class_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="semester_class_label">
                                        @if($companyType === 'UNV')
                                            SEMESTER
                                        @else
                                            CLASS
                                        @endif
                                    </div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="semester_class">VIII</div>
                                </div>
                                <div id="dob_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="dob_label">DATE OF BIRTH</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="dob">XX-XX-XXXX</div>
                                </div>
                                <div id="gender_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="gender_label">GENDER</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="gender">Male</div>
                                </div>
                                <div id="father_name_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="father_name_label">FATHER'S NAME</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="father_name"></div>
                                </div>
                                <div id="mother_name_tr" class="col-sm-6 row">
                                    <div class="text-left col-sm-5" id="mother_name_label">MOTHER'S NAME</div>
                                    <div class="col-xs-2">:</div>
                                    <div class="text-left col-xs-5" id="mother_name"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <div id="studentImageHolder" class="text-right">
                                <div style="width:60px;height: 60px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12" style="font-size: 8px;">
                            <div id="theoryExamRoutineTable">
                                <small>Theory Exam</small>
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <td>DATE</td>
                                        <td>TIME</td>
                                        <td>SUBJECT CODE</td>
                                        <td>SUBJECT NAME</td>
                                    </tr>
                                    </thead>

                                    <tbody id="theoryExamRoutineTableBody">
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7713</td>
                                        <td class="text-left">MATHEMATICS</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7714</td>
                                        <td class="text-left">SCIENCE</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7715</td>
                                        <td class="text-left">ENGLISH</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7716</td>
                                        <td class="text-left">SOCIAL SCIENCE</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div id="practicalExamRoutineTable">
                                <small>Practical Exam</small>
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <td>DATE</td>
                                        <td>TIME</td>
                                        <td>SUBJECT CODE</td>
                                        <td>SUBJECT NAME</td>
                                    </tr>
                                    </thead>

                                    <tbody id="practicalExamRoutineTableBody">
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7713</td>
                                        <td class="text-left">MATHEMATICS</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7714</td>
                                        <td class="text-left">SCIENCE</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7715</td>
                                        <td class="text-left">ENGLISH</td>
                                    </tr>
                                    <tr>
                                        <td>03-Jun-2024</td>
                                        <td>02:00 PM - 04:00 PM</td>
                                        <td>7716</td>
                                        <td class="text-left">SOCIAL SCIENCE</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="signature-container" style="text-align: right;">

                        <img class="signature-image" src="" alt="" id="admit_card_sign" style="width: 80px;">

                        <span style="font-size: 8px;display: block;">Administration Signature</span>
                    </div>
                </div>

            </div>

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

<script type="text/javascript">
    //////////Start PDF Download////////////////////////

    function downloadAdmitCardAsPDF() {
        // generate PDF from the modal with default settings
        const divToPrint = document.getElementById('contentToPrint');


        const studentIdNo = $('#admission_no_student_id_no').text().trim();
        const currentDateTime = new Date().toLocaleString('en-GB', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        }).replace(/[/, ]/g, '_').replace(/:/g, '_');
        const filename = studentIdNo ? `${studentIdNo}_${currentDateTime}.pdf` : `admit_card_${currentDateTime}.pdf`;

        const opt = {
            margin: 0,
            filename: filename,
            image: {type: 'jpeg', quality: 1.0},
            html2canvas: {scale: 3},
            jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'} // Set the format to A4 portrait
        };

        // Adjust the height of the content to 1/3 of A4 height

        html2pdf().from(divToPrint).set(opt).save();
    }

    //////////End PDF Download////////////////////////


    function forAdmitCard(id, student_id = null, academic_exam_id = null) {
        $.ajax({
            url: '{{ route('eims_admit_card_view') }}', // Change this to your route
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}', // Include CSRF token
                id: id,
                student_id: student_id,
                academic_exam_id: academic_exam_id,
            },
            success: function (_response) {
                const {
                    admitCardDesign,
                    studentData,
                    academicExamData,
                    theoreticalExamRoutines,
                    practicalExamRoutines
                } = _response.responseData;

                if (admitCardDesign.is_visible_exam_name == 1) {
                    $('#title_view').html(academicExamData?.name ?? admitCardDesign?.title);
                } else {
                    $('#title_view').html('');
                }

                // if studentData?.photo is null then set studentImageHolder with a div of same size
                if (studentData?.photo === null || admitCardDesign.is_visible_photo == 0) {
                    $('#studentImageHolder').html('<div style="width:60px;height: 60px;"></div>');
                } else {
                    $('#studentImageHolder').html(`<img src="{{ asset('images/eims/student') }}/${studentData?.photo}" alt="Student Photo" style="width:60px;height: 60px;">`);
                }

                if (admitCardDesign.is_visible_roll_number == 1) {
                    $("#roll_number_tr").show();
                    $("#roll_number").html(studentData?.roll_no);
                } else {
                    $("#roll_number_tr").hide();
                    $("#roll_number").html("XX");
                }

                if (admitCardDesign.is_visible_student_name == 1) {
                    $("#student_name_tr").show();
                    $('#student_name').html(studentData?.name);
                } else {
                    $("#student_name_tr").hide();
                    $('#student_name').html('');
                }

                if (admitCardDesign.is_visible_father_name == 1) {
                    $('#father_name_tr').show();
                    $('#father_name').html(studentData?.eims_student_information.father_name);
                } else {
                    $('#father_name_tr').hide();
                }
                if (admitCardDesign.is_visible_mother_name != 0) {
                    $('#mother_name_tr').show();
                    $('#mother_name').html(studentData?.eims_student_information.mother_name);
                } else {
                    $('#mother_name_tr').hide();
                }
                if (admitCardDesign.is_visible_date_of_birth != 0) {
                    $('#dob_tr').show();
                    $('#dob').html(studentData?.eims_student_information.dob);
                } else {
                    $('#dob_tr').hide();
                }
                if (admitCardDesign.is_visible_admission_no != 0) {
                    $('#admission_no_student_id_no_tr').show();
                    if (studentData?.student_id_no == null) {
                        $('#admission_no_student_id_no').html(studentData?.admission_no);
                    } else {
                        $('#admission_no_student_id_no_label').html("STUDENT ID NO");
                        $('#admission_no_student_id_no').html(studentData?.student_id_no);
                    }
                } else {
                    $('#admission_no_student_id_no_tr').hide();
                }

                if (admitCardDesign.is_visible_gender != 0) {
                    $('#gender_tr').show();
                    $('#gender').html(studentData?.gender.toUpperCase());
                } else {
                    $('#gender_tr').hide();
                }

                if (admitCardDesign.is_visible_semester_class != 0) {
                    $('#semester_class_tr').show();
                    $('#semester_class').html(studentData?.eims_semester_class.name);
                } else {
                    $('#semester_class_tr').hide();
                }

                if (admitCardDesign.is_visible_section != 0) {
                    $('#section_tr').show();
                    $('#section').html(studentData?.eims_section.name);
                } else {
                    $('#section_tr').hide();
                }


                if (admitCardDesign.is_visible_exam_routine == 0) {
                    $('#theoryExamRoutineTable').hide();
                    $('#practicalExamRoutineTable').hide();
                } else {
                    $('#theoryExamRoutineTable').show();
                    $('#practicalExamRoutineTable').show();
                    if (theoreticalExamRoutines.length != 0 || practicalExamRoutines.length != 0) {
                        console.log(theoreticalExamRoutines);

                        // if theoreticalExamRoutine is empty then hide the table
                        if (theoreticalExamRoutines.length === 0) {
                            $('#theoryExamRoutineTable').hide();
                        } else {
                            $('#theoryExamRoutineTableBody').empty();
                            theoreticalExamRoutines.forEach((routine) => {
                                $('#theoryExamRoutineTableBody').append(`
                                    <tr >
                                        <td>${routine.subject_exam_date}</td>
                                        <td>${routine.exam_start_time} -  ${routine.exam_end_time}</td>
                                        <td>${routine.course_subject_code}</td>
                                        <td class="text-left" >${routine.course_subject_name}</td>
                                    </tr>
                                `);
                            });

                            $('#theoryExamRoutineTable').show();
                        }

                        // if practicalExamRoutine is empty then hide the table
                        if (practicalExamRoutines.length === 0) {
                            $('#practicalExamRoutineTable').hide();
                        } else {
                            $('#practicalExamRoutineTableBody').empty();

                            practicalExamRoutines.forEach((routine) => {
                                $('#practicalExamRoutineTableBody').append(`
                        <tr style="background-color: transparent !important;">
                            <td>${routine.subject_exam_date}</td>
                            <td>${routine.exam_start_time} -  ${routine.exam_end_time}</td>
                            <td>${routine.course_subject_code}</td>
                            <td class="text-left" >${routine.course_subject_name}</td>
                        </tr>
                    `);
                            });
                            $('#practicalExamRoutineTable').show();
                        }
                    }
                }

                const sign_image_data = (decodeURIComponent(admitCardDesign.sign_image));

                if (sign_image_data !== null && sign_image_data !== 'null' && sign_image_data !== undefined) {
                    $('#admit_card_sign').show().attr('src', `{{ asset('/images/eims/setting/design_admit_card/sign') }}/${sign_image_data}`);
                } else {
                    $('.signature-image').hide();
                    $(".signature-line").css("margin-top", "25%  !important");
                }

                const background_image_data = (decodeURIComponent(admitCardDesign.background_image));
                if (background_image_data !== null && background_image_data !== 'null' && background_image_data !== undefined) {
                    $('.content-to-print').css({
                        'background-image': `url({{ asset('images/eims/setting/design_admit_card/background_image') }}/${background_image_data})`,
                        'background-size': 'cover',
                        'background-color': 'rgba(255, 255, 255, 0.5)' // Adjust the alpha value to control opacity
                    });
                } else {
                    $('.content-to-print').css({
                        'background-image': `url("")`,
                        'background-size': 'cover',
                        'background-color': 'rgba(255, 255, 255, 0.5)' // Adjust the alpha value to control opacity
                    });
                }
            },
            error: function (_response) {
                const {responseStatus, responseTitle, responseText} = _response.responseJSON;
                Swal.fire({
                    icon: responseStatus,
                    title: responseTitle,
                    text: responseText,
                    showConfirmButton: false,
                    timer: 1500
                })
                dataTable.ajax.reload();
            }
        });
    }
</script>