@extends('crm.layouts.app')

@section('title', 'Calendar')

@section('content')
<div class="flex h-[calc(100vh-8rem)] flex-col bg-white">
    <!-- Header -->
    <header class="flex flex-none items-center justify-between border-b border-gray-200 px-6 py-4">
        <div>
            <h1 class="text-base font-semibold text-gray-900">
                <time datetime="{{ now()->format('Y-m-d') }}" class="sm:hidden">{{ now()->format('M d, Y') }}</time>
                <time datetime="{{ now()->format('Y-m-d') }}" class="hidden sm:inline">{{ now()->format('F d, Y') }}</time>
            </h1>
            <p class="mt-1 text-sm text-gray-500">{{ now()->format('l') }}</p>
        </div>
        <div class="flex items-center">
            <!-- Navigation buttons -->
            <div class="relative flex items-center rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 md:items-stretch">
                <button type="button" class="flex h-9 w-12 items-center justify-center rounded-l-md pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
                    <span class="sr-only">Previous day</span>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                        <path 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" fill-rule="evenodd" />
                    </svg>
                </button>
                <button type="button" class="hidden px-3.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 focus:relative md:block">Today</button>
                <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
                <button type="button" class="flex h-9 w-12 items-center justify-center rounded-r-md pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
                    <span class="sr-only">Next day</span>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                        <path 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" fill-rule="evenodd" />
                    </svg>
                </button>
            </div>

            <!-- View Dropdown & Add Event Button -->
            <div class="hidden md:ml-4 md:flex md:items-center">
                <div x-data="{ open: false }" @click.away="open = false" class="relative">
                    <button @click="open = !open" type="button" class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Day view
                        <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 h-5 w-5 text-gray-400">
                            <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </button>

                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="transform opacity-0 scale-95"
                         x-transition:enter-end="transform opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-75"
                         x-transition:leave-start="transform opacity-100 scale-100"
                         x-transition:leave-end="transform opacity-0 scale-95"
                         class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                         style="display: none;">
                        <div class="py-1">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Day view</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Week view</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Month view</a>
                        </div>
                    </div>
                </div>

                <div class="ml-6 h-6 w-px bg-gray-300"></div>
                <a href="{{ route('crm.appointments.create') }}" class="ml-6 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Add event</a>
            </div>

            <!-- Mobile menu -->
            <div class="ml-6 md:hidden">
                <div x-data="{ open: false }" @click.away="open = false" class="relative">
                    <button @click="open = !open" class="relative flex items-center rounded-full text-gray-400 hover:text-gray-500">
                        <span class="absolute -inset-2"></span>
                        <span class="sr-only">Open menu</span>
                        <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                            <path d="M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" />
                        </svg>
                    </button>

                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="transform opacity-0 scale-95"
                         x-transition:enter-end="transform opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-75"
                         x-transition:leave-start="transform opacity-100 scale-100"
                         x-transition:leave-end="transform opacity-0 scale-95"
                         class="absolute right-0 z-10 mt-2 w-36 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                         style="display: none;">
                        <div class="py-1">
                            <a href="{{ route('crm.appointments.create') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Create event</a>
                        </div>
                        <div class="py-1">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Day view</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Week view</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Month view</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Calendar Body -->
    <div class="isolate flex flex-auto overflow-hidden bg-white">
        <div class="flex flex-auto flex-col overflow-auto">
            <!-- Time grid -->
            <div class="flex w-full flex-auto">
                <div class="w-14 flex-none bg-white ring-1 ring-gray-100"></div>
                <div class="grid flex-auto grid-cols-1 grid-rows-1">
                    <!-- Horizontal lines -->
                    <div style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))" class="col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100">
                        <div class="row-end-1 h-7"></div>
                        @for($hour = 0; $hour < 24; $hour++)
                            <div></div>
                            <div>
                                <div class="-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400">
                                    {{ $hour == 0 ? '12AM' : ($hour < 12 ? $hour . 'AM' : ($hour == 12 ? '12PM' : ($hour - 12) . 'PM')) }}
                                </div>
                            </div>
                        @endfor
                    </div>

                    <!-- Events -->
                    <ol style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto" class="col-start-1 col-end-2 row-start-1 grid grid-cols-1">
                        @foreach($events as $event)
                            @php
                                $start = \Carbon\Carbon::parse($event['start']);
                                $end = \Carbon\Carbon::parse($event['end'] ?? $event['start'])->addHour();
                                $startMinutes = ($start->hour * 60) + $start->minute;
                                // Carbon 3 (Laravel 12) returns a SIGNED diff, so
                                // $end->diffInMinutes($start) is negative here —
                                // abs() keeps the row span positive, otherwise the
                                // browser drops the invalid `span -12` and every
                                // event auto-stacks at the top of the day.
                                $duration = abs($end->diffInMinutes($start));
                                $gridRowStart = 2 + (int) floor($startMinutes / 5);
                                $gridRowSpan = max(1, (int) ceil($duration / 5));
                                $colors = ['blue', 'pink', 'indigo', 'green', 'purple', 'yellow'];
                                $color = $colors[$loop->index % count($colors)];
                            @endphp
                            <li style="grid-row: {{ $gridRowStart }} / span {{ $gridRowSpan }}" class="relative mt-px flex">
                                <a href="{{ $event['url'] ?? '#' }}" class="group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-{{ $color }}-50 p-2 text-xs leading-5 hover:bg-{{ $color }}-100">
                                    <p class="order-1 font-semibold text-{{ $color }}-700">{{ $event['title'] }}</p>
                                    @if(isset($event['extendedProps']['client_name']))
                                    <p class="order-1 text-{{ $color }}-500 group-hover:text-{{ $color }}-700">{{ $event['extendedProps']['client_name'] }}</p>
                                    @endif
                                    <p class="text-{{ $color }}-500 group-hover:text-{{ $color }}-700">
                                        <time datetime="{{ $start->toIso8601String() }}">{{ $start->format('g:i A') }}</time>
                                    </p>
                                </a>
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>

        <!-- Mini Calendar Sidebar -->
        <div class="hidden w-1/2 max-w-md flex-none border-l border-gray-100 px-8 py-10 md:block">
            <div class="flex items-center text-center text-gray-900">
                <button type="button" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                    <span class="sr-only">Previous month</span>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                        <path 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" fill-rule="evenodd" />
                    </svg>
                </button>
                <div class="flex-auto text-sm font-semibold">{{ now()->format('F Y') }}</div>
                <button type="button" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                    <span class="sr-only">Next month</span>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                        <path 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" fill-rule="evenodd" />
                    </svg>
                </button>
            </div>

            <!-- Day headers -->
            <div class="mt-6 grid grid-cols-7 text-center text-xs leading-6 text-gray-500">
                <div>S</div>
                <div>M</div>
                <div>T</div>
                <div>W</div>
                <div>T</div>
                <div>F</div>
                <div>S</div>
            </div>

            <!-- Calendar grid -->
            <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200">
                @php
                    $startOfMonth = now()->startOfMonth();
                    $endOfMonth = now()->endOfMonth();
                    $startDate = $startOfMonth->copy()->startOfWeek();
                    $endDate = $endOfMonth->copy()->endOfWeek();
                    $today = now();
                    $calendarDates = [];
                    for($date = $startDate->copy(); $date->lte($endDate); $date->addDay()) {
                        $calendarDates[] = $date->copy();
                    }
                    $totalDays = count($calendarDates);
                @endphp

                @foreach($calendarDates as $index => $date)
                    <button type="button" class="py-1.5 hover:bg-gray-100 focus:z-10 {{ $date->month == now()->month ? 'bg-white text-gray-900' : 'bg-gray-50 text-gray-400' }} {{ $date->isToday() ? 'font-semibold text-indigo-600' : '' }} {{ $index == 0 ? 'rounded-tl-lg' : '' }} {{ $index == 6 ? 'rounded-tr-lg' : '' }} {{ $index == $totalDays - 7 ? 'rounded-bl-lg' : '' }} {{ $index == $totalDays - 1 ? 'rounded-br-lg' : '' }}">
                        <time datetime="{{ $date->toDateString() }}" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full {{ $date->isToday() ? 'bg-indigo-600 font-semibold text-white' : '' }}">
                            {{ $date->day }}
                        </time>
                    </button>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection