@extends('layouts.admin.app')

@section('page-title')
    {{ __('edit-schedul') }}
@endsection

<style>
    .text-center {
        text-align: center !important;
    }
</style>

@section('page-nav-title')
    <div class="app-title" style="padding: 11px">
        <div>
            <h1>{{ __('teacher-schedule') }}</h1>
            <p style="margin-left: 25px;">{{ __('edit-schedul') }}</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="{{ route('admin.teacher_schedules.schedule', $teacher->user_id) }}">{{ __('teacher-schedule') }}</a>
            <li class="breadcrumb-item"><a
                    href="{{ route('admin.teacher_schedules.edit', $teacher->id) }}">{{ __('edit') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    <form method="post">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">
                        <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">
                                            @php $serial_number = 0; @endphp
                                            <input type="hidden" value="{{ $teacher->id }}" id="schedule_id">
                                            <input type="hidden" value="{{ $teacher->user_id }}" id="user_id">
                                            @foreach ($schedules as $schedule)
                                                <tr id="trControl{{ ++$serial_number }}">
                                                    <input type="hidden" value="{{ $schedule->id }}"
                                                        id="id{{ $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 }})">
                                                            <option value="" disabled selected>
                                                                {{ __('Enter Class Name') }}</option>
                                                            @foreach ($classes as $class)
                                                                <option value="{{ $class->id }}"
                                                                    @if ($schedule->class_id == $class->id) selected @endif>
                                                                    @if (app()->getLocale() == 'en')
                                                                        {{ $class->name_en }}@else{{ $class->name_ar }}
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="input-error" id="classError{{ $serial_number }}"
                                                            style="padding-top: 10px; display: none; font-size: 13px"></div>
                                                    </td>

                                                    <td style="padding: 5px; margin: 0">
                                                        <select name="division_id{{ $serial_number }}"
                                                            id="division_id{{ $serial_number }}" class="form-control"
                                                            onchange="getDays({{ $serial_number }})" disabled>
                                                            <option value="" disabled selected>
                                                                {{ __('Select Division') }}</option>
                                                            @foreach ($divisions as $division)
                                                                <option value="{{ $division->id }}"
                                                                    @if ($schedule->division_id == $division->id) selected @endif>
                                                                    @if (app()->getLocale() == 'en')
                                                                        {{ $division->name_en }}
                                                                    @else
                                                                        {{ $division->name_ar }}
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="input-error" id="divisionError{{ $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>
                                                            <option value="1"
                                                                @if ($schedule->day == 1) selected @endif>
                                                                {{ __('sunday') }}</option>
                                                            <option value="2"
                                                                @if ($schedule->day == 2) selected @endif>
                                                                {{ __('monday') }}</option>
                                                            <option value="3"
                                                                @if ($schedule->day == 3) selected @endif>
                                                                {{ __('tuesday') }}</option>
                                                            <option value="4"
                                                                @if ($schedule->day == 4) selected @endif>
                                                                {{ __('wednesday') }}</option>
                                                            <option value="5"
                                                                @if ($schedule->day == 5) selected @endif>
                                                                {{ __('thursday') }}</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>
                                                            @foreach ($materials as $material)
                                                                <option value="{{ $material->id }}"
                                                                    @if ($schedule->material_id == $material->id) selected @endif>
                                                                    @if (app()->getLocale() == 'en')
                                                                        {{ $material->name_en }}
                                                                    @else
                                                                        {{ $material->name_ar }}
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="input-error" id="materialError{{ $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>
                                                            @foreach ($lessons as $lesson)
                                                                <option value="{{ $lesson->id }}"
                                                                    @if ($schedule->lesson_id == $lesson->id) selected @endif>
                                                                    @if (app()->getLocale() == 'en')
                                                                        {{ $lesson->lesson_name_en }}
                                                                    @else
                                                                        {{ $lesson->lesson_name_ar }}
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="input-error" id="lessonError{{ $serial_number }}"
                                                            style="padding-top: 10px; display: none; font-size: 13px"></div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </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">{{ __('edit') }}</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

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

        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') }}",
                allowClear: true,
                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 getMaterials(id) {
            let class_id = $("#class_id" + id).val();
            let schedule_id = $("#schedule_id").val();
            var currentLocale = "{{ app()->getLocale() }}";

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

            if (class_id !== null) {
                $.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 + "/" + schedule_id,
                    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();
            let schedule_id = $("#schedule_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 + `/${currentLocale}/ajax/class/get_day/` + class_id + '/' + division_id + '/' +
                    schedule_id,
                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();
            let schedule_id = $("#schedule_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 + `/${currentLocale}/ajax/class/get_lessons/` + class_id + '/' + division_id + '/' +
                    day + '/' + schedule_id,
                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: currentLocale == "en" ? lesson.lesson.lesson_name_en : lesson
                                        .lesson.lesson_name_ar
                                });
                            else
                                var option = $('<option>', {
                                    value: lesson.lesson.id,
                                    text: currentLocale == "en" ? lesson.lesson.lesson_name_en : lesson
                                        .lesson.lesson_name_ar
                                });
                            lessonSelected.append(option);
                        }
                        $('.classes').css('display', '');
                    } else {
                        alert('false');
                    }
                },
            });
            $("#lesson_id" + id).removeAttr('disabled');
        }

        function addRow() {
            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>
                            @foreach ($classes as $class)
                            <option value="{{ $class->id }}">@if (app()->getLocale() == 'en'){{ $class->name_en }}@else{{ $class->name_ar }}@endif</option>
                            @endforeach
                        </select>
                        <div class="input-error" id="classError${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="divisionError${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})" disabled>
                            <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="materialError${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})" disabled>
                            <option value="">{{ __('Enter Lessons') }}</option>
                        </select>
                        <div class="input-error" id="lessonError${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%",
                });
            }
        }

        $("#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 === 1) {
                formData.append("schedule_id", $("#schedule_id").val());
                formData.append("user_id", $("#user_id").val());
                formData.append("items", JSON.stringify(dataArray));
                $(".hide").css({
                    'display': ''
                });
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{ __('saving') }}");

                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + `/${currentLocale}/ajax/schedule/update`,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response) {
                        if (response["status"] === 200) {
                            swal({
                                closeOnClickOutside: false,
                                title: "{{ __('updated-successfully') }}",
                                text: response["message"],
                                icon: "success",
                            }).then(function() {
                                window.location.href = baseUrl + '/' + currentLocale +
                                    '/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("{{ __('save') }}");
                            });
                        }
                    }
                });
            }
        });

        $(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();
        });
    </script>
@endsection