@extends('layouts/eims_admission_layout_after_result')
@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_pre_admission_result')}}" class="btn btn-info pull-right addViewBtn">
                        X
                    </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="{{ $applicant->photo ?  asset("images/eims/student/$applicant->photo")  :  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)'
                                 ]) !!}
                        {!! Form::hidden('pre_admission_id', $applicant->id, ['id' => 'pre_admission_id']) !!}

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

        $(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;

            $("#loadInformationTab").html(loadingDiv).load('{{route('eims_admission_form_after_result_information_tab')}}?applicant_id={{$applicant->id}}');

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

                const programIdField = $('#program_id');
                const semesterClassIdField = $('#semester_class_id');
                const semesterClassGroupIdField = $('#semester_class_group_id');
                const sessionField = $('#session_id');

                const programId = programIdField.val();
                const semesterClassId = semesterClassIdField.val();
                const semesterClassGroupId = semesterClassGroupIdField.val();
                const session = sessionField.val();


                if (!validateTab(`{{route('eims_admission_form_after_result_validate_information_tab')}}?applicant_id={{$applicant->id}}`)) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
                let urlParameters = '?applicant_id={{$applicant->id}}';
                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_admission_form_after_result_fees_tab')}}${urlParameters}`);

                handleButtonVisibility(1, 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_admission_form_after_result_validate_information_tab')}}?applicant_id={{$applicant->id}}`,
                    ];

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

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

            // 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]);
            });

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

            // 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;
                        setErrorsText(responseJson.errors);
                        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');
                }
            }

            // 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_update")}}?applicant_id={{$applicant->id}}`,
                    url: '{{route("eims_admission_form_after_result_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_pre_admission_applicant_profile')}}";
                            }, 1000);
                        }

                    },
                    error: function (_response) {
                        const responseJSON = _response.responseJSON;
                        const errors = responseJSON.errors;
                        Swal.fire({
                            icon: responseJSON.responsibleStatus,
                            title: responseJSON.responseTitle,
                            text: responseJSON.responseText,
                        });
                        if (errors) {
                            setErrorsText(errors);
                        }
                    }
                });
            });
        });
    </script>
@endsection