@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_student_list')}}" 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>
                        @if( $student->status !== 'admitted')
                            <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>
                        @endif
                    </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="{{ $student->photo ?  asset("images/eims/student/$student->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' => 'student_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)'
                                 ]) !!}
                        {{-- Status--}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    {!! Form::label('status', 'Status', ['class' => 'col-md-4 control-label']) !!}
                                    <div class="col-md-8">
                                        {!! Form::select('status', $statusList ?? [], $student->status, ['class' => 'form-control custom-select2', 'id' => 'status']) !!}
                                        <p id='statuse' style="max-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="tab-content">
                            <div class="tab-pane active" id="informationTab">
                                <div id="loadInformationEditTab"></div>
                            </div>
                            <div class="tab-pane" id="feesTab">
                                <div id="loadFeesEditTab"></div>
                            </div>
                        </div> {{-- div class="tab-content" --}}
                        <br>
                        {{-- form footer buttons --}}
                        <div class="row">
                            <div class="col-sm-12 text-right text-center-sm">
                                <a href="{{route('eims_student_list')}}" type="button" class="btn btn-info" id="backButton">Back</a>
                                <button type="button" class="btn btn-info @if($student->status == 'admitted') hidden @endif" id="nextButton">Next</button>
                                <button type="submit" class="btn btn-info @if($student->status != 'admitted') hidden @endif" id="submitButton">Update</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
            }
        }
        // Validation function for Tab
        function validateTab(url) {
            let isValid = true;
            const formData = new FormData($('#student_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');
            }
        }

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

            $("#loadInformationEditTab").html(loadingDiv).load('{{route('eims_student_information_tab')}}?student_id={{$student->id}}');

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

                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_student_validate_information_tab')}}?student_id={{$student->id}}`)) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
                let urlParameters = '?student_id={{$student->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}`;
                }

                loadFeesEditTab.html(loadingDiv).load(`{{route('eims_student_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_student_validate_information_tab')}}?student_id={{$student->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]);
            });


            // 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_student_update")}}?student_id={{$student->id}}`,
                    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_student_list')}}";
                            }, 1000);
                        }

                    },
                    error: function (_response) {
                        const responseTitle = _response.responseJSON.responseTitle;
                        const responseText = _response.responseJSON.responseText;
                        const errors = _response.responseJSON.errors;
                        if (errors) {
                            Swal.fire({
                                icon: 'error',
                                title: responseTitle,
                                text: responseText,
                            });
                            $.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>');
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>
@endsection