@extends('layouts/eims_pre_admission_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    {{Form::open(['method'=>"post", 'id'=>"preAdmissionAdmitCardForm", 'enctype'=>"multipart/form-data"])}}
    {!! Form::hidden('companyId', $company->encoded_id ?? null, ['id'=> 'companyId']) !!}

    <div class="col-md-9 register-right">
        <h4 class="register-heading">{{$pageTitle}}</h4>
        <div class="row register-form">
            <div class="col-md-9">

                <div class="form-group" id="admissionNoHolder">
                    {!! Form::label('admission_no', 'Admission No: ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('admission_no', $admission_no ? base64_decode($admission_no) : null, ['class' => 'form-control', 'id' => 'admission_noAdmission','placeholder' => 'Enter Admission No']) !!}
                        <p id='admission_noe' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('dob', 'Date of birth: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('dob', null, ['class' => 'form-control', 'id' => 'dobAdmission', 'placeholder' => 'dd-mm-yyyy', 'readonly']) !!}
                        <p id='dobe' style="min-height:3px;"></p>
                    </div>
                </div>

                @if($company->companyType === 'UNV'  )
                    {{-- national_id --}}
                    <div class="form-group ">
                        {!! Form::label('national_id', 'National ID: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                        <div>
                            {!! Form::text('national_id', null, ['class' => 'form-control', 'id' => 'national_id', 'placeholder' => 'Enter your national ID']) !!}
                            <p id='national_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @elseif($company->companyType === 'SCL' || $company->companyType === 'CLG')
                    {{-- birth_certificate_id --}}
                    <div class="form-group ">
                        {!! Form::label('birth_certificate_id', 'Birth Certificate ID: <sup class="text-danger">*</sup>', ['class' => ' control-label'], false) !!}
                        <div>
                            {!! Form::text('birth_certificate_id',  null, ['class' => 'form-control', 'id' => 'birth_certificate_id', 'placeholder' => 'Enter your birth certificate ID']) !!}
                            <p id='birth_certificate_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @endif

                {{-- phone_number --}}
                <div class="form-group ">
                    {!! Form::label('phone_number',  'Phone Number: <sup class="text-danger">*</sup> (Same phone number used in admission) ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('phone_number',  null, ['class' => 'form-control', 'id' => 'phone_number', 'type' => 'text', 'placeholder' => 'Enter phone number']) !!}
                        <p id='phone_numbere' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    <button type="button" id="searchButton" class="btn btn-primary" title="Search">
                        <i class="glyphicon glyphicon-ok"> <b>Search</b></i>
                    </button>
                </div>

                <div id="payment_method_information" class="hidden">
                    <div class="form-group">
                        {!! Form::label('payment_method', 'Payment Method: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div class="radio" id="payment_methods_holder"></div>
                        <p id='payment_methode' style="max-height:3px;"></p>
                    </div>

                    {{Form::hidden('pre_admission_fees_id', null, ['id' => 'pre_admission_fees_id'])}}

                    {{-- payment amount --}}
                    <div class="form-group">
                        {!! Form::label('pre_admission_fees_amount', 'Payment Amount: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div>
                            {!! Form::number('pre_admission_fees_amount', null, [
                                'class' => 'form-control',
                                'id' => 'pre_admission_fees_amount',
                                'readonly' => true]) !!}
                            <p id='pre_admission_fees_amounte' style="max-height:3px;"></p>
                        </div>
                    </div>
                </div>

                <div id="payment_information_holder"></div>

                <div class="form-group">
                    <button type="button" id="payButton" class="btn btn-primary hidden" title="Pay">
                        <i class="glyphicon glyphicon-ok"> <b>Pay</b></i>
                    </button>
                </div>
            </div>
        </div>

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

    {{-- Start Admit Download Modal --}}
    @include('eims/settings/examination/designAdmitCard/admitCardDesign')
    {{-- End Admit Download Modal --}}

    {{-- Tab Loading Scripts --}}
    <script type="text/javascript">
        'use strict';

        function downloadAdmissionAdmitCardAsPDF() {
            console.log('downloadAdmissionAdmitCardAsPDF')
            // Target the content of the modal you want to capture
            var element = document.getElementById('admit_card_background_image_logo');

            // Use html2canvas to capture the content as an image
            // Use html2canvas to capture the content as an image
            html2canvas(element, {
                useCORS: true,
                logging: true,
                scale: 2, // Increase the scale for higher resolution image
            }).then(function(canvas) {
                // Convert the canvas to an image
                canvas.toDataURL('image/jpeg');
// Use html2pdf to create a PDF
                const opt = {
                    margin: [0.3, 0.3, 0.3, 0.3], // Custom margins: top, right, bottom, left (in inches)
                    filename: `${$('#admission_noAdmission').val()}_ADMIT_CARD.pdf`,
                    image: {
                        type: 'jpeg',
                        quality: 0.8
                    },
                    html2canvas: {
                        scale: 2, // Ensure the same scale is used here
                        margin: 1
                    },
                    jsPDF: {
                        unit: 'in',
                        format: [10.89, 5], // Custom size: width 8.5 inches, height 11 inches
                        orientation: 'landscape'
                    }
                };

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

        $(document).ready(function () {
            const loadingDiv = '<div style="text-align:center;font-size:30px;padding-top:20px"><i style="font-size:30px;" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span style="font-size:22px;" >Loading...</span></div>';
            const admissionNoHolder = $('#admissionNoHolder');
            const dobField = $('#dobAdmission');
            const phoneNumberField = $('#phone_number');
            const birthCertificateIdField = $('#birth_certificate_id');
            const nationalIdField = $('#national_id');
            const paymentMethodInformation = $('#payment_method_information');
            const paymentMethodsHolder = $('#payment_methods_holder');
            const preAdmissionFeesId = $('#pre_admission_fees_id');
            const preAdmissionFeesAmount = $('#pre_admission_fees_amount');
            const paymentInformationHolder = $('#payment_information_holder');

            const preAdmissionAdmitCardForm = $('#preAdmissionAdmitCardForm');
            const searchButton = $('#searchButton');
            const payButton = $('#payButton');

            dobField.datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                // date must be less than this year - 3year
                maxDate: "-3y",
                yearRange: "-100:+0",
            });


            // searchButton click get admitCard
            searchButton.click(function (e) {
                e.preventDefault();


                $.ajax({
                    url: '{{ route('eims_pre_admission_admit_card') }}', // Change this to your route
                    method: 'POST',
                    data: preAdmissionAdmitCardForm.serialize(),
                    success: function (_response) {
                        const admission = _response.responseData.admission;
                        $('#examRoutineTable').html('');
                        $('#template_view').html(_response.responseData.admitData.template);
                        $('#heading_view').html(admission.admission_exam_name);
                        $('#title_view').html(_response.responseData.admitData.title);
                        $('#exam_center_view').html(_response.responseData.admitData.exam_center);
                        $('#footer_text_view').html(_response.responseData.admitData.footer_text);

                        if (_response.responseData.admitData.name != 0) {
                            $('#candidate_tr').show();
                        } else {
                            $('#candidate_tr').hide();
                        }
                        if (_response.responseData.admitData.father_name != 0) {
                            $('#father_name_tr').show();
                        } else {
                            $('#father_name_tr').hide();
                        }
                        if (_response.responseData.admitData.mother_name != 0) {
                            $('#mother_name_tr').show();
                        } else {
                            $('#mother_name_tr').hide();
                        }
                        if (_response.responseData.admitData.date_of_birth != 0) {
                            $('#dob_tr').show();
                        } else {
                            $('#dob_tr').hide();
                        }
                        if (_response.responseData.admitData.admission_no != 0) {
                            $('#admission_no_tr').show();
                        } else {
                            $('#admission_no_tr').hide();
                        }
                        if (_response.responseData.admitData.address != 0) {
                            $('#address_tr').show();
                        } else {
                            $('#address_tr').hide();
                        }
                        if (_response.responseData.admitData.gender != 0) {
                            $('#gender_tr').show();
                        } else {
                            $('#gender_tr').hide();
                        }
                        if (_response.responseData.admitData.class != 0) {
                            $('#class_tr').show();
                        } else {
                            $('#class_tr').hide();
                        }
                        if (_response.responseData.admitData.section != 0) {
                            $('#section_tr').show();
                        } else {
                            $('#section_tr').hide();
                        }

                        var left_logo_data = (decodeURIComponent(_response.responseData.admitData.left_logo));
                        var right_logo_data = (decodeURIComponent(_response.responseData.admitData.right_logo));
                        var sign_data = (decodeURIComponent(_response.responseData.admitData.sign));
                        var background_image_data =
                            `{{ asset('/images/eims/setting/design_admit_card/background_image') }}/` + (
                                decodeURIComponent(_response.responseData.admitData.background_image));


                        $('#admit_card_left_logo').attr('src',
                            `{{ asset('/images/eims/setting/design_admit_card/left_logo') }}/${left_logo_data}`
                        );

                        $('#admit_card_right_logo').attr('src',
                            `{{ asset('/images/eims/setting/design_admit_card/right_logo') }}/${right_logo_data}`
                        );

                        // console.log(sign_data);

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


                        $('#admit_card_background_image_logo').css('background-image', 'url(' +
                            background_image_data + ')');


                        $('#title_view').html(admission.semester_class_name);
                        $('#roll_number_tr').hide();
                        $('#admission_no').html(admission.admission_no);
                        $('#candidate_name').html(admission.name);
                        $('#dob').html(admission.dob);
                        $('#gender').html(admission.gender);
                        $('#father_name_tr').hide();
                        $('#mother_name_tr').hide();
                        $('#address').html(`{{$company->address}}`);
                        $('#school_name').html(`{{$company->name}}`);
                        $('#exam_center_view').html(`{{$company->name}}`);
                        // add a tr after $('#exam_center_view')
                        if (admission.written_exam_date_time != '') {
                            $('#exam_center_view').parent()
                                .after(`<tr >
                            <td style="text-align: left !important;padding-left:15%"><strong>Written EXAM DATE & TIME</strong></td>
                            <td style="text-align: center;">:</td>
                            <td style="text-align: left !important;padding-left:5%">${admission.written_exam_date_time}</td>
                            </tr>`);
                        }

                        if (admission.viva_exam_date_time != '') {
                            $('#exam_center_view').parent()
                                .after(`<tr >
                            <td style="text-align: left !important;padding-left:15%"><strong>Viva EXAM DATE & TIME</strong></td>
                            <td style="text-align: center;">:</td>
                            <td style="text-align: left !important;padding-left:5%">${admission.viva_exam_date_time}</td>
                            </tr>`);
                        }

                        $('#student_img_tr').parent().parent().remove();

                        $('#downloadButton').attr('onclick', 'downloadAdmissionAdmitCardAsPDF()');
                        $('.modal-title').text('Admit Card');
                        $('.modal-dialog').css('width', '60%');
                        $('.form-horizontal').show();
                        $('#myAdmitViewModal').modal('show');
                    },
                    error: function (_response, status, error) {
                        const responseJSON = _response.responseJSON;
                        Swal.fire({
                            icon: responseJSON.responseStatus,
                            title: responseJSON.responseTitle,
                            text: responseJSON.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        })
                    }
                });

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