@extends('layouts.app')

@section('head')
    <script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js"
            referrerpolicy="origin"></script>
@endsection

@section('styles')

@endsection

@section('content')

    {{--
        @include('components.alert')
    --}}
    @include('components.notification')

    <main class="min-h-screen p-6">
        <div class="overflow-hidden rounded-lg bg-white shadow-sm">
            <div class="p-2">
                <div class="min-h-screen p-4">
                    {{--HEADER--}}
                    <div class="mb-6 flex items-center justify-between">
                        <h1 class="text-heading font-heading text-foreground">Takvim</h1>
                        <div x-show="selected" class="hidden items-center rounded-md bg-gray-100 p-2 text-sm font-bold text-gray-600"></div>
                        <div class="flex items-center gap-4">
                            <span class="isolate inline-flex rounded-md shadow-xs">
                              <button type="button"
                                      class="relative inline-flex items-center rounded-l-md bg-white px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">
                                <span class="sr-only">Previous</span>
                                <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                                  <path fill-rule="evenodd"
                                        d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
                                        clip-rule="evenodd"/>
                                </svg>
                              </button>
                              <button type="button"
                                      class="relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">{{ \Carbon\Carbon::now()->locale('tr')->translatedFormat('F') }}</button>
                              <button type="button"
                                      class="relative -ml-px inline-flex items-center rounded-r-md bg-white px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">
                                <span class="sr-only">Next</span>
                                <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                                  <path fill-rule="evenodd"
                                        d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                                        clip-rule="evenodd"/>
                                </svg>
                              </button>
                            </span>
                        </div>
                    </div>
                    {{--CALENDAR--}}
                    <div class="overflow-x-auto rounded-lg border border-border bg-card">
                        <table class="w-full min-w-[1200px] border-collapse table-fixed">
                            <thead>
                            @php
                                $datesAndDays = [];
                                for ($i = -5; $i <= 30; $i++) {
                                    $day = date('d', strtotime("+$i days"));
                                    $dayShortName = date('D', strtotime("+$i days"));
                                    $date = date('Y-m-d', strtotime("+$i days"));
                                    $datesAndDays[] = ['day' => $day, 'dayShortName' => $dayShortName, 'date' => $date];
                                }
                            @endphp
                            <tr class="border-b border-border bg-secondary">
                                <th class="sticky left-0 z-10 w-48 bg-secondary px-3 text-left text-sm font-semibold text-foreground"></th>
                                @foreach ($datesAndDays as $entry)
                                    <th class="text-left text-stone-500 hover:bg-stone-50 transition-all pl-1 text-xs
                                    {{ $entry['dayShortName'] == 'Sun' || $entry['dayShortName'] == 'Sat' ? 'bg-stone-100 font-semibold' : 'font-normal' }}
                                    ">{{ $entry['day'] }} {{ $entry['dayShortName'] }}</th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($rooms as  $room)
                                <tr class="divide-y divide-gray-100 hover:bg-stone-50 transition-all">
                                    <td class="sticky left-0 z-10 bg-stone-100 px-3">
                                        <div class="flex items-center">
                                            <p class="font-medium text-sm text-stone-600">{{ $room->name }}</p>
                                        </div>
                                    </td>
                                    @foreach ($datesAndDays as $entry)
                                        <td id="selectable" class="border-r border-gray-100 cursor-pointer h-10
                                            {{ $entry['dayShortName'] == 'Sun' || $entry['dayShortName'] == 'Sat' ? 'bg-stone-50' : '' }}"
                                            x-data="{ selected: false, isMouseDown: false, startCell: null }"
                                            x-on:mousedown="isMouseDown = true; startCell = $el; selected = !selected"
                                            x-on:mouseover="if (isMouseDown) { selected = true }"
                                            x-on:mouseup="isMouseDown = false"
                                            :class="{ 'bg-stone-300': selected }">                                            @foreach($reservations as $reservation)
                                                @if($reservation->room_id == $room->id &&$reservation->check_in == $entry['date'] && $reservation->status == 'checked-in')
                                                    <div
                                                        class=" p-1.5 h-10 border border-emerald-200 bg-emerald-100 hover:bg-emerald-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">{{ $reservation->name }}</div>
                                                @elseif($reservation->room_id == $room->id &&$reservation->check_in == $entry['date'] && $reservation->status == 'booked')
                                                    <div
                                                        class=" p-1.5 h-10 border border-sky-200 bg-sky-100 hover:bg-sky-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">{{ $reservation->name }}</div>
                                                @elseif($reservation->room_id == $room->id &&$reservation->check_in == $entry['date'] && $reservation->status == 'checked-out')
                                                    <div
                                                        class=" p-1.5 h-10 border border-orange-200 bg-orange-100 hover:bg-orange-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">{{ $reservation->name }}</div>
                                                @else
                                                    <div></div>
                                                @endif
                                            @endforeach
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{--INFO--}}
                    <div class="mt-4 flex items-center text-xs font-normal text-stone-500 gap-4">
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-emerald-100"></div>
                            <span class="">Check-In</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-stone-100"></div>
                            <span class="">Blokaj</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-orange-100"></div>
                            <span class="">Check-Out</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-sky-100"></div>
                            <span class="">Rezervasyon</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('scripts')
    <script>
    </script>
    <style>
        .selected {
            background-color: #d6d3d1;
        }
    </style>
@endsection