@extends('layouts.admin')

@section('title', 'Reserva ' . $reservation->locator)

@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.reservations.index') }}">Reservas</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{{ $reservation->locator }}</span>
@endsection

@push('styles')
<style>
.res-show-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@media(max-width:900px) { .res-show-grid { grid-template-columns:1fr; } }

.bloco {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}
.bloco-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bloco-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bloco-body { padding: 20px; }

.info-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.info-row:last-child { margin-bottom: 0; }
.info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 130px;
    flex-shrink: 0;
}
.info-value {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: 500;
}
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media(max-width:600px) { .info-grid { grid-template-columns:1fr; } }

.status-mega {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid;
}
.action-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-primary);
    transition: all 0.15s;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.action-sidebar-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.action-sidebar-btn.primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.action-sidebar-btn.primary:hover { filter: brightness(0.92); }
.action-sidebar-btn.danger {
    color: #ef4444;
    border-color: #fca5a5;
}
.action-sidebar-btn.danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
}
.companion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.companion-row:last-child { border-bottom: none; }
.timeline-item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
</style>
@endpush

@section('content')
@php
    $sc     = \App\Models\Reservation::$statusColors[$reservation->status] ?? ['bg'=>'#e2e8f0','text'=>'#475569','border'=>'#cbd5e1'];
    $nights = $reservation->nights;
@endphp

{{-- PAGE HEADER --}}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;">
    <div>
        <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
            <h1 class="page-title" style="margin:0;">{{ $reservation->locator }}</h1>
            <span class="status-mega"
                  style="background:{{ $sc['bg'] }};color:{{ $sc['text'] }};border-color:{{ $sc['border'] }};">
                {{ $reservation->status_label }}
            </span>
        </div>
        <p class="page-subtitle" style="margin-top:6px;">
            {{ $reservation->guest?->full_name }} &bull;
            {{ $reservation->check_in_expected->format('d/m/Y') }} → {{ $reservation->check_out_expected->format('d/m/Y') }}
            &bull; {{ $nights }} diária{{ $nights !== 1 ? 's' : '' }}
            &bull; UH {{ $reservation->room?->name ?? '—' }}
        </p>
    </div>
    {{-- Botão Financeiro (Fase 4) --}}
    @can('financial.view')
    <a href="{{ route('admin.reservations.financial.show', $reservation) }}"
       style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border-radius:10px;font-size:.85rem;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgba(22,163,74,.3);transition:opacity .15s;"
       onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
        <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        Financeiro
    </a>
    @endcan
</div>


@if(session('success'))
    <div class="alert alert-success mb-md">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger mb-md">{{ session('error') }}</div>
@endif

<div class="res-show-grid">

    {{-- ═══ COLUNA PRINCIPAL ═══ --}}
    <div>

        {{-- BLOCO 1: Dados principais --}}
        <div class="bloco">
            <div class="bloco-header">
                <h2><i data-lucide="info" style="width:14px;height:14px;"></i> Dados da Reserva</h2>
                @if($reservation->canEdit())
                <a href="{{ route('admin.reservations.edit', $reservation) }}" class="btn btn-sm btn-secondary">
                    <i data-lucide="pencil" style="width:12px;height:12px;"></i> Editar
                </a>
                @endif
            </div>
            <div class="bloco-body">
                <div class="info-grid">
                    <div>
                        <div class="info-row"><span class="info-label">Locator</span><span class="info-value" style="font-weight:800;font-size:15px;">{{ $reservation->locator }}</span></div>
                        <div class="info-row"><span class="info-label">Check-in Previsto</span><span class="info-value">{{ $reservation->check_in_expected->format('d/m/Y') }}</span></div>
                        <div class="info-row"><span class="info-label">Check-out Previsto</span><span class="info-value">{{ $reservation->check_out_expected->format('d/m/Y') }}</span></div>
                        <div class="info-row"><span class="info-label">Diárias</span><span class="info-value">{{ $nights }}</span></div>
                        @if($reservation->check_in_realized)
                        <div class="info-row"><span class="info-label">Check-in Real</span><span class="info-value" style="color:#59B39E;font-weight:700;">✓ {{ $reservation->check_in_realized->format('d/m/Y H:i') }}</span></div>
                        @endif
                        @if($reservation->check_out_realized)
                        <div class="info-row"><span class="info-label">Check-out Real</span><span class="info-value" style="color:#4E86E8;font-weight:700;">✓ {{ $reservation->check_out_realized->format('d/m/Y H:i') }}</span></div>
                        @endif
                    </div>
                    <div>
                        <div class="info-row"><span class="info-label">UH</span><span class="info-value" style="font-weight:700;">{{ $reservation->room?->name ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Categoria</span><span class="info-value">{{ $reservation->category?->name ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Canal de Venda</span>
                            <span class="info-value">
                                @if($reservation->salesChannel)
                                    {{ $reservation->salesChannel->name }}
                                @else
                                    Direto / Balcão
                                @endif
                            </span>
                        </div>
                        <div class="info-row"><span class="info-label">Adultos</span><span class="info-value">{{ $reservation->adults }}</span></div>
                        <div class="info-row"><span class="info-label">Crianças</span><span class="info-value">{{ $reservation->children ?: '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Café da Manhã</span>
                            <span class="info-value">{{ $reservation->breakfast_included ? '✓ Incluso' : 'Não incluso' }}</span>
                        </div>
                    </div>
                </div>
                @if($reservation->notes)
                <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--color-border-light);">
                    <div class="info-label" style="margin-bottom:6px;">Observações</div>
                    <p style="margin:0;font-size:13px;color:var(--color-text-secondary);">{{ $reservation->notes }}</p>
                </div>
                @endif
                @if($reservation->operational_notes)
                <div style="margin-top:12px;padding:10px 14px;background:#FFF8F0;border-radius:8px;border:1px solid #FDE68A;">
                    <div style="font-size:11px;font-weight:700;color:#B45309;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Notas Operacionais</div>
                    <p style="margin:0;font-size:12px;color:#92400E;">{{ $reservation->operational_notes }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- BLOCO 2: Hóspede Principal --}}
        <div class="bloco">
            <div class="bloco-header">
                <h2><i data-lucide="user" style="width:14px;height:14px;"></i> Hóspede Principal</h2>
                @if($reservation->guest)
                <a href="{{ route('admin.registers.guests.edit', $reservation->guest) }}" class="btn btn-sm btn-secondary">
                    <i data-lucide="external-link" style="width:12px;height:12px;"></i> Ficha
                </a>
                @endif
            </div>
            <div class="bloco-body">
                @if($reservation->guest)
                <div class="info-grid">
                    <div>
                        <div class="info-row"><span class="info-label">Nome</span><span class="info-value" style="font-weight:700;">{{ $reservation->guest->full_name }}</span></div>
                        <div class="info-row"><span class="info-label">Documento</span><span class="info-value">{{ strtoupper($reservation->guest->document_type ?? '') }}: {{ $reservation->guest->document_number ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Telefone</span><span class="info-value">{{ $reservation->guest->phone ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">E-mail</span><span class="info-value">{{ $reservation->guest->email ?? '—' }}</span></div>
                    </div>
                    <div>
                        <div class="info-row"><span class="info-label">Nascimento</span><span class="info-value">{{ $reservation->guest->birth_date?->format('d/m/Y') ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Nacionalidade</span><span class="info-value">{{ $reservation->guest->nationality ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Profissão</span><span class="info-value">{{ $reservation->guest->profession ?? '—' }}</span></div>
                        <div class="info-row"><span class="info-label">Gênero</span><span class="info-value">{{ match($reservation->guest->gender ?? '') { 'male' => 'Masculino', 'female' => 'Feminino', 'other' => 'Outro', default => '—' } }}</span></div>
                    </div>
                </div>
                @if($reservation->guest->address)
                <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border-light);">
                    <div class="info-label" style="margin-bottom:6px;">Endereço</div>
                    <p style="margin:0;font-size:13px;color:var(--color-text-secondary);">
                        {{ $reservation->guest->address }}{{ $reservation->guest->address_number ? ', ' . $reservation->guest->address_number : '' }}
                        {{ $reservation->guest->address_complement ? '(' . $reservation->guest->address_complement . ')' : '' }}
                        — {{ $reservation->guest->neighborhood }} — {{ $reservation->guest->city }}/{{ $reservation->guest->state }}
                        {{ $reservation->guest->zip_code ? ' — CEP: ' . $reservation->guest->zip_code : '' }}
                    </p>
                </div>
                @endif
                @else
                <p style="color:var(--color-text-muted);margin:0;">Hóspede não vinculado.</p>
                @endif
            </div>
        </div>

        {{-- BLOCO 3: Acompanhantes --}}
        <div class="bloco" x-data="{ addForm: false }">
            <div class="bloco-header">
                <h2><i data-lucide="users" style="width:14px;height:14px;"></i> Acompanhantes ({{ $reservation->companions->count() }})</h2>
                @if($reservation->canEdit())
                <button type="button" class="btn btn-sm btn-secondary" @click="addForm = !addForm">
                    <i data-lucide="plus" style="width:12px;height:12px;"></i> Adicionar
                </button>
                @endif
            </div>
            <div class="bloco-body">
                {{-- Listagem --}}
                @forelse($reservation->companions as $comp)
                <div class="companion-row">
                    <div>
                        <div style="font-weight:600;font-size:13px;">{{ $comp->full_name }}</div>
                        <div style="font-size:11px;color:var(--color-text-muted);">
                            {{ $comp->kinship ? $comp->kinship . ' · ' : '' }}
                            {{ $comp->document_number ? strtoupper($comp->document_type ?? 'doc') . ': ' . $comp->document_number : '' }}
                            {{ $comp->birth_date ? ' · ' . $comp->birth_date->format('d/m/Y') : '' }}
                        </div>
                    </div>
                    @if($reservation->canEdit())
                    <form method="POST" action="{{ route('admin.reservations.companions.destroy', [$reservation, $comp]) }}"
                          onsubmit="return confirm('Remover este acompanhante?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-secondary" style="color:#ef4444;">
                            <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                        </button>
                    </form>
                    @endif
                </div>
                @empty
                <p style="color:var(--color-text-muted);margin:0;font-size:13px;">Nenhum acompanhante registrado.</p>
                @endforelse

                {{-- Formulário de adição --}}
                <div x-show="addForm" x-cloak style="margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border-light);">
                    <form method="POST" action="{{ route('admin.reservations.companions.store', $reservation) }}">
                        @csrf
                        <div class="info-grid" style="gap:10px;margin-bottom:10px;">
                            <div>
                                <label class="form-label">Nome *</label>
                                <input type="text" name="first_name" class="form-input" required>
                            </div>
                            <div>
                                <label class="form-label">Sobrenome</label>
                                <input type="text" name="last_name" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Documento</label>
                                <input type="text" name="document_number" class="form-input" placeholder="CPF, RG…">
                            </div>
                            <div>
                                <label class="form-label">Data de Nascimento</label>
                                <input type="date" name="birth_date" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Parentesco</label>
                                <input type="text" name="kinship" class="form-input" placeholder="Cônjuge, filho(a)…">
                            </div>
                            <div>
                                <label class="form-label">Gênero</label>
                                <select name="gender" class="form-input">
                                    <option value="">Não informado</option>
                                    <option value="male">Masculino</option>
                                    <option value="female">Feminino</option>
                                    <option value="other">Outro</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex gap-sm">
                            <button type="submit" class="btn btn-primary btn-sm">Salvar</button>
                            <button type="button" class="btn btn-secondary btn-sm" @click="addForm = false">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- BLOCO 4: Histórico recente (preview) --}}
        <div class="bloco">
            <div class="bloco-header">
                <h2><i data-lucide="clock" style="width:14px;height:14px;"></i> Histórico</h2>
                <a href="{{ route('admin.reservations.history', $reservation) }}" class="btn btn-sm btn-secondary">
                    Ver tudo
                </a>
            </div>
            <div class="bloco-body" style="padding:16px 20px;">
                @forelse($reservation->activityLogs->take(5) as $log)
                <div class="timeline-item">
                    <div class="timeline-dot" style="color:var(--color-primary);">
                        <i data-lucide="{{ $log->icon }}" style="width:13px;height:13px;"></i>
                    </div>
                    <div style="flex:1;padding-top:6px;">
                        <div style="font-size:12px;font-weight:600;">{{ $log->description }}</div>
                        <div style="font-size:11px;color:var(--color-text-muted);">
                            {{ $log->user?->name ?? 'Sistema' }} &bull; {{ $log->created_at->format('d/m/Y H:i') }}
                        </div>
                    </div>
                </div>
                @empty
                <p style="color:var(--color-text-muted);margin:0;font-size:13px;">Nenhum histórico registrado.</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- ═══ SIDEBAR DE AÇÕES ═══ --}}
    <div>
        {{-- Ações Rápidas --}}
        <div class="bloco" style="margin-bottom:16px;">
            <div class="bloco-header">
                <h2><i data-lucide="zap" style="width:14px;height:14px;"></i> Ações Rápidas</h2>
            </div>
            <div class="bloco-body" style="padding:14px;display:flex;flex-direction:column;gap:8px;">

                @if($reservation->canCheckIn())
                <a href="{{ route('admin.reservations.checkin', $reservation) }}"
                   class="action-sidebar-btn primary">
                    <i data-lucide="log-in" style="width:16px;height:16px;"></i>
                    Realizar Check-in
                </a>
                @endif

                @if($reservation->canCheckOut())
                <a href="{{ route('admin.reservations.checkout', $reservation) }}"
                   class="action-sidebar-btn primary" style="background:#59B39E;">
                    <i data-lucide="log-out" style="width:16px;height:16px;"></i>
                    Realizar Check-out
                </a>
                @endif

                @if($reservation->canEdit())
                <a href="{{ route('admin.reservations.edit', $reservation) }}"
                   class="action-sidebar-btn">
                    <i data-lucide="pencil" style="width:16px;height:16px;"></i>
                    Editar Reserva
                </a>
                @endif

                <a href="{{ route('admin.reservations.history', $reservation) }}"
                   class="action-sidebar-btn">
                    <i data-lucide="clock" style="width:16px;height:16px;"></i>
                    Ver Histórico Completo
                </a>

                <a href="{{ route('admin.map.index') }}" class="action-sidebar-btn">
                    <i data-lucide="layout-grid" style="width:16px;height:16px;"></i>
                    Ver no Mapa
                </a>

                <a href="{{ route('admin.reservations.fnrh.show', $reservation) }}"
                   class="action-sidebar-btn" style="border-color:#e0c084;color:#92400E;background:#FFFBEB;">
                    <i data-lucide="file-text" style="width:16px;height:16px;"></i>
                    Ficha FNRH / PDF
                </a>

                @if($reservation->canCancel())
                <button type="button"
                    class="action-sidebar-btn danger"
                    onclick="document.getElementById('cancel-modal').style.display='flex'">
                    <i data-lucide="x-circle" style="width:16px;height:16px;"></i>
                    Cancelar Reserva
                </button>
                @endif

                {{-- CHECK-IN DIGITAL (Fase 17) --}}
                @if(in_array($reservation->status, ['provisional', 'confirmed']))
                <div style="border-top:1px solid var(--color-border-light);margin-top:4px;padding-top:10px;">
                    <button type="button" id="btn-checkin-digital"
                        class="action-sidebar-btn"
                        style="background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:#6366f1;"
                        onclick="gerarLinkCheckin()">
                        <i data-lucide="smartphone" style="width:16px;height:16px;"></i>
                        @if($reservation->online_checkin_at)
                            ✅ Check-in Digital Feito
                        @else
                            📲 Enviar Link Check-in
                        @endif
                    </button>
                    @if($reservation->online_checkin_at)
                    <div style="margin-top:6px;padding:8px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.75rem;color:#166534;">
                        ✓ Formulário enviado em {{ $reservation->online_checkin_at->format('d/m/Y H:i') }}
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>

        {{-- Financeiro Resumido --}}
        <div class="bloco">
            <div class="bloco-header">
                <h2><i data-lucide="dollar-sign" style="width:14px;height:14px;"></i> Financeiro</h2>
            </div>
            <div class="bloco-body">
                <div class="info-row"><span class="info-label">Valor Total</span><span class="info-value" style="font-weight:800;font-size:15px;">R$ {{ number_format($reservation->total_expected, 2, ',', '.') }}</span></div>
                <div class="info-row"><span class="info-label">Pago</span><span class="info-value" style="color:#59B39E;font-weight:700;">R$ {{ number_format($reservation->total_paid, 2, ',', '.') }}</span></div>
                <div class="info-row" style="padding-top:10px;border-top:1px solid var(--color-border-light);margin-top:2px;">
                    <span class="info-label">Saldo</span>
                    <span class="info-value" style="font-weight:800;color:{{ $reservation->balance > 0 ? '#ef4444' : '#59B39E' }};">
                        R$ {{ number_format($reservation->balance, 2, ',', '.') }}
                    </span>
                </div>
                @if($reservation->breakfast_included)
                <div style="margin-top:10px;padding:8px 12px;background:#F0FDF4;border-radius:8px;font-size:12px;color:#166534;">
                    ☕ Café da manhã incluso
                </div>
                @endif
                <div style="margin-top:12px;">
                    <div class="info-label" style="margin-bottom:4px;">Diárias</div>
                    <div style="font-size:13px;">{{ $nights }} × R$ {{ $nights > 0 ? number_format($reservation->total_expected / $nights, 2, ',', '.') : '0,00' }}/noite</div>
                </div>
            </div>
        </div>

        {{-- Responsáveis --}}
        @if($reservation->checkedInBy || $reservation->checkedOutBy || $reservation->canceledBy)
        <div class="bloco" style="margin-top:16px;">
            <div class="bloco-header"><h2><i data-lucide="shield-check" style="width:14px;height:14px;"></i> Responsáveis</h2></div>
            <div class="bloco-body">
                @if($reservation->checkedInBy)
                <div class="info-row"><span class="info-label">Check-in por</span><span class="info-value">{{ $reservation->checkedInBy->name }}</span></div>
                @endif
                @if($reservation->checkedOutBy)
                <div class="info-row"><span class="info-label">Check-out por</span><span class="info-value">{{ $reservation->checkedOutBy->name }}</span></div>
                @endif
                @if($reservation->canceledBy)
                <div class="info-row"><span class="info-label">Cancelado por</span><span class="info-value" style="color:#ef4444;">{{ $reservation->canceledBy->name }}</span></div>
                <div class="info-row"><span class="info-label">Motivo</span><span class="info-value">{{ $reservation->cancellation_reason ?: '—' }}</span></div>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>

{{-- MODAL CANCELAMENTO --}}
<div id="cancel-modal" style="display:none;position:fixed;inset:0;background:rgba(47,59,82,0.45);z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);">
    <div style="background:#fff;border-radius:16px;width:100%;max-width:440px;box-shadow:0 24px 64px rgba(47,59,82,0.25);">
        <div style="padding:20px 24px;border-bottom:1px solid var(--color-border);">
            <h3 style="margin:0;font-size:16px;display:flex;align-items:center;gap:8px;">
                <i data-lucide="alert-triangle" style="width:20px;height:20px;color:#ef4444;"></i>
                Cancelar Reserva {{ $reservation->locator }}
            </h3>
        </div>
        <form method="POST" action="{{ route('admin.reservations.cancel', $reservation) }}" style="padding:20px 24px;">
            @csrf @method('PATCH')
            <p style="margin:0 0 16px;color:var(--color-text-secondary);font-size:13px;">Esta ação cancelará a reserva. O quarto ficará disponível novamente.</p>
            <label class="form-label">Motivo do cancelamento</label>
            <textarea name="cancellation_reason" class="form-input" rows="3"
                placeholder="Ex: Solicitado pelo hóspede…"></textarea>
            <div class="flex gap-sm mt-md" style="justify-content:flex-end;">
                <button type="button" class="btn btn-secondary"
                    onclick="document.getElementById('cancel-modal').style.display='none'">Voltar</button>
                <button type="submit" class="btn" style="background:#ef4444;color:#fff;border:none;">
                    Confirmar Cancelamento
                </button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL CHECK-IN DIGITAL --}}
<div id="checkin-modal" style="display:none;position:fixed;inset:0;background:rgba(47,59,82,0.45);z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);">
    <div style="background:#fff;border-radius:16px;width:100%;max-width:480px;box-shadow:0 24px 64px rgba(0,0,0,.2);overflow:hidden;">
        <div style="background:linear-gradient(135deg,#6366f1,#8b5cf6);padding:20px 24px;color:#fff;">
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <div>
                    <div style="font-size:1.1rem;font-weight:800;margin-bottom:4px;">📲 Link de Check-in Digital</div>
                    <div style="font-size:.82rem;opacity:.85;">Reserva #{{ $reservation->locator }}</div>
                </div>
                <button onclick="document.getElementById('checkin-modal').style.display='none'"
                    style="background:rgba(255,255,255,.2);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;">✕</button>
            </div>
        </div>
        <div style="padding:24px;">
            <p style="font-size:.85rem;color:#64748b;margin-bottom:16px;">
                Compartilhe este link com o hóspede via WhatsApp, e-mail ou SMS. Ele poderá preencher os dados antes da chegada.
            </p>
            <div id="checkin-link-box"
                 style="background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-size:.8rem;color:#334155;word-break:break-all;font-family:monospace;margin-bottom:16px;">
                Gerando link...
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <button onclick="copiarLink()" id="btn-copy"
                    style="flex:1;padding:10px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:.83rem;font-weight:700;cursor:pointer;">
                    📋 Copiar Link
                </button>
                <button onclick="abrirWhatsapp()" id="btn-whatsapp"
                    style="flex:1;padding:10px;background:#25D366;color:#fff;border:none;border-radius:8px;font-size:.83rem;font-weight:700;cursor:pointer;">
                    💬 WhatsApp
                </button>
                <a id="btn-open-link" href="#" target="_blank"
                    style="flex:1;padding:10px;background:#f1f5f9;color:#334155;border:none;border-radius:8px;font-size:.83rem;font-weight:700;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;">
                    🔗 Abrir
                </a>
            </div>
            <p id="copy-feedback" style="text-align:center;color:#22c55e;font-size:.78rem;margin-top:10px;display:none;">✓ Link copiado!</p>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let _checkinLink = null;

function gerarLinkCheckin() {
    const modal = document.getElementById('checkin-modal');
    modal.style.display = 'flex';

    if (_checkinLink) {
        document.getElementById('checkin-link-box').textContent = _checkinLink;
        document.getElementById('btn-open-link').href = _checkinLink;
        return;
    }

    fetch('{{ route("admin.reservations.checkin-link", $reservation) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        }
    })
    .then(r => r.json())
    .then(data => {
        _checkinLink = data.link;
        document.getElementById('checkin-link-box').textContent = data.link;
        document.getElementById('btn-open-link').href = data.link;
    })
    .catch(() => {
        document.getElementById('checkin-link-box').textContent = 'Erro ao gerar link. Tente novamente.';
    });
}

function copiarLink() {
    if (!_checkinLink) return;
    navigator.clipboard.writeText(_checkinLink).then(() => {
        document.getElementById('copy-feedback').style.display = 'block';
        setTimeout(() => document.getElementById('copy-feedback').style.display = 'none', 2500);
    });
}

function abrirWhatsapp() {
    if (!_checkinLink) return;
    const guest = '{{ $reservation->guest?->full_name ?? "hóspede" }}';
    const hotel = '{{ $reservation->hotel->name }}';
    const date  = '{{ $reservation->check_in_expected->format("d/m/Y") }}';
    const msg = encodeURIComponent(`Olá, ${guest}! 😊\n\nSeu check-in no *${hotel}* está previsto para *${date}*.\n\nAcelere sua entrada preenchendo o formulário online antes de chegar:\n👉 ${_checkinLink}\n\nObrigado e até breve! 🏨`);
    window.open(`https://api.whatsapp.com/send?text=${msg}`, '_blank');
}
</script>
@endpush