@extends('layouts.master')

@section('title', __('academic.create_routine_setup'))
@section('content_title', __('academic.create_routine_setup'))
@section('content_summary', __('academic.routine_setup_summary'))

@section('content_taskbar')
<li class="nav-item">
    <a href="{{ route('academic-routine-setup.index') }}" class="nav-link">
        <i class="nav-link-icon pe-7s-plus"></i>
        <span>{{ __('core.home') }}</span>
    </a>
</li>
@endsection

@section('main_content')
<div class="main-card mb-3 ">
    <div class="mt-4">
        <form id="routine_setup" action="{{ route('academic-routine-setup.store') }}" method="POST">
            @csrf
            {{-- Business ID --}}


            {{-- basic setup  --}}
            <div class="card mb-3">
                <div class="card-body">
                    <div class="card-title">Basic setup</div>
                    <x-academic-filter class="row">
                        <x-slot:show_business required></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>
                        <x-slot:show_academic_section></x-slot:show_academic_section>
                        <x-slot:show_academic_group></x-slot:show_academic_group>
                    </x-academic-filter>
                    {{-- <div class="row">
                            <div class="col-12 col-md-3 mb-3">
                                <label class="form-label"  for="business_id">{{ __('core.business_name') }}</label>
                    <select class="form-control" name="business_id" id="business_id">
                        @foreach ($business_id as $business)
                        <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-3 mb-3">
                    <label class="form-label" for="academic_class_id">Academic Class</label>
                    <select class="form-control" name="academic_class_id" id="academic_class_id">
                        @foreach ($academic_class_id as $academic_class)
                        <option value="{{ $academic_class->id }}">{{ $academic_class->academic_class }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-3 mb-3">
                    <label class="form-label" for="section">Section</label>
                    <select class="form-control" name="section_id" id="section">
                        @foreach ($section_id as $section)
                        <option value="{{ $section->id }}">{{ $section->section_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12 col-md-3 mb-3">
                    <label class="form-label" for="groups">Groups</label>
                    <select class="form-control" name="group_id" id="groups">
                        @foreach ($group_id as $group)
                        <option value="{{ $group->id }}">{{ $group->group_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div> --}}

    </div>
</div>




<!-- Routine Group -->
<div class="card mb-3" id="routineGroup">
    <div class="card-body">
        <h5 class="card-title">Routine Information</h5>
        <div class="row">

            <div class="col-12 col-md-3 form-group mb-3">
                <label class="form-label" for="routine_type">Routine Type</label>
                <select class="form-control routine_type_id" name="routine_type_id[]" id="routine_type">
                    <option value="">{{__("core.please_select")}}</option>
                    @foreach ($routine_type_id as $routine_type)
                    <option value="{{ $routine_type->id }}">{{ $routine_type->routine_type }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-3 form-group mb-3">
                <label class="form-label" for="routine_period">Routine Period</label>
                <select class="form-control routine_period_id" name="routine_period_id[]" id="routine_period">
                    <option value="">{{__("core.please_select")}}</option>
                    @foreach ($routine_period_id as $routine_period)
                    <option value="{{ $routine_period->id }}">{{ $routine_period->period_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-3 form-group mb-3">
                <label class="form-label" for="start_time">Start Time</label>
                <input type="time" class="form-control start_time" name="start_time[]" id="start_time" >
            </div>
            <div class="col-12 col-md-3 form-group mb-3">
                <label class="form-label" for="end_time">End Time</label>
                <input type="time" class="form-control end_time" name="end_time[]" id="end_time" >
            </div>
            <div class="col-12 col-md-3 form-group mb-3">
                <label class="form-label" for="class_day">Class Day</label>
                <select class="form-control" name="class_day[]" id="class_day">
                    @foreach (getClassDays() as $key => $day)
                    <option value="{{ $key }}">{{ $day }}</option>
                    @endforeach
                </select>
            </div>




            <x-academic-filter class="col-12 col-md-3 form-group mb-3">
                <x-slot:show_subject>
                    <x-slot:show_subject_parent></x-slot:show_subject_parent>
                    <x-slot:show_subject_child class="subject_id" name="subject_id[]" disabled></x-slot:show_subject_child>
                </x-slot:show_subject>
            </x-academic-filter>


        </div>
        <!-- Add Row Button -->
        <button type="button" class="btn btn-primary btn-sm mb-3  addRow" id="addRow">
            <i class="fa fa-plus" aria-hidden="true"></i>
        </button>
    </div>

</div>

<!-- Common Group -->
<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">Common Information</h5>
        <div class="form-group position-relative mb-3">
            <label class="form-label" for="classroom">Classroom</label>
            <select class="form-control" name="class_room_id" id="classroom">
                @foreach ($class_room_id as $classroom)
                <option value="{{ $classroom->id }}">{{ $classroom->class_room_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group position-relative mb-3">
            <label class="form-label" for="note">Note</label>
            <input type="text" class="form-control" name="note" id="note">
        </div>

    </div>
</div>

<!-- Submit Button -->
<button type="submit" class="btn btn-success">Setup Routine</button>
</form>
</div>
</div>

@endsection

@push('script')
<script>
    $(document).ready(function() {
        var business_id = $(".select_business_id").val();
        if (business_id && business_id != '') {
            get_routine_type(business_id)
            get_routine_period(business_id)
            get_class_room(business_id)
        }
        var routine_type_list = null;
        var routine_period_list = null;
        $(document).on("change", ".select_business_id", function() {
            get_routine_type($(this).val())
            get_routine_period($(this).val())
            get_class_room($(this).val())
        })

        $(document).on("change", ".routine_period_id", function() {
            let id = $(this).val();
            let data = routine_period_list.find(function(item) {
                return item.id == id;
            })

            let $ele = $(this);
            if (data) {
                $ele.closest(".row").find(".start_time").val(data.start_time)
                $ele.closest(".row").find(".end_time").val(data.end_time)
            } else {
                $ele.closest(".row").find(".start_time").val('')
                $ele.closest(".row").find(".end_time").val('')
            }

        })


        $(document).on('submit', 'form#routine_setup', function(e) {
            e.preventDefault();
            $(this).find('button[type="submit"]').attr('disabled', false);
            var data = $(this).serialize();

            $.ajax({
                method: $(this).attr('method')
                , url: $(this).attr("action")
                , dataType: "json"
                , data: data
                , success: function(result) {
                    if (result.success == true) {
                        $("#routine_setup").parent().closest('.modal').modal("hide");
                        toastr.success(result.msg);
                        window.location.href="{{ route('academic-routine-setup.index') }}";
                    } else {
                        toastr.error(result.msg);
                        if (result.details) {
                            if (result.details.exam_name) {
                                document.getElementById("exam_name_msg").innerText = result
                                    .details.exam_name[0];
                            } else {
                                document.getElementById("exam_name_msg").innerText = '';
                            }
                        }
                    }
                }
                , error: function(response) {
                    // Clear previous error messages
                    $("#routine_setup").find('.text-danger').remove();

                    if (response.status === 422) {
                        // Validation errors
                        var errors = response.responseJSON.errors;
                        for (var field in errors) {
                            // Find the input field and add the error message
                            let key = field;
                            let parts = key.split('.');
                            let input_name = parts[0]; // "input field name value"
                            let index = parts[1];
                            if (index) {
                                var $input = $('[name="' + input_name + '[]"]')[index];
                                let span = document.createElement("span");
                                span.classList.add("text-danger");
                                span.innerText = errors[field][0];
                                $input.parentElement.appendChild(span);
                            } else {
                                var $input = $('[name="' + field + '"]');
                                let span = document.createElement("span");
                                span.classList.add("text-danger");
                                span.innerText = errors[field][0];
                                $input[0].parentElement.appendChild(span);
                            }
                            toastr.error(errors[field][0]);

                        }
                    } else {
                        toastr.error('An unexpected error occurred.');
                    }

                    // Re-enable submit button
                }
            });
        });



        function get_routine_type(business_id) {
            $.ajax({
                method: "post"
                , url: "{{ route('academic.routine_types.get_routine_type_by_business_id') }}"
                , data: {
                    business_id
                }
                , success: function(response) {
                    routine_type_list = response;
                    console.log(response);

                    updateSelectOptions($(".routine_type_id"), routine_type_list, 'id'
                        , 'routine_type', "{{ __('core.please_select') }}");
                }
            })
        }

        function get_routine_period(business_id) {
            $.ajax({
                method: "post"
                , url: "{{ route('routine.get_routine_period_by_business_id') }}"
                , data: {
                    business_id
                }
                , success: function(response) {
                    routine_period_list = response;
                    updateSelectOptions($(".routine_period_id"), routine_period_list, 'id'
                        , 'period_name', "{{ __('core.please_select') }}");
                }
            })
        }

        function get_class_room(business_id) {
            $.ajax({
                method: "get"
                , url: "{{ route('academic.class_rooms.get_class_room_by_business_id') }}"
                , data: {
                    business_id
                }
                , success: function(response) {
                    updateSelectOptions($("#classroom"), response, 'id'
                        , 'class_room_name', "{{ __('core.please_select') }}");
                }
            })
        }



        function updateSelectOptions($ele, data, valueKey = 'id', textKey = 'name', placeholder =
            'Please Select') {
            $ele.empty();
            $ele.append($('<option></option>').attr('value', '').text(placeholder));

            $.each(data, function(index, item) {
                $ele.append($('<option></option>').attr('value', item[valueKey]).text(item[textKey]));
            });
        }


        // Add Row Button Click Event
        $(document).on('click', ".addRow", function() {
            let $routineGroup = $('#routineGroup');
            let $newRow = $routineGroup.clone();

            // Clear values in the new row
            $newRow.find('input, select').val('');

            // Add Cancel Button
            let $cancelBtn = $('<button>', {
                type: 'button'
                , class: 'btn btn-danger btn-sm mb-3 cancelRow'
                , text: 'Cancel'
                , click: function() {
                    $newRow.remove();
                }
            });

            $newRow.find('.addRow').parent().append($cancelBtn);

            // Insert new row after the current row
            $routineGroup.after($newRow);

            // Attach event listener for the routine type dropdown in the new row
            $newRow.find('select[name="routine_type_id[]"]').on('change', function() {
                handleRoutineTypeChange($newRow);
            });

            // Initial handling for the new row
            handleRoutineTypeChange($newRow);
        });

        // function handleRoutineTypeChange($row) {
        //     let $routineTypeSelect = $row.find('select[name="routine_type_id[]"]');
        //     let $subjectSelect = $row.find('select[name="subject_id[]"]');
        //     let routineTypeId = $routineTypeSelect.val();

        //     // Make AJAX request to get routine type details
        //     $.ajax({
        //         url: '{{ route('routine-type.details') }}', // Adjust to your actual route
        //         method: 'GET',
        //         data: {
        //             id: routineTypeId
        //         },
        //         success: function(response) {
        //             if (response.is_subject_required) {
        //                 $subjectSelect.prop('disabled', false); // Enable subjects dropdown
        //             } else {
        //                 $subjectSelect.prop('disabled', true).val(
        //                     null); // Disable subjects dropdown and clear value
        //             }
        //         },
        //         error: function() {
        //             console.log('Error fetching routine type details.');
        //         }
        //     });
        // }


        function handleRoutineTypeChange($row) {
            let $routineTypeSelect = $row.find('select[name="routine_type_id[]"]');
            let $subjectSelect = $row.find('.subject_id');
            let routineTypeId = $routineTypeSelect.val();

            let response = routine_type_list.find(function(item) {
                return item.id == routineTypeId;
            })
            if (response.is_subject_required) {
                $subjectSelect.prop('disabled', false); // Enable subjects dropdown
            } else {
                $subjectSelect.prop('disabled', true).val(
                    null); // Disable subjects dropdown and clear value
            }

        }

        // Event listener for Routine Type change on initial load
        $(document).on('change', '#routine_type', function() {
            handleRoutineTypeChange($('#routineGroup'));
        });

        // Initial state based on default value if needed
        let initialRoutineTypeId = $('#routine_type').val();
        if (initialRoutineTypeId) {
            $('#routine_type').trigger('change');
        }
    });

</script>
@endpush