@extends('layouts.admin')

@section('title', 'Reservas')

@section('breadcrumb')
    <span class="breadcrumb-current">Operacional</span>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Reservas</span>
@endsection

@push('styles')
<style>
/* ═══ RESERVAS — Design Premium ═══ */
.res-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
}
.res-channel-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
    color: #fff;
    vertical-align: middle;
    overflow: hidden;
    flex-shrink: 0;
}
.res-channel-mini svg { width:20px; height:20px; }
.filter-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: none;
}
.filter-panel.is-open { display: block; }
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}
.sort-link:hover { color: var(--color-primary); }
.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.table-action-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.table-action-btn.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
}
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.summary-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
}
</style>
@endpush

@section('content')
@php
    $statusColors = \App\Models\Reservation::$statusColors;
    $statusLabels = \App\Models\Reservation::$statusLabels;

    function sortLink(string $col, string $currentSort, string $currentDir, array $filters): string {
        $dir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc';
        $icon = $currentSort === $col ? ($currentDir === 'asc' ? '↑' : '↓') : '↕';
        $url = request()->fullUrlWithQuery(array_merge($filters, ['sort' => $col, 'direction' => $dir]));
        return "<a href=\"{$url}\" class=\"sort-link\">{$icon}</a>";
    }
@endphp

{{-- ─── PAGE HEADER ─── --}}
<div class="page-header">
    <div>
        <h1 class="page-title">Gestão de Reservas</h1>
        <p class="page-subtitle">{{ $reservations->total() }} reserva{{ $reservations->total() !== 1 ? 's' : '' }} encontrada{{ $reservations->total() !== 1 ? 's' : '' }}</p>
    </div>
    <div class="flex gap-sm">
        <a href="{{ route('admin.map.index') }}" class="btn btn-secondary">
            <i data-lucide="layout-grid" style="width:16px;height:16px;"></i> Mapa
        </a>
        <a href="{{ route('admin.map.index') }}" class="btn btn-primary">
            <i data-lucide="plus" style="width:16px;height:16px;"></i> Nova Reserva
        </a>
    </div>
</div>

{{-- FLASH --}}
@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

{{-- ─── TOOLBAR / BUSCA + FILTROS ─── --}}
<div class="card mb-md" x-data="{ filtersOpen: {{ collect($filters)->filter()->isNotEmpty() ? 'true' : 'false' }} }">
    <div class="card-header" style="padding:12px 16px;">
        <form method="GET" action="{{ route('admin.reservations.index') }}" id="filter-form" class="flex gap-sm" style="flex:1; align-items:center; flex-wrap:wrap;">

            {{-- Manter sort/direction --}}
            <input type="hidden" name="sort"      value="{{ $sort }}">
            <input type="hidden" name="direction" value="{{ $direction }}">

            {{-- Busca rápida --}}
            <div style="flex:1; min-width:220px; max-width:380px; position:relative;">
                <i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--color-text-muted);pointer-events:none;"></i>
                <input type="text" name="search" class="form-input" placeholder="Locator, hóspede, doc, telefone…"
                    value="{{ $filters['search'] ?? '' }}"
                    style="padding-left:34px;">
            </div>

            {{-- Status (multi-select implícito via chips visíveis) --}}
            <select name="status[]" class="form-input" style="min-width:160px;" multiple size="1"
                onchange="this.form.submit()"
                title="Filtrar por status">
                @foreach($statusLabels as $val => $label)
                    <option value="{{ $val }}" {{ in_array($val, (array)($filters['status'] ?? [])) ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>

            <button type="submit" class="btn btn-primary" style="white-space:nowrap;">
                <i data-lucide="search" style="width:14px;height:14px;"></i> Buscar
            </button>

            {{-- Toggle filtros avançados --}}
            <button type="button" class="btn btn-secondary"
                @click="filtersOpen = !filtersOpen"
                style="white-space:nowrap;">
                <i data-lucide="sliders-horizontal" style="width:14px;height:14px;"></i>
                Filtros
                @if(collect($filters)->except(['search','status','sort','direction'])->filter()->isNotEmpty())
                    <span style="background:#4E86E8;color:#fff;border-radius:100px;padding:1px 6px;font-size:10px;margin-left:4px;">
                        {{ collect($filters)->except(['search','status','sort','direction'])->filter()->count() }}
                    </span>
                @endif
            </button>

            @if(collect($filters)->filter()->isNotEmpty())
                <a href="{{ route('admin.reservations.index') }}" class="btn btn-secondary" style="white-space:nowrap;">
                    <i data-lucide="x" style="width:14px;height:14px;"></i> Limpar
                </a>
            @endif
        </form>
    </div>

    {{-- ─── Painel de filtros avançados ─── --}}
    <div class="filter-panel" :class="{ 'is-open': filtersOpen }">
        <form method="GET" action="{{ route('admin.reservations.index') }}">
            <input type="hidden" name="sort"      value="{{ $sort }}">
            <input type="hidden" name="direction" value="{{ $direction }}">
            <input type="hidden" name="search"    value="{{ $filters['search'] ?? '' }}">

            <div class="filter-grid">
                {{-- UH --}}
                <div>
                    <label class="form-label">UH / Quarto</label>
                    <select name="room_id" class="form-input">
                        <option value="">Todos</option>
                        @foreach($rooms as $room)
                            <option value="{{ $room->id }}" {{ ($filters['room_id'] ?? '') == $room->id ? 'selected' : '' }}>
                                {{ $room->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Categoria --}}
                <div>
                    <label class="form-label">Categoria</label>
                    <select name="room_category_id" class="form-input">
                        <option value="">Todas</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ ($filters['room_category_id'] ?? '') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Canal --}}
                <div>
                    <label class="form-label">Canal de Venda</label>
                    <select name="sales_channel_id" class="form-input">
                        <option value="">Todos</option>
                        @foreach($salesChannels as $ch)
                            <option value="{{ $ch->id }}" {{ ($filters['sales_channel_id'] ?? '') == $ch->id ? 'selected' : '' }}>
                                {{ $ch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Check-in de --}}
                <div>
                    <label class="form-label">Check-in de</label>
                    <input type="date" name="checkin_from" class="form-input" value="{{ $filters['checkin_from'] ?? '' }}">
                </div>

                {{-- Check-in até --}}
                <div>
                    <label class="form-label">Check-in até</label>
                    <input type="date" name="checkin_to" class="form-input" value="{{ $filters['checkin_to'] ?? '' }}">
                </div>

                {{-- Check-out de --}}
                <div>
                    <label class="form-label">Check-out de</label>
                    <input type="date" name="checkout_from" class="form-input" value="{{ $filters['checkout_from'] ?? '' }}">
                </div>

                {{-- Check-out até --}}
                <div>
                    <label class="form-label">Check-out até</label>
                    <input type="date" name="checkout_to" class="form-input" value="{{ $filters['checkout_to'] ?? '' }}">
                </div>
            </div>

            <div class="flex gap-sm mt-md">
                <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
                <a href="{{ route('admin.reservations.index') }}" class="btn btn-secondary">Limpar</a>
            </div>
        </form>
    </div>
</div>

{{-- ─── TABELA PRINCIPAL ─── --}}
<div class="card">
    <div class="table-wrapper">
        <table class="table" style="font-size:13px;">
            <thead>
                <tr>
                    <th style="min-width:110px;">
                        Reserva
                        {!! sortLink('locator', $sort, $direction, $filters) !!}
                    </th>
                    <th style="min-width:160px;">Hóspede</th>
                    <th>UH</th>
                    <th>Categoria</th>
                    <th style="min-width:90px;">
                        Check-in
                        {!! sortLink('check_in_expected', $sort, $direction, $filters) !!}
                    </th>
                    <th style="min-width:90px;">
                        Check-out
                        {!! sortLink('check_out_expected', $sort, $direction, $filters) !!}
                    </th>
                    <th class="text-center">Pax</th>
                    <th>Canal</th>
                    <th>
                        Status
                        {!! sortLink('status', $sort, $direction, $filters) !!}
                    </th>
                    <th class="text-right">
                        Total
                        {!! sortLink('total_expected', $sort, $direction, $filters) !!}
                    </th>
                    <th class="text-right">Ações</th>
                </tr>
            </thead>
            <tbody>
                @forelse($reservations as $res)
                @php
                    $sc     = $statusColors[$res->status] ?? ['bg'=>'#e2e8f0','text'=>'#475569','border'=>'#cbd5e1'];
                    $nights = $res->nights;
                @endphp
                <tr style="vertical-align:middle;">
                    {{-- Locator --}}
                    <td>
                        <a href="{{ route('admin.reservations.show', $res) }}"
                           style="font-weight:700;color:var(--color-primary);text-decoration:none;font-size:12px;letter-spacing:0.5px;">
                            {{ $res->locator }}
                        </a>
                        <br>
                        <span style="font-size:10px;color:var(--color-text-muted);">{{ $nights }} diária{{ $nights !== 1 ? 's' : '' }}</span>
                    </td>

                    {{-- Hóspede --}}
                    <td>
                        <span style="font-weight:600;">{{ $res->guest?->full_name ?? '—' }}</span>
                        @if($res->guest?->document_number)
                            <br><span style="font-size:10px;color:var(--color-text-muted);">{{ strtoupper($res->guest->document_type ?? '') }}: {{ $res->guest->document_number }}</span>
                        @endif
                    </td>

                    {{-- UH --}}
                    <td style="font-weight:600;font-size:13px;">{{ $res->room?->name ?? '—' }}</td>

                    {{-- Categoria --}}
                    <td style="font-size:11px;color:var(--color-text-secondary);">{{ $res->category?->name ?? '—' }}</td>

                    {{-- Check-in --}}
                    <td style="white-space:nowrap;">
                        {{ $res->check_in_expected->format('d/m/Y') }}
                        @if($res->check_in_realized)
                            <br><span style="font-size:10px;color:#59B39E;font-weight:600;">✓ {{ $res->check_in_realized->format('H:i') }}</span>
                        @endif
                    </td>

                    {{-- Check-out --}}
                    <td style="white-space:nowrap;">
                        {{ $res->check_out_expected->format('d/m/Y') }}
                        @if($res->check_out_realized)
                            <br><span style="font-size:10px;color:#4E86E8;font-weight:600;">✓ {{ $res->check_out_realized->format('H:i') }}</span>
                        @endif
                    </td>

                    {{-- Pax --}}
                    <td class="text-center" style="white-space:nowrap;">
                        <span title="{{ $res->adults }} adulto(s){{ $res->children ? ', ' . $res->children . ' criança(s)' : '' }}">
                            👤 {{ $res->adults }}
                            @if($res->children) +{{ $res->children }}🧒 @endif
                        </span>
                    </td>

                    {{-- Canal --}}
                    <td>
                        @if($res->salesChannel)
                            <div style="display:flex;align-items:center;gap:6px;">
                                @if($res->salesChannel->icon_svg)
                                    <span class="res-channel-mini"
                                        style="background:{{ $res->salesChannel->badge_color ?? '#64748b' }};">
                                        {!! $res->salesChannel->icon_svg !!}
                                    </span>
                                @endif
                                <span style="font-size:11px;">{{ $res->salesChannel->short_name ?? $res->salesChannel->name }}</span>
                            </div>
                        @else
                            <span style="color:var(--color-text-muted);font-size:11px;">Direto</span>
                        @endif
                    </td>

                    {{-- Status --}}
                    <td>
                        <span class="res-status-badge"
                              style="background:{{ $sc['bg'] }};color:{{ $sc['text'] }};border-color:{{ $sc['border'] }};">
                            {{ $res->status_label }}
                        </span>
                    </td>

                    {{-- Total --}}
                    <td class="text-right" style="white-space:nowrap;">
                        <span style="font-weight:700;">R$ {{ number_format($res->total_expected, 2, ',', '.') }}</span>
                        @if($res->balance > 0)
                            <br><span style="font-size:10px;color:#ef4444;">Saldo: R$ {{ number_format($res->balance, 2, ',', '.') }}</span>
                        @elseif($res->total_paid > 0)
                            <br><span style="font-size:10px;color:#59B39E;">Pago</span>
                        @endif
                    </td>

                    {{-- Ações --}}
                    <td class="text-right">
                        <div class="flex gap-xs" style="justify-content:flex-end; flex-wrap:nowrap;">
                            {{-- Ver --}}
                            <a href="{{ route('admin.reservations.show', $res) }}"
                               class="table-action-btn" title="Ver reserva">
                                <i data-lucide="eye" style="width:13px;height:13px;"></i>
                            </a>

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

                            {{-- Check-in --}}
                            @if($res->canCheckIn())
                            <a href="{{ route('admin.reservations.checkin', $res) }}"
                               class="table-action-btn" title="Fazer check-in"
                               style="background:#EBF4FF;border-color:#4E86E8;color:#4E86E8;">
                                <i data-lucide="log-in" style="width:13px;height:13px;"></i>
                            </a>
                            @endif

                            {{-- Check-out --}}
                            @if($res->canCheckOut())
                            <a href="{{ route('admin.reservations.checkout', $res) }}"
                               class="table-action-btn" title="Fazer check-out"
                               style="background:#F0FDF4;border-color:#59B39E;color:#59B39E;">
                                <i data-lucide="log-out" style="width:13px;height:13px;"></i>
                            </a>
                            @endif

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

                            {{-- Cancelar --}}
                            @if($res->canCancel())
                            <button type="button"
                                class="table-action-btn danger"
                                title="Cancelar reserva"
                                onclick="confirmCancel('{{ $res->id }}', '{{ $res->locator }}')"
                            >
                                <i data-lucide="x" style="width:13px;height:13px;"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="11">
                        <div class="empty-state">
                            <div class="empty-state-icon">
                                <i data-lucide="calendar-x-2" style="width:32px;height:32px;color:var(--color-primary);"></i>
                            </div>
                            <h3 style="margin:0 0 8px;font-size:17px;font-weight:700;">Nenhuma reserva encontrada</h3>
                            <p style="color:var(--color-text-secondary);margin:0 0 20px;max-width:360px;">
                                @if(collect($filters)->filter()->isNotEmpty())
                                    Tente ajustar os filtros aplicados ou
                                    <a href="{{ route('admin.reservations.index') }}" style="color:var(--color-primary);">limpe a busca</a>.
                                @else
                                    Nenhuma reserva registrada ainda. Crie uma nova pelo mapa ou pelo botão acima.
                                @endif
                            </p>
                            <a href="{{ route('admin.map.index') }}" class="btn btn-primary">
                                <i data-lucide="layout-grid" style="width:15px;height:15px;"></i>
                                Ir para o Mapa
                            </a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Paginação --}}
    @if($reservations->hasPages())
    <div class="card-footer" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
        <span style="font-size:12px;color:var(--color-text-muted);">
            Mostrando {{ $reservations->firstItem() }}–{{ $reservations->lastItem() }} de {{ $reservations->total() }}
        </span>
        {{ $reservations->links() }}
    </div>
    @endif
</div>

{{-- ─── MODAL DE 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
            </h3>
        </div>
        <form id="cancel-form" method="POST" style="padding:20px 24px;">
            @csrf
            @method('PATCH')
            <p id="cancel-msg" style="margin:0 0 16px;color:var(--color-text-secondary);"></p>
            <label class="form-label">Motivo do cancelamento (opcional)</label>
            <textarea name="cancellation_reason" class="form-input" rows="3"
                placeholder="Ex: Solicitado pelo hóspede, conflito de agenda…"></textarea>
            <div class="flex gap-sm mt-md" style="justify-content:flex-end;">
                <button type="button" class="btn btn-secondary" onclick="closeCancelModal()">Voltar</button>
                <button type="submit" class="btn" style="background:#ef4444;color:#fff;border:none;">
                    <i data-lucide="x-circle" style="width:14px;height:14px;"></i> Confirmar Cancelamento
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function confirmCancel(id, locator) {
    document.getElementById('cancel-msg').textContent = `Tem certeza que deseja cancelar a reserva ${locator}? Esta ação não pode ser desfeita facilmente.`;
    document.getElementById('cancel-form').action = `/admin/reservations/${id}/cancel`;
    document.getElementById('cancel-modal').style.display = 'flex';
    lucide.createIcons();
}
function closeCancelModal() {
    document.getElementById('cancel-modal').style.display = 'none';
}
</script>
@endpush