@extends('layouts.admin')

@section('title', 'Mapa Operacional')

@push('styles')
<style>
/* ═══════════════════════════════════════════════════════════
   MAPA OPERACIONAL — Design System Premium v2
═══════════════════════════════════════════════════════════ */
.map-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 500px;
}
.map-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    flex-wrap: wrap;
    box-shadow: var(--shadow-xs);
}
.map-legend {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: auto;
    flex-wrap: wrap;
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 500;
}
.map-legend-dot {
    width: 16px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid;
}
.map-scroll-container {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    background: #fff;
    position: relative;
}
/* GRID */
.map-grid {
    display: grid;
    min-width: max-content;
    user-select: none;
}
.map-header-row, .map-body-row {
    display: contents;
}
/* Célula do nome da UH (coluna fixa) */
.map-room-label {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    border-right: 2px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 155px;
    max-width: 155px;
}
.map-room-label.is-header {
    z-index: 15;
    background: var(--color-bg);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
/* Divider de Categoria dentro do grid */
.map-category-row {
    grid-column: 1 / -1;
    background: #2F3B52;
    color: rgba(255,255,255,0.9);
    padding: 5px 12px;
    font-size: 10.5px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-category-row span {
    opacity: 0.55;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
/* Célula de data (header) */
.map-day-header {
    border-bottom: 2px solid var(--color-border);
    border-right: 1px solid var(--color-border-light);
    background: var(--color-bg);
    text-align: center;
    padding: 6px 2px;
    font-size: 11px;
    min-width: 52px;
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: default;
    user-select: none;
}
.map-day-header.is-today {
    background: #EBF4FF;
    border-bottom: 3px solid #4E86E8;
}
.map-day-header.is-weekend {
    background: #FFF8F0;
}
/* Célula do grid (onde ficam os blocos de reserva) */
.map-cell {
    border-right: 1px dashed var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    min-width: 52px;
    height: 42px;
    cursor: pointer;
    transition: background 0.1s;
}
.map-cell:hover {
    background: rgba(88, 189, 196, 0.06);
}
.map-cell.is-today {
    background: rgba(78, 134, 232, 0.03);
    border-right: 1px dashed rgba(78, 134, 232, 0.25);
}
/* ═══ BLOCOS DE RESERVA ═══ */
.res-block {
    position: absolute;
    top: 4px;
    height: 34px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 7px;
    gap: 5px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    user-select: none;
    left: 1px;
    right: 1px;
}
.res-block:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    z-index: 3;
}
/* Cores por Status — nova paleta */
.res-provisional {
    background: var(--res-provisional-bg);
    border-color: var(--res-provisional-border);
    color: var(--res-provisional-text);
}
.res-confirmed {
    background: var(--res-confirmed-bg);
    border-color: var(--res-confirmed-border);
    color: var(--res-confirmed-text);
}
.res-checked_in {
    background: var(--res-checked_in-bg);
    border-color: var(--res-checked_in-border);
    color: var(--res-checked_in-text);
}
.res-checked_out {
    background: var(--res-checked_out-bg);
    border-color: var(--res-checked_out-border);
    color: var(--res-checked_out-text);
}
.res-canceled {
    background: var(--res-canceled-bg);
    border-color: var(--res-canceled-border);
    color: var(--res-canceled-text);
    opacity: 0.7;
}
.res-no_show {
    background: var(--res-no_show-bg);
    border-color: var(--res-no_show-border);
    color: var(--res-no_show-text);
}
/* Canal de venda no bloco */
.res-channel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    vertical-align: middle;
}
.res-channel-badge svg {
    width: 18px;
    height: 18px;
}
/* ═══ MODAL ═══ */
.map-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(47, 59, 82, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}
.map-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(47, 59, 82, 0.25);
}
.map-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.map-modal-body { padding: 20px 24px; }
.map-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: var(--color-bg);
    border-radius: 0 0 16px 16px;
}
/* ═══ Detail Panel ═══ */
.res-detail-panel {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 340px;
    background: #fff;
    box-shadow: -4px 0 24px rgba(47, 59, 82, 0.12);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    border-left: 1px solid var(--color-border);
}
.res-detail-panel.is-open {
    transform: translateX(0);
}
.res-detail-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.res-detail-body { flex: 1; overflow-y: auto; padding: 20px; }
.res-detail-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
}

@media (max-width: 768px) {
    .res-detail-panel { width: 100%; }
    .map-legend { display: none; }
}

/* ═══ DRAG & DROP ═══ */
.res-block[draggable="true"] {
    cursor: grab;
}
.res-block[draggable="true"]:active {
    cursor: grabbing;
}
/* Bloco sendo arrastado */
.res-block.is-dragging {
    opacity: 0.45;
    transform: scale(0.97);
    box-shadow: none !important;
}
/* Célula com drop válido (hover durante drag) */
.map-cell.drag-over {
    background: rgba(88, 189, 196, 0.18) !important;
    border: 1px solid rgba(88, 189, 196, 0.7) !important;
    border-radius: 4px;
}
/* Célula com conflito (drop inválido) */
.map-cell.drag-conflict {
    background: rgba(217, 123, 115, 0.15) !important;
    border: 1px solid rgba(217, 123, 115, 0.7) !important;
}
/* Indicador de movimento no canto superior direito */
.drag-hint {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    background: #2F3B52;
    color: #fff;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    z-index: 9000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: none;
}
.drag-hint.visible { display: block; }

/* ═══ CÉLULA DIAGONAL (checkout + checkin no mesmo dia) ═══ */
.map-cell:has(.res-diagonal-out) {
    overflow: hidden;
}
.res-diagonal-out {
    pointer-events: auto;
    box-shadow: none !important;
}
.res-diagonal-out:hover {
    filter: brightness(0.9);
    transform: none;
    box-shadow: none !important;
}
/* Linha diagonal de separação visual atrás das reservas */
.map-cell.has-diagonal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        rgba(180,180,200,0.6) calc(50% - 1px),
        rgba(180,180,200,0.6) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    z-index: 0;
}
</style>
@endpush

@section('content')
@php
    // Serializar reservas para o Alpine.js
    $reservationsJson = [];
    foreach ($reservations as $roomId => $resGroup) {
        foreach ($resGroup as $res) {
            $reservationsJson[] = [
                'id'                 => $res->id,
                'locator'            => $res->locator,
                'room_id'            => $res->room_id,
                'status'             => $res->status,
                'guest_name'         => $res->guest?->full_name ?? 'Hóspede',
                'check_in'           => $res->check_in_expected->format('Y-m-d'),
                'check_out'          => $res->check_out_expected->format('Y-m-d'),
                'adults'             => $res->adults,
                'children'           => $res->children,
                'total_expected'     => $res->total_expected,
                'notes'              => $res->notes,
                'sales_channel'      => $res->salesChannel?->name,
                'channel_icon_html'  => $res->salesChannel?->icon_html,
                'channel_badge_color'=> $res->salesChannel?->badge_color,
                'check_in_realized'  => $res->check_in_realized?->format('d/m/Y H:i'),
                'check_out_realized' => $res->check_out_realized?->format('d/m/Y H:i'),
            ];
        }
    }

    $timelineDatesJson = array_map(fn($d) => $d->format('Y-m-d'), $timelineDates);

    $statusLabels = [
        'provisional'  => 'Provisória',
        'confirmed'    => 'Confirmada',
        'checked_in'   => 'In-House',
        'checked_out'  => 'Check-Out',
        'canceled'     => 'Cancelada',
        'no_show'      => 'No-Show',
    ];

    // Montar lista de quartos simplificada para o Alpine (inclui category_id para o simulador)
    $roomsList = [];
    foreach ($categories as $cat) {
        foreach ($cat->rooms as $room) {
            $roomsList[$room->id] = [
                'id'               => $room->id,
                'name'             => $room->name,
                'category'         => $cat->name,
                'room_category_id' => $cat->id,
            ];
        }
    }
@endphp

<div x-data="mapApp()" x-init="init()" id="map-root">

{{-- ═══════════════ TOOLBAR ═══════════════ --}}
<div class="map-toolbar" style="margin-bottom:0;">
    <div class="flex gap-sm" style="align-items:center;">
        <a href="{{ route('admin.map.index', ['date' => $baseDate->copy()->subDays($days)->format('Y-m-d'), 'days' => $days]) }}"
           class="btn btn-ghost btn-sm" title="Período anterior">
            <i data-lucide="chevron-left" style="width:16px;height:16px;"></i>
        </a>
        <form method="GET" action="{{ route('admin.map.index') }}" class="flex gap-sm" style="align-items:center;">
            <input type="date" name="date" class="form-input" style="width:160px;"
                   value="{{ $baseDate->format('Y-m-d') }}" onchange="this.form.submit()">
            <select name="days" class="form-select" style="width:120px;" onchange="this.form.submit()">
                <option value="7"  {{ $days == 7  ? 'selected' : '' }}>7 dias</option>
                <option value="14" {{ $days == 14 ? 'selected' : '' }}>14 dias</option>
                <option value="21" {{ $days == 21 ? 'selected' : '' }}>21 dias</option>
                <option value="30" {{ $days == 30 ? 'selected' : '' }}>30 dias</option>
            </select>
        </form>
        <a href="{{ route('admin.map.index') }}" class="btn btn-secondary btn-sm">Hoje</a>
        <a href="{{ route('admin.map.index', ['date' => $baseDate->copy()->addDays($days)->format('Y-m-d'), 'days' => $days]) }}"
           class="btn btn-ghost btn-sm" title="Próximo período">
            <i data-lucide="chevron-right" style="width:16px;height:16px;"></i>
        </a>
    </div>

    <div class="map-legend">
        <span class="map-legend-item">
            <span class="map-legend-dot" style="background:var(--res-provisional-bg);border-color:var(--res-provisional-border);"></span> Pré-reservado
        </span>
        <span class="map-legend-item">
            <span class="map-legend-dot" style="background:var(--res-confirmed-bg);border-color:var(--res-confirmed-border);"></span> Reservado
        </span>
        <span class="map-legend-item">
            <span class="map-legend-dot" style="background:var(--res-checked_in-bg);border-color:var(--res-checked_in-border);"></span> Hospedado
        </span>
        <span class="map-legend-item">
            <span class="map-legend-dot" style="background:var(--res-checked_out-bg);border-color:var(--res-checked_out-border);"></span> Finalizado
        </span>
        <span class="map-legend-item">
            <span class="map-legend-dot" style="background:var(--res-canceled-bg);border-color:var(--res-canceled-border);"></span> Bloqueado
        </span>
        <span class="map-legend-item" title="Saída às 10h / Entrada às 14h no mesmo dia">
            <span class="map-legend-dot" style="background:linear-gradient(to bottom right,#93c5fd 49%,#2F3B52 50%,#86efac 51%);border-color:#94a3b8;"></span> Saída&#47;Entrada
        </span>
    </div>

    <button @click="openNewModal(null, null)" class="btn btn-primary btn-sm" style="margin-left:auto;">
        <i data-lucide="plus" style="width:14px;height:14px;"></i> Nova Reserva
    </button>
    <button @click="openColorSettings()" class="btn btn-secondary btn-sm" title="Personalizar cores dos status" style="padding:6px 10px;">
        <i data-lucide="palette" style="width:14px;height:14px;"></i>
    </button>
</div>

@if($categories->isEmpty())
<div class="empty-state card" style="text-align:center;padding:4rem 2rem;border-top:none;border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg);">
    <i data-lucide="building" style="width:64px;height:64px;color:var(--color-text-muted);margin-bottom:var(--space-md);"></i>
    <h2>Inventário Vazio</h2>
    <p>Cadastre Categorias e UHs para ativar o Mapa.</p>
    <a href="{{ route('admin.registers.room-categories.create') }}" class="btn btn-primary mt-md">Iniciar Inventário</a>
</div>
@else

{{-- ═══════════════ MAPA em GRID ═══════════════ --}}
<div class="map-wrapper">
    <div class="map-scroll-container">

        {{-- Construção do CSS Grid --}}
        @php
            $totalCols = 1 + count($timelineDates);
            $gridTemplateColumns = "160px " . implode(' ', array_fill(0, count($timelineDates), 'minmax(56px, 1fr)'));
        @endphp

        <div class="map-grid" style="grid-template-columns: {{ $gridTemplateColumns }}; align-items: stretch;">

            {{-- HEADER ROW --}}
            <div class="map-room-label is-header" style="top:0;z-index:20;border-bottom:2px solid var(--color-border);">
                <i data-lucide="door-closed" style="width:14px;height:14px;opacity:0.5;"></i> UH
            </div>
            @foreach($timelineDates as $date)
                @php
                    $isToday = $date->isToday();
                    $isWeekend = $date->isWeekend();
                @endphp
                <div class="map-day-header {{ $isToday ? 'is-today' : ($isWeekend ? 'is-weekend' : '') }}">
                    <div style="text-transform:uppercase;font-size:9px;opacity:0.7;">{{ $date->isoFormat('ddd') }}</div>
                    <div style="font-size:16px;font-weight:700;line-height:1.2;">{{ $date->format('d') }}</div>
                    <div style="font-size:9px;opacity:0.6;">{{ $date->isoFormat('MMM') }}</div>
                </div>
            @endforeach

            {{-- BODY ROWS por categoria --}}
            @foreach($categories as $category)
                {{-- Separator de categoria --}}
                <div class="map-category-row">
                    <i data-lucide="layers" style="width:12px;height:12px;"></i>
                    {{ $category->name }}
                    <span style="opacity:0.6;font-weight:400;">({{ $category->short_code }}) — R$ {{ number_format($category->base_price, 2, ',', '.') }} base</span>
                </div>

                @forelse($category->rooms as $room)
                    {{-- Coluna Room Label --}}
                    <div class="map-room-label" style="height:44px;">
                        @php
                            $statusColors = ['available' => 'var(--color-success)', 'dirty' => '#f59e0b', 'maintenance' => 'var(--color-danger)', 'out_of_order' => '#94a3b8'];
                            $dotColor = $statusColors[$room->status] ?? '#94a3b8';
                        @endphp
                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $dotColor }};flex-shrink:0;" title="{{ $room->status }}"></span>
                        <div>
                            <div style="font-weight:700;font-size:13px;">{{ $room->name }}</div>
                            @if($room->floor)
                                <div style="font-size:10px;color:var(--color-text-muted);">{{ $room->floor }}</div>
                            @endif
                        </div>
                    </div>

                    {{-- Células de dias deste quarto --}}
                    @foreach($timelineDates as $di => $date)
                        @php
                            $isToday = $date->isToday();
                            $cellDate = $date->format('Y-m-d');
                        @endphp
                        <div
                            class="map-cell {{ $isToday ? 'is-today' : '' }}"
                            :class="[
                                dragOverCell === '{{ $room->id }}_{{ $cellDate }}' && dragConflict  ? 'drag-conflict' : '',
                                dragOverCell === '{{ $room->id }}_{{ $cellDate }}' && !dragConflict ? 'drag-over' : '',
                                hasDiagonal('{{ $room->id }}', '{{ $cellDate }}') ? 'has-diagonal' : '',
                                isCellInSelection('{{ $room->id }}', '{{ $cellDate }}') ? 'is-selecting' : ''
                            ]"
                            :style="hasDiagonal('{{ $room->id }}', '{{ $cellDate }}') ? 'overflow:hidden;position:relative;' : 'overflow:visible;position:relative;'"
                            @mousedown="startSelection('{{ $room->id }}', '{{ $cellDate }}', '{{ $room->name }}', $event)"
                            @mouseenter="updateSelection('{{ $room->id }}', '{{ $cellDate }}')"
                            @mouseup.window="endSelection()"
                            @dragover.prevent="onDragOver($event, '{{ $room->id }}', '{{ $cellDate }}')"
                            @dragleave="onDragLeave($event)"
                            @drop.prevent="onDrop($event, '{{ $room->id }}', '{{ $cellDate }}')"
                            data-room="{{ $room->id }}"
                            data-date="{{ $cellDate }}"
                        >
                            {{-- ① Cauda diagonal (checkout) — só na célula em que checkout = checkin --}}
                            <template x-if="hasDiagonal('{{ $room->id }}', '{{ $cellDate }}')">
                                <div
                                    class="res-block res-diagonal-out"
                                    :class="'res-' + (getCheckoutRes('{{ $room->id }}', '{{ $cellDate }}').status || 'confirmed')"
                                    :title="getCheckoutRes('{{ $room->id }}', '{{ $cellDate }}').guest_name + ' — Checkout 10:00'"
                                    style="position:absolute;top:0;bottom:0;height:42px;left:0;right:0;width:100%;z-index:1;
                                           clip-path:polygon(0% 0%, 55% 0%, 45% 100%, 0% 100%);
                                           border-radius:5px 0 0 5px;top:0;border:none;
                                           padding-left:5px;padding-right:0;justify-content:flex-start;"
                                    @click.stop="openDetail(getCheckoutRes('{{ $room->id }}', '{{ $cellDate }}'))"
                                >
                                    <span x-text="getCheckoutRes('{{ $room->id }}', '{{ $cellDate }}').guest_name"
                                          style="overflow:hidden;text-overflow:clip;font-size:9px;max-width:22px;opacity:0.85;display:block;"></span>
                                </div>
                            </template>

                            {{-- ② Bloco principal — renderizado UMA VEZ, na célula de check-in --}}
                            <template x-for="res in getStartBlocksForCell('{{ $room->id }}', '{{ $cellDate }}')" :key="res.id">
                                <div
                                    class="res-block"
                                    :class="['res-' + res.status, dragging && dragging.id === res.id ? 'is-dragging' : '']"
                                    :style="spanBlockStyle(res, '{{ $cellDate }}')"
                                    draggable="true"
                                    @dragstart="startDrag($event, res)"
                                    @dragend="endDrag($event)"
                                    @click.stop="!dragMoved && openDetail(res)"
                                    :title="res.guest_name + ' — ' + statusLabel(res.status) + (res.sales_channel ? ' · ' + res.sales_channel : '')"
                                >
                                    <span class="res-channel-badge" x-show="res.channel_icon_html" x-html="res.channel_icon_html" style="flex-shrink:0;"></span>
                                    <span x-text="res.guest_name" style="overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;white-space:nowrap;"></span>
                                </div>
                            </template>
                        </div>
                    @endforeach
                @empty
                    <div class="map-room-label" style="height:42px;font-size:11px;color:var(--color-text-muted);font-style:italic;">
                        Sem UHs cadastradas
                    </div>
                    <div style="grid-column: 2 / -1;border-bottom:1px solid var(--color-border-light);background:var(--color-bg);display:flex;align-items:center;padding:0 12px;">
                        <a href="{{ route('admin.registers.rooms.create') }}" style="font-size:11px;color:var(--color-primary);">+ Adicionar quartos a esta categoria</a>
                    </div>
                @endforelse
            @endforeach

        </div>{{-- /map-grid --}}
    </div>{{-- /map-scroll-container --}}
</div>{{-- /map-wrapper --}}

{{-- ═══ DRAG HINT (badge flutuante durante o arraste) ═══ --}}
<div id="drag-hint" class="drag-hint" x-show="dragging" x-cloak
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0 translate-y-1"
     x-transition:enter-end="opacity-100 translate-y-0">
    <span>✦ </span>
    <span x-text="dragging ? dragging.guest_name + ' — Solte no quarto/dia destino' : ''"></span>
</div>

{{-- ═══════════════ MODAL: CORES DE STATUS ═══════════════ --}}
<div class="map-modal-overlay"
     x-show="showColorModal"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     style="display:none;"
     @click.self="showColorModal = false">
    <div class="map-modal" style="max-width:640px;" @click.stop>

        {{-- Header --}}
        <div class="map-modal-header">
            <div style="width:40px;height:40px;background:var(--color-primary-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="palette" style="width:20px;height:20px;color:var(--color-primary-dark);"></i>
            </div>
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:700;">Personalizar Cores dos Status</h3>
                <p style="margin:0;font-size:12px;color:var(--color-text-muted);">As cores são salvas por hotel e aplicadas em todo o sistema.</p>
            </div>
            <button @click="showColorModal = false" style="margin-left:auto;background:none;border:none;cursor:pointer;color:var(--color-text-muted);padding:4px;">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>

        {{-- Body --}}
        <div class="map-modal-body" style="padding:16px 24px;">

            {{-- Feedback de Salvamento --}}
            <div x-show="colorSaveMsg" x-transition style="display:none;margin-bottom:12px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;"
                 :style="colorSaveMsg === 'ok'
                     ? 'background:#E8F8F5;color:#2E8A72;border:1px solid #59B39E;'
                     : 'background:#FDECEA;color:#8C3028;border:1px solid #D97B73;'">
                <span x-show="colorSaveMsg === 'ok'">✓ Cores salvas com sucesso!</span>
                <span x-show="colorSaveMsg === 'err'">✗ Erro ao salvar. Tente novamente.</span>
            </div>

            {{-- *** CORREÇÃO: x-for sobre ARRAY, não objeto *** --}}
            <div style="display:flex;flex-direction:column;gap:8px;">
                <template x-for="(item, idx) in colorSettingsArr" :key="item.code">
                    <div style="display:grid;grid-template-columns:1fr 52px 52px 52px;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg);">

                        {{-- Badge preview + label --}}
                        <div style="display:flex;align-items:center;gap:10px;">
                            <span style="display:inline-block;width:36px;height:20px;border-radius:4px;flex-shrink:0;border-width:1.5px;border-style:solid;transition:all .15s;"
                                  :style="`background:${item.bg_color};border-color:${item.border_color};`">
                            </span>
                            <span style="font-size:13px;font-weight:600;" :style="`color:${item.text_color};`" x-text="item.label"></span>
                        </div>

                        {{-- Seletor: Fundo --}}
                        <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
                            <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);">Fundo</span>
                            <label :style="`display:block;width:34px;height:34px;border-radius:7px;border:2px solid var(--color-border);cursor:pointer;overflow:hidden;background:${item.bg_color};transition:all .15s;`">
                                <input type="color" x-model="colorSettingsArr[idx].bg_color"
                                       style="width:200%;height:200%;opacity:0;cursor:pointer;margin:-50%;">
                            </label>
                        </div>

                        {{-- Seletor: Borda --}}
                        <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
                            <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);">Borda</span>
                            <label :style="`display:block;width:34px;height:34px;border-radius:7px;border:2px solid var(--color-border);cursor:pointer;overflow:hidden;background:${item.border_color};transition:all .15s;`">
                                <input type="color" x-model="colorSettingsArr[idx].border_color"
                                       style="width:200%;height:200%;opacity:0;cursor:pointer;margin:-50%;">
                            </label>
                        </div>

                        {{-- Seletor: Texto --}}
                        <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
                            <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);">Texto</span>
                            <label :style="`display:block;width:34px;height:34px;border-radius:7px;border:2px solid var(--color-border);cursor:pointer;overflow:hidden;background:${item.text_color};transition:all .15s;`">
                                <input type="color" x-model="colorSettingsArr[idx].text_color"
                                       style="width:200%;height:200%;opacity:0;cursor:pointer;margin:-50%;">
                            </label>
                        </div>

                    </div>
                </template>
            </div>

            {{-- Preview ao Vivo --}}
            <div style="margin-top:14px;padding:12px 14px;border-radius:10px;border:1px dashed var(--color-border);background:#fff;">
                <p style="font-size:10px;color:var(--color-text-muted);margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;">Preview ao vivo</p>
                <div style="display:flex;flex-wrap:wrap;gap:6px;">
                    <template x-for="item in colorSettingsArr" :key="'pv-'+item.code">
                        <span style="padding:3px 11px;border-radius:100px;border-width:1px;border-style:solid;font-size:12px;font-weight:700;transition:all .15s;"
                              :style="`background:${item.bg_color};border-color:${item.border_color};color:${item.text_color};`"
                              x-text="item.label">
                        </span>
                    </template>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="map-modal-footer" style="display:flex;justify-content:space-between;align-items:center;">
            <button @click="resetColors()" class="btn btn-ghost btn-sm" style="color:var(--color-danger);" :disabled="colorSaving">
                <i data-lucide="rotate-ccw" style="width:13px;height:13px;"></i>
                Redefinir padrão
            </button>
            <div style="display:flex;gap:8px;">
                <button @click="showColorModal = false" class="btn btn-secondary btn-sm">Cancelar</button>
                <button @click="saveColors()" class="btn btn-primary btn-sm" :disabled="colorSaving">
                    <span x-show="!colorSaving" style="display:flex;align-items:center;gap:5px;">
                        <i data-lucide="check" style="width:13px;height:13px;"></i> Salvar cores
                    </span>
                    <span x-show="colorSaving" style="display:flex;align-items:center;gap:6px;">
                        <svg style="width:13px;height:13px;animation:spin 1s linear infinite;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                        Salvando…
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════ MODAL: NOVA RESERVA ═══════════════ --}}
<div class="map-modal-overlay" x-show="showModal" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="display:none;">
    <div class="map-modal" @click.stop>
        <div class="map-modal-header">
            <div style="width:40px;height:40px;background:var(--color-primary-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="calendar-plus" style="width:20px;height:20px;color:var(--color-primary-dark);"></i>
            </div>
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:700;">Nova Reserva</h3>
                <p style="margin:0;font-size:12px;color:var(--color-text-muted);" x-text="'UH: ' + (newRes.room_name || 'Selecionar')"></p>
            </div>
            <button @click="showModal = false" style="margin-left:auto;background:none;border:none;cursor:pointer;color:var(--color-text-muted);">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>

        <div class="map-modal-body">
            <div x-show="modalError" class="badge" style="background:#fee2e2;color:#991b1b;padding:8px 12px;border-radius:8px;display:block;margin-bottom:16px;font-size:13px;" x-text="modalError"></div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">

                {{-- Campo UH — só aparece quando aberto sem quarto pré-selecionado --}}
                <div class="form-group" style="grid-column:1/-1;" x-show="!newRes.room_id">
                    <label class="form-label">UH / Quarto <span class="text-danger">*</span></label>
                    <select class="form-select" x-model="newRes.room_id" @change="calcTariff()">
                        <option value="">— Selecione o quarto —</option>
                        @foreach($categories as $cat)
                            <optgroup label="{{ $cat->name }}">
                                @foreach($cat->rooms as $room)
                                    <option value="{{ $room->id }}">{{ $room->name }}{{ $room->floor ? ' · '.$room->floor : '' }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>

                {{-- Mostra quarto selecionado (pré-selecionado pelo clique na célula) --}}
                <div class="form-group" style="grid-column:1/-1;" x-show="newRes.room_id">
                    <label class="form-label">UH / Quarto</label>
                    <div style="padding:8px 12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;font-weight:600;display:flex;align-items:center;justify-content:space-between;">
                        <span x-text="newRes.room_name || 'UH #' + newRes.room_id"></span>
                        <button type="button" @click="newRes.room_id = null; newRes.room_name = ''" style="background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:11px;">Trocar</button>
                    </div>
                </div>

                <div class="form-group" style="grid-column:1/-1;">
                    <label class="form-label">Hóspede</label>
                    <select class="form-select" x-model="newRes.guest_id" @change="newRes.guest_name = ''">
                        <option value="">— Novo hóspede —</option>
                        @foreach($guests as $g)
                            <option value="{{ $g->id }}">{{ $g->full_name }} {{ $g->document_number ? '('.$g->document_number.')' : '' }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="grid-column:1/-1;" x-show="!newRes.guest_id">
                    <label class="form-label">Nome Completo <span class="text-danger">*</span></label>
                    <input type="text" class="form-input" x-model="newRes.guest_name" placeholder="Nome do hóspede">
                </div>

                <div class="form-group">
                    <label class="form-label">Check-in <span class="text-danger">*</span></label>
                    <input type="date" class="form-input" x-model="newRes.check_in" @change="calcTariff()">
                </div>
                <div class="form-group">
                    <label class="form-label">Check-out <span class="text-danger">*</span></label>
                    <input type="date" class="form-input" x-model="newRes.check_out" @change="calcTariff()">
                </div>

                <div class="form-group">
                    <label class="form-label">Adultos</label>
                    <input type="number" class="form-input" x-model="newRes.adults" min="1" max="10" @change="calcTariff()">
                </div>
                <div class="form-group">
                    <label class="form-label">Crianças</label>
                    <input type="number" class="form-input" x-model="newRes.children" min="0" max="10" @change="calcTariff()">
                </div>

                <div class="form-group">
                    <label class="form-label">Canal de Venda</label>
                    <select class="form-select" x-model="newRes.sales_channel_id">
                        <option value="">— Selecione —</option>
                        @foreach($salesChannels as $ch)
                            <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="grid-column:1/-1;">
                    <label class="form-label" style="display:flex;align-items:center;gap:8px;">Total Previsto
                        <span x-show="tariffLoading" style="font-size:10px;color:var(--color-text-muted);font-weight:400;">calculando...</span>
                        <span x-show="tariffCalcDone && !tariffLoading" style="font-size:10px;color:var(--color-success);font-weight:400;">✓ calculado pelo motor</span>
                    </label>
                    <div style="display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;">
                        <div style="position:relative;">
                            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-weight:600;">R$</span>
                            <input type="number" step="0.01" class="form-input" x-model="newRes.total_expected"
                                   style="padding-left:38px;font-size:15px;font-weight:700;"
                                   placeholder="0,00" @change="tariffCalcDone = false">
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" @click="calcTariff()"
                                :disabled="tariffLoading || !newRes.room_id || !newRes.check_in || !newRes.check_out"
                                title="Recalcular pelo motor tarifário" style="height:40px;white-space:nowrap;">
                            <i data-lucide="calculator" style="width:14px;height:14px;"></i>
                            <span x-show="!tariffLoading"> Calcular</span>
                            <span x-show="tariffLoading">...</span>
                        </button>
                    </div>
                    <div x-show="tariffBreakdown" x-transition style="margin-top:8px;padding:10px 12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;font-size:12px;">
                        <div style="display:flex;gap:16px;color:var(--color-text-muted);">
                            <span><strong x-text="tariffBreakdown?.nights"></strong> diárias</span>
                            <span>Média <strong x-text="'R$ ' + (tariffBreakdown?.avg_per_night?.toFixed(2) ?? '0,00').replace('.', ',')"></strong>/noite</span>
                            <span x-show="tariffBreakdown?.rule_name" style="color:var(--color-primary-dark);" x-text="'🏷 ' + tariffBreakdown?.rule_name"></span>
                        </div>
                    </div>
                    <div x-show="tariffError" x-text="tariffError" style="margin-top:6px;font-size:12px;color:var(--color-danger);"></div>
                </div>

                <div class="form-group" style="grid-column:1/-1;">
                    <label class="form-label">Observações</label>
                    <textarea class="form-textarea" x-model="newRes.notes" rows="2" placeholder="Preferências, pedidos especiais..."></textarea>
                </div>
            </div>
        </div>

        <div class="map-modal-footer">
            <button @click="showModal = false" class="btn btn-ghost">Cancelar</button>
            <button @click="saveReservation()" class="btn btn-primary" :disabled="modalLoading">
                <span x-show="!modalLoading">Criar Reserva</span>
                <span x-show="modalLoading">Salvando...</span>
            </button>
        </div>
    </div>
</div>

{{-- ═══════════════ PAINEL DE DETALHES DA RESERVA ═══════════════ --}}
<div class="res-detail-panel" :class="{'is-open': detailRes !== null}">
    <template x-if="detailRes">
        <div style="display:flex;flex-direction:column;height:100%;">
            <div class="res-detail-header">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
                    <button @click="detailRes = null" style="background:none;border:none;cursor:pointer;color:var(--color-text-muted);">
                        <i data-lucide="x" style="width:18px;height:18px;"></i>
                    </button>
                    <div>
                        <div style="font-size:13px;color:var(--color-text-muted);">Código da Reserva</div>
                        <div style="font-size:20px;font-weight:700;font-family:monospace;" x-text="detailRes.locator"></div>
                    </div>
                    <span class="status-chip" :class="statusChipClass(detailRes.status)" x-text="statusLabel(detailRes.status)" style="margin-left:auto;"></span>
                </div>
            </div>

            <div class="res-detail-body">
                <div style="margin-bottom:16px;">
                    <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:4px;">Hóspede</div>
                    <div style="font-size:16px;font-weight:600;" x-text="detailRes.guest_name"></div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                    <div>
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Check-In Prev.</div>
                        <div style="font-weight:600;" x-text="formatDate(detailRes.check_in)"></div>
                    </div>
                    <div>
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Check-Out Prev.</div>
                        <div style="font-weight:600;" x-text="formatDate(detailRes.check_out)"></div>
                    </div>
                    <div>
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Adultos</div>
                        <div x-text="detailRes.adults + (detailRes.children > 0 ? ' + ' + detailRes.children + ' crianças' : '')"></div>
                    </div>
                    <div>
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Canal</div>
                        <div x-text="detailRes.sales_channel || '—'"></div>
                    </div>
                </div>

                <div style="background:var(--color-background-soft);border-radius:10px;padding:12px;margin-bottom:16px;">
                    <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:4px;">Total Previsto</div>
                    <div style="font-size:22px;font-weight:700;color:var(--color-primary-dark);" x-text="'R$ ' + parseFloat(detailRes.total_expected || 0).toFixed(2).replace('.', ',')"></div>
                </div>

                <div x-show="detailRes.check_in_realized" style="margin-bottom:8px;">
                    <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Check-In Realizado</div>
                    <div style="color:var(--color-success);font-weight:600;" x-text="detailRes.check_in_realized"></div>
                </div>
                <div x-show="detailRes.check_out_realized" style="margin-bottom:8px;">
                    <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:2px;">Check-Out Realizado</div>
                    <div style="color:var(--color-primary);font-weight:600;" x-text="detailRes.check_out_realized"></div>
                </div>

                <div x-show="detailRes.notes" style="margin-top:12px;padding:10px;background:#fef9c3;border-radius:8px;font-size:12px;color:#92400e;">
                    <strong>Obs:</strong> <span x-text="detailRes.notes"></span>
                </div>
            </div>

            <div class="res-detail-footer">
                {{-- Botões de Ação por Status --}}
                <div style="display:flex;flex-direction:column;gap:8px;width:100%;">
                    <template x-if="detailRes.status === 'confirmed' || detailRes.status === 'provisional'">
                        <button class="btn btn-primary" @click="changeStatus(detailRes, 'checked_in')" style="width:100%;">
                            <i data-lucide="log-in" style="width:14px;height:14px;"></i> Realizar Check-In
                        </button>
                    </template>
                    <template x-if="detailRes.status === 'checked_in'">
                        <button class="btn" style="width:100%;background:#7c3aed;color:#fff;" @click="changeStatus(detailRes, 'checked_out')">
                            <i data-lucide="log-out" style="width:14px;height:14px;"></i> Realizar Check-Out
                        </button>
                    </template>
                    <template x-if="detailRes.status !== 'canceled' && detailRes.status !== 'checked_out'">
                        <button class="btn btn-danger" @click="changeStatus(detailRes, 'canceled')" style="width:100%;">
                            Cancelar Reserva
                        </button>
                    </template>
                    <button class="btn btn-ghost btn-sm" @click="detailRes = null" style="width:100%;">Fechar painel</button>
                </div>
            </div>
        </div>
    </template>
</div>

{{-- Overlay para fechar o painel de detalhes --}}
<div x-show="detailRes !== null" @click="detailRes = null" style="position:fixed;inset:0;z-index:499;display:none;" x-transition:enter="transition duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"></div>

@endif

{{-- ═══════════════ TOAST de Feedback ═══════════════ --}}
<div x-show="toast.show" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform translate-y-4 opacity-0" x-transition:enter-end="transform translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2000;display:none;" x-cloak>
    <div style="background:#1e293b;color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);font-size:14px;display:flex;align-items:center;gap:10px;min-width:280px;">
        <span x-text="toast.icon" style="font-size:18px;"></span>
        <span x-text="toast.message"></span>
    </div>
</div>

</div>{{-- /x-data --}}

@push('scripts')
<script>
function mapApp() {
    return {
        // --- Estado ---
        reservations: @json($reservationsJson),
        dates: @json($timelineDatesJson),
        roomsList: @json($roomsList),
        showModal: false,
        modalLoading: false,
        modalError: '',
        detailRes: null,
        toast: { show: false, message: '', icon: '✅' },

        // --- Estado: Drag & Drop ---
        dragging:     null,   // reserva sendo arrastada
        dragOverCell: null,   // 'roomId_dateStr' da célula sob o cursor
        dragConflict: false,  // true quando drop criaria conflito
        dragMoved:    false,  // previne click acidental após drag

        // --- Estado: Cores de Status ---
        showColorModal: false,
        colorSaving: false,
        colorSaveMsg: null,
        colorSettings: {},    // objeto keyed, mantido para applyColorsToCSS
        colorSettingsArr: [], // ARRAY usado no x-for (Alpine v3 não itera objetos)

        // ─── DRAG & DROP ──────────────────────────────────────────────────

        /**
         * Inicia o drag. Armazena a reserva e calcula em qual dia (coluna) o usuário
         * clicou dentro do bloco, para preservar a posição relativa ao soltar.
         */
        startDrag(event, res) {
            this.dragMoved  = false;
            this.dragging   = res;

            // offset em dias: onde dentro do bloco spanning o mousedown ocorreu
            const cellW = 52;
            const rect  = event.currentTarget.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            this._dragDayOffset = Math.floor(clickX / cellW);

            // Imagem de drag customizada (clone do bloco)
            try {
                const ghost = event.currentTarget.cloneNode(true);
                ghost.style.cssText = `position:fixed;top:-200px;left:-200px;width:${rect.width}px;opacity:0.8;pointer-events:none;z-index:9999;`;
                document.body.appendChild(ghost);
                event.dataTransfer.setDragImage(ghost, clickX, 17);
                setTimeout(() => ghost.remove(), 0);
            } catch(e) {}

            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('text/plain', String(res.id));
        },

        /**
         * Feedback visual durante o hover sobre uma célula.
         * Verifica conflito em tempo real.
         */
        onDragOver(event, roomId, dateStr) {
            if (!this.dragging) return;
            this.dragMoved = true;
            event.dataTransfer.dropEffect = 'move';

            const key = `${roomId}_${dateStr}`;
            if (this.dragOverCell === key) return; // evita re-calcular a cada pixel
            this.dragOverCell = key;

            // Calcular novas datas mantendo o offset de clique
            const duration = this.daysBetween(this.dragging.check_in, this.dragging.check_out);
            const newCheckIn  = this.addDays(dateStr, -this._dragDayOffset);
            const newCheckOut = this.addDays(newCheckIn, duration);

            // Verificação de conflito local (sem round-trip ao servidor)
            this.dragConflict = this.reservations.some(r => {
                if (r.id      == this.dragging.id) return false;
                if (r.room_id != roomId)           return false;
                return r.check_in < newCheckOut && r.check_out > newCheckIn;
            });
        },

        onDragLeave(event) {
            // só limpa se saiu do elemento (não de um filho)
            if (!event.currentTarget.contains(event.relatedTarget)) {
                this.dragOverCell = null;
                this.dragConflict = false;
            }
        },

        endDrag(event) {
            this.dragging     = null;
            this.dragOverCell = null;
            this.dragConflict = false;
            // pequeno delay para não disparar @click.stop logo após o drag
            setTimeout(() => { this.dragMoved = false; }, 100);
        },

        /**
         * Soltar a reserva numa célula. Calcula novas datas/quarto e chama a API.
         */
        async onDrop(event, roomId, dateStr) {
            if (!this.dragging || this.dragConflict) {
                this.endDrag(event);
                return;
            }

            const res       = this.dragging;
            const duration  = this.daysBetween(res.check_in, res.check_out);
            const newCheckIn  = this.addDays(dateStr, -this._dragDayOffset);
            const newCheckOut = this.addDays(newCheckIn, duration);

            // Se não mudou nada, ignora
            if (res.room_id == roomId && res.check_in === newCheckIn) {
                this.endDrag(event);
                return;
            }

            this.endDrag(event);
            await this.moveReservation(res, roomId, newCheckIn, newCheckOut);
        },

        /**
         * Chama PATCH /admin/map/reservations/{id}/move e atualiza o estado.
         */
        async moveReservation(res, newRoomId, newCheckIn, newCheckOut) {
            const baseUrl = '{{ url('admin/map/reservations') }}';
            const url = `${baseUrl}/${res.id}/move`;
            try {
                const resp = await fetch(url, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        room_id:            newRoomId,
                        check_in_expected:  newCheckIn,
                        check_out_expected: newCheckOut,
                    }),
                });

                const data = await resp.json();

                if (!resp.ok) {
                    this.showToast('⚠️', data.error || 'Erro ao mover reserva.');
                    return;
                }

                // Atualiza estado local otimisticamente
                const idx = this.reservations.findIndex(r => r.id === res.id);
                if (idx > -1) {
                    this.reservations[idx] = {
                        ...this.reservations[idx],
                        room_id:   Number(newRoomId),
                        check_in:  newCheckIn,
                        check_out: newCheckOut,
                    };
                }

                const msg = newRoomId != res.room_id
                    ? `Reserva movida para o quarto ${newRoomId} — ${newCheckIn}`
                    : `Datas alteradas: ${newCheckIn} → ${newCheckOut}`;
                this.showToast('✅', msg);

            } catch (err) {
                this.showToast('❌', 'Falha de conexão ao mover reserva.');
            }
        },

        // ─── Utilitários de Data ──────────────────────────────────────────

        /** Dias entre duas strings YYYY-MM-DD */
        daysBetween(a, b) {
            return Math.round((this.parseDate(b) - this.parseDate(a)) / 86400000);
        },

        /** Adiciona N dias a uma string YYYY-MM-DD → retorna YYYY-MM-DD */
        addDays(dateStr, n) {
            const d = this.parseDate(dateStr);
            d.setDate(d.getDate() + n);
            return d.toISOString().split('T')[0];
        },

        // ─── GRID: Queries de Ocupação ────────────────────────────────────

        /** Reservas que OCUPAM esta célula (check_in <= date < check_out) - usado para click detection */
        getReservationsForCell(roomId, dateStr) {
            const cellDate = this.parseDate(dateStr);
            return this.reservations.filter(r => {
                if (r.room_id != roomId) return false;
                return cellDate >= this.parseDate(r.check_in) && cellDate < this.parseDate(r.check_out);
            });
        },

        /**
         * Retorna reservas cujo BLOCO deve ser DESENHADO nesta célula.
         * Só renderiza na célula de check-in (ou na primeira célula visível se a reserva começou antes).
         */
        getStartBlocksForCell(roomId, dateStr) {
            const firstVisible = this.dates[0];
            return this.reservations.filter(r => {
                if (r.room_id != roomId) return false;
                // Caso normal: check-in = hoje
                if (r.check_in === dateStr) return true;
                // Caso borda: reserva começou antes do viewport, mostra a partir do 1º dia visível
                if (r.check_in < firstVisible && dateStr === firstVisible && r.check_out > firstVisible) return true;
                return false;
            });
        },

        /** Verifica se há checkout E checkin no mesmo dia/quarto → diagonal */
        hasDiagonal(roomId, dateStr) {
            const hasOut = this.reservations.some(r => r.room_id == roomId && r.check_out === dateStr);
            const hasIn  = this.reservations.some(r => r.room_id == roomId && r.check_in  === dateStr);
            return hasOut && hasIn;
        },

        /** Reserva que faz checkout nesta célula (para a cauda diagonal) */
        getCheckoutRes(roomId, dateStr) {
            return this.reservations.find(r => r.room_id == roomId && r.check_out === dateStr) || {};
        },

        // ─── GRID: Cálculo de Largura e Estilo de Bloco ──────────────────

        /**
         * Largura em pixels do bloco que começa em fromDate.
         * CELL_W = 52px (mesma que no CSS .map-cell)
         */
        spanBlockWidthPx(res, fromDate) {
            const CELL_W = 52;
            const dates  = this.dates;
            const startI = Math.max(dates.indexOf(fromDate), 0);
            let   endI   = dates.indexOf(res.check_out);
            if (endI < 0) endI = dates.length; // checkout está além do viewport
            const days = Math.max(1, endI - startI);
            return days * CELL_W - 2; // -2px de margem
        },

        /**
         * Estilos inline para o bloco principal.
         * Se a célula é de diagonal: bloco começa no ponto médio (45%) para ceder espaço à cauda.
         * Checkout: 10h | Check-in: 14h — divisao diagonal na mesma célula.
         */
        spanBlockStyle(res, dateStr) {
            const CELL_W  = 52;
            const isDiag  = this.hasDiagonal(res.room_id, dateStr);
            const fullW   = this.spanBlockWidthPx(res, dateStr);
            const base    = 'position:absolute;top:0;height:42px;z-index:2;display:flex;align-items:center;gap:4px;padding:0 6px;border-radius:5px;overflow:hidden;';

            if (isDiag) {
                // Começa a partir dos 45% da célula (alinhado com o clip-path 55%/45% da diagonal)
                const offset = Math.round(CELL_W * 0.45);
                const w      = fullW - offset + 2;
                return base + `left:${offset}px;width:${Math.max(20, w)}px;border-radius:0 5px 5px 0;`;
            }
            return base + `left:0;width:${fullW}px;`;
        },

        // ─── GRID: Labels e Classes ───────────────────────────────────────
        statusLabel(status) {
            const map = {
                provisional: 'Provisória', confirmed: 'Confirmada',
                checked_in: 'In-House', checked_out: 'Check-Out',
                canceled: 'Cancelada', no_show: 'No-Show',
            };
            return map[status] || status;
        },

        statusChipClass(status) {
            const map = {
                provisional: 'badge-neutral',  confirmed: 'badge-info',
                checked_in:  'badge-success',  checked_out: 'badge-primary',
                canceled:    'badge-danger',    no_show: 'badge-warning',
            };
            return map[status] || 'badge-neutral';
        },

        // ─── Clique na Célula (Mantido para fallback se necessário) ───
        onCellClick(roomId, dateStr, roomName, categoryName) {
            // Ocultado em favor do startSelection/endSelection para suportar o arraste duplo
        },

        // ─── Seleção de Datas (Drag-to-Create) ───
        isSelecting:   false,
        selectRoomId:  null,
        selectRoomName: null,
        selectStart:   null,
        selectEnd:     null,

        startSelection(roomId, dateStr, roomName, event) {
            if (event.button !== 0) return; // apenas click esquerdo
            if (event.target.closest('.res-block')) return; // ignorar se clicou numa reserva

            const existing = this.getReservationsForCell(roomId, dateStr);
            if (existing.length > 0) return;

            this.isSelecting    = true;
            this.selectRoomId   = roomId;
            this.selectRoomName = roomName;
            this.selectStart    = dateStr;
            this.selectEnd      = dateStr;
        },

        updateSelection(roomId, dateStr) {
            if (!this.isSelecting) return;
            if (roomId !== this.selectRoomId) return; // apenas na mesma linha da UH
            this.selectEnd = dateStr;
        },

        endSelection() {
            if (!this.isSelecting) return;
            this.isSelecting = false;

            let start = this.parseDate(this.selectStart);
            let end   = this.parseDate(this.selectEnd);
            if (start > end) { const t=start; start=end; end=t; }

            const startStr = start.toISOString().split('T')[0];
            const endStr   = end.toISOString().split('T')[0];

            // Verifica se arrastou em cima de alguma reserva
            const duration = Math.round((end - start) / 86400000);
            for (let i = 0; i <= duration; i++) {
                const checkDate = this.addDays(startStr, i);
                if (this.getReservationsForCell(this.selectRoomId, checkDate).length > 0) {
                    this.showToast('⚠️', 'Seleção inválida: choca com reserva existente.');
                    return;
                }
            }

            // Checkout é no dia seguinte ao último selecionado
            const tOut = new Date(end);
            tOut.setDate(tOut.getDate() + 1);
            const checkOutStr = tOut.toISOString().split('T')[0];

            this.openNewModalRange(this.selectRoomId, startStr, checkOutStr, this.selectRoomName);
            this.selectStart = null;
            this.selectEnd   = null;
            this.selectRoomId = null;
        },

        isCellInSelection(roomId, dateStr) {
            if (!this.isSelecting || roomId !== this.selectRoomId) return false;
            let start = this.parseDate(this.selectStart);
            let end   = this.parseDate(this.selectEnd);
            let curr  = this.parseDate(dateStr);
            if (start > end) { const t=start; start=end; end=t; }
            return curr >= start && curr <= end;
        },

        newRes: {
            room_id: null, room_name: '',
            guest_id: '', guest_name: '',
            check_in: '', check_out: '',
            adults: 2, children: 0,
            sales_channel_id: '', notes: '', total_expected: 0
        },

        tariffLoading:   false,
        tariffCalcDone:  false,
        tariffBreakdown: null,
        tariffError:     null,
        tariffDebounce:  null,

        // --- Inicialização ---
        init() {
            lucide.createIcons();
        },

        // --- Helpers de data ---
        parseDate(str) { return new Date(str + 'T00:00:00'); },
        formatDate(str) {
            if (!str) return '—';
            const d = this.parseDate(str);
            return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
        },

        // --- Modal ---
        openNewModal(roomId, dateStr, roomName) {
            const tomorrow = new Date(dateStr || new Date());
            tomorrow.setDate(tomorrow.getDate() + 1);
            const checkOut = tomorrow.toISOString().split('T')[0];
            this.openNewModalRange(roomId, dateStr || new Date().toISOString().split('T')[0], checkOut, roomName);
        },

        openNewModalRange(roomId, checkIn, checkOut, roomName) {
            this.newRes = {
                room_id: roomId,
                room_name: roomName || '',
                guest_id: '', guest_name: '',
                check_in: checkIn,
                check_out: checkOut,
                adults: 2, children: 0,
                sales_channel_id: '', notes: '', total_expected: 0
            };
            this.modalError    = '';
            this.tariffBreakdown = null;
            this.tariffCalcDone  = false;
            this.tariffError     = null;
            this.showModal = true;
            this.$nextTick(() => {
                lucide.createIcons();
                if (this.newRes.room_id && this.newRes.check_in && this.newRes.check_out) {
                    this.calcTariff();
                }
            });
        },

        // ─── Cálculo automático pelo Motor Tarifário ───────────────────────────
        calcTariff() {
            // Debounce: espera 600ms antes de disparar (evita múltiplas chamadas)
            clearTimeout(this.tariffDebounce);
            this.tariffDebounce = setTimeout(() => this._doCalcTariff(), 600);
        },

        async _doCalcTariff() {
            if (!this.newRes.room_id || !this.newRes.check_in || !this.newRes.check_out) return;

            // Pegar category_id do mapa de quartos
            const roomMeta = this.roomsList[this.newRes.room_id];
            if (!roomMeta?.room_category_id) return;

            this.tariffLoading  = true;
            this.tariffError    = null;
            this.tariffBreakdown = null;

            try {
                const resp = await fetch('{{ route('admin.tariffs.simulate') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept':       'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        room_category_id: roomMeta.room_category_id,
                        checkin:  this.newRes.check_in,
                        checkout: this.newRes.check_out,
                        adults:   parseInt(this.newRes.adults)   || 1,
                        children: parseInt(this.newRes.children) || 0,
                        sales_channel_id: this.newRes.sales_channel_id || null,
                    })
                });

                const data = await resp.json();

                if (data.success) {
                    const r = data.result;
                    this.newRes.total_expected = parseFloat(r.total_final).toFixed(2);
                    this.tariffBreakdown = {
                        nights:        r.nights,
                        avg_per_night: parseFloat(r.average_per_night),
                        rule_name:     r.applied_rule_name ?? null,
                    };
                    this.tariffCalcDone = true;
                } else {
                    this.tariffError = data.error ?? 'Erro no cálculo tarifário.';
                }
            } catch (e) {
                this.tariffError = 'Sem resposta do servidor.';
            } finally {
                this.tariffLoading = false;
                this.$nextTick(() => lucide.createIcons());
            }
        },

        async saveReservation() {
            this.modalLoading = true;
            this.modalError = '';

            if (!this.newRes.room_id || !this.newRes.check_in || !this.newRes.check_out) {
                this.modalError = 'Preencha o quarto, datas de entrada e saída.';
                this.modalLoading = false;
                return;
            }
            if (!this.newRes.guest_id && !this.newRes.guest_name.trim()) {
                this.modalError = 'Informe o hóspede ou digite um nome.';
                this.modalLoading = false;
                return;
            }

            // ⚠️ Mapear campos: o controller espera check_in_expected / check_out_expected
            const payload = {
                room_id:            this.newRes.room_id,
                guest_id:           this.newRes.guest_id || null,
                guest_name:         this.newRes.guest_name || null,
                check_in_expected:  this.newRes.check_in,
                check_out_expected: this.newRes.check_out,
                adults:             this.newRes.adults,
                children:           this.newRes.children,
                sales_channel_id:   this.newRes.sales_channel_id || null,
                notes:              this.newRes.notes || null,
                total_expected:     this.newRes.total_expected || 0,
            };

            try {
                const res = await fetch('{{ route('admin.map.reservations.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const data = await res.json();
                if (!res.ok) {
                    // Mostrar erros de validação do Laravel
                    if (data.errors) {
                        const firstError = Object.values(data.errors)[0];
                        this.modalError = Array.isArray(firstError) ? firstError[0] : firstError;
                    } else {
                        this.modalError = data.error || data.message || 'Erro ao criar reserva.';
                    }
                } else {
                    // Adicionar ao estado local
                    const newR = data.reservation;
                    const guestName = (newR.guest?.first_name ?? '') + ' ' + (newR.guest?.last_name ?? '');
                    this.reservations.push({
                        id:              newR.id,
                        locator:         newR.locator,
                        room_id:         newR.room_id,
                        status:          newR.status,
                        guest_name:      guestName.trim() || this.newRes.guest_name,
                        check_in:        newR.check_in_expected.substring(0, 10),
                        check_out:       newR.check_out_expected.substring(0, 10),
                        adults:          newR.adults,
                        children:        newR.children,
                        total_expected:  newR.total_expected,
                        notes:           newR.notes,
                        sales_channel:   null,
                        channel_icon_html: null,
                    });
                    this.showModal = false;
                    this.showToast('✅', data.message);
                }
            } catch (e) {
                this.modalError = 'Erro de conexão. Tente novamente.';
            } finally {
                this.modalLoading = false;
            }
        },

        // --- Detalhes ---
        openDetail(res) {
            this.detailRes = res;
            this.$nextTick(() => lucide.createIcons());
        },

        async changeStatus(res, newStatus) {
            try {
                const baseUrl = '{{ url('admin/map/reservations') }}';
                const response = await fetch(`${baseUrl}/${res.id}/status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ status: newStatus })
                });

                const data = await response.json();
                if (data.success) {
                    // Atualizar no estado local
                    const idx = this.reservations.findIndex(r => r.id === res.id);
                    if (idx !== -1) {
                        this.reservations[idx].status = newStatus;
                        this.reservations[idx].check_in_realized = data.reservation.check_in_realized;
                        this.reservations[idx].check_out_realized = data.reservation.check_out_realized;
                    }
                    this.detailRes.status = newStatus;
                    this.detailRes.check_in_realized = data.reservation.check_in_realized;
                    this.detailRes.check_out_realized = data.reservation.check_out_realized;
                    this.showToast('✅', data.message);
                    if (newStatus === 'canceled') { this.detailRes = null; }
                }
            } catch (e) {
                this.showToast('❌', 'Erro ao atualizar status.');
            }
        },

        // --- Toast ---
        showToast(icon, message, duration = 3500) {
            this.toast = { show: true, message, icon };
            setTimeout(() => { this.toast.show = false; }, duration);
        },

        // =============================================
        // --- Modal de Personalização de Cores ---
        // =============================================

        async openColorSettings() {
            this.colorSaveMsg = null;
            try {
                const response = await fetch('{{ route('admin.settings.status-colors.index') }}', {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) {
                    // Converte objeto { code: item } para array [{ code, ...item }]
                    this.colorSettingsArr = Object.entries(data.colors).map(([code, item]) => ({
                        code,
                        label:        item.label,
                        bg_color:     item.bg_color,
                        border_color: item.border_color,
                        text_color:   item.text_color,
                    }));
                }
            } catch (e) {
                console.warn('Erro ao carregar cores', e);
            }
            this.showColorModal = true;
            this.$nextTick(() => lucide.createIcons());
        },

        async saveColors() {
            this.colorSaving = true;
            this.colorSaveMsg = null;
            try {
                // Converte array de volta para objeto { code: { label, bg_color, ... } }
                const colorsObj = {};
                this.colorSettingsArr.forEach(item => {
                    colorsObj[item.code] = {
                        label:        item.label,
                        bg_color:     item.bg_color,
                        border_color: item.border_color,
                        text_color:   item.text_color,
                    };
                });

                const response = await fetch('{{ route('admin.settings.status-colors.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ colors: colorsObj })
                });
                const data = await response.json();
                this.colorSaveMsg = data.success ? 'ok' : 'err';
                if (data.success) {
                    this.applyColorsToCSS(colorsObj);
                    this.showToast('🎨', 'Cores salvas! Mapa atualizado.');
                    setTimeout(() => { this.colorSaveMsg = null; }, 3000);
                }
            } catch (e) {
                console.error('saveColors error', e);
                this.colorSaveMsg = 'err';
            } finally {
                this.colorSaving = false;
            }
        },

        async resetColors() {
            if (!confirm('Redefinir para as cores padrão do sistema?')) return;
            this.colorSaving = true;
            try {
                const response = await fetch('{{ route('admin.settings.status-colors.reset') }}', {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                const data = await response.json();
                if (data.success) {
                    // Reconstrói o array com os defaults
                    this.colorSettingsArr = Object.entries(data.colors).map(([code, item]) => ({
                        code,
                        label:        item.label,
                        bg_color:     item.bg_color,
                        border_color: item.border_color,
                        text_color:   item.text_color,
                    }));
                    this.applyColorsToCSS(data.colors);
                    this.showToast('✅', 'Cores redefinidas para o padrão.');
                }
            } catch (e) {
                this.showToast('❌', 'Erro ao redefinir.');
            } finally {
                this.colorSaving = false;
            }
        },

        /**
         * Aplica as cores nas variáveis CSS do :root para atualizar o mapa
         * sem precisar recarregar a página.
         * @param {Object} settings - objeto keyed { code: { bg_color, border_color, text_color } }
         */
        applyColorsToCSS(settings) {
            const root = document.documentElement;
            const codes = ['provisional', 'confirmed', 'checked_in', 'checked_out', 'canceled', 'no_show'];
            codes.forEach(code => {
                const item = settings[code];
                if (!item) return;
                root.style.setProperty(`--res-${code}-bg`,     item.bg_color);
                root.style.setProperty(`--res-${code}-border`, item.border_color);
                root.style.setProperty(`--res-${code}-text`,   item.text_color);
            });
        },
    };
}
</script>
@endpush
@endsection