@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.update') }}" method="POST">
            @csrf
            {{-- Business ID --}}


            {{-- basic setup  --}}
            <div class="card mb-3">
                <div class="card-body">
                    <div class="card-title">Basic setup</div>
                    @php
                    $data=[
                    "business_id"=>$business_id,
                    "academic_year_id"=>$academic_year_id,
                    "academic_class_id"=>$academic_class_id,
                    "group_id"=>$group_id,
                    "section_id"=>$section_id,
                    ]
                    @endphp
                    <x-academic-filter class="row">
                        <x-slot:show_business required>
                            <x-slot:show_business_child></x-slot:show_business_child>
                        </x-slot:show_business>
                        <x-slot:show_academic_year required>
                            <x-slot:show_academic_year_child>
                                {{-- <option value="m">My Val</option> --}}
                            </x-slot:show_academic_year_child>
                        </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 -->
@php
$i=0;
@endphp
@foreach ($setup_routine as $value)

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

            <input type="hidden" name="routine_setup_id[]" value="{{$value->id}}">
            <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">
                    @foreach ($routine_type as $type)
                    <option value="{{ $type->id }}" {{$type->id ==$value->routine_type_id?"selected":""}}>{{ $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">
                    @foreach ($routine_period as $period)
                    <option value="{{ $period->id }}" {{$period->id ==$value->routine_period_id?"selected":""}}>{{ $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" value="{{$value->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[]" value="{{$value->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 }}" {{$key==$value->class_day?'selected':''}}>{{ $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[]"></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>
        @if($i!=0)
        <a data-href="{{route('academic.routine-setup.per_del',[$value->id])}}" type="button" class="btn btn-danger btn-sm mb-3 cancelRow delete_row">Cancel</a>
        @endif
    </div>
</div>
@php
$i++;
@endphp
@endforeach


<!-- 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">

            </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" value="{{$setup_routine[0]->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 setup_routine = @json($setup_routine);
        var routine_type_list = @json($routine_type);
        var routine_period_list = @json($routine_period);
        var academic_year = @json($academicYear);
        var academic_class = @json($academicClass);
        var section = @json($section);
        var group = @json($group);
        var basic_setting_id = @json($basic_setting_id);
        var academic_class_id = "{{$academic_class_id}}";

        $(".select_business_id").val("{{$business_id}}");
        load_subject(basic_setting_id, academic_class_id, setup_routine);
        get_class_room("{{$business_id}}");

        if (academic_year && academic_year.length > 0) {
            $(".select_academic_year_id").empty();
            $.each(academic_year, function(index, item) {
                $(".select_academic_year_id").append(
                    $('<option></option>').attr('value', item.id).text(item.academic_year)
                );
            });

        } else {
            $(".select_academic_year_id").empty();
            $(".select_academic_year_id").append(
                $('<option></option>').attr('value', "").text("{{ __('core.please_select') }}")
            );
        }

        if (academic_class && academic_class.length > 0) {
            $(".select_academic_class_id").empty();
            $.each(academic_class, function(index, item) {
                $(".select_academic_class_id").append(
                    $('<option></option>').attr('value', item.id).text(item.academic_class)
                );
            });

        } else {
            $(".select_academic_class_id").empty();
            $(".select_academic_class_id").append(
                $('<option></option>').attr('value', "").text("{{ __('core.please_select') }}")
            );
        }
        if (section && section.length > 0) {
            $(".select_section_id").empty();
            $.each(section, function(index, item) {
                $(".select_section_id").append(
                    $('<option></option>').attr('value', item.id).text(item.section_name)
                );
            });
        } else {
            $(".select_section_id").empty();
            $(".select_section_id").append(
                $('<option></option>').attr('value', "").text("{{ __('core.please_select') }}")
            );

        }
        if (group && group.length > 0) {
            $(".select_group_id").empty();
            $.each(group, function(index, item) {
                $(".select_group_id").append(
                    $('<option></option>').attr('value', item.id).text(item.group_name)
                );
            });
        } else {
            $(".select_group_id").empty();
            $(".select_group_id").append(
                $('<option></option>').attr('value', "").text("{{ __('core.please_select') }}")
            );
        }

        $(document).on("click", ".cancelRow", function() {
            $(this).closest('.card').remove();
        })


        // $('.select_academic_year_id').val("$");
        $(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;

                    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') }}");
                    $("#classroom").val("{{$setup_routine[0]->class_room_id}}");
                }
            })
        }



        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]));
            });
        }

        function updateDropdown($select, data, selected) {
            $select.empty(); // Clear the existing options
            // Add default option
            $select.append($('<option></option>').attr('value', '').text(
                'Please Select'));
            // Add the new options
            $.each(data, function(key, value) {
                $select.append($('<option></option>').attr('value', key).text(value));
            });

            if (selected) {
                // Select the last option
                $select.find('option:first').prop('selected', true);
            }
        }


        // 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.');
        //         }
        //     });
        // }

        $(".routineGroup").each(function() {
            handleRoutineTypeChange($(this));
        });

        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 && response.is_subject_required) {
                // Allow changes again
                $subjectSelect.off("change.preventSelect");
                $subjectSelect.removeData("value"); // Remove stored value
                // Apply background color to indicate readonly
                $subjectSelect.css("background-color", "");

            } else {
                let currentValue = $subjectSelect.val();
                $subjectSelect.data("value", currentValue ? currentValue : "");

                // Prevent change
                $subjectSelect.on("change.preventSelect", function(e) {
                    e.preventDefault();
                    $(this).val($(this).data("value")); // Reset to stored value
                });

                // Apply background color to indicate readonly
                $subjectSelect.css("background-color", "#e9ecef");


            }
        }


        function load_subject(academic_basic_settings, academic_class_id, subject_array = null) {
            $.ajax({
                method: "post"
                , url: "{{ route('academic.academic_settings.load_subject_by_academic_class') }}"
                , data: {
                    academic_basic_settings
                    , academic_class_id
                }
                , success: function(result) {
                    updateDropdown($(".select_subject_id"), result, true);
                    if (subject_array && subject_array.length > 0) {
                        $(".routineGroup").each(function() {
                            let $ele = $(this);
                            let setup_id = $(this).find("input[name='routine_setup_id[]']").val(); // Fixed selector
                            let response = setup_routine.find(item => item.id == setup_id);

                            if (response && response.subject_id) {

                                $ele.find(".subject_id").val(response.subject_id);
                            } else {
                                $ele.find(".subject_id").val(""); // Optionally clear the field if no match
                            }

                        });
                    }
                }
            })
        }

        // 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');
        }

        $(document).on("click", ".delete_row", function() {
            let url = $(this).data('href');
            let $this = $(this);
            $.ajax({
                method: "get"
                , url: url
                , success: function(response) {

                }
            })
        })
    });

</script>
@endpush