@extends('layouts.admin.app')

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

@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1>{{ __('teacher-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.teacher_schedules.index') }}">{{ __('teachers') }}</a></li>
            <li class="breadcrumb-item"><a
                    href="{{ route('admin.teacher_schedules.schedule', $user_id) }}">{{ __('teacher-schedule') }}</a>
            <li class="breadcrumb-item"><a href="#">{{ __('Schedule') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    <style>
        :root {
            --numDays: 1;
            --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;
        }

        .small-box11 {
            width: 20px;
            height: 20px;
            background-color: #000000c4;
            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', 'Alternative quotas'];
                            $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
                        @php $lessons[$lessons_num[10]] = $lessons_css[10]; @endphp
                        @foreach (array_chunk($lessons, 6, true) as $key => $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">
                    <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">
                            @foreach ($daysOfWeek as $dayIndex => $dayName)
                                @php
                                    switch ($dayName) {
                                        case '1':
                                            $dayName = app()->getLocale() == 'ar' ? 'الأحد' : 'Sunday';
                                            break;
                                        case '2':
                                            $dayName = app()->getLocale() == 'ar' ? 'الأثنين' : 'Monday';
                                            break;
                                        case '3':
                                            $dayName = app()->getLocale() == 'ar' ? 'الثلاثاء' : 'Tuesday';
                                            break;
                                        case '4':
                                            $dayName = app()->getLocale() == 'ar' ? 'الأربعاء' : 'Wednesday';
                                            break;
                                        case '5':
                                            $dayName = app()->getLocale() == 'ar' ? 'الخميس' : 'Thursday';
                                            break;
                                    }
                                @endphp
                                <div class="day">
                                    <div class="date">
                                        <p class="date-num">{{ $dayName }}</p>
                                    </div>
                                    <div class="events">
                                        @if (isset($teacherSchedulesDetails[$dayIndex]))
                                            @foreach ($teacherSchedulesDetails as $key => $schedule)
                                                @if (isset($schedule->alternative_id))
                                                    <div class="event start-{{ $schedule->lesson->order }} end-{{ $schedule->lesson->order }} bg-color-11"
                                                        style="margin: 2px;">
                                                    @else
                                                        <div class="event start-{{ $schedule->lesson->order }} end-{{ $schedule->lesson->order }} bg-color-{{ $schedule->lesson->order }}"
                                                            style="margin: 2px;">
                                                @endif
                                                @if (app()->getLocale() == 'en')
                                                    <p class="title"
                                                        style="color: {{ isset($schedule->alternative_id) ? 'white' : '' }}; text-align:center">
                                                        {{ $schedule->class->name_en }}
                                                        ({{ $schedule->division->name_en }})
                                                    </p>
                                                    <p class="time"
                                                        style="color: {{ isset($schedule->alternative_id) ? 'white' : '' }}   ;text-align:center">
                                                        {{ $schedule->material->name_en }}</p>
                                                @else
                                                    <p class="title"
                                                        style="color: {{ isset($schedule->alternative_id) ? 'white' : '' }};text-align:center">
                                                        {{ $schedule->class->name_ar }}
                                                        ({{ $schedule->division->name_ar }})</p>
                                                    <p class="time"
                                                        style="color: {{ isset($schedule->alternative_id) ? 'white' : '' }};text-align:center">
                                                        {{ $schedule->material->name_ar }}</p>
                                                @endif
                                    </div>
                            @endforeach
                            @endif

                            @if (isset($leaving[$dayIndex]))
                                @foreach ($leaving[$dayIndex][$dayIndex] as $key => $absence)
                                    <div class="event start-{{ $absence->lesson->order }} end-{{ $absence->lesson->order }} bg-color-{{ $key }}"
                                        style="margin: 2px;">
                                        <p class="title" style="text-align: center;">{{ __('Reason Of Absence') }}</p>
                                        <p class="time" style="text-align: center;">{{ $leaving[$dayIndex]->reason }}</p>
                                    </div>
                                @endforeach
                            @endif

                            @if (isset($day[$dayIndex]))
                                <div class="event start-1 end-11 bg-color-10"
                                    style=" margin: 2px;display:flex !important;flex-direction:column !important;justify-content:center !important;">
                                    <p class="title" style="text-align: center;">{{ __('Reason Of Absence') }}</p>
                                    <p class="time" style="text-align: center;">{{ $day[$dayIndex]->reason }}</p>
                                </div>
                            @endif

                            @if (isset($more_one_day[$dayIndex]))
                                @foreach ($more_one_day[$dayIndex] as $key => $absence)
                                    <div class="event start-1 end-11 bg-color-10"
                                        style=" margin: 2px;display:flex !important;flex-direction:column !important;justify-content:center !important;">
                                        <p class="title" style="text-align: center;">{{ __('Reason Of Absence') }}</p>
                                        <p class="time" style="text-align: center;">{{ $absence->reason }}</p>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection