@extends('layouts.admin.app')

@section('page-title')
    {{ __('classes') }}
@endSection

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

@section('content')
    <style>
        :root {
            --numDays: 5;
            --numHours: {{ $lessonsCount }};
            --timeHeight: 60px;
            --calBgColor: #fff1f8;
            --eventBorderColor: #f2d3d8;
            --eventColor1: #ffd6d1;
            --eventColor2: #fafaa3;
            --eventColor3: #e2f8ff;
            --eventColor4: #d1ffe6;
        }

        .calendar {
            display: grid;
            gap: 10px;
            grid-template-columns: auto 1fr;
        }

        .timeline {
            display: grid;
            grid-template-rows: repeat(var(--numHours), var(--timeHeight));
        }

        .days {
            display: grid;
            grid-column: 2;
            gap: 5px;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .events {
            display: grid;
            grid-template-rows: repeat(var(--numHours), var(--timeHeight));
            border-radius: 5px;
            background: #faf7f7;
        }

        .start-1 {
            grid-row-start: 1;
        }

        .start-2 {
            grid-row-start: 2;
        }

        .start-3 {
            grid-row-start: 3;
        }

        .start-4 {
            grid-row-start: 4;
        }

        .start-5 {
            grid-row-start: 5;
        }

        .start-6 {
            grid-row-start: 6;
        }

        .start-7 {
            grid-row-start: 7;
        }

        .start-8 {
            grid-row-start: 8;
        }

        .start-9 {
            grid-row-start: 9;
        }

        .start-10 {
            grid-row-start: 10;
        }

        .start-11 {
            grid-row-start: 11;
        }

        .end-1 {
            grid-row-end: 1;
        }

        .end-2 {
            grid-row-end: 2;
        }

        .end-3 {
            grid-row-end: 3;
        }

        .end-4 {
            grid-row-end: 4;
        }

        .end-5 {
            grid-row-end: 5;
        }

        .end-6 {
            grid-row-end: 6;
        }

        .end-7 {
            grid-row-end: 7;
        }

        .end-8 {
            grid-row-end: 8;
        }

        .end-9 {
            grid-row-end: 9;
        }

        .end-10 {
            grid-row-end: 10;
        }

        .end-11 {
            grid-row-end: 11;
        }

        .title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .event {
            border-radius: 5px;
            padding: 0.5rem;
            margin: 0 0.5rem;
            background: white;
        }

        .space,
        .date {
            height: 60px;
        }

        .corp-fi {
            background: var(--eventColor1);
        }

        .ent-law {
            background: var(--eventColor2);
        }

        .writing {
            background: var(--eventColor3);
        }

        .securities {
            background: var(--eventColor4);
        }

        .date {
            display: flex;
            gap: 1em;
            justify-content: center;
            align-items: center;
        }

        .date-num {
            font-size: 1.5rem;
            font-weight: 600;
            display: inline;

        }

        .date-day {
            display: inline;
            font-size: 3rem;
            font-weight: 100;
        }

        .bg-color-1 {
            background-color: #cfe2ff;
        }

        .bg-color-2 {
            background-color: #e2e3e5;
        }

        .bg-color-3 {
            background-color: #d1e7dd;
        }

        .bg-color-4 {
            background-color: #f8d7da;
        }

        .bg-color-5 {
            background-color: #fff3cd;
        }

        .bg-color-6 {
            background-color: #cff4fc;
        }

        .bg-color-7 {
            background-color: #fccff0;
        }

        .bg-color-8 {
            background-color: #fce2cf;
        }

        .bg-color-9 {
            background-color: #d7fccf;
        }

        .bg-color-10 {
            background-color: #f2fccf;
        }

        .bg-color-11 {
            background-color: #000000c4;
        }

        .box-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .small-box1 {
            width: 20px;
            height: 20px;
            background-color: #cfe2ff;
            margin-left: 5px;
        }

        .small-box2 {
            width: 20px;
            height: 20px;
            background-color: #e2e3e5;
            margin-left: 5px;
        }

        .small-box3 {
            width: 20px;
            height: 20px;
            background-color: #d1e7dd;
            margin-left: 5px;
        }

        .small-box4 {
            width: 20px;
            height: 20px;
            background-color: #f8d7da;
            margin-left: 5px;
        }

        .small-box5 {
            width: 20px;
            height: 20px;
            background-color: #fff3cd;
            margin-left: 5px;
        }

        .small-box6 {
            width: 20px;
            height: 20px;
            background-color: #cff4fc;
            margin-left: 5px;
        }

        .small-box7 {
            width: 20px;
            height: 20px;
            background-color: #fccff0;
            margin-left: 5px;
        }

        .small-box8 {
            width: 20px;
            height: 20px;
            background-color: #fce2cf;
            margin-left: 5px;
        }

        .small-box9 {
            width: 20px;
            height: 20px;
            background-color: #d7fccf;
            margin-left: 5px;
        }

        .small-box10 {
            width: 20px;
            height: 20px;
            background-color: #f2fccf;
            margin-left: 5px;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 10px;">
                <div class="tile-body">
                    <div class="x">
                        @php
                            $lessons_num = ['first-lesson', 'second-lesson', 'third-lesson', 'fourth-lesson', 'fifth-lesson', 'sixth-lesson', 'seventh-lesson', 'Eighth-lesson', 'Ninth-lesson', 'Tenth-lesson'];
                            $lessons_css = ['small-box1', 'small-box2', 'small-box3', 'small-box4', 'small-box5', 'small-box6', 'small-box7', 'small-box8', 'small-box9', 'small-box10', 'small-box11'];
                            $lessons = [];
                        @endphp
                        @for ($i = 0; $i < $lessonsCount; $i++)
                            @php
                                $lessons[$lessons_num[$i]] = $lessons_css[$i];
                            @endphp
                        @endfor
                        @foreach (array_chunk($lessons, 6, true) as $lessonGroup)
                            <div class="row mb-2 mt-2" style="margin-right: 5px">
                                @foreach ($lessonGroup as $lessonKey => $boxClass)
                                    <div class="col-md-2">
                                        <div style="display: flex;">
                                            <span style="margin-left: 5px;">{{ __($lessonKey) }}</span>
                                            <div class="box {{ $boxClass }}"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 10px;">
                <div class="tile-body">
                    <a href="{{ route('admin.schedules.scheduleDownload', ['class_id' => $class_id, 'division_id' => $division_id]) }}"
                        class="btn btn-primary">{{ __('Download') }}</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @if (isset($AlternativeClassesDetails) && !$AlternativeClassesDetails->isEmpty())
                <!-- Permission View Button -->
                <button type="button" class="btn btn-primary mb-2" data-toggle="modal"
                    data-target="#AlternativeClassesDetails">
                    {{ __('Alternative quotas') }}
                </button>

                <!-- Permission Box-->
                <div class="modal fade" id="AlternativeClassesDetails" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">
                                    <span>{{ __('Alternative quotas') }} :</span><br>
                                    <u>{{ $date_from }} - {{ $date_to }}</u>
                                </h5>
                                <button type="button" class="close {{ app()->getLocale() == 'ar' ? 'm-0' : '' }}"
                                    data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="tile">
                                    <div class="tile-body">
                                        <div class="table-responsive" id="form_status">
                                            <table class="table table-hover table-bordered" id="sampleTable">
                                                <thead>
                                                    <tr>
                                                        <th width="15%">{{ __('teacher') }}</th>
                                                        <th width="15%">{{ __('material') }}</th>
                                                        <th width="15%">{{ __('lesson') }}</th>
                                                        <th width="15%">{{ __('date-from') }}</th>
                                                        <th width="15%">{{ __('date-to') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($AlternativeClassesDetails as $key => $class)
                                                        <tr>
                                                            <td>{{ $class->alternativeClass->teacher->full_name }}</td>
                                                            <td>{{ app()->getLocale() == 'en' ? $class->material->name_en : $class->material->name_ar }}
                                                            </td>
                                                            <td>{{ app()->getLocale() == 'en' ? $class->lesson->lesson_name_en : $class->lesson->lesson_name_ar }}
                                                            </td>
                                                            <td>{{ $class->date_from }}</td>
                                                            <td>{{ $class->date_to }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="tile" style="padding: 10px;">
                <div class="tile-body">
                    <div class="calendar mt-4">
                        <div class="timeline">
                            <div class="spacer">
                            </div>
                            @foreach (array_chunk($lessons, 6, true) as $key => $lessonGroup)
                                @foreach ($lessonGroup as $lessonKey => $boxClass)
                                    @if ($lessonKey != 'Alternative quotas')
                                        <div class="time-marker">{{ __($lessonKey) }}</div>
                                    @endif
                                @endforeach
                            @endforeach
                        </div>
                        <div class="days">
                            @php
                                Carbon\Carbon::setWeekStartsAt(Carbon\Carbon::SUNDAY);
                                $currentDate = Carbon\Carbon::now();
                                if ($currentDate->dayOfWeek !== Carbon\Carbon::SUNDAY) {
                                    $currentDate->previous(Carbon\Carbon::SUNDAY);
                                }
                                $beginningOfWeek = $currentDate->copy()->startOfWeek();
                                $daysOfWeek = [];
                                $thisWeek = [];
                                for ($i = 0; $i < 5; $i++) {
                                    $daysOfWeek[$i + 1] = $beginningOfWeek->format('l');
                                    $beginningOfWeek->addDay();
                                }
                            @endphp

                            @foreach ($daysOfWeek as $dayIndex => $dayName)
                                @if (app()->getLocale() == 'ar')
                                    @php
                                        switch ($dayName) {
                                            case 'Sunday':
                                                $dayName = 'الأحد';
                                                break;
                                            case 'Monday':
                                                $dayName = 'الأثنين';
                                                break;
                                            case 'Tuesday':
                                                $dayName = 'الثلاثاء';
                                                break;
                                            case 'Wednesday':
                                                $dayName = 'الأربعاء';
                                                break;
                                            case 'Thursday':
                                                $dayName = 'الخميس';
                                                break;
                                        }
                                    @endphp
                                @endif

                                <div class="day {{ strtolower(substr($dayName, 0, 3)) }}">
                                    <div class="date">
                                        @php
                                            $currentDay = $currentDate
                                                ->copy()
                                                ->startOfWeek()
                                                ->addDays($dayIndex - 1);
                                            $thisWeek[] = $currentDay->format('Y-m-d') . substr($dayName, 0, 3);
                                        @endphp
                                        <p class="date-num">{{ $dayName }}</p>
                                    </div>
                                    <div class="events">
                                        @if (isset($classesSchedulesDetails[$dayIndex]))
                                            @foreach ($classesSchedulesDetails[$dayIndex] as $key => $schedule)
                                                <div class="event start-{{ $schedule->lesson->order }} end-{{ $schedule->lesson->order }} {{ isset($schedule->alternative_id) ? 'bg-color-11' : 'bg-color-' . $schedule->lesson->order }}"
                                                    style="margin: 2px; color: {{ isset($schedule->alternative_id) ? 'white' : '' }}">
                                                    @if (app()->getLocale() == 'en')
                                                        <p class="title" style="text-align:center">
                                                            {{ $schedule->teacherName->user->full_name }}</p>
                                                        <p class="time" style="text-align:center">
                                                            {{ $schedule->material->name_en }}</p>
                                                    @else
                                                        <p class="title" style="text-align:center">
                                                            {{ $schedule->teacherName->user->full_name }}</p>
                                                        <p class="time" style="text-align:center">
                                                            {{ $schedule->material->name_ar }}</p>
                                                    @endif
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection