@php
    $tz = auth()->user()->timezone;
    $now = now($tz);

    $hourHeight = 64;
    $nowTop = ($now->hour * $hourHeight) + (($now->minute / 60) * $hourHeight);
@endphp

<div class="flex flex-col h-full">

    {{-- HEADER + ALLDAY --}}
    <div class="sticky top-0 z-40 bg-background">

        {{-- HEADER --}}
        <div class="grid border-b border-border"
             style="grid-template-columns: 60px repeat(7, 1fr);">

            <div></div>

            @foreach($this->calendarDays as $day)
                <div class="h-12 flex flex-col items-center justify-center border-r border-border last:border-r-0">
                    <div class="text-[11px] text-text-muted uppercase">
                        {{ $day['date']->translatedFormat('D') }}
                    </div>
                    <div class="text-sm font-semibold">
                        {{ $day['date']->format('d') }}
                    </div>
                </div>
            @endforeach

        </div>

        {{-- 🔥 ALL DAY ROW --}}
        <div
            data-allday-row
            data-week-start="{{ $this->date->copy()->startOfWeek()->format('Y-m-d') }}"
            class="grid border-b border-border"
            style="
                grid-template-columns: 60px repeat(7, 1fr);
                min-height: {{ max(($this->allDayEvents->max('row') ?? 0) + 1, 1) * 28 }}px;
            "
        >


            {{-- TIME COLUMN --}}
            <div></div>

            <div id="allday-drop-line" class="hidden"></div>
            {{-- EVENTS CONTAINER --}}
            <div class="col-span-7 relative overflow-hidden">

                @foreach($this->allDayEvents as $event)

                    <div
                        wire:key="allday-{{ $event['id'] }}"
                        class="calendar-allday-event absolute z-10 text-[11px] px-2 py-0.5 rounded-lg truncate cursor-move select-none"
                        data-id="{{ $event['id'] }}"
                        data-span="{{ $event['span'] }}"
                        data-col="{{ $event['col'] }}"
                        data-start="{{ $event['start']->format('Y-m-d') }}"
                        style="
                            top: {{ $event['row'] * 28 }}px;
                            left: calc({{ $event['col'] }} * (100% / 7));
                            width: calc({{ $event['span'] }} * (100% / 7));
                            max-width: calc(100% - ({{ $event['col'] }} * (100% / 7)));
                            background-color: {{ $this->colorToRgba($event['color'], 0.2) }};
                            color: {{ $this->colorToRgba($event['color']) }};
                        "
                    >
                        {{ $event['title'] }}
                    </div>

                @endforeach

            </div>

        </div>
    </div>

    {{-- MAIN --}}
    <div class="relative h-[calc(100vh-200px)] overflow-y-auto">

        <div class="grid bg-surface rounded-2xl border border-border"
             style="grid-template-columns: 60px repeat(7, 1fr);">

            {{-- TIME COLUMN --}}
            <div class="bg-background border-r border-border relative">

                @for($h = 0; $h < 24; $h++)
                    <div class="h-16 flex items-start justify-end pr-2 text-[11px] text-text-muted">
                        {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00
                    </div>
                @endfor

                {{-- NOW LABEL --}}
                <div id="now-label"
                     class="absolute bg-primary text-white text-[10px] px-2 py-0.5 rounded-full shadow"
                     style="top: {{ $nowTop - 10 }}px; left: 6px;">
                    {{ $now->format('H:i') }}
                </div>

            </div>

            {{-- DAYS --}}
            @foreach($this->calendarDays as $day)

                <div
                    data-day-column
                    data-date="{{ $day['key'] }}"
                    class="relative border-r border-border last:border-r-0"
                >

                    <div class="relative week-grid">

                        @for($h = 0; $h < 24; $h++)
                            <div class="h-16 border-b border-border/40"></div>
                        @endfor

                        <div id="time-preview-line"
                             class="absolute left-0 right-0 h-[2px] bg-primary z-50 pointer-events-none hidden">
                        </div>

                        {{-- EVENTS --}}
                        @foreach($day['timed'] as $event)

                            <div
                                wire:key="event-{{ $event['id'] }}"
                                data-id="{{ $event['id'] }}"
                                class="calendar-event absolute bg-primary text-white text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move select-none z-10"
                                style="
                                    top: {{ $event['top'] }}px;
                                    height: {{ max($event['height'] - 2, 26) }}px;
                                    left: {{ 6 + ($event['index'] * 20) }}px;
                                    width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);
                                    background-color: {{ $this->colorToRgba($event['model']->color) }};
                                ">

                                <div class="resize-top absolute top-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>

                                <div class="pointer-events-none pt-2">
                                    <div class="truncate font-medium">
                                        {{ $event['title'] }}
                                    </div>

                                    <div class="event-time text-[10px] opacity-80">
                                        {{ $event['start']->format('H:i') }}
                                        @if($event['end'])
                                            – {{ $event['end']->format('H:i') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="resize-bottom absolute bottom-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>

                            </div>

                        @endforeach

                    </div>
                </div>

            @endforeach

        </div>

        {{-- NOW LINE --}}
        <div id="now-line"
             class="absolute left-0 right-0 z-0 pointer-events-none"
             style="top: {{ $nowTop }}px;">

            <div class="flex items-center">

                <div class="relative w-[60px]">
                    <div class="absolute right-0 translate-x-1/2 -translate-y-1/2
                                w-2.5 h-2.5 bg-primary rounded-full shadow">
                    </div>
                </div>

                <div class="flex-1 h-0.5 bg-primary"></div>

            </div>
        </div>

    </div>

</div>


{{--<div class="flex flex-col h-full">--}}

{{--    --}}{{-- HEADER + ALLDAY --}}
{{--    <div class="sticky top-0 z-40 bg-background">--}}

{{--        --}}{{-- HEADER --}}
{{--        <div class="grid border-b border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            <div></div>--}}

{{--            @foreach($this->calendarDays as $day)--}}
{{--                <div class="h-12 flex flex-col items-center justify-center border-r border-border last:border-r-0">--}}
{{--                    <div class="text-[11px] text-text-muted uppercase">--}}
{{--                        {{ $day['date']->translatedFormat('D') }}--}}
{{--                    </div>--}}
{{--                    <div class="text-sm font-semibold">--}}
{{--                        {{ $day['date']->format('d') }}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- 🔥 ALL DAY ROW --}}
{{--        <div--}}
{{--            data-allday-row--}}
{{--            data-week-start="{{ $this->date->copy()->startOfWeek()->format('Y-m-d') }}"--}}
{{--            class="grid border-b border-border"--}}
{{--            style="--}}
{{--                grid-template-columns: 60px repeat(7, 1fr);--}}
{{--                min-height: {{ max(($this->allDayEvents->max('row') ?? 0) + 1, 1) * 28 }}px;--}}
{{--            "--}}
{{--        >--}}

{{--            <div></div>--}}

{{--            <div class="col-span-7 grid relative overflow-hidden"--}}
{{--                 style="grid-template-columns: repeat(7, 1fr);">--}}

{{--                @foreach($this->allDayEvents as $event)--}}

{{--                    <div--}}
{{--                        class="calendar-allday-event pointer-events-auto z-10 absolute text-[11px] px-2 py-0.5 rounded-lg truncate cursor-move"--}}
{{--                        data-id="{{ $event['id'] }}"--}}
{{--                        data-span="{{ $event['span'] }}"--}}
{{--                        data-col="{{ $event['col'] }}"--}}
{{--                        data-start="{{ $event['start']->format('Y-m-d') }}" --}}{{-- 🔥 WICHTIG --}}
{{--                        style="--}}
{{--                            top: {{ $event['row'] * 28 }}px;--}}
{{--                            left: calc({{ $event['col'] }} * (100% / 7));--}}
{{--                            width: calc({{ $event['span'] }} * (100% / 7));--}}
{{--                            max-width: calc(100% - ({{ $event['col'] }} * (100% / 7)));--}}
{{--                            background-color: {{ $this->colorToRgba($event['color'], 0.2) }};--}}
{{--                            color: {{ $this->colorToRgba($event['color']) }};--}}
{{--                        "--}}
{{--                    >--}}
{{--                        {{ $event['title'] }}--}}
{{--                    </div>--}}

{{--                @endforeach--}}

{{--                --}}{{-- DROP ZONES --}}
{{--                @foreach(range(0,6) as $i)--}}
{{--                    <div--}}
{{--                        data-day-column--}}
{{--                        data-col="{{ $i }}"--}}
{{--                        data-date="{{ $this->date->copy()->startOfWeek()->addDays($i)->format('Y-m-d') }}"--}}
{{--                        class="h-full"--}}
{{--                    ></div>--}}
{{--                @endforeach--}}

{{--            </div>--}}

{{--        </div>--}}
{{--    </div>--}}

{{--    --}}{{-- MAIN --}}
{{--    <div class="relative h-[calc(100vh-200px)] overflow-y-auto">--}}

{{--        <div class="grid bg-surface rounded-2xl border border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            --}}{{-- TIME COLUMN --}}
{{--            <div class="bg-background border-r border-border relative">--}}

{{--                @for($h = 0; $h < 24; $h++)--}}
{{--                    <div class="h-16 flex items-start justify-end pr-2 text-[11px] text-text-muted">--}}
{{--                        {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00--}}
{{--                    </div>--}}
{{--                @endfor--}}

{{--                --}}{{-- NOW LABEL --}}
{{--                <div id="now-label"--}}
{{--                     class="absolute bg-primary text-white text-[10px] px-2 py-0.5 rounded-full shadow"--}}
{{--                     style="top: {{ $nowTop - 10 }}px; left: 6px;">--}}
{{--                    {{ $now->format('H:i') }}--}}
{{--                </div>--}}

{{--            </div>--}}

{{--            --}}{{-- DAYS --}}
{{--            @foreach($this->calendarDays as $day)--}}

{{--                <div--}}
{{--                    data-day-column--}}
{{--                    data-date="{{ $day['key'] }}"--}}
{{--                    class="relative border-r border-border last:border-r-0"--}}
{{--                >--}}

{{--                    <div class="relative week-grid">--}}

{{--                        @for($h = 0; $h < 24; $h++)--}}
{{--                            <div class="h-16 border-b border-border/40"></div>--}}
{{--                        @endfor--}}

{{--                        <div id="time-preview-line"--}}
{{--                             class="absolute left-0 right-0 h-[2px] bg-primary z-50 pointer-events-none hidden">--}}
{{--                        </div>--}}

{{--                        --}}{{-- EVENTS --}}
{{--                        @foreach($day['timed'] as $event)--}}

{{--                            <div--}}
{{--                                wire:key="event-{{ $event['id'] }}"--}}
{{--                                data-id="{{ $event['id'] }}"--}}
{{--                                class="calendar-event absolute bg-primary text-white text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move select-none z-10"--}}
{{--                                style="--}}
{{--                                    top: {{ $event['top'] }}px;--}}
{{--                                    height: {{ max($event['height'] - 2, 26) }}px;--}}
{{--                                    left: {{ 6 + ($event['index'] * 20) }}px;--}}
{{--                                    width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);--}}
{{--                                    background-color: {{ $this->colorToRgba($event['model']->color) }};--}}
{{--                                ">--}}

{{--                                --}}{{-- RESIZE TOP --}}
{{--                                <div class="resize-top absolute top-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                                --}}{{-- CONTENT --}}
{{--                                <div class="pointer-events-none pt-2">--}}
{{--                                    <div class="truncate font-medium">--}}
{{--                                        {{ $event['title'] }}--}}
{{--                                    </div>--}}

{{--                                    <div class="event-time text-[10px] opacity-80">--}}
{{--                                        {{ $event['start']->format('H:i') }}--}}
{{--                                        @if($event['end'])--}}
{{--                                            – {{ $event['end']->format('H:i') }}--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                                --}}{{-- RESIZE BOTTOM --}}
{{--                                <div class="resize-bottom absolute bottom-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                            </div>--}}

{{--                        @endforeach--}}

{{--                    </div>--}}
{{--                </div>--}}

{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- NOW LINE --}}
{{--        <div id="now-line"--}}
{{--             class="absolute left-0 right-0 z-0 pointer-events-none"--}}
{{--             style="top: {{ $nowTop }}px;">--}}

{{--            <div class="flex items-center">--}}

{{--                <div class="relative w-[60px]">--}}
{{--                    <div class="absolute right-0 translate-x-1/2 -translate-y-1/2--}}
{{--                                w-2.5 h-2.5 bg-primary rounded-full shadow">--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="flex-1 h-0.5 bg-primary"></div>--}}

{{--            </div>--}}
{{--        </div>--}}

{{--    </div>--}}

{{--</div>--}}

{{--@php--}}
{{--    $tz = auth()->user()->timezone;--}}
{{--    $now = now($tz);--}}

{{--    $hourHeight = 64;--}}
{{--    $nowTop = ($now->hour * $hourHeight) + (($now->minute / 60) * $hourHeight);--}}
{{--@endphp--}}

{{--<div class="relative">--}}

{{--    --}}{{-- HEADER + ALLDAY --}}
{{--    <div class="sticky top-0 z-40 bg-background">--}}

{{--        --}}{{-- HEADER --}}
{{--        <div class="grid border-b border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            <div></div>--}}

{{--            @foreach($this->calendarDays as $day)--}}
{{--                <div class="h-12 flex flex-col items-center justify-center">--}}
{{--                    <div class="text-[11px] text-text-muted uppercase">--}}
{{--                        {{ $day['date']->translatedFormat('D') }}--}}
{{--                    </div>--}}
{{--                    <div class="text-sm font-semibold">--}}
{{--                        {{ $day['date']->format('d') }}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- 🔥 ALL DAY ROW --}}
{{--        <div--}}
{{--            data-allday-row--}}
{{--            data-week-start="{{ $this->date->copy()->startOfWeek()->format('Y-m-d') }}"--}}
{{--            class="relative border-b border-border #px-[60px]"--}}
{{--            style="min-height: {{ max(($this->allDayEvents->max('row') ?? 0) + 1, 1) * 32 }}px;"--}}
{{--        >--}}

{{--            @php--}}
{{--                $weekStart = $this->date->copy()->startOfWeek();--}}
{{--            @endphp--}}

{{--            @foreach($this->allDayEvents as $event)--}}

{{--                @php--}}
{{--                    $startOffset = $event['start']->diffInDays($weekStart, false);--}}
{{--                    $endOffset   = $event['end']->diffInDays($weekStart, false);--}}

{{--                    $startOffset = max($startOffset, 0);--}}
{{--                    $endOffset   = min($endOffset, 6);--}}

{{--                    $span = ($endOffset - $startOffset) + 1;--}}
{{--                @endphp--}}

{{--                <div--}}
{{--                    class="calendar-allday-event absolute text-xs px-2 py-1 rounded-lg truncate cursor-move shadow-sm"--}}
{{--                    data-id="{{ $event['id'] }}"--}}
{{--                    data-start="{{ $event['start']->format('Y-m-d') }}"--}}

{{--                    style="--}}
{{--                        top: {{ $event['row'] * 32 }}px;--}}

{{--                        left: calc({{ ($startOffset / 7) * 100 }}%);--}}
{{--                        width: calc({{ ($span / 7) * 100 }}%);--}}

{{--                        background-color: {{ $this->colorToRgba($event['color'], 0.2) }};--}}
{{--                        color: {{ $this->colorToRgba($event['color']) }};--}}
{{--                    "--}}
{{--                >--}}
{{--                    {{ $event['title'] }}--}}
{{--                </div>--}}

{{--            @endforeach--}}

{{--        </div>--}}

{{--    </div>--}}

{{--    --}}{{-- 🔥 MAIN GRID --}}
{{--    <div class="relative h-[calc(100vh-200px)] overflow-y-auto">--}}

{{--        <div class="grid bg-surface rounded-2xl border border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            --}}{{-- TIME COLUMN --}}
{{--            <div class="bg-background border-r border-border relative">--}}

{{--                @for($h = 0; $h < 24; $h++)--}}
{{--                    <div class="h-16 flex items-start justify-end pr-2 text-[11px] text-text-muted">--}}
{{--                        {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00--}}
{{--                    </div>--}}
{{--                @endfor--}}

{{--                --}}{{-- NOW LABEL --}}
{{--                <div id="now-label"--}}
{{--                     class="absolute bg-primary text-white text-[10px] px-2 py-0.5 rounded-full shadow"--}}
{{--                     style="top: {{ $nowTop - 10 }}px; left: 6px;">--}}
{{--                    {{ $now->format('H:i') }}--}}
{{--                </div>--}}

{{--            </div>--}}

{{--            --}}{{-- DAYS --}}
{{--            @foreach($this->calendarDays as $day)--}}

{{--                <div--}}
{{--                    data-day-column--}}
{{--                    data-date="{{ $day['key'] }}"--}}
{{--                    class="relative border-r border-border last:border-r-0"--}}
{{--                >--}}

{{--                    --}}{{-- GRID --}}
{{--                    <div class="relative week-grid">--}}

{{--                        @for($h = 0; $h < 24; $h++)--}}
{{--                            <div class="h-16 border-b border-border/40"></div>--}}
{{--                        @endfor--}}

{{--                        --}}{{-- EVENTS --}}
{{--                        @foreach($day['timed'] as $event)--}}

{{--                            <div--}}
{{--                                wire:key="event-{{ $event['id'] }}"--}}
{{--                                data-id="{{ $event['id'] }}"--}}
{{--                                class="calendar-event absolute text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move select-none z-10"--}}
{{--                                style="--}}
{{--                                    top: {{ $event['top'] }}px;--}}
{{--                                    height: {{ max($event['height'] - 2, 26) }}px;--}}
{{--                                    left: {{ 6 + ($event['index'] * 20) }}px;--}}
{{--                                    width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);--}}
{{--                                    background-color: {{ $this->colorToRgba($event['model']->color) }};--}}
{{--                                    color: white;--}}
{{--                                ">--}}

{{--                                <div class="pointer-events-none pt-2">--}}
{{--                                    <div class="truncate font-medium">--}}
{{--                                        {{ $event['title'] }}--}}
{{--                                    </div>--}}

{{--                                    <div class="event-time text-[10px] opacity-80">--}}
{{--                                        {{ $event['start']->format('H:i') }}--}}
{{--                                        @if($event['end'])--}}
{{--                                            – {{ $event['end']->format('H:i') }}--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                            </div>--}}

{{--                        @endforeach--}}

{{--                    </div>--}}
{{--                </div>--}}

{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- NOW LINE --}}
{{--        <div id="now-line"--}}
{{--             class="absolute left-0 right-0 z-0 pointer-events-none"--}}
{{--             style="top: {{ $nowTop }}px;">--}}

{{--            <div class="flex items-center">--}}

{{--                <div class="relative w-[60px]">--}}
{{--                    <div class="absolute right-0 translate-x-1/2 -translate-y-1/2--}}
{{--                                w-2.5 h-2.5 bg-primary rounded-full shadow">--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="flex-1 h-0.5 bg-primary"></div>--}}

{{--            </div>--}}
{{--        </div>--}}

{{--    </div>--}}
{{--</div>--}}

{{--<div class="relative">--}}

{{--    --}}{{-- HEADER + ALLDAY --}}
{{--    <div class="sticky top-0 z-40 bg-background">--}}

{{--        --}}{{-- HEADER --}}
{{--        <div class="grid border-b border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            <div></div>--}}

{{--            @foreach($this->calendarDays as $day)--}}
{{--                <div class="h-12 flex flex-col items-center justify-center">--}}
{{--                    <div class="text-[11px] text-text-muted uppercase">--}}
{{--                        {{ $day['date']->translatedFormat('D') }}--}}
{{--                    </div>--}}
{{--                    <div class="text-sm font-semibold">--}}
{{--                        {{ $day['date']->format('d') }}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- 🔥 ALL DAY ROW --}}
{{--        <div--}}
{{--            data-allday-row--}}
{{--            data-week-start="{{ $this->date->copy()->startOfWeek()->format('Y-m-d') }}"--}}
{{--            class="relative min-h-8 border-b border-border"--}}
{{--        >--}}

{{--            @foreach($this->allDayEvents as $event)--}}

{{--                <div--}}
{{--                    class="calendar-allday-event absolute text-[11px] px-2 py-0.5 rounded-lg truncate cursor-move"--}}
{{--                    data-id="{{ $event['id'] }}"--}}
{{--                    data-start="{{ $event['start']->format('Y-m-d') }}"--}}
{{--                    style="--}}
{{--                        left: calc({{ $event['left'] }}% + 4px);--}}
{{--                        width: calc({{ $event['width'] }}% - 8px);--}}
{{--                        background-color: {{ $this->colorToRgba($event['color'], 0.2) }};--}}
{{--                        color: {{ $this->colorToRgba($event['color']) }};--}}
{{--                    "--}}
{{--                >--}}
{{--                    {{ $event['title'] }}--}}
{{--                </div>--}}

{{--            @endforeach--}}

{{--        </div>--}}

{{--    </div>--}}

{{--    <div class="relative h-[calc(100vh-200px)] overflow-y-auto mt-10">--}}

{{--        <div class="grid bg-surface rounded-2xl border border-border"--}}
{{--             style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--            --}}{{-- TIME COLUMN --}}
{{--            <div class="bg-background border-r border-border relative">--}}

{{--                <div class="h-0"></div>--}}

{{--                @for($h = 0; $h < 24; $h++)--}}
{{--                    <div class="h-16 flex items-start justify-end pr-2 text-[11px] text-text-muted">--}}
{{--                        {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00--}}
{{--                    </div>--}}
{{--                @endfor--}}

{{--                --}}{{-- NOW LABEL --}}
{{--                <div id="now-label"--}}
{{--                     class="absolute bg-primary text-white text-[10px] px-2 py-0.5 rounded-full shadow"--}}
{{--                     style="top: {{ $nowTop + 48 - 10 }}px; left: 6px;">--}}
{{--                    {{ $now->format('H:i') }}--}}
{{--                </div>--}}

{{--            </div>--}}

{{--            --}}{{-- DAYS --}}
{{--            @foreach($this->calendarDays as $day)--}}

{{--                <div--}}
{{--                    data-day-column--}}
{{--                    data-date="{{ $day['key'] }}"--}}
{{--                    class="relative border-r border-border last:border-r-0"--}}
{{--                >--}}

{{--                    --}}{{-- HEADER --}}
{{--                    <div--}}
{{--                        class="h-12 border-b border-border flex flex-col items-center justify-center bg-background sticky top-0 z-20">--}}
{{--                        <div class="text-[11px] text-text-muted uppercase">--}}
{{--                            {{ $day['date']->translatedFormat('D') }}--}}
{{--                        </div>--}}

{{--                        <div class="text-sm font-semibold">--}}
{{--                            {{ $day['date']->format('d') }}--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    --}}{{-- ALL DAY --}}
{{--                    --}}{{--                @if($day['allDay']->isNotEmpty())--}}
{{--                    --}}{{--                    <div class="absolute top-12 left-0 right-0 h-6 flex items-center px-1 gap-1 z-10 pointer-events-none">--}}
{{--                    --}}{{--                        @foreach($day['allDay'] as $event)--}}

{{--                    --}}{{--                            <div--}}
{{--                    --}}{{--                                class="calendar-allday-event bg-primary/20 text-primary text-[11px] px-2 py-0.5 rounded-lg truncate pointer-events-auto cursor-move"--}}
{{--                    --}}{{--                                data-id="{{ $event->id }}"--}}
{{--                    --}}{{--                            >--}}
{{--                    --}}{{--                                {{ $event->title }}--}}
{{--                    --}}{{--                            </div>--}}

{{--                    --}}{{--                        @endforeach--}}
{{--                    --}}{{--                    </div>--}}
{{--                    --}}{{--                @endif--}}
{{--                    --}}{{-- GRID --}}
{{--                    <div class="relative week-grid">--}}
{{--                        @for($h = 0; $h < 24; $h++)--}}
{{--                            <div class="h-16 border-b border-border/40"></div>--}}
{{--                        @endfor--}}

{{--                        <div id="time-preview-line"--}}
{{--                             class="absolute left-0 right-0 h-[2px] bg-primary z-50 pointer-events-none hidden">--}}
{{--                        </div>--}}
{{--                        --}}{{-- EVENTS --}}
{{--                        @foreach($day['timed'] as $event)--}}

{{--                            <div--}}
{{--                                wire:key="event-{{ $event['id'] }}"--}}
{{--                                data-id="{{ $event['id'] }}"--}}
{{--                                class="calendar-event absolute bg-primary text-white text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move select-none z-10"--}}
{{--                                style="--}}
{{--                        top: {{ $event['top'] }}px;--}}
{{--                        height: {{ max($event['height'] - 2, 26) }}px;--}}
{{--                        left: {{ 6 + ($event['index'] * 20) }}px;--}}
{{--                        width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);--}}
{{--                        background-color: {{ $this->colorToRgba($event['model']->color) }};">--}}

{{--                                --}}{{-- RESIZE TOP --}}
{{--                                <div class="resize-top absolute top-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                                --}}{{-- CONTENT --}}
{{--                                <div class="pointer-events-none pt-2">--}}
{{--                                    <div class="truncate font-medium">--}}
{{--                                        {{ $event['title'] }}--}}
{{--                                    </div>--}}

{{--                                    <div class="event-time text-[10px] opacity-80">--}}
{{--                                        {{ $event['start']->format('H:i') }}--}}
{{--                                        @if($event['end'])--}}
{{--                                            – {{ $event['end']->format('H:i') }}--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                                --}}{{-- RESIZE BOTTOM --}}
{{--                                <div--}}
{{--                                    class="resize-bottom absolute bottom-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                            </div>--}}

{{--                        @endforeach--}}

{{--                    </div>--}}
{{--                </div>--}}

{{--            @endforeach--}}

{{--        </div>--}}

{{--        --}}{{-- NOW LINE --}}
{{--        <div id="now-line"--}}
{{--             class="absolute left-0 right-0 z-0 pointer-events-none"--}}
{{--             style="top: {{ $nowTop + 48 }}px;">--}}

{{--            <div class="flex items-center">--}}

{{--                <div class="relative w-[60px]">--}}
{{--                    <div class="absolute right-0 translate-x-1/2 -translate-y-1/2--}}
{{--                            w-2.5 h-2.5 bg-primary rounded-full shadow">--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="flex-1 h-0.5 bg-primary"></div>--}}

{{--            </div>--}}
{{--        </div>--}}

{{--    </div>--}}
{{--</div>--}}


{{--        @foreach($this->calendarDays as $day)--}}

{{--            <div--}}
{{--                x-data="weekDropZone('{{ $day['key'] }}')"--}}
{{--                data-day-column--}}
{{--                data-date="{{ $day['key'] }}"--}}

{{--                @dragenter.prevent="onEnter"--}}
{{--                @dragleave="onLeave"--}}
{{--                @dragover.prevent="onOver"--}}
{{--                @drop.prevent="onDrop"--}}

{{--                :class="isHovering ? 'bg-primary/5 border-primary' : ''"--}}

{{--                class="relative border-r border-border last:border-r-0 transition"--}}
{{--            >--}}

{{--                --}}{{-- HEADER --}}
{{--                <div class="h-12 border-b border-border flex flex-col items-center justify-center bg-background sticky top-0 z-20">--}}

{{--                    <div class="text-[11px] text-text-muted uppercase">--}}
{{--                        {{ $day['date']->translatedFormat('D') }}--}}
{{--                    </div>--}}

{{--                    <div class="text-sm font-semibold">--}}
{{--                        {{ $day['date']->format('d') }}--}}
{{--                    </div>--}}

{{--                </div>--}}

{{--                --}}{{-- ALL DAY EVENTS --}}
{{--                @if($day['allDay']->isNotEmpty())--}}
{{--                    <div class="absolute top-12 left-0 right-0 h-6 flex items-center px-1 gap-1 z-10 pointer-events-none" data-all-day>--}}
{{--                        @foreach($day['allDay'] as $event)--}}
{{--                            <div class="bg-primary/20 text-primary text-[11px] px-2 py-0.5 rounded-lg truncate pointer-events-auto">--}}
{{--                                {{ $event->title }}--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                @endif--}}

{{--                --}}{{-- GRID + EVENTS --}}
{{--                <div class="relative week-grid" data-week-grid>--}}
{{--                    --}}{{-- GRID --}}
{{--                    @for($h = 0; $h < 24; $h++)--}}
{{--                        <div class="h-16 border-b border-border/40"></div>--}}
{{--                    @endfor--}}

{{--                    --}}{{-- EVENTS --}}
{{--                    @foreach($day['timed'] as $event)--}}

{{--                        <div--}}
{{--                            wire:key="event-{{ $event['id'] }}"--}}
{{--                            wire:ignore--}}

{{--                            class="calendar-event absolute bg-primary text-white text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move select-none"--}}

{{--                            data-id="{{ $event['id'] }}"--}}

{{--                            style="--}}
{{--            top: {{ $event['top'] }}px;--}}
{{--            height: {{ max($event['height'] - 2, 26) }}px;--}}
{{--            left: {{ 6 + ($event['index'] * 20) }}px;--}}
{{--            width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);--}}
{{--        "--}}
{{--                        >--}}

{{--                            --}}{{-- RESIZE TOP --}}
{{--                            <div class="resize-top absolute top-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                            <div class="pointer-events-none pt-2">--}}
{{--                                <div class="truncate font-medium">--}}
{{--                                    {{ $event['title'] }}--}}
{{--                                </div>--}}

{{--                                <div class="text-[10px] opacity-80">--}}
{{--                                    {{ $event['start']->format('H:i') }}--}}
{{--                                    @if($event['end'])--}}
{{--                                        – {{ $event['end']->format('H:i') }}--}}
{{--                                    @endif--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            --}}{{-- RESIZE BOTTOM --}}
{{--                            <div class="resize-bottom absolute bottom-0 left-0 right-0 h-3 cursor-ns-resize z-20"></div>--}}

{{--                        </div>--}}

{{--                    @endforeach--}}


{{--                    <div class="absolute left-0 right-0 h-0.75 bg-primary"--}}
{{--                         :class="$store.drag ? 'bg-primary/10' : ''"--}}
{{--                         :style="`top: ${$store.drag.dropTime?.y}px`"></div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        @endforeach--}}

{{--@php--}}
{{--    $tz = auth()->user()->timezone;--}}
{{--    $now = now($tz);--}}

{{--    $hourHeight = 64;--}}
{{--    $nowTop = ($now->hour * $hourHeight) + (($now->minute / 60) * $hourHeight);--}}
{{--@endphp--}}

{{--<div class="relative h-[calc(100vh-200px)] overflow-y-auto">--}}

{{--    <div class="grid bg-surface rounded-2xl border border-border"--}}
{{--         style="grid-template-columns: 60px repeat(7, 1fr);">--}}

{{--        --}}{{-- TIME COLUMN --}}
{{--        <div class="bg-background border-r border-border relative">--}}

{{--            <div class="h-12 border-b border-border"></div>--}}

{{--            @for($h = 0; $h < 24; $h++)--}}
{{--                <div class="h-16 flex items-start justify-end pr-2 text-[11px] text-text-muted">--}}
{{--                    {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00--}}
{{--                </div>--}}
{{--            @endfor--}}

{{--            --}}{{-- NOW LABEL --}}
{{--            <div id="now-label"--}}
{{--                 class="absolute bg-primary text-white text-[10px] px-2 py-0.5 rounded-full shadow"--}}
{{--                 style="top: {{ $nowTop + 48 - 10 }}px; left: 6px;">--}}
{{--                {{ $now->format('H:i') }}--}}
{{--            </div>--}}

{{--        </div>--}}

{{--        --}}{{-- DAYS --}}
{{--        @foreach($this->calendarDays as $day)--}}

{{--            <div--}}
{{--                x-data="weekDropZone('{{ $day['key'] }}')"--}}
{{--                data-day-column--}}
{{--                data-date="{{ $day['key'] }}"--}}

{{--                @dragenter.prevent="onEnter"--}}
{{--                @dragleave="onLeave"--}}
{{--                @dragover.prevent="onOver"--}}
{{--                @drop.prevent="onDrop"--}}

{{--                :class="isHovering ? 'bg-primary/5 border-primary' : ''"--}}

{{--                class="relative border-r border-border last:border-r-0 transition"--}}
{{--            >--}}

{{--                --}}{{-- HEADER --}}
{{--                <div class="h-12 border-b border-border flex flex-col items-center justify-center bg-background sticky top-0 z-20">--}}

{{--                    <div class="text-[11px] text-text-muted uppercase">--}}
{{--                        {{ $day['date']->translatedFormat('D') }}--}}
{{--                    </div>--}}

{{--                    <div class="text-sm font-semibold">--}}
{{--                        {{ $day['date']->format('d') }}--}}
{{--                    </div>--}}

{{--                </div>--}}

{{--                --}}{{-- ALL DAY EVENTS --}}
{{--                @if($day['allDay']->isNotEmpty())--}}
{{--                    <div class="absolute top-12 left-0 right-0 h-6 flex items-center px-1 gap-1 z-10 pointer-events-none" data-all-day>--}}
{{--                        @foreach($day['allDay'] as $event)--}}
{{--                            <div class="bg-primary/20 text-primary text-[11px] px-2 py-0.5 rounded-lg truncate pointer-events-auto">--}}
{{--                                {{ $event->title }}--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                @endif--}}

{{--                --}}{{-- GRID + EVENTS --}}
{{--                <div class="relative week-grid" data-week-grid>--}}
{{--                    --}}{{-- GRID --}}
{{--                    @for($h = 0; $h < 24; $h++)--}}
{{--                        <div class="h-16 border-b border-border/40"></div>--}}
{{--                    @endfor--}}

{{--                    --}}{{-- EVENTS --}}
{{--                    @foreach($day['timed'] as $event)--}}

{{--                        <div--}}
{{--                            wire:key="event-{{ $event['id'] }}"--}}
{{--                            wire:ignore--}}

{{--                            x-data="eventItem('{{ $event['id'] }}')"--}}
{{--                            data-id="{{ $event['id'] }}"--}}

{{--                            @mousedown.self="startMove"--}}

{{--                            class="absolute bg-primary text-white text-[11px] rounded-xl px-2 py-1 shadow-lg border border-white/50 overflow-hidden cursor-move"--}}

{{--                            style="--}}
{{--        top: {{ $event['top'] }}px;--}}
{{--        height: {{ max($event['height'] - 2, 26) }}px;--}}
{{--        left: {{ 6 + ($event['index'] * 20) }}px;--}}
{{--        width: calc(100% - {{ 12 + ($event['index'] * 20) }}px);--}}
{{--    "--}}
{{--                        >--}}
{{--                            --}}{{-- 🔥 RESIZE TOP --}}
{{--                            <div--}}
{{--                                class="resize-handle absolute top-0 left-0 right-0 h-2 cursor-ns-resize z-20"--}}
{{--                                @mousedown.stop="startResizeTop"--}}
{{--                            ></div>--}}

{{--                            --}}{{-- CONTENT --}}
{{--                            <div class="pointer-events-none">--}}
{{--                                <div class="truncate font-medium">--}}
{{--                                    {{ $event['title'] }}--}}
{{--                                </div>--}}

{{--                                <div class="text-[10px] opacity-80">--}}
{{--                                    {{ $event['start']->format('H:i') }}--}}
{{--                                    @if($event['end'])--}}
{{--                                        – {{ $event['end']->format('H:i') }}--}}
{{--                                    @endif--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            --}}{{-- 🔥 RESIZE BOTTOM --}}
{{--                            <div--}}
{{--                                class="resize-handle absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize z-20"--}}
{{--                                @mousedown.stop="startResizeBottom"--}}
{{--                            ></div>--}}

{{--                        </div>--}}

{{--                    @endforeach--}}

{{--                    <div class="absolute left-0 right-0 h-0.75 bg-primary"--}}
{{--                         :class="$store.drag ? 'bg-primary/10' : ''"--}}
{{--                         :style="`top: ${$store.drag.dropTime?.y}px`"></div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        @endforeach--}}
{{--    </div>--}}

{{--    --}}{{-- NOW LINE --}}
{{--    <div id="now-line"--}}
{{--         class="absolute left-0 right-0 z-0 pointer-events-none"--}}
{{--         style="top: {{ $nowTop + 48 }}px;">--}}

{{--        <div class="flex items-center">--}}

{{--            <div class="relative w-[60px]">--}}
{{--                <div class="absolute right-0 translate-x-1/2 -translate-y-1/2--}}
{{--                            w-2.5 h-2.5 bg-primary rounded-full shadow">--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div class="flex-1 h-0.5 bg-primary"></div>--}}

{{--        </div>--}}
{{--    </div>--}}

{{--</div>--}}

{{--<script>--}}
{{--    document.addEventListener('alpine:init', () => {--}}

{{--        Alpine.store('drag', {--}}
{{--            id: null,--}}
{{--            start: null,--}}
{{--            end: null,--}}
{{--            dropTime: null,--}}
{{--            range: []--}}
{{--        });--}}

{{--        Alpine.data('weekDropZone', (date) => ({--}}

{{--            isHovering: false,--}}

{{--            isValid() {--}}
{{--                let drag = Alpine.store('drag');--}}
{{--                return drag && drag.id;--}}
{{--            },--}}

{{--            onEnter() {--}}
{{--                if (!this.isValid()) return;--}}
{{--                this.isHovering = true;--}}
{{--            },--}}

{{--            onLeave() {--}}
{{--                this.isHovering = false;--}}
{{--            },--}}

{{--            onOver(e) {--}}
{{--                if (!this.isValid()) return;--}}

{{--                let result = calculateTime(e, this.$el);--}}
{{--                if (!result) return;--}}

{{--                this.$store.drag.dropTime = result;--}}
{{--            },--}}

{{--            onDrop(e) {--}}
{{--                this.isHovering = false;--}}

{{--                let drag = Alpine.store('drag');--}}
{{--                if (!this.isValid()) return;--}}

{{--                let result = calculateTime(e, this.$el);--}}
{{--                if (!result) return;--}}

{{--                let component = this.$el.closest('[wire\\:id]');--}}
{{--                if (!component) return;--}}

{{--                Livewire.find(component.getAttribute('wire:id'))--}}
{{--                    .call('moveEventToDateTime', drag.id, date, result.time);--}}
{{--            }--}}

{{--        }));--}}
{{--    });--}}

<script>
    function calculateTime(e, el) {

        const grid = el.querySelector('.week-grid');
        if (!grid) return null;

        const rect = grid.getBoundingClientRect();

        let y = e.clientY - rect.top;

        // clamp
        y = Math.max(0, Math.min(rect.height, y));

        const hourHeight = rect.height / 24;

        let totalMinutes = (y / hourHeight) * 60;

        // 🔥 SNAP 15 MIN
        totalMinutes = Math.round(totalMinutes / 15) * 15;

        let hour = Math.floor(totalMinutes / 60);
        let minutes = totalMinutes % 60;

        return {
            hour,
            minutes,
            y: (totalMinutes / 60) * hourHeight, // 🔥 SNAP POSITION
            time: `${pad(hour)}:${pad(minutes)}`
        };
    }

    function pad(n) {
        return String(n).padStart(2, '0');
    }
</script>

{{-- NOW LINE AUTO UPDATE --}}
<script>
    function updateNowLine() {
        const hourHeight = 64;
        const headerOffset = 48;

        const now = new Date();

        const top =
            (now.getHours() * hourHeight) +
            ((now.getMinutes() / 60) * hourHeight) +
            headerOffset;

        const line = document.getElementById('now-line');
        const label = document.getElementById('now-label');

        if (line) line.style.top = top + 'px';

        if (label) {
            label.style.top = (top - 10) + 'px';
            label.innerText = now.toLocaleTimeString([], {
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    }

    updateNowLine();
    setInterval(updateNowLine, 60000);
</script>
