<div wire:id="{{ $this->getId() }}" class="space-y-5">
    <div class="flex items-center justify-between gap-3">

        <div class="flex items-center gap-2  justify-center">
            {{-- NAV --}}
            <div class="flex items-center gap-1 bg-surface border border-border rounded-xl p-1">
                <button wire:click="goToToday" class="px-3 py-1 bg-primary text-white rounded-lg">
                    {{ t('calendar.today') }}
                </button>
                <button wire:click="prev"><x-heroicon-s-chevron-left class="size-7 hover:bg-background rounded-lg p-1" /></button>
                <button wire:click="next"><x-heroicon-s-chevron-right class="size-7 hover:bg-background rounded-lg p-1" /></button>
            </div>
            <div class="flex justify-center">
                <div class="text-sm font-semibold text-text bg-surface p-2.5 #py-1.5 rounded-xl border border-border #shadow-sm">
                    {{ $date->translatedFormat('F Y') }}
                </div>
            </div>
        </div>

        {{-- VIEW SWITCH --}}
        <div class="flex gap-1 bg-surface border border-border rounded-xl p-1">
            <button wire:click="setView('month')"
                    class="px-3 py-1 hover:bg-background rounded-lg {{ $view === 'month' ? 'bg-primary hover:bg-primary/90 text-white' : '' }}">
                {{ t('calendar.month') }}
            </button>
            <button wire:click="setView('week')"
                    class="px-3 py-1 hover:bg-background rounded-lg {{ $view === 'week' ? 'bg-primary hover:bg-primary/90 text-white' : '' }}">
                {{ t('calendar.week') }}
            </button>
            <button wire:click="setView('day')"
                    class="px-3 py-1 hover:bg-background rounded-lg {{ $view === 'day' ? 'bg-primary hover:bg-primary/90 text-white' : '' }}">
                {{ t('calendar.day') }}
            </button>
        </div>

    </div>

    {{-- VIEW --}}
    @if($view === 'month')
        @include('livewire.calendar.views.month')
    @endif

    @if($view === 'week')
        @include('livewire.calendar.views.week')
    @endif

    @if($view === 'day')
        @include('livewire.calendar.views.day')
    @endif

    {{-- SIDEBAR --}}
    @livewire('calendar.sidebar')

</div>

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

        // 🔥 EIN EINZIGER STORE
        Alpine.store('drag', {
            id: null,
            index: 0,
            start: null,
            end: null,
            range: [],
            dropTime: null
        });

        /*
        |--------------------------------------------------------------------------
        | MONTH DROP ZONE
        |--------------------------------------------------------------------------
        */
        Alpine.data('monthDropZone', (date) => ({

            isValid() {
                let drag = this.$store.drag;
                return drag && drag.id && drag.start !== date;
            },

            buildRange() {
                let drag = this.$store.drag;
                if (!drag) return [];

                let target = new Date(date);
                target.setDate(target.getDate() - drag.index);

                let newStart = new Date(target);

                let start = new Date(drag.start);
                let end = new Date(drag.end);

                let diffDays = Math.floor((end - start) / 86400000);

                let range = [];

                for (let i = 0; i <= diffDays; i++) {
                    let d = new Date(newStart);
                    d.setDate(d.getDate() + i);
                    range.push(d.toISOString().slice(0,10));
                }

                return range;
            },

            onEnter() {
                if (!this.isValid()) return;
                this.$store.drag.range = this.buildRange();
            },

            onLeave() {
                this.$store.drag.range = [];
            },

            onOver() {
                if (!this.isValid()) return;
                this.$store.drag.range = this.buildRange();
            },

            isInRange() {
                let drag = this.$store.drag;
                return drag?.range?.includes(date);
            },

            onDrop() {
                let drag = this.$store.drag;
                this.$store.drag.range = [];

                if (!this.isValid()) return;

                let target = new Date(date);
                target.setDate(target.getDate() - drag.index);

                let finalDate = target.toISOString().slice(0,10);

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

                Livewire.find(component.getAttribute('wire:id'))
                    .call('moveEventToDate', drag.id, finalDate);
            }
        }));


        /*
        |--------------------------------------------------------------------------
        | WEEK DROP ZONE
        |--------------------------------------------------------------------------
        */
        // Alpine.data('weekDropZone', (date) => ({
        //
        //     isHovering: false,
        //
        //     isValid() {
        //         return this.$store.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 = this.$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);
        //     }
        // }));
        //
        // Alpine.data('eventItem', (id) => ({
        //
        //     dragging: false,
        //
        //     startX: 0,
        //     startY: 0,
        //
        //     offsetX: 0,
        //     offsetY: 0,
        //
        //     ghost: null,
        //
        //     initDrag(e, mode) {
        //
        //         if (mode !== 'move') return;
        //
        //         this.dragging = true;
        //
        //         let rect = this.$el.getBoundingClientRect();
        //
        //         this.offsetX = e.clientX - rect.left;
        //         this.offsetY = e.clientY - rect.top;
        //
        //         // 👉 GHOST ELEMENT
        //         this.ghost = this.$el.cloneNode(true);
        //
        //         this.ghost.style.position = 'fixed';
        //         this.ghost.style.top = rect.top + 'px';
        //         this.ghost.style.left = rect.left + 'px';
        //         this.ghost.style.width = rect.width + 'px';
        //         this.ghost.style.height = rect.height + 'px';
        //         this.ghost.style.pointerEvents = 'none';
        //         this.ghost.style.zIndex = 9999;
        //         this.ghost.style.opacity = 0.8;
        //
        //         document.body.appendChild(this.ghost);
        //
        //         // Original ausblenden
        //         this.$el.style.opacity = 0.3;
        //
        //         this.moveHandler = this.onMove.bind(this);
        //         this.upHandler = this.stop.bind(this);
        //
        //         document.addEventListener('mousemove', this.moveHandler);
        //         document.addEventListener('mouseup', this.upHandler);
        //     },
        //
        //     onMove(e) {
        //
        //         if (!this.dragging) return;
        //
        //         // 👉 FOLLOW MOUSE
        //         this.ghost.style.left = (e.clientX - this.offsetX) + 'px';
        //         this.ghost.style.top = (e.clientY - this.offsetY) + 'px';
        //     },
        //
        //     stop(e) {
        //
        //         document.removeEventListener('mousemove', this.moveHandler);
        //         document.removeEventListener('mouseup', this.upHandler);
        //
        //         this.dragging = false;
        //
        //         // 👉 GRID FINDEN
        //         let column = null;
        //
        //         document.querySelectorAll('[data-day-column]').forEach(col => {
        //             let r = col.getBoundingClientRect();
        //
        //             if (e.clientX >= r.left && e.clientX <= r.right) {
        //                 column = col;
        //             }
        //         });
        //
        //         if (!column) {
        //             this.cleanup();
        //             return;
        //         }
        //
        //         let grid = column.querySelector('.week-grid');
        //         let rect = grid.getBoundingClientRect();
        //
        //         let hourHeight = grid.offsetHeight / 24;
        //
        //         let y = e.clientY - rect.top;
        //
        //         let minutes = (y / hourHeight) * 60;
        //         minutes = Math.round(minutes / 15) * 15;
        //
        //         minutes = Math.max(0, minutes);
        //
        //         let startHour = Math.floor(minutes / 60);
        //         let startMin = minutes % 60;
        //
        //         let startTime = `${String(startHour).padStart(2,'0')}:${String(startMin).padStart(2,'0')}`;
        //
        //         let endTime = `${String(startHour + 1).padStart(2,'0')}:${String(startMin).padStart(2,'0')}`;
        //
        //         let newDate = column.dataset.date;
        //
        //         let component = this.$el.closest('[wire\\:id]');
        //
        //         if (component && this.$el.dataset.id) {
        //             Livewire.find(component.getAttribute('wire:id'))
        //                 .call('updateEventTimeAndDate', this.$el.dataset.id, newDate, startTime, endTime);
        //         }
        //
        //         this.cleanup();
        //     },
        //
        //     cleanup() {
        //         if (this.ghost) this.ghost.remove();
        //         this.$el.style.opacity = 1;
        //     }
        //
        // }));


    });
</script>


