@extends('layouts.admin.app')

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

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

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

        .selectedLesson {
            background-color: rgb(126, 192, 214);
        }

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

    <div class="app-title">
        <div>
            <h1>{{ __('classes') }}</h1>
            <p style="margin-left: 25px;">{{ __('division') }}</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.addDivision', $class_id) }}">{{ __('division') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('create-divisions-class') }}</h3>
                <div class="tile-body">
                    <div class="row">
                        @php
                            $serial_number = 1;
                        @endphp
                        <input type="hidden" id="count" value="{{ $serial_number }}">
                        <input type="hidden" id="class" value="{{ $class_id }}">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('select-division') }}</label>
                                <select name="division" id="division{{ $serial_number }}" class="form-control">
                                    <option value="">{{ __('select-division') }}</option>
                                    @foreach ($divisions as $division)
                                        <option value="{{ $division->id }}">
                                            {{ app()->getLocale() == 'en' ? $division->name_en : $division->name_ar }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @php
                            $serial_number = 1;
                        @endphp


                        <div class="col-md-12"
                            style="text-align:end;{{ app()->getlocale() == 'en' ? 'padding-right: 33px' : 'padding-left: 33px' }};margin-bottom: 10px;">
                            <label for="checkAllCheckbox">{{ __('check-all') }}</label>
                            <input type="checkbox" id="checkAllCheckbox" class="check-all" onclick="checkAll()">
                            <br>
                        </div>

                        <div id="open{{ $serial_number }}" class="col-md-12">
                            <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">
                                            @php
                                                $days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday'];
                                                $days_ar = ['الأحد', 'الأثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'];
                                            @endphp
                                            @if (app()->getLocale() == 'en')
                                                @foreach ($days as $key => $day)
                                                    <tr class="row{{ $serial_number }}">
                                                        <td data-checkbox="{{ $serial_number }}{{ ++$key }}"
                                                            onclick="checkedDay(this,{{ $serial_number }},{{ $key }})"
                                                            style="text-align: center;font-weight: bold;font-size: .9rem"
                                                            id="dayday{{ $serial_number }}{{ $key }}"
                                                            class="dayTd">
                                                            {{ $day }}
                                                            <input type="checkbox"
                                                                id="day{{ $serial_number }}{{ $key }}"
                                                                class="lesson-checkbox" style="display: none;"
                                                                value="{{ $key }}">
                                                        </td>
                                                        @foreach ($lessons as $keyLesson => $lesson)
                                                            <td data-checkbox="{{ $serial_number }}{{ ++$keyLesson }}{{ $key }}"
                                                                onclick="checkedLesson(this , {{ $serial_number }} ,{{ $keyLesson }} ,{{ $key }})"
                                                                class="td_order{{ $serial_number }}{{ $key }} lessonTd">
                                                                {{ $lesson->lesson_name_en }}
                                                                <input type="checkbox"
                                                                    id="lesson{{ $serial_number }}{{ $keyLesson }}{{ $key }}"
                                                                    class="lesson-checkbox lessons_order{{ $serial_number }}{{ $key }}"
                                                                    value="{{ $lesson->id }}" style="display: none;">
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @else
                                                @foreach ($days_ar as $key => $day)
                                                    <tr class="row{{ $serial_number }}">
                                                        <td data-checkbox="{{ $serial_number }}{{ ++$key }}"
                                                            onclick="checkedDay(this,{{ $serial_number }},{{ $key }})"
                                                            style="text-align: center;font-weight: bold;font-size: .9rem"
                                                            id="dayday{{ $serial_number }}{{ $key }}"
                                                            class="dayTd">
                                                            {{ $day }}
                                                            <input type="checkbox"
                                                                id="day{{ $serial_number }}{{ $key }}"
                                                                class="lesson-checkbox" style="display: none;"
                                                                value="{{ $key }}">
                                                        </td>
                                                        @foreach ($lessons as $keyLesson => $lesson)
                                                            <td data-checkbox="{{ $serial_number }}{{ ++$keyLesson }}{{ $key }}"
                                                                onclick="checkedLesson(this , {{ $serial_number }} ,{{ $keyLesson }} ,{{ $key }})"
                                                                class="td_order{{ $serial_number }}{{ $key }} lessonTd">
                                                                {{ $lesson->lesson_name_ar }}
                                                                <input type="checkbox"
                                                                    id="lesson{{ $serial_number }}{{ $keyLesson }}{{ $key }}"
                                                                    class="lesson-checkbox lessons_order{{ $serial_number }}{{ $key }}"
                                                                    value="{{ $lesson->id }}" style="display: none;">
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" id="btn" onclick="submitForm('save')" type="button"
                        style="padding: 4px; margin: 0 10px 0 14px">
                        <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>
@endsection


@section('scripts')
    <script type="text/javascript">
        $("#division1").select2({
            placeholder: "{{ __('select-division') }}",
            width: "100%",
        });

        function submitForm(action) {
            var numOfDiv = $("#count").val()
            var baseUrl = window.location.origin;
            var data = {};
            var formData = new FormData();
            var currentLocale = "{{ app()->getLocale() }}";
            var divisionData = {};

            for (let index = 1; index <= numOfDiv; index++) {
                var division_id = $("#division" + index).val();
                if (division_id === null || division_id === '') {
                    swal({
                        icon: 'error',
                        title: "{{ __('error') }}",
                        text: "{{ __('please-select-division') }}"
                    });
                    return;
                }

                var lengthTableRow = $(".row" + index).length;

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

                    if (isChecked) {
                        var dayData = {};

                        var lengthTable = ($(".row" + index + " td").length / lengthTableRow) - 1;

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

                            if (isCheckedLesson) {
                                dayData[j] = $("#" + checkboxClass + ":checked").val();
                            }
                        }

                        if (!divisionData[division_id]) {
                            divisionData[division_id] = {};
                        }

                        divisionData[division_id][i] = dayData;
                    }
                }
            }

            formData.append("divisions", JSON.stringify(divisionData));
            formData.append("class", $("#class").val());

            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + `/${currentLocale}/ajax/class/storeDivision`,
                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.schedules.classes') }}";
                        })
                    } 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');
            }
        }

        function checkAll() {
            checkbox = $('.check-all');
            if (checkbox.prop('checked')) {
                $(".lesson-checkbox").prop('checked', true);
                $('.dayTd').removeClass('problem');
                $('.dayTd').addClass('selected');
                $('.lessonTd').addClass('selectedLesson');
            } else {
                $(".lesson-checkbox").prop('checked', false);
                $('.dayTd').removeClass('selected');
                $('.lessonTd').removeClass('selectedLesson');
            }
        }
    </script>
@endsection