@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
@include('successMsg')

<div class="row add-data-form">
    <div class="col-md-10 col-md-offset-1" style="padding-bottom: 2%">
        <div class="viewTitle">
            <div class="panel-heading" style="padding-bottom:0; ">
                <div class="panel-title"> {{ $pageTitle }}</div>
            </div>
        </div>
        <div class=" panel panel-default panel-border">

            <div class="panel-body">
                <div class="row">
                    {{Form::open(['url' => '/','id' => 'studentTransferCertificateSearchForm', 'autocomplete' => 'off'])}}
                    {{-- program_medium_id --}}
                    <div class="col-md-2 ">
                        <div class="form-group">
                            {!! Form::label('program_medium_id', $programLabel . ':',['class' => 'control-label'],false) !!}

                            <div class="">
                                {!! Form::select('program_medium_id', $programs ?? [],request()->program_medium_id ?? null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => "Select $programLabel",
                                'id' => 'program_medium_id',
                                ]) !!}
                                <p id='program_medium_id_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>
                    {{-- session --}}
                    <div class="col-sm-2">
                        <div class="form-group">
                            {!! Form::label('session_id', 'Session:', ['class' => ' control-label'], false) !!}
                            <div class="">
                                {!! Form::select('session_id', $sessions ?? [], request()->session_id ?? null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => 'Select Session',
                                'id' => 'session_id',
                                ]) !!}
                                <p id='session_id_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>

                    {{-- semester_class_id --}}
                    <div class="col-md-2">
                        <div class="form-group ">
                            {!! Form::label('semester_class_id', $semesterClassLabel, ['class' => 'control-label'], false) !!}

                            <div class="">
                                {!! Form::select('semester_class_id', $semesterClasses ?? [], $admissionExam->semester_class_id ?? null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => "Select $semesterClassLabel",
                                'id' => 'semester_class_id',
                                ]) !!}
                                <p id='semester_class_id_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>

                    @if($companyType !== 'UNV')
                    <div class="col-md-2">
                        {{-- semester_class_id --}}
                        <div class="form-group ">
                            {!! Form::label( 'semester_class_group_id', 'Class Group',
                            ['class' => 'control-label'], false) !!}
                            <div class="">
                                {!! Form::select('semester_class_group_id', $semesterClassGroupType ?? [], null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => 'Select Group',
                                'id' => 'semester_class_group_id',
                                ]) !!}
                                <p id='semester_class_group_id_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- section --}}
                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('section_id', 'Section', ['class' => ' control-label'], false) !!}
                            <div class="">
                                {!! Form::select('section_id', $sections ?? [], null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => 'Select Section',
                                'id' => 'section_id',
                                ]) !!}
                                <p id='section_id_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>

                    {{-- Student ID No --}}
                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('student_id_no', 'Student ID', ['class' => 'control-label'], false) !!}
                            <div class="position-relative">
                                {!! Form::text('student_id_no', null, [
                                'class' => 'form-control',
                                'placeholder' => 'Enter first 6 digits',
                                'id' => 'student_id_no',
                                'maxlength' => '13',
                                'autocomplete' => 'off',
                                ]) !!}
                                <div id="student_id_suggestions"
                                    class="list-group shadow-sm bg-white rounded"
                                    style="position: absolute; z-index: 1000; display: none; width: 100%; max-height: 150px; overflow-y: auto; border: 1px solid #ddd; margin-top: 2px;">
                                </div>
                                <p id='student_id_no_error' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-12 text-right">
                        <div class="form-group">
                            <button type="submit" class="btn btn-info" id="searchButton">Search</button>
                        </div>
                    </div>
                    {{Form::close()}}
                </div>

                <div class="row">
                    <div id="transferCertificateGenerationForm" class="hidden">
                        {{ Form::hidden('program_medium_id', null, ['id' => 'program_medium_id_hidden']) }}
                        {{ Form::hidden('session_id', null, ['id' => 'session_id_hidden']) }}
                        {{ Form::hidden('semester_class_id', null, ['id' => 'semester_class_id_hidden']) }}
                        {{ Form::hidden('semester_class_group_id', null, ['id' => 'semester_class_group_id_hidden']) }}
                        {{ Form::hidden('section_id', null, ['id' => 'section_id_hidden']) }}
                        {{ Form::hidden('student_id', null, ['id' => 'student_id_hidden']) }}

                        {{-- Table Section --}}
                        <div id="transferCertificateGenerationTable"></div>

                        <br>
                        {{-- submit button --}}
                        <div class="col-md-12 text-right">
                            <div class="form-group">
                                <button id="generateTransferCertificateButton" class="btn btn-info">
                                    Generate Transfer Certificate
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="viewTitle"></div>
    </div>
</div>




<script type="text/javascript">
    const companyType = '{{ $companyType }}';


    $(document).ready(function() {
        // on change program_medium_id get session_id and semester_class_id
        $('#program_medium_id').change(function() {
            const program_medium_id = $(this).val();
            const url = "{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}";

            $('#session_id, #semester_class_id').empty().prepend(`<option value="">Loading...</option>`);

            $.post(url, {
                _token: '{{ csrf_token() }}',
                program_medium_id: program_medium_id,
            }).done(function(response) {
                $('#session_id').empty().prepend(`<option value="">Select Session</option>`);
                response.sessionListByProgramChange.forEach(value => {
                    $('#session_id').append(`<option value="${value.id}">${value.name}</option>`);
                });

                $('#semester_class_id').empty().prepend(`<option value="">Select {{$semesterClassLabel}}</option>`);
                response.semesterClassListByProgramChange.forEach(value => {
                    $('#semester_class_id').append(`<option value="${value.id}">${value.name}</option>`);
                });
            }).fail(function() {
                $('#session_id, #semester_class_id').empty().prepend(`<option value="">Select Session</option>`);
            });
        });

        // Function to get sections based on semester_class_id and semester_class_group_id
        function getSections() {
            const semester_class_id = $('#semester_class_id').val();
            const semester_class_group_id = $('#semester_class_group_id').val();
            const url = "{{ route('eims_get_sections') }}";

            $('#section_id').empty().prepend(`<option value="">Loading...</option>`);

            $.post(url, {
                _token: '{{ csrf_token() }}',
                semester_class_id: semester_class_id,
                semester_class_group_id: semester_class_group_id,
            }).done(function(response) {
                $('#section_id').empty().prepend(`<option value="">Select Section</option>`);
                response.forEach(value => {
                    $('#section_id').append(`<option value="${value.id}">${value.name}</option>`);
                });
            });
        }

        // on change semester_class_id or change semester_class_group_id get section
        $('#semester_class_id, #semester_class_group_id').change(getSections);


        // on studentTransferCertificateSearchForm submit ajax request
        $('#studentTransferCertificateSearchForm').submit(function(e) {
            e.preventDefault();
            const programIdHiddenField = $('#program_medium_id_hidden').empty();
            const sessionIdHiddenField = $('#session_id_hidden').empty();
            const semesterClassIdHiddenField = $('#semester_class_id_hidden').empty();
            const semesterClassGroupIdHiddenField = $('#semester_class_group_id_hidden').empty();
            const sectionIdHiddenField = $('#section_id_hidden').empty();
            const studentIdHiddenField = $('#student_id_hidden').empty();

            const transferCertificateGenerationTable = $('#transferCertificateGenerationTable').empty();

            $('.error-msg').remove();
            $.post(`{{ url()->current() }}`, $(this).serialize())
                .done(function(response) {
                    programIdHiddenField.val($('#program_medium_id').val());
                    sessionIdHiddenField.val($('#session_id').val());
                    semesterClassIdHiddenField.val($('#semester_class_id').val());
                    semesterClassGroupIdHiddenField.val($('#semester_class_group_id').val());
                    sectionIdHiddenField.val($('#section_id').val());
                    studentIdHiddenField.val($('#student_id_no').val());

                    const generateTransferCertificateButton = $('#generateTransferCertificateButton');
                    generateTransferCertificateButton.attr('href', `{{ route('eims_student_transcript_generate') }}?student_id_no=${studentIdHiddenField.val()}&program_medium_id=${programIdHiddenField.val()}&session_id=${sessionIdHiddenField.val()}&semester_class_id=${semesterClassIdHiddenField.val()}&semester_class_group_id=${semesterClassGroupIdHiddenField.val()}&section_id=${sectionIdHiddenField.val()}`);

                    const {
                        transfer_certificate_data
                    } = response.data;

                    const table = transfer_certificate_data.length ?
                        `
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th rowspan="2">SL</th>
                                        <th rowspan="2">Shift</th>
                                        <th rowspan="2">Section</th>
                                        <th rowspan="2">Student</th>
                                        <th rowspan="2">Student ID</th>
                                        <th rowspan="2">Roll No</th>
                                        <th rowspan="2" class="text-small">Action</th>
                                    </tr>
                                </thead>
                                <tbody style="color: #0c0c0c">
                                    ${transfer_certificate_data.map((student, index) => `
                                    <tr>
                                        <td>${index + 1}</td>
                                        <td>${student.shift_name ?? ''}</td> 
                                        <td>${student.section_name ?? ''}</td>
                                        <td>${student.name ?? ''}</td>
                                        <td>${student.student_id_no ?? ''}</td>
                                        <td>${student.roll_no ?? ''}</td>

                                        <td >
                                            <button  href="{{ route('eims_student_transcript_generate') }}?student_id_no=${student.student_id_no}&program_medium_id=${programIdHiddenField.val()}&session_id=${sessionIdHiddenField.val()}&semester_class_id=${semesterClassIdHiddenField.val()}&semester_class_group_id=${semesterClassGroupIdHiddenField.val()}&section_id=${sectionIdHiddenField.val()}"
                                                class="btn btn-xs btn-info view-button"
                                            >
                                                <i class="fa fa-eye" aria-hidden="true"></i>
                                            </button>

                                        </td>
                                    </tr>`).join('')}
                                </tbody>
                            </table>
                            ` :
                        `<div class="alert alert-warning">No data found</div>`;

                    transferCertificateGenerationTable.html(table);
                    $('#transferCertificateGenerationForm').removeClass('hidden');
                })
                .catch(function(error) {
                    const {
                        responseTitle,
                        responseText,
                        responseStatus,
                        errors
                    } = error.responseJSON;

                    Swal.fire({
                        title: responseTitle,
                        text: responseText,
                        icon: responseStatus,
                        confirmButtonText: 'Ok'
                    });

                    if (errors) {
                        Object.keys(errors).forEach((key) => {
                            $(`#${key}_error`).html(`<small class="text-danger error-msg">${errors[key][0]}</small>`);
                        });
                    }


                    $('#transferCertificateGenerationForm').addClass('hidden');
                });
        });

        $('#transferCertificateGenerationForm').submit(function(e) {
            e.preventDefault();
            const form = $(this);
            const url = form.attr('action');
            const data = form.serialize();
            console.log(data);

            // send a request on new tab

        });

        // on click view button open new tab
        $(document).on('click', '.view-button', function(e) {
            e.preventDefault();
            // first check is the url is valid or not
            const url = $(this).attr('href');

            if (hasAccess(url)) {
                // if get 404 then show Swal.fire else open new tab
                $.get(url)
                    .done(function() {
                        window.open(url, '_blank');
                    })
                    .fail(function(response) {
                        const {
                            responseStatus,
                            responseTitle,
                            responseText
                        } = response.responseJSON;
                        Swal.fire({
                            status: responseStatus,
                            title: responseTitle,
                            text: responseText,
                            confirmButtonText: 'Ok'
                        });
                    });
            } else {
                Swal.fire({
                    title: 'Access Denied',
                    text: 'You do not have access to this page',
                    icon: 'error',
                    confirmButtonText: 'Ok'
                });
            }

        });

        $("#generateTransferCertificateButton").click(function(e) {
            e.preventDefault();
            const url = $(this).attr('href');
            if (hasAccess(url)) {
                $.get(url)
                    .done(function() {
                        window.open(url, '_blank');
                    })
                    .fail(function(response) {
                        const {
                            responseStatus,
                            responseTitle,
                            responseText
                        } = response.responseJSON;
                        Swal.fire({
                            status: responseStatus,
                            title: responseTitle,
                            text: responseText,
                            confirmButtonText: 'Ok'
                        });
                    });
            } else {
                Swal.fire({
                    title: 'Access Denied',
                    text: 'You do not have access to this page',
                    icon: 'error',
                    confirmButtonText: 'Ok'
                });
            }
        });




        //////////////////////start Student ID Wise filter///////////////////////////////////////////////
        const input = $('#student_id_no');
        const suggestions = $('#student_id_suggestions');

        // Hide suggestions when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('#student_id_suggestions, #student_id_no').length) {
                suggestions.hide();
            }
        });

        input.on('input', function() {
            let studentId = $(this).val().replace(/\D/g, '');
            $(this).val(studentId);

            if (studentId.length > 5) {
                $.ajax({
                    url: '{{ route("eims_studentWise_certificate_generate") }}',
                    type: 'GET',
                    data: {
                        partial_id: studentId
                    },
                    success: function(response) {
                        suggestions.empty();

                        if (response.length > 0) {
                            $.each(response, function(index, student) {
                                // Safely access nested relationship data
                                const semesterClassName = student.eims_semester_class ? student.eims_semester_class.name : 'N/A';

                                suggestions.append(
                                    `<div class="list-group-item list-group-item-action suggestion-item p-2" 
                                    data-value="${student.student_id_no}"
                                    style="cursor: pointer; border-left: none; border-right: none; padding: 5px 10px !important; font-size: 14px; line-height: 1.3;">
                                        <div><strong>ID:</strong> ${student.student_id_no ?? ''}</div>
                                        <div><strong>Name:</strong> ${student.name ?? ''}</div>
                                        <div><strong>Semester:</strong> ${semesterClassName ?? ''}</div>
                                        <div><strong>Roll No:</strong> ${student.roll_no ?? ''}</div>
                                    </div>`
                                );
                            });
                            suggestions.show();
                        } else {
                            suggestions.hide();
                        }
                    }
                });
            } else {
                suggestions.hide();
            }
        });

        // Handle suggestion click
        suggestions.on('click', '.suggestion-item', function() {
            input.val($(this).data('value'));
            suggestions.hide();
            input.focus();
        });

        // Keyboard navigation
        input.on('keydown', function(e) {
            if (e.key === 'ArrowDown' && suggestions.is(':visible')) {
                e.preventDefault();
                $('.suggestion-item').first().trigger('click');
            }
        });

        //////////////////////End Student ID Wise filter///////////////////////////////////////////////

    });
</script>
@endsection