@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="{{ route('admin.teacher_schedules.show', $id_teacher_schedule) }}">{{ __('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;
        }

        .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">
                    <a href="{{ route('admin.teacher_schedules.schedule_download', $id_teacher_schedule) }}" class="btn btn-primary" target="__blank">{{ __('Download') }}</a>
                </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">
                            @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($teacherSchedulesDetails[$dayIndex]))
                                            @foreach ($teacherSchedulesDetails[$dayIndex] 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)
                                    @php
                                        $requestDateFrom = \Carbon\Carbon::parse($absence->request_date_from);
                                        $requestDateTo = \Carbon\Carbon::parse($absence->request_date_to);
                                        $requestDateTo = \Carbon\Carbon::parse($requestDateTo)->endOfDay();
                                    @endphp

                                    @if (now()->between($requestDateFrom, $requestDateTo))
                                        <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;">{{ $absence->reason }}</p>
                                        </div>
                                    @endif
                                @endforeach
                            @endif


                            @if (isset($day[$dayIndex]))
                                @php
                                    $requestDateFrom = \Carbon\Carbon::parse($day[$dayIndex]->request_date_from);
                                    $requestDateTo = \Carbon\Carbon::parse($day[$dayIndex]->request_date_to);
                                    $requestDateTo = \Carbon\Carbon::parse($requestDateTo)->endOfDay();
                                @endphp

                                @if (now()->between($requestDateFrom, $requestDateTo))
                                    <div class="event start-1 end-11 bg-color-1" 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
                            @endif

                            @if (isset($more_one_day[$dayIndex]))
                                @foreach ($more_one_day[$dayIndex] as $key => $absence)
                                    @php
                                        $requestDateFrom = \Carbon\Carbon::parse($absence->request_date_from);
                                        $requestDateTo = \Carbon\Carbon::parse($absence->request_date_to);
                                        $requestDateTo = \Carbon\Carbon::parse($requestDateTo)->endOfDay();
                                    @endphp

                                    @if (now()->between($requestDateFrom, $requestDateTo))
                                        <div class="event start-1 end-11 bg-color-3" 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>
                                    @endif
                                @endforeach
                            @endif

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

@section('scripts')
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">
        $('#sampleTable').DataTable();
    </script>
    <!-- Google analytics script-->
    <script type="text/javascript">
        if (document.location.hostname == 'pratikborsadiya.in') {
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
    </script>
@endsection