@extends('layouts.admin.app')

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

@section('page-nav-title')
    <style>
        .day-cell {
            cursor: pointer;
        }

        .selected {
            background-color: rgb(36, 206, 84);
        }

        .selectedLesson {
            background-color: lightblue;
        }

        .problem {
            background-color: orangered;
        }
    </style>

    <div class="app-title">
        <div>
            <h1>{{ __('classes') }}</h1>
            <p style="margin-left: 25px;">{{ __('edit-divisions') }}</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.schedules.classes') }}">{{ __('classes') }}</a></li>
            <li class="breadcrumb-item"><a
                    href="{{ route('admin.schedules.classesDivisionEdit', ['id' => $division->id, 'class_id' => $class_id, 'lesson_schedules_id' => $lesson_schedules_id]) }}">{{ __('edit-divisions') }}</a>
            </li>
        </ul>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('edit-divisions') }}
                    {{ app()->getLocale() == 'en' ? $division->name_en : $division->name_ar }}</h3>
                <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">
                                    <tbody id="tableBody" style="font-size: 12px">
                                        <input type="hidden" id="division_id" value="{{ $division->id }}">
                                        <input type="hidden" id="class_id" value="{{ $class_id }}">
                                        @php $serial_number = 1; @endphp
                                        @if (app()->getLocale() == 'en')
                                            @foreach ($days as $day)
                                                <tr class="row{{ $serial_number }}">
                                                    <td class="{{ $day->lessons ? 'selected' : '' }}"
                                                        data-checkbox="{{ $serial_number }}{{ $day->day_id }}"
                                                        onclick="{{ $division->control == 0 ? 'checkedDay(this,' . $serial_number . ',' . $day->day_id . ')' : '' }}"
                                                        style="text-align: center;font-weight: bold"
                                                        id="dayday{{ $serial_number }}{{ $day->day_id }}">
                                                        {{ $day->day_name }}
                                                        <input type="checkbox" style="display: none;"
                                                            id="day{{ $serial_number }}{{ $day->day_id }}"
                                                            class="lesson-checkbox" value="{{ $day->day_name }}"
                                                            {{ $day->lessons ? 'checked' : '' }}>
                                                    </td>
                                                    @foreach ($lessons as $keyLesson => $lesson)
                                                        <td class="{{ in_array($lesson->id, $day->lessons) ? 'selectedLesson' : '' }} td_order{{ $serial_number }}{{ $day->day_id }}"
                                                            data-checkbox="{{ $serial_number }}{{ ++$keyLesson }}{{ $day->day_id }}"
                                                            onclick="{{ $division->control == 0 ? 'checkedLesson(this, ' . $serial_number . ', ' . $keyLesson . ', ' . $day->day_id . ')' : '' }}"
                                                            class="td_order{{ $serial_number }}{{ $day->day_id }}">
                                                            {{ $lesson->lesson_name_en }}
                                                            <input type="checkbox" value="{{ $lesson->id }}"
                                                                style="display: none;"
                                                                id="lesson{{ $serial_number }}{{ $keyLesson }}{{ $day->day_id }}"
                                                                class="lesson-checkbox lessons_order{{ $serial_number }}{{ $day->day_id }}"
                                                                {{ in_array($lesson->id, $day->lessons) ? 'checked' : '' }}>
                                                        </td>
                                                    @endforeach
                                                    @if ($division->control == 0)
                                                        <td>
                                                            <a class="control-link edit text-info"
                                                                onclick="EditDivision({{ $day->day_id }})"><i
                                                                    class="fas fa-check"></i></a>
                                                            <a class="control-link edit text-danger"
                                                                onclick="DeleteDivision({{ $day->day_id }})"><i
                                                                    class="fas fa-times"></i></a>
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        @else
                                            @foreach ($days as $day)
                                                <tr class="row{{ $serial_number }}">
                                                    <td class="{{ $day->lessons ? 'selected' : '' }}"
                                                        data-checkbox="{{ $serial_number }}{{ $day->day_id }}"
                                                        onclick="{{ $division->control == 0 ? 'checkedDay(this,' . $serial_number . ',' . $day->day_id . ')' : '' }}"
                                                        style="text-align: center;font-weight: bold"
                                                        id="dayday{{ $serial_number }}{{ $day->day_id }}">
                                                        {{ $day->day_name }}
                                                        <input type="checkbox" style="display: none;"
                                                            id="day{{ $serial_number }}{{ $day->day_id }}"
                                                            class="lesson-checkbox" value="{{ $day->day_name }}"
                                                            {{ $day->lessons ? 'checked' : '' }}>
                                                    </td>
                                                    @foreach ($lessons as $keyLesson => $lesson)
                                                        <td class="{{ in_array($lesson->id, $day->lessons) ? 'selectedLesson' : '' }} td_order{{ $serial_number }}{{ $day->day_id }}"
                                                            data-checkbox="{{ $serial_number }}{{ ++$keyLesson }}{{ $day->day_id }}"
                                                            onclick="{{ $division->control == 0 ? 'checkedLesson(this, ' . $serial_number . ', ' . $keyLesson . ', ' . $day->day_id . ')' : '' }}">
                                                            {{ app()->getLocale() == 'en' ? $lesson->lesson_name_en : $lesson->lesson_name_ar }}
                                                            <input type="checkbox" value="{{ $lesson->id }}"
                                                                style="display: none;"
                                                                id="lesson{{ $serial_number }}{{ $keyLesson }}{{ $day->day_id }}"
                                                                class="lesson-checkbox lessons_order{{ $serial_number }}{{ $day->day_id }}"
                                                                {{ in_array($lesson->id, $day->lessons) ? 'checked' : '' }}>
                                                        </td>
                                                    @endforeach
                                                    @if ($division->control == 0)
                                                        <td>
                                                            <a class="control-link edit text-info"
                                                                onclick="EditDivision({{ $day->day_id }})"><i
                                                                    class="fas fa-check"></i></a>
                                                            <a class="control-link edit text-danger"
                                                                onclick="DeleteDivision({{ $day->day_id }})"><i
                                                                    class="fas fa-times"></i></a>
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                                @if ($division->control == 0)
                                    <div class="tile-footer" style="text-align: end;">
                                        <form
                                            action="{{ route('admin.schedules.deleteDivision', ['class_id' => $class_id, 'division_id' => $division->id]) }}"
                                            method="post" id="delete{{ $class_id }}" style="display: none"
                                            data-swal-title="{{ __('Delete Property') }}"
                                            data-swal-text="{{ __('Are you sure you want to delete this division?') }}"
                                            data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}"
                                            data-success-msg="{{ __('Delete Successfully') }}">@csrf @method('delete')
                                        </form>
                                        <span href="#"
                                            class="control-link remove form-confirm btn btn-danger text-white"
                                            style="font-size: 13px"
                                            data-form-id="#delete{{ $class_id }}">{{ __('delete-division') }}
                                            {{ app()->getLocale() == 'en' ? $division->name_en : $division->name_ar }}</span>
                                    </div>
                                @else
                                    <div class="tile-footer" style="text-align: end;">
                                        <a href="{{ route('admin.schedules.classDivisionSchedule', ['class_id' => $class_id, 'division_id' => $division->id]) }}"
                                            class="btn btn-primary"
                                            style="background: rgb(36, 206, 84);border:none">{{ __('show-schedule') }}</a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script type="text/javascript">
        var currentLocale = "{{ app()->getLocale() }}";

        function EditDivision(id) {
            var baseUrl = window.location.origin;
            var formData = new FormData();
            var lengthTableRow = $("#tableBody tr").length;
            var day = [];
            var daydata = [];

            for (let i = 1; i <= lengthTableRow; i++) {
                let checkboxId = "day" + i + id;
                let isChecked = $("#" + checkboxId).prop('checked');

                if (isChecked) {
                    day.push(id);
                    var lengthTable = ($(".row" + i + " td").length / lengthTableRow) - 1;

                    for (let j = 1; j <= lengthTable; j++) {
                        let checkboxClass = "lesson" + i + j + id;
                        let isCheckedLesson = $("#" + checkboxClass).prop('checked');

                        if (isCheckedLesson) {
                            daydata.push($("#" + checkboxClass).val());
                        }
                    }
                }
            }

            formData.append("day", day);
            formData.append("lessons", daydata);
            formData.append("class_id", $("#class_id").val());
            formData.append("division_id", $("#division_id").val());

            swal({
                title: "{{ __('Confirm Update') }}",
                text: "{{ __('Are you sure you want to update this division?') }}",
                icon: 'warning',
                buttons: true,
                dangerMode: false,
            }).then((isConfirmed) => {
                if (isConfirmed) {
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + `/${currentLocale}/ajax/class/updateDivision/` + id,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(response) {
                            if (response.status === 200) {
                                swal({
                                    title: "{{ __('updated-successfully') }}",
                                    text: response.message,
                                    icon: "success",
                                }).then(function() {
                                    location.reload();
                                });
                            } else if (response.status === 201) {
                                swal({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message,
                                }).then(function() {
                                    location.reload();
                                });
                            }
                        }
                    });
                } else {}
            });
        }

        function DeleteDivision(id) {
            var baseUrl = window.location.origin;
            var formData = new FormData();
            formData.append("day", id);
            formData.append("class_id", $("#class_id").val());
            formData.append("division_id", $("#division_id").val());

            swal({
                title: "{{ __('Confirm Deletion') }}",
                text: "{{ __('Are you sure you want to delete this day?') }}",
                icon: 'warning',
                buttons: true,
                dangerMode: true,
            }).then(function(isConfirmed) {
                if (isConfirmed) {
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + `/${currentLocale}/ajax/class/deleteDivision`,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(response) {
                            if (response.status === 200) {
                                swal({
                                    title: "{{ __('Delete Successfully') }}",
                                    text: response.message,
                                    icon: "success",
                                }).then(function() {
                                    location.reload();
                                });
                            } else if (response.status === 201) {
                                swal({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message
                                });
                            }
                        }
                    });
                }
            });
        }

        function checkedDay(cell, id, day) {
            checkbox = $("#day" + id + day);
            if (checkbox.prop('checked')) {
                checkbox.prop('checked', false);
                $(cell).removeClass('selected');
                $(".lesson-checkbox.lessons_order" + id + day).prop('checked', false);
                $(".td_order" + id + day).removeClass('selectedLesson');
            } else {
                checkbox.prop('checked', true);
                $(cell).removeClass('problem');
                $(cell).addClass('selected');
            }
        }

        function checkedLesson(cell, id, lesson, day) {
            $check = $("#day" + id + day).prop('checked')
            if (!$check) {
                if (day == '1') {
                    toastr.error("{{ __('please-select-day1') }}");
                    $("#dayday" + id + day).addClass('problem');
                    return;
                } else if (day == '2') {
                    toastr.error("{{ __('please-select-day2') }}");
                    $("#dayday" + id + day).addClass('problem');
                    return;
                } else if (day == '3') {
                    toastr.error("{{ __('please-select-day3') }}");
                    $("#dayday" + id + day).addClass('problem');
                    return;
                } else if (day == '4') {
                    toastr.error("{{ __('please-select-day4') }}");
                    $("#dayday" + id + day).addClass('problem');
                    return;
                } else if (day == '5') {
                    toastr.error("{{ __('please-select-day5') }}");
                    $("#dayday" + id + day).addClass('problem');
                    return;
                }
            }

            checkbox = $("#lesson" + id + lesson + day);
            if (checkbox.prop('checked')) {
                checkbox.prop('checked', false);
                $(cell).removeClass('selectedLesson');
            } else {
                checkbox.prop('checked', true);
                $(cell).addClass('selectedLesson');
            }
        }
    </script>
@endsection