@extends('layouts.admin.app')

@section('page-title')
    {{ __('create-schedule') }}
@endsection

@section('page-nav-title')
    <style>
        .text-center {
            text-align: center !important;
        }
    </style>
    <div class="app-title">
        <div>
            <h1>{{ __('teacher-schedule') }}</h1>
            <p style="margin-left: 25px;">{{ __('create-schedule') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.teacher_schedules.index') }}">{{ __('teachers') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Create') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('create-new-schedule') }}</h3>
                <div class="tile-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{ __('teacher-name') }}</label>
                                <select name="user_id" id="user_id" class="form-control" onchange="getClasses()">
                                    <option value="">{{ __('enter-teacher-name') }}</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                                    @endforeach
                                </select>
                                <div class="input-error" id="userError"
                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                            </div>
                            @error('user_id')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="scrollable-table">
                                <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                    <thead style="font-size: 12px;line-height: 2px;background: #eeeeee;">
                                        <tr>
                                            <th>{{ __('ID') }}</th>
                                            <th>{{ __('class-name') }}</th>
                                            <th>{{ __('division') }}</th>
                                            <th>{{ __('Day') }}</th>
                                            <th>{{ __('material') }}</th>
                                            <th>{{ __('lesson') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody" style="font-size: 12px">
                                        @if (isset($lesson_schedule_id))
                                            <input type="hidden" value="{{ $lesson_schedule_id }}"
                                                id="lesson_schedule_id">
                                        @endif
                                        @php $serial_number = 0; @endphp
                                        <tr id="trControl{{ ++$serial_number }}">
                                            <td style="text-align: center; padding: 5px; margin: 0">{{ $serial_number }}
                                                <span style="padding: 0; margin: 0; display: block;line-height: 2px"
                                                    class="control-link remove"><i style="font-size: 12px"
                                                        class="far fa-trash-alt"></i></span>
                                            </td>

                                            <td style="padding: 5px; margin: 0">
                                                <select name="class_id{{ $serial_number }}"
                                                    id="class_id{{ $serial_number }}" class="form-control"
                                                    onchange="getMaterials({{ $serial_number }})" disabled>
                                                    <option value="" disabled selected>{{ __('Enter Class Name') }}
                                                    </option>
                                                </select>
                                                <div class="input-error" id="class_idError{{ $serial_number }}"
                                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>

                                            <td style="padding: 5px; margin: 0">
                                                <select id="division_id{{ $serial_number }}"
                                                    id="division_id{{ $serial_number }}" class="form-control"
                                                    onchange="getDays({{ $serial_number }})" disabled>
                                                    <option value="" disabled selected>{{ __('Select Division') }}
                                                    </option>
                                                </select>
                                                <div class="input-error" id="division_idError{{ $serial_number }}"
                                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>

                                            <td style="padding: 5px; margin: 0">
                                                <select name="day{{ $serial_number }}" id="day{{ $serial_number }}"
                                                    class="form-control" onchange="getLessons({{ $serial_number }})"
                                                    disabled>
                                                    <option value="" disabled selected>{{ __('Enter Day') }}</option>
                                                </select>
                                                <div class="input-error" id="dayError{{ $serial_number }}"
                                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>

                                            <td style="padding: 5px; margin: 0">
                                                <select name="material_id{{ $serial_number }}"
                                                    id="material_id{{ $serial_number }}" class="form-control"
                                                    onchange="RepeatData({{ $serial_number }})" disabled>
                                                    <option value="" disabled selected>{{ __('Select Material') }}
                                                    </option>
                                                </select>
                                                <div class="input-error" id="material_idError{{ $serial_number }}"
                                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>

                                            <td style="padding: 5px; margin: 0">
                                                <select name="lesson_id{{ $serial_number }}"
                                                    id="lesson_id{{ $serial_number }}" class="form-control"
                                                    onchange="RepeatData({{ $serial_number }})" disabled>
                                                    <option value="">{{ __('Enter Lessons') }}</option>
                                                </select>
                                                <div class="input-error" id="lesson_idError{{ $serial_number }}"
                                                    style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <a id="addBtn"><i class="fa fa-fw fa-lg fa-plus-circle"
                                        style="font-size: 18px; color: green; cursor: pointer;margin-top: 10px"
                                        onclick="addRow()"></i></a>
                            </div>
                        </div>
                    </div>
                    <hr style="padding: 0 0 2px 0; margin: 13px 0 0 0">
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="form-group">
                                <button class="btn btn-primary" id="btn" type="button"
                                    style="padding: 4px; margin: 0 10px 0 10px"><i class="fa fa-fw fa-lg fa-check-circle"
                                        style="font-size: 14px"></i><i
                                        class="loading-icon fa-lg fas fa-spinner fa-spin hide"
                                        style="display: none"></i><span id="textSpan"
                                        style="font-size: 14px">{{ __('Create') }}</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;
        var itemsArray = [];

        $("#user_id").select2({
            placeholder: "{{ __('enter-teacher-name') }}",
            width: "100%",
        });

        function RepeatData(id) {
            var currentLocale = "{{ app()->getLocale() }}";
            const count = parseInt($("#count").val());
            const uniqueData = [];
            let error = false;

            for (let index = 1; index <= noOfRows; index++) {
                let day = $("#day" + index).val();
                let lesson = $("#lesson_id" + index).val();
                let currentData = `${day}-${lesson}`;

                if (uniqueData.includes(currentData)) {
                    error = true;
                    break;
                } else {
                    uniqueData.push(currentData);
                }
            }

            if (error) {
                swal({
                    closeOnClickOutside: false,
                    title: `{{ __('Error: You have previously assigned material to the same time. Choose another time') }}`,
                    icon: "error",
                }).then(function() {
                    $("#lesson_id" + id).empty();
                    getLessons(id);
                    $("#lesson_idError" + id).css("display", "");
                    $("#select2-lesson_id" + id + "-container").css("border", "#b7000c solid 2px");
                });
            } else {
                $("#lesson_idError" + id).removeAttr("style");
                $("#select2-lesson_id" + id + "-container").removeAttr("style");
            }
        }

        for (var i = 1; i <= noOfRows; i++) {
            $("#day" + i).select2({
                placeholder: "{{ __('enter-day') }}",
                width: "100%",
            });
            $("#class_id" + i).select2({
                placeholder: "{{ __('enter-classes-name') }}",
                width: "93%",
            });
            $("#division_id" + i).select2({
                placeholder: "{{ __('select-division') }}",
                width: "93%",
            });
            $("#material_id" + i).select2({
                placeholder: "{{ __('select-material') }}",
                width: "93%",
            });
            $("#lesson_id" + i).select2({
                placeholder: "{{ __('enter-lessons') }}",
                width: "93%",
            });
        }

        function getClasses(id = 1) {
            var currentLocale = "{{ app()->getLocale() }}";
            let user_id = $("#user_id").val();

            $('#division_id' + id).empty();
            $('#day' + id).empty();
            $('#lesson_id' + id).empty();

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/class/get_classes/" + user_id,
                success: function(response) {
                    if (response["status"] === 200) {
                        var classSelect = $("#class_id" + id);
                        classSelect.empty();
                        var classesData = response.data[0].classes;
                        var option1 = $('<option>', {
                            value: "",
                            text: "{{ __('enter-classes-name') }}"
                        });
                        classSelect.append(option1);
                        for (var i = 0; i < classesData.length; i++) {
                            var classes = classesData[i];
                            if (currentLocale == 'en')
                                var option = $('<option>', {
                                    value: classes.id,
                                    text: classes.name_en
                                });
                            else
                                var option = $('<option>', {
                                    value: classes.id,
                                    text: classes.name_ar
                                });
                            classSelect.append(option);
                        }
                        $('.classes').css('display', '');
                        $("#class_id" + id).removeAttr('disabled')
                    } else {
                        alert('false');
                    }
                },
            });
        }

        function getMaterials(id) {
            let class_id = $("#class_id" + id).val();
            var currentLocale = "{{ app()->getLocale() }}";

            $('#division_id' + id).empty();
            $('#day' + id).empty();
            $('#lesson_id' + id).empty();

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/class/get_divisions_materials/" + class_id + "/" + 0,
                success: function(response) {
                    if (response["status"] === 200) {
                        var materialSelect = $("#material_id" + id);
                        materialSelect.empty();
                        var materialsData = response.data[0].materials;
                        var option1 = $('<option>', {
                            value: "",
                            text: "{{ __('select-material') }}"
                        });

                        materialSelect.append(option1);
                        for (var i = 0; i < materialsData.length; i++) {
                            var material = materialsData[i];
                            if (currentLocale == 'en')
                                var option = $('<option>', {
                                    value: material.id,
                                    text: material.name_en
                                });
                            else
                                var option = $('<option>', {
                                    value: material.id,
                                    text: material.name_ar
                                });
                            materialSelect.append(option);
                        }

                        var divisionSelect = $("#division_id" + id);
                        divisionSelect.empty();
                        var divisions = response.data[0].divisions;
                        var option1 = $('<option>', {
                            value: "",
                            text: "{{ __('select-division') }}"
                        });
                        divisionSelect.append(option1);
                        for (var j = 0; j < divisions.length; j++) {
                            var division = divisions[j];
                            if (currentLocale == 'en')
                                var option = $('<option>', {
                                    value: division.id,
                                    text: division.name_en
                                });
                            else
                                var option = $('<option>', {
                                    value: division.id,
                                    text: division.name_ar
                                });
                            divisionSelect.append(option);
                        }

                        $('.classes').css('display', '');
                    } else {
                        alert('false');
                    }
                },
            });
            $("#material_id" + id).removeAttr('disabled');
            $("#division_id" + id).removeAttr('disabled');
        }

        function getDays(id) {
            let class_id = $("#class_id" + id).val();
            let division_id = $("#division_id" + id).val();
            var currentLocale = "{{ app()->getLocale() }}";

            $('#day' + id).empty();
            $('#lesson_id' + id).empty();


            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/class/get_day/" + class_id + '/' + division_id + '/' + 0,
                success: function(response) {
                    if (response["status"] === 200) {
                        var daySelected = $("#day" + id);
                        daySelected.empty();
                        var daysData = response.data[0].days;
                        var option1 = $('<option>', {
                            value: "",
                            text: "{{ __('Enter Day') }}"
                        });

                        daySelected.append(option1);
                        for (var i = 0; i < daysData.length; i++) {
                            var day = daysData[i];
                            if (currentLocale == 'en')
                                var option = $('<option>', {
                                    value: day.day,
                                    text: day.day_name
                                });
                            else
                                var option = $('<option>', {
                                    value: day.day,
                                    text: day.day_name
                                });
                            daySelected.append(option);
                        }
                        $('.classes').css('display', '');
                    } else {
                        alert('false');
                    }
                },
            });
            $("#day" + id).removeAttr('disabled');
        }

        function getLessons(id) {
            let class_id = $("#class_id" + id).val();
            let division_id = $("#division_id" + id).val();
            let day = $("#day" + id).val();
            var currentLocale = "{{ app()->getLocale() }}";

            $('#lesson_id' + id).empty();

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/class/get_lessons/" + class_id + '/' + division_id + '/' + day + '/' + 0,
                success: function(response) {
                    if (response["status"] === 200) {
                        var lessonSelected = $("#lesson_id" + id);
                        lessonSelected.empty();
                        var lessonsData = response.data[0].lessons;
                        var option1 = $('<option>', {
                            value: "",
                            text: "{{ __('Enter Day') }}"
                        });

                        lessonSelected.append(option1);
                        for (var i = 0; i < lessonsData.length; i++) {
                            var lesson = lessonsData[i];
                            if (currentLocale == 'en')
                                var option = $('<option>', {
                                    value: lesson.lesson.id,
                                    text: lesson.lesson.lesson_name_en
                                });
                            else
                                var option = $('<option>', {
                                    value: lesson.lesson.id,
                                    text: lesson.lesson.lesson_name_en
                                });
                            lessonSelected.append(option);
                        }
                        $('.classes').css('display', '');
                    } else {
                        alert('false');
                    }
                },
            });
            $("#lesson_id" + id).removeAttr('disabled');
        }

        function addRow() {
            let lastDigit = noOfRows
            getClasses(lastDigit + 1);
            if ($("#day" + noOfRows).val() === "" || $("#class_id" + noOfRows).val() === "" || $("#division_id" + noOfRows)
                .val() === "" || $("#material_id" + noOfRows).val() === "" || $("#lesson_id" + noOfRows).val() === "") {
                swal({
                    icon: 'error',
                    title: "{{ __('error') }}",
                    text: "{{ __('table-error-msg') }}"
                });
            } else {
                noOfRows++;
                $('#tableBody').append(`
                <tr id="trControl${noOfRows}">
                    <input type="hidden" value="0" id="id` + noOfRows + `">
                    <td style="text-align: center; padding: 5px; margin: 0">${noOfRows}
                        <span style="padding: 0; margin: 0; display: block;line-height: 2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>
                    </td>

                    <td style="padding: 5px; margin: 0">
                        <select name="class_id${noOfRows}" id="class_id${noOfRows}" class="form-control" onchange="getMaterials(${noOfRows})">
                            <option value="" disabled selected>{{ __('Enter Class Name') }}</option>
                        </select>
                        <div class="input-error" id="class_idError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                    </td>
                    
                    <td style="padding: 5px; margin: 0">
                        <select name="division_id${noOfRows}" id="division_id${noOfRows}" class="form-control" onchange="getDays(${noOfRows})" disabled>
                            <option value="" disabled selected>{{ __('Select Division') }}</option>
                        </select>
                        <div class="input-error" id="division_idError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                    </td>

                    <td style="padding: 5px; margin: 0">
                        <select name="day${noOfRows}" id="day${noOfRows}" class="form-control" onchange="getLessons(${noOfRows})">
                            <option value="" disabled selected>{{ __('Enter Day') }}</option>
                        </select>
                        <div class="input-error" id="dayError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                    </td>

                    <td style="padding: 5px; margin: 0">
                        <select name="material_id${noOfRows}" id="material_id${noOfRows}" class="form-control" onchange="RepeatData(${noOfRows})" disabled>
                            <option value="" disabled selected>{{ __('Select Material') }}</option>
                        </select>
                        <div class="input-error" id="material_idError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                    </td>

                    <td style="padding: 5px; margin: 0">
                        <select name="lesson_id${noOfRows}" id="lesson_id${noOfRows}" class="form-control" onchange="RepeatData(${noOfRows})">
                            <option value="">{{ __('Enter Lessons') }}</option>
                        </select>   
                        <div class="input-error" id="lesson_idError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                    </td>
                </tr>
            `);

                $("#day" + noOfRows).select2({
                    placeholder: "{{ __('enter-day') }}",
                    width: "100%",
                });
                $("#class_id" + noOfRows).select2({
                    placeholder: "{{ __('enter-classes-name') }}",
                    width: "93%",
                });
                $("#division_id" + noOfRows).select2({
                    placeholder: "{{ __('select-division') }}",
                    width: "93%",
                });
                $("#material_id" + noOfRows).select2({
                    placeholder: "{{ __('select-material') }}",
                    width: "93%",
                });
                $("#lesson_id" + noOfRows).select2({
                    placeholder: "{{ __('enter-lessons') }}",
                    width: "93%",
                });

            }
        }

        $(document).on('click', '.table .remove', function() {
            let $row = $(this).closest('tr');
            let rowId = $row.attr("id");
            let rowNo = rowId.charAt(rowId.length - 1);
            $row.remove();
        });

        $("#btn").on("click", async function() {
            var currentLocale = "{{ app()->getLocale() }}";
            var dataArray = [];
            var formData = new FormData();
            var completed = 1;

            for (var i = 1; i <= noOfRows; i++) {
                if ($("#day" + i).val() === null) {
                    $("#dayError" + i).css("display", "");
                    $("#dayError" + i).html("{{ __('required-field') }}");
                    $("#select2-day" + i + "-container").css("border", "#b7000c solid 2px");
                } else {
                    $("#dayError" + i).html("");
                    $("#dayError" + i).css("display", "none");
                    $("#select2-day" + i + "-container").css("border", "");
                }
                if ($("#class_id" + i).val() === null) {
                    $("#classError" + i).css("display", "");
                    $("#classError" + i).html("{{ __('required-field') }}");
                    $("#select2-class_id" + i + "-container").css("border", "#b7000c solid 2px");
                } else {
                    $("#classError" + i).html("");
                    $("#classError" + i).css("display", "none");
                    $("#select2-class_id" + i + "-container").css("border", "");
                }
                if ($("#division_id" + i).val() === null) {
                    $("#divisionError" + i).css("display", "");
                    $("#divisionError" + i).html("{{ __('required-field') }}");
                    $("#select2-division_id" + i + "-container").css("border", "#b7000c solid 2px");
                } else {
                    $("#divisionError" + i).html("");
                    $("#divisionError" + i).css("display", "none");
                    $("#select2-division_id" + i + "-container").css("border", "");
                }
                if ($("#material_id" + i).val() === null) {
                    $("#materialError" + i).css("display", "");
                    $("#materialError" + i).html("{{ __('required-field') }}");
                    $("#select2-material_id" + i + "-container").css("border", "#b7000c solid 2px");
                } else {
                    $("#materialError" + i).html("");
                    $("#materialError" + i).css("display", "none");
                    $("#select2-material_id" + i + "-container").css("border", "");
                }
                if ($("#lesson_id" + i).val() === '') {
                    $("#lessonError" + i).css("display", "");
                    $("#lessonError" + i).html("{{ __('required-field') }}");
                    $("#select2-lesson_id" + i + "-container").css("border", "#b7000c solid 2px");
                } else {
                    $("#lessonError" + i).html("");
                    $("#lessonError" + i).css("display", "none");
                    $("#select2-lesson_id" + i + "-container").css("border", "");
                }
                if ($("#day" + i).val() === "" || $("#class_id" + i).val() === "" || $("#division_id" + i)
                    .val() === "" || $("#material_id" + i).val() === "" || $("#lesson" + i).val() === "") {
                    swal({
                        icon: 'error',
                        title: "{{ __('error') }}",
                        text: "{{ __('fill-input-error') }}" + i
                    });
                    completed = 0;
                    break;
                } else {
                    if ($("#trControl" + i).length > 0) {
                        const dataObj = {
                            id: $("#id" + i).val(),
                            class_id: $("#class_id" + i).val(),
                            day: $("#day" + i).val(),
                            division_id: $("#division_id" + i).val(),
                            material_id: $("#material_id" + i).val(),
                            lesson_id: $("#lesson_id" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            }
            if (completed === 0) {
                swal({
                    icon: 'error',
                    title: "{{ __('error') }}",
                    text: "{{ __('fill-input-error') }}" + i
                });
            }

            function showError(fieldName, i) {
                $("#" + fieldName + "Error" + i).css("display", "");
                $("#" + fieldName + "Error" + i).html("{{ __('required-field') }}");
                $("#select2-" + fieldName + i + "-container").css("border", "#b7000c solid 2px");
            }

            if (completed === 1) {
                formData.append("user_id", $("#user_id").val());
                formData.append("lesson_schedule_id", $("#lesson_schedule_id").val());
                formData.append("items", JSON.stringify(dataArray));
                $(".hide").css({
                    'display': ''
                });
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{ __('Create') }}");

                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + `/${currentLocale}/ajax/schedule/store`,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response) {
                        if (response["status"] === 200) {
                            swal({
                                closeOnClickOutside: false,
                                title: "{{ __('Added Successfully') }}",
                                text: response["message"],
                                icon: "success",
                            }).then(function() {
                                window.location.href =
                                    "{{ route('admin.teacher_schedules.index') }}";
                            });
                        } else if (response["status"] === 201) {
                            swal({
                                icon: "error",
                                title: '{{ __('error') }}',
                                content: {
                                    element: 'div',
                                    attributes: {
                                        innerHTML: '<div class="text-center">' + response[
                                            "message"] + '</div>',
                                    },
                                },
                            }).then(function() {
                                $(".hide").css({
                                    'display': 'none'
                                });
                                $(".fa-check-circle")[0].style.display = "";
                                $("#btn").attr("disabled", false);
                                $("#textSpan").html("{{ __('Create') }}");
                            });
                        }
                    }
                });
            }
        });
    </script>
@endsection