@extends('layouts.master')

@section('title', __('exam.eduself_manage_admit_card_title'))

@section('content_title', __('exam.manage_admit_card'))

@section('content_summary', __('exam.admit_card_summary'))


@push('style')
    <link rel="stylesheet" href="{{ asset('styles/css/admit_card.css') }}">
@endpush

@if (auth()->user()->can('exam.admit_card.update'))
    @section('content_taskbar')
        <li class="nav-item">
            <a href="{{ route('exam.admit_card.edit', [auth()->user()->business_id]) }}" class="nav-link">
                <i class="nav-link-icon pe-7s-plus"></i>
                <span>{{ __('core.config') }}</span>
            </a>
        </li>
    @endsection
@endif

@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <h5 class="card-title">{{ __('core.filter') }}</h5>
            {{-- Filter form start --}}
            <form id="search-form">
                @csrf


                <x-academicFilter class="row">
                    <x-slot:show_business>
                        <x-slot:show_business_child class="filter-dropdown"></x-slot:show_business_child>
                    </x-slot:show_business>
                    <x-slot:show_academic_year>
                        <x-slot:show_academic_year_child class="filter-dropdown" id='academic_year' required></x-slot:show_academic_year_child>
                    </x-slot:show_academic_year>
                    <x-slot:show_academic_class>
                        <x-slot:show_academic_class_child class="filter-dropdown" id="academic_class" required></x-slot:show_academic_class_child>
                    </x-slot:show_academic_class>
                    <x-slot:show_academic_group>
                        <x-slot:show_academic_group_child class="filter-dropdown" id="group"></x-slot:show_academic_group_child>
                    </x-slot:show_academic_group>
                    <x-slot:show_academic_section>
                        <x-slot:show_academic_section_child class="filter-dropdown" id="section"></x-slot:show_academic_section_child>
                    </x-slot:show_academic_section>

                    <x-slot:show_academic_student>
                        <x-slot:show_academic_student_child class="filter-dropdown" id="user_id"></x-slot:show_academic_student_child>
                    </x-slot:show_academic_student>

                    <div class="col-6 col-md-3 mb-3">
                        {!! html()->label(__('exam.exam_name') . ':', 'academic_exam_id')->class('form-label') !!}
                        {!! html()->select('academic_exam_id', $exams_list)->class('form-control')->id('academic_exam_id')->required()->value(old('academic_exam_id')) !!}
                        <small class="text-danger" id="academic_exam_id_msg"></small>
                    </div>

                    <div class="col-12">
                        <button class="btn btn-primary" type="submit">{{ __('core.search') }}</button>
                    </div>

                </x-academicFilter>



            </form>
            {{-- Filter form end --}}
        </div>
    </div>

    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="card-title">{{ __('exam.admit_card') }}</div>
            <div id="admit_cards">
                @include('exam::exam_admit_card.admit_card_template1')
            </div>
        </div>
    </div>


@endsection


@include('partials.js.sweet_alert')
@include('partials.js.crud')
@include('partials.js.datatable')
@include('partials.js.datatable_features')

@push('script')
    <script>
        $(document).ready(function() {
            $('.select_business_id ').on("change", function() {
                let business_id = $(this).val();
                if (business_id) {
                    loadExamData(business_id)
                } else {
                    updateDropdown($("#academic_exam_id"), [], true);
                }


            })

            function loadExamData(business_id) {
                $.ajax({
                    method: "get",
                    url: "{{ route('exam.academic_exams.dropdown') }}",
                    data: {
                        business_id
                    },
                    success: function(res) {
                        updateDropdown($("#academic_exam_id"), res, true);
                    }
                })
            }


            $("#search-form").on('submit', function(e) {
                e.preventDefault(); // make sure default form submit is prevented
                let $form = $(this);
                let data = $form.serialize();
                $.ajax({
                    method: $form.attr('method'),
                    url: $form.attr('action'),
                    dataType: "json",
                    data: data,
                    success: function(result) {
                        if (result.success) {
                            $("#admit_cards").html(result['data']);
                        } else {
                            toastr.error(result.msg)
                        }

                    },
                    error: function(response) {
                        $form.find('.text-danger').remove();

                        if (response.status === 422) {
                            const errors = response.responseJSON.errors;
                            for (let field in errors) {
                                let parts = field.split('.');
                                let name = parts[0];
                                let index = parts[1];
                                let $input;

                                if (index !== undefined) {
                                    $input = $('[name="' + name + '[]"]')[index];
                                } else {
                                    $input = $('[name="' + field + '"]');
                                }

                                if ($input && $input.length > 0) {
                                    let span = $("<span>").addClass("text-danger").text(errors[
                                        field][0]);
                                    $input[0].parentElement.appendChild(span[0]);
                                }

                                toastr.error(errors[field][0]);
                            }
                            reject(errors);
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }
                    },
                    complete: function() {
                        $form.find('button[type="submit"]').attr('disabled', false);
                    }
                });

            })

            const base_css = "{{ asset('styles/css/base.css') }}";
            const admit_card = "{{ asset('styles/css/admit_card.css') }}";
            $(document).on("click", ".print-btn", function() {
                const element = document.getElementById("all_admit_cards");
                printElement(element);
            });


            function printElement(element) {
                const elementContent = $(element).html(); // Get the content of the element

                // Create a new window
                const printWindow = window.open('', '_blank', 'width=800,height=600');

                // Add the content to the new window
                printWindow.document.open();
                printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Print</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                }
            </style>
            <link rel="stylesheet" href="${base_css}">
            <link rel="stylesheet" href="${admit_card}">
        </head>
        <body>
            ${elementContent}
        </body>
        </html>
    `);
                printWindow.document.close();

                // Wait until the content is loaded before printing
                printWindow.onload = function() {
                    printWindow.focus();
                    printWindow.print();
                    printWindow.onafterprint = () => printWindow.close();
                };
            }



        })
    </script>
@endpush