@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    <style>
        .bg-dark {
            background-color: #343a40 !important;
        }

        /* Responsive border classes */
        .border {
            border: 1px solid black !important;
        }

        /* Default styles */
        .d-flex {
            display: flex;
        }

        /* Default styles */
        .d-inline {
            display: inline-block;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .font-weight-bold {
            font-weight: 700 !important;
        }

        /* Bootstrap font size utility classes */
        .fs-1 {
            font-size: 2.5rem !important;
        }

        .fs-2 {
            font-size: 2rem !important;
        }

        .fs-3 {
            font-size: 1.75rem !important;
        }

        .fs-4 {
            font-size: 1.5rem !important;
        }

        .fs-5 {
            font-size: 1.25rem !important;
        }

        .fs-6 {
            font-size: 1rem !important;
        }

        .justify-content-center {
            justify-content: center;
        }

        /* Bootstrap margin utility classes */
        .m-0 {
            margin: 0 !important;
        }

        .mt-0, .my-0 {
            margin-top: 0 !important;
        }

        .mr-0, .mx-0 {
            margin-right: 0 !important;
        }

        .mb-0, .my-0 {
            margin-bottom: 0 !important;
        }

        .ml-0, .mx-0 {
            margin-left: 0 !important;
        }

        .m-1 {
            margin: 0.25rem !important;
        }

        .mt-1, .my-1 {
            margin-top: 0.25rem !important;
        }

        .mr-1, .mx-1 {
            margin-right: 0.25rem !important;
        }

        .mb-1, .my-1 {
            margin-bottom: 0.25rem !important;
        }

        .ml-1, .mx-1 {
            margin-left: 0.25rem !important;
        }

        .m-2 {
            margin: 0.5rem !important;
        }

        .mt-2, .my-2 {
            margin-top: 0.5rem !important;
        }

        .mr-2, .mx-2 {
            margin-right: 0.5rem !important;
        }

        .mb-2, .my-2 {
            margin-bottom: 0.5rem !important;
        }

        .ml-2, .mx-2 {
            margin-left: 0.5rem !important;
        }

        .m-3 {
            margin: 1rem !important;
        }

        .mt-3, .my-3 {
            margin-top: 1rem !important;
        }

        .mr-3, .mx-3 {
            margin-right: 1rem !important;
        }

        .mb-3, .my-3 {
            margin-bottom: 1rem !important;
        }

        .ml-3, .mx-3 {
            margin-left: 1rem !important;
        }

        .m-4 {
            margin: 1.5rem !important;
        }

        .mt-4, .my-4 {
            margin-top: 1.5rem !important;
        }

        .mr-4, .mx-4 {
            margin-right: 1.5rem !important;
        }

        .mb-4, .my-4 {
            margin-bottom: 1.5rem !important;
        }

        .ml-4, .mx-4 {
            margin-left: 1.5rem !important;
        }

        .m-5 {
            margin: 3rem !important;
        }

        .mt-5, .my-5 {
            margin-top: 3rem !important;
        }

        .mr-5, .mx-5 {
            margin-right: 3rem !important;
        }

        .mb-5, .my-5 {
            margin-bottom: 3rem !important;
        }

        .ml-5, .mx-5 {
            margin-left: 3rem !important;
        }

        .m-auto {
            margin: auto !important;
        }

        .mt-auto, .my-auto {
            margin-top: auto !important;
        }

        .mr-auto, .mx-auto {
            margin-right: auto !important;
        }

        .mb-auto, .my-auto {
            margin-bottom: auto !important;
        }

        .ml-auto, .mx-auto {
            margin-left: auto !important;
        }

        .no-margin {
            margin: 0 !important;
        }

        /* Responsive padding classes */
        .p-2 {
            padding: 0.5rem !important;
        }

        /* Bootstrap padding-top utility classes */
        .pt-0 {
            padding-top: 0 !important;
        }

        .pt-1 {
            padding-top: 0.25rem !important;
        }

        .pt-2 {
            padding-top: 0.5rem !important;
        }

        .pt-3 {
            padding-top: 1rem !important;
        }

        .pt-4 {
            padding-top: 1.5rem !important;
        }

        .pt-5 {
            padding-top: 3rem !important;
        }

        .py-2 {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }

        /* Bootstrap padding-left utility classes */
        .pl-0 {
            padding-left: 0 !important;
        }

        .pl-1 {
            padding-left: 0.25rem !important;
        }

        .pl-2 {
            padding-left: 0.5rem !important;
        }

        .pl-3 {
            padding-left: 1rem !important;
        }

        .pl-4 {
            padding-left: 1.5rem !important;
        }

        .pl-5 {
            padding-left: 3rem !important;
        }

        .pr-2 {
            padding-right: 0.5rem !important;
        }

        .pr-3 {
            padding-right: 1rem !important;
        }

        .px-3 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        /* Small devices (≥576px) */
        @media (min-width: 576px) and (max-width: 767px) {
            .d-inline {
                display: inline;
            }

            .d-sm-block {
                display: block !important;
            }
        }

        /* Medium devices (≥768px) */
        @media (min-width: 768px) and ( max-width: 991px) {
        }

        /* Large devices (≥992px) */
        @media (min-width: 992px) and (max-width: 1199px) {
        }

        /* Extra large devices (≥1200px) */
        @media (min-width: 1200px) {
        }
    </style>
    <div class="row " style="margin-bottom: 90px;">
        <div class="col-md-12">
            <div class="viewTitle">
                <div class="panel-options">
                    <a href="{{route('eims_application')}}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list addIcon"></i>{{$pageTitle}} List
                    </a>
                </div>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a id="informationTabButton" href="#informationTab" data-toggle="tab">
                                <span class=""><i class="fa-user"></i></span>
                                <span class="hidden-xs">Information</span>
                            </a>
                        </li>
                        <li>
                            <a id="feesTabButton" href="#feesTab" data-toggle="tab">
                                <span class=""><i class="fa fa-money"></i></span>
                                <span class="hidden-xs">Fees Details</span>
                            </a>
                        </li>
                    </ul> {{-- ul nav nav-tabs --}}
                    <br>
                    <br>
                    <div class="container" style="color: black;">

                        {{-- Header --}}
                        <div class="row">
                            {{-- make the image vertically and horizontally center inside this div--}}
                            <div class="col-md-2 col-sm-2 col-xs-12 d-flex justify-content-center">
                                <img
                                    class="img-responsive"
                                    src="{{ asset('images/company/' . $company->image) }}"
                                    alt="{{ $company->name }}"
                                >
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <h1 style='font-family: "Arial", sans-serif'>{{$company->name}}</h1>
                                <div><b>Address: </b>{{$company->address}}</div>
                                <div>
                                    {{ $company->phone ? "Phone: $company->phone" : null }}
                                    {{$company->telephone ? ', Telephone: ' . $company->telephone : null}}
                                </div>
                                <div>Email: {{$company->email}}</div>
                                <div>Web: {{$company->website}}</div>
                            </div>
                            <div class="col-md-2 col-sm-2 col-xs-12 mt-3">
                                <div style="position: relative; display: inline-block;"
                                     onclick="document.getElementById('student_photo').click();">
                                    <img
                                        id="student_photo_preview"
                                        class="img-responsive"
                                        src="{{ asset('images/eims/passport-size.png') }}"
                                        alt="Student Photo"
                                        style="max-width: 125px; max-height: 125px;"
                                    >
                                    <i
                                        class="fa fa-camera"
                                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                    ></i>
                                </div>
                                <div>
                                    <small class="text-center text-small">Please click above to upload photo.</small>
                                    <p id='student_photoe' style="max-height:3px;"></p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            {{-- admission_no --}}
                            <div class="col-md-4">
                                <div class="d-flex flex-wrap mb-2" style="font-size: 12px;">
                                    <span class="py-2 pr-3">Admission No: <sup class='text-danger'>*</sup></span>
                                    <span class="d-flex">
                                        @foreach(str_split($student_admission_no) as $char)
                                            <span class="border p-2 d-inline ">{{ $char }}</span>
                                        @endforeach
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4 text-center">
                                        <span class="bg-dark text-white font-weight-bold p-2 fs-3">
                                            Application For Admission
                                        </span>
                            </div>
                            <div class="col-sm-4"></div>
                        </div>
                        <hr>


                        {!! Form::open(['url' => '', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'encrypt' => 'multipart/form-data', 'id' => 'application_form' ]) !!}
                        {!! Form::file('student_photo', [
                                     'class' => 'form-control hide',
                                     'id' => 'student_photo',
                                     'type' => 'file',
                                     'accept' => 'image/png, image/jpeg, image/jpg',
                                     'placeholder' => 'Upload student photo',
                                     'onchange' => 'validateFileSize(this)'
                                 ]) !!}
                        {{-- pre_admission --}}
                        @if($preAdmissionsCount > 0)
                            <div class="col-sm-12 mt-15">
                                <div class="form-group row">
                                    {!! Form::label('pre_admission_no', 'Pre Admission No:', ['class' => 'col-sm-2 col-sm-offset-2  control-label'], false) !!}
                                    <div class="col-sm-4">
                                        {!! Form::hidden('pre_admission_id', null, ['id' => 'pre_admission_id']) !!}
                                        {!! Form::text('pre_admission_no', null, ['class'=>'form-control', 'id' => 'pre_admission_no', 'placeholder' => 'PAXXXXX....', 'autocomplete' => 'off']) !!}
                                        <p id='pre_admission_ide' style="min-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                        @endif


                        <div class="tab-content">
                            <div class="tab-pane active" id="informationTab">
                                <div id="loadInformationTab"></div>
                            </div>
                            <div class="tab-pane" id="feesTab">
                                <div id="loadFeesTab"></div>
                            </div>
                        </div> {{-- div class="tab-content" --}}
                        <br>
                        {{-- form footer buttons --}}
                        <div class="row">
                            <div class="col-sm-12 text-right text-center-sm">
                                <button type="button" class="btn btn-info" id="backButton">Back</button>
                                <button type="button" class="btn btn-info" id="nextButton">Next</button>
                                <button type="submit" class="btn btn-info hidden" id="submitButton">Submit</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div> {{-- div panel-body --}}
            </div> {{-- Div panel panel-default panel-border --}}
            <div class="footerTitle"></div>
        </div> {{-- col-md-10 --}}
    </div>

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

        function validateFileSize(input) {
            const maxSize = 2 * 1024 * 1024; // 2MB
            const file = input.files[0];
            if (file.size > maxSize) {
                alert('File size exceeds 2MB');
                input.value = ''; // Clear the input
            }
        }

        // student photo preview
        $('#student_photo').change(function () {
            let reader = new FileReader();
            reader.onload = (e) => {
                $('#student_photo_preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        });

        // Validation function for Tab
        function validateTab(url) {
            let isValid = true;
            const formData = new FormData($('#application_form')[0]);

            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                async: false, // Make the request synchronous
                beforeSend: function () {
                    $('.errormsg').remove();
                },
                error: function (response) {
                    isValid = false;

                    const responseJson = response.responseJSON;
                    $.each(responseJson.errors, function (key, value) {
                        $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                    });
                    Swal.fire({
                        icon: responseJson.responseStatus,
                        title: responseJson.responseTitle,
                        text: responseJson.responseText,
                    });
                }
            });

            return isValid;

        }

        // Function to handle button visibility
        function handleButtonVisibility(currentTabIndex, tabListLength) {
            tabListLength -= 1;
            if (currentTabIndex === tabListLength) {
                $('#submitButton').removeClass('hidden');
                $('#nextButton').addClass('hidden');
            } else {
                $('#submitButton').addClass('hidden');
                $('#nextButton').removeClass('hidden');
            }
        }

        function getPreAdmissionList(object) {
            const pre_admission_no = object.value;
            $.ajax({
                type: 'post',
                url: `{{ url('api/eims/pre-admission/passed-pre-admission-list') }}`,
                data: {
                    pre_admission_no: pre_admission_no
                },
                dataType: 'json',
                success: function (response) {
                    // Process the response and update the UI
                    // update datalist pre_admission_datalist
                    const preAdmissionDatalist = $('#pre_admission_datalist');
                    preAdmissionDatalist.empty();
                    response.data.forEach(function (item) {
                        preAdmissionDatalist.append(`<option value="${item.admission_no}">`);
                    });
                },
                error: function (response) {
                    const {responseStatus, responseTitle, responseText} = response.responseJSON;
                    Swal.fire({
                        icon: responseStatus,
                        title: responseTitle,
                        text: responseText,
                        confirmButtonText: 'Ok'
                    });
                }
            });
        }

        $(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 tabList = ['#informationTab', '#feesTab'];
            const tabButtonList = ['#informationTabButton', '#feesTabButton'];
            let currentTabIndex = 0;
            const preAdmissionNoField = $("#pre_admission_no");

            $("#loadInformationTab").html(loadingDiv).load('{{route('eims_application_information_tab')}}');

            $("#feesTabButton").click(function (event) {
                const loadFeesTab = $("#loadFeesTab");

                const programId = $('#program_id').val();
                const semesterClassId = $('#semester_class_id').val();
                const semesterClassGroupId = $('#semester_class_group_id').val();
                const session = $('#session_id').val();

                if (!validateTab(`{{route('eims_application_validate_information_tab')}}`)) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }

                let urlParameters = '';
                if (programId !== '' && programId !== undefined) {
                    urlParameters += urlParameters === '' ? `?program_id=${programId}` : `&program_id=${programId}`;
                }
                if (semesterClassId !== '' && semesterClassId !== undefined) {
                    urlParameters += urlParameters === '' ? `?semester_class_id=${semesterClassId}` : `&semester_class_id=${semesterClassId}`;
                }
                if (semesterClassGroupId !== '' && semesterClassGroupId !== undefined) {
                    urlParameters += urlParameters === '' ? `?semester_class_group_id=${semesterClassGroupId}` : `&semester_class_group_id=${semesterClassGroupId}`;
                }
                if (session !== '' && session !== undefined) {
                    urlParameters += urlParameters === '' ? `?session_id=${session}` : `&session_id=${session}`;
                }


                loadFeesTab.html(loadingDiv).load(`{{route('eims_application_fees_tab')}}${urlParameters}`);
                handleButtonVisibility(2, tabList.length);
            });

            $('#backButton').click(function () {
                if (currentTabIndex > 0) {
                    $(tabButtonList[currentTabIndex - 1]).trigger('click');
                    currentTabIndex--;
                    handleButtonVisibility(currentTabIndex, tabList.length);
                }
            });

            $('#nextButton').click(function () {
                if (currentTabIndex < tabList.length - 1) {
                    const validationUrls = [
                        `{{route('eims_application_validate_information_tab')}}`,
                    ];

                    if (currentTabIndex === 0 && !validateTab(validationUrls[0])) {
                        return;
                    }

                    $(tabButtonList[currentTabIndex + 1]).trigger('click');
                    currentTabIndex++;
                    handleButtonVisibility(currentTabIndex, tabList.length);
                }
            });

            function setErrorsText(errors) {
                $.each(errors, function (key, value) {
                    // if key has institute_
                    if (key.includes('institute_')) {
                        // id and key slice from .
                        const id = key.slice(key.indexOf('.') + 1);
                        key = key.slice(0, key.indexOf('.'));
                        $($(`.${key}_error`)[id]).empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                    } else {
                        $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                    }
                });
            }


            preAdmissionNoField.autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "{{ route('eims_passed_pre_admission_list') }}",
                        type: "POST",
                        data: {
                            pre_admission_no: request.term
                        },
                        dataType: "json",
                        success: function (data) {
                            response($.map(data.data, function (item) {
                                return {
                                    label: `${item.admission_no} | ${item.name} | ${item.phone_number}`,
                                    value: item.admission_no,
                                    data: {
                                        id: item.id
                                    }
                                };
                            }));
                        },
                        error: function (response) {
                            const {responseStatus, responseTitle, responseText} = response.responseJSON;
                            Swal.fire({
                                icon: responseStatus,
                                title: responseTitle,
                                text: responseText,
                                confirmButtonText: 'Ok'
                            });
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    // Do something when an item is selected
                    $('#pre_admission_id').val(ui.item.data.id);
                    // send ajax request to get pre admission info
                    const preAdmissionId = ui.item.data.id;
                    $.ajax({
                        type: 'post',
                        url: `{{ route('eims_passed_pre_admission_info') }}`,
                        data: {
                            pre_admission_id: preAdmissionId
                        },
                        dataType: 'json',
                        success: function (response) {
                            console.log(response, 'response');
                            const preAdmission = response.data;

                            if ($("#program_id").data('select2')) {
                                $("#program_id").select2('destroy');
                            }
                            $("#program_id").val(preAdmission.program_id);

                            if ($("#session_id").data('select2')) {
                                $("#session_id").select2('destroy');
                            }
                            $("#session_id").val(preAdmission.session_id);

                            if ($("#semester_class_id").data('select2')) {
                                $("#semester_class_id").select2('destroy');
                            }
                            $("#semester_class_id").val(preAdmission.semester_class_id);

                            if ($("#semester_class_group_id").data('select2')) {
                                $("#semester_class_group_id").select2('destroy');
                            }
                            $("#semester_class_group_id").val(preAdmission.semester_class_group_id).change();

                            $('#name').val(preAdmission.name);
                            $('#phone_number').val(preAdmission.phone_number);
                            $('#email').val(preAdmission.email);
                            $('input[name="gender"][value="' + preAdmission.gender + '"]').prop('checked', true);

                            $('#dob').val(preAdmission.dob);
                            $('#religion').val(preAdmission.religion);
                            $('#blood_group').val(preAdmission.blood_group);
                            $('#nationality').val(preAdmission.nationality);
                            $('#birth_certificate_id').val(preAdmission.birth_certificate_id);
                            $('#nid').val(preAdmission.nid);


                            const educationalInfo = preAdmission.eims_pre_admission_educational_information;
                            educationalInfo.forEach(function (item, index) {
                                if (index > 0) {
                                    // add new row
                                    $('#addPreviousInstitute').trigger('click');
                                }
                                const row = $('.previous-institute').eq(index);
                                row.find('.institute-name-input').val(item.institute_name);
                                row.find('.institute-board-id-input').val(item.institute_board_id).change();
                                row.find('.institute-group-id-input').val(item.institute_group_id).change();
                                row.find('.institute-year-input').val(item.institute_year);
                                row.find('.institute-gpa-input').val(item.institute_gpa);
                            });

                        },
                        error: function (response) {
                            const {responseStatus, responseTitle, responseText} = response.responseJSON;
                            Swal.fire({
                                icon: responseStatus,
                                title: responseTitle,
                                text: responseText,
                                confirmButtonText: 'Ok'
                            });
                        }
                    });
                }
            });

            // Initial call to set button visibility
            handleButtonVisibility(currentTabIndex, tabList.length);

            // Form Submission
            $('form').submit(function (event) {
                event.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    type: 'post',
                    url: '{{route("eims_application_store")}}',
                    data: formData,
                    processData: false, // Prevent jQuery from automatically transforming the data into a query string
                    contentType: false, // Prevent jQuery from setting the content type
                    dataType: 'json',
                    beforeSend: function () {
                        $('.errormsg').remove();
                    },
                    success: function (_response) {
                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        if (_response.responseStatus === 'success') {
                            setTimeout(function () {
                                window.location.href = "{{route('eims_application')}}";
                            }, 1000);
                        }

                    },
                    error: function (_response) {
                        const responseJSON = _response.responseJSON;

                        Swal.fire({
                            icon: responseJSON.responsibleStatus,
                            title: responseJSON.responseTitle,
                            text: responseJSON.responseText,
                        });

                        const errors = responseJSON.errors;
                        if (errors) {
                            setErrorsText(errors);
                        }
                    }
                });
            });
        });
    </script>
@endsection