@extends('layouts.master')

@section('title', __('user_portal.schedule'))
@section('content_title', __('user_portal.schedule'))


@section('main_content')

    <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">

        @if ($student)
            <li class="nav-item">
                <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-eg10-0"
                    aria-selected="true">
                    <span>{{ __('academic.class_routine') }}</span>
                </a>
            </li>
        @endif

        @if ($teacher)
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-0" data-bs-toggle="tab" href="#tab-eg10-1"
                    aria-selected="true">
                    <span>{{ __('academic.class_routine') }}</span>
                </a>
            </li>
        @endif
    </ul>

    <div class="tab-content main-card">
        @if ($student)
            <div class="tab-pane tabs-animation fade active show" id="tab-eg10-0" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        {{-- <div class="card-title mb-3">{{__('academic.class_routine')}}</div> --}}
                        <div id="homeData">
                            <div class="" style="">
                                <div class="loader-wrapper d-flex justify-content-center align-items-center m-auto">
                                    <div class="loader">
                                        <div class="ball-scale">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- @include('academic::routine_setup.partials.routine_setups_data') --}}

                    </div>
                </div>

            </div>
        @endif
        @if ($teacher)
            <div class="tab-pane tabs-animation fade " id="tab-eg10-1" role="tabpanel">
                <div id="accordion" class="accordion-wrapper mb-3">
                    <div class="card">
                        <div id="headingOne" class="card-header">
                            <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1"
                                aria-expanded="false" aria-controls="collapseOne"
                                class="text-start m-0 p-0 btn btn-link btn-block collapsed">
                                <h5 class="m-0 p-0">{{ __('core.filter') }}</h5>
                            </button>
                        </div>
                        <div data-parent="#accordion" id="collapseOne1" aria-labelledby="headingOne" class="collapse"
                            style="">
                            <div class="card-body">
                                <form>
                                    <x-academicFilter class="row">
                                        <x-slot:show_business>
                                            <x-slot:show_business_child required class="filter_action"></x-slot:show_business_child>
                                        </x-slot:show_business>
                                        <x-slot:show_academic_year required></x-slot:show_academic_year>
                                        <x-slot:show_academic_class required>
                                            <x-slot:show_academic_class_child class="filter_action"></x-slot:show_academic_class_child>
                                        </x-slot:show_academic_class>
                                        <x-slot:show_academic_section>
                                            <x-slot:show_academic_section_child class="filter_action"></x-slot:show_academic_section_child>
                                        </x-slot:show_academic_section>
                                        <x-slot:show_academic_group>
                                            <x-slot:show_academic_group_child class="filter_action"></x-slot:show_academic_group_child>
                                        </x-slot:show_academic_group>


                                        <div class="col-12 col-md-4 mb-3">
                                            <label for="subject_id" class="form-label">{{ __('academic.subject') }}:</label>
                                            <select class='form-select ' name="subject_id" id="subject_id">
                                                <option selected value="">{{ __('core.please_select') }}</option>
                                                @foreach ($teacher_data['subject_list'] as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        {{-- <x-slot:show_subject>
                                    <x-slot:show_subject_child class="filter_action"></x-slot:show_subject_child>
                                </x-slot:show_subject> --}}
                                    </x-academicFilter>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="card-title mb-3">{{ __('core.class_routine') }}</div>
                        <div id="homeData2">
                            <div class="" style="">
                                <div class="loader-wrapper d-flex justify-content-center align-items-center m-auto">
                                    <div class="loader">
                                        <div class="ball-scale">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- @include('academic::routine_setup.partials.routine_setups_data') --}}

                    </div>
                </div>

            </div>
        @endif
    </div>
@endsection



@push('script')
    <script>
        $(document).ready(function() {
            let firstTab = $(".nav-item .nav-link").first(); // Select the first tab
            if (firstTab.length) {
                firstTab.tab('show'); // Programmatically trigger the tab to show
            }

            // this is a update form of modal loading
            window.localStorage.setItem("tab", $('a[data-bs-toggle="tab"].active').attr('href'));
            $(document).on("click", '[data-bs-toggle="tab"]', function() {
                var target = $(this).attr('href');
                window.localStorage.setItem("tab", target);
            });
            $($('.modal-triger').attr('data-bs-target')).find(".modal-dialog").html('');

            // modal open close
            $(document).on("click", ".modal-triger", function(e) {
                e.preventDefault(); // Prevent default anchor behavior

                let modal_selector = $(this).attr("data-bs-target");
                let modal = $(modal_selector);
                modal.modal('hide');
                // Load new content dynamically
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    beforeSend: function() {
                        // Show a loading indicator inside the modal (optional)
                        modal.find(".modal-dialog").html(
                            '<div class="text-center p-4">Loading...</div>');
                    },
                    success: function(response) {
                        // Replace modal content
                        modal.html(response);

                        // Open the modal AFTER content is fully loaded
                    },
                    error: function() {
                        modal.find(".modal-dialog").html(
                            '<div class="modal-content"><div class="modal-header"></div><div class="modal-body"><div class="text-center p-4">Something went wrong. Please try again.</div></div><div><div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal">{{ __('core.close') }}</button></div>'
                        );

                    }
                });
                modal.modal('show');
            });

            var filter_data = {
                "business_id": "{{ auth()->user()->business_id }}",
                "academic_year_id": "{{ $student_data && $student_data['academic_year_id'] ? $student_data['academic_year_id'] : '' }}",
                "academic_class_id": "{{ $student_data && $student_data['academic_class_id'] ? $student_data['academic_class_id'] : '' }}",
                "section_id": "{{ $student_data && $student_data['section_id'] ? $student_data['section_id'] : '' }}",
                "group_id": "{{ $student_data && $student_data['group_id'] ? $student_data['group_id'] : '' }}",
                "subject_id": "{{ $student_data && $student_data['subject_id'] ? $student_data['subject_id'] : '' }}",
                "action_hide": true
            };

            var filter_data2 = {
                "business_id": "{{ auth()->user()->business_id }}",
                "academic_year_id": "{{ $teacher_data && $teacher_data['academic_year_id'] ? $teacher_data['academic_year_id'] : '' }}",
                "academic_class_id": "{{ $teacher_data && $teacher_data['academic_class_id'] ? $teacher_data['academic_class_id'] : '' }}",
                "section_id": "{{ $teacher_data && $teacher_data['section_id'] ? $teacher_data['section_id'] : '' }}",
                "group_id": "{{ $teacher_data && $teacher_data['group_id'] ? $teacher_data['group_id'] : '' }}",
                "subject_id": "{{ $teacher_data && $teacher_data['subject_id'] ? $teacher_data['subject_id'] : '' }}",
                "action_hide": true
            };


            $(".filter_action").on("change", function() {
                let $form = $(this).closest("form");
                console.log($form.serialize());
                // send data by ajax
                filter_data2 = $form.serialize();
                let subject_id = $form.find("input[name='subject_id']").val();
                if (!subject_id) {
                    filter_data2 +=
                        "&subject_id={{ $teacher_data && $teacher_data['subject_id'] ? $teacher_data['subject_id'] : '' }}"; // Replace 'DEFAULT_VALUE' with your desired default value
                }
                loadData2(filter_data2);
            })


            function loadData(data = filter_data) {
                if (data) {
                    $.ajax({
                        method: 'GET',
                        url: "{{ route('user_portal.routine.index') }}",
                        data: data,
                        success: function(response) {
                            // Destroy the existing DataTable instance


                            // Replace the table body with the new data
                            $('#homeData').html(response.homeData);
                            // $('#tab-eg10-1').html(response.trashData);


                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                }
            }

            function loadData2(data = filter_data2) {
                if (data) {
                    $.ajax({
                        method: 'GET',
                        url: "{{ route('user_portal.routine.index') }}",
                        data: data,
                        success: function(response) {
                            // Destroy the existing DataTable instance


                            // Replace the table body with the new data
                            $('#homeData2').html(response.homeData);
                            // $('#tab-eg10-1').html(response.trashData);


                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                }
            }


            // Initial load
            loadData();
            loadData2();
        });
    </script>
@endpush