@extends('layouts.admin')

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

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

@push('styles')
<style>
.fnrh-page {
    max-width: 820px;
    margin: 0 auto;
}
.fnrh-paper {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(47,59,82,0.08);
}
.fnrh-header {
    background: linear-gradient(135deg, #2F3B52 0%, #3D4F6B 100%);
    color: #fff;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.fnrh-hotel-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.fnrh-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
}
.fnrh-badge .label { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }
.fnrh-badge .value { font-size: 16px; font-weight: 800; }

.fnrh-section {
    padding: 22px 32px;
    border-bottom: 1px solid var(--color-border-light);
}
.fnrh-section:last-child { border-bottom: none; }
.fnrh-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fnrh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.fnrh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fnrh-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fnrh-field {}
.fnrh-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.fnrh-field .val {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 4px;
    min-height: 20px;
}
.companion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.companion-table th {
    background: var(--color-bg);
    padding: 8px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
}
.companion-table td {
    padding: 8px 10px;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
}
.fnrh-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 28px 32px;
}
.sig-box {
    border-top: 2px solid var(--color-border);
    padding-top: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
}
.fnrh-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}
@media print {
    .no-print { display: none !important; }
    .fnrh-paper { box-shadow: none; border: none; }
    body { background: #fff !important; }
    .sidebar, .app-header, .page-header { display: none !important; }
}
</style>
@endpush

@section('content')
<div class="fnrh-page">

    {{-- Toolbar --}}
    <div class="flex gap-sm mb-md no-print" style="justify-content:space-between;align-items:center;">
        <div>
            <a href="{{ route('admin.reservations.show', $reservation) }}" class="btn btn-secondary">
                <i data-lucide="arrow-left" style="width:14px;height:14px;"></i> Voltar
            </a>
        </div>
        <div class="flex gap-sm">
            @if($record->generated_at)
                <span class="fnrh-status-chip">
                    ✓ Gerada em {{ $record->generated_at->format('d/m/Y H:i') }}
                </span>
            @endif
            <a href="{{ route('admin.reservations.fnrh.pdf', $reservation) }}"
               target="_blank" class="btn btn-primary">
                <i data-lucide="file-down" style="width:14px;height:14px;"></i> Baixar PDF
            </a>
            <button class="btn btn-secondary" onclick="window.print()">
                <i data-lucide="printer" style="width:14px;height:14px;"></i> Imprimir
            </button>
        </div>
    </div>

    {{-- DOCUMENTO FNRH --}}
    <div class="fnrh-paper">

        {{-- Cabeçalho --}}
        <div class="fnrh-header">
            <div>
                <div class="fnrh-hotel-name">{{ $data['hotel_name'] }}</div>
                @if($data['hotel_address'])
                    <div style="font-size:12px;opacity:0.75;margin-top:4px;">{{ $data['hotel_address'] }} — {{ $data['hotel_city'] }}/{{ $data['hotel_state'] }}</div>
                @endif
                @if($data['hotel_cnpj'])
                    <div style="font-size:11px;opacity:0.6;margin-top:2px;">CNPJ: {{ $data['hotel_cnpj'] }}</div>
                @endif
            </div>
            <div style="text-align:right;">
                <div style="font-size:28px;font-weight:900;letter-spacing:-1px;">FNRH</div>
                <div style="font-size:11px;opacity:0.7;">Ficha Nacional de Registro de Hóspedes</div>
                <div style="font-size:13px;font-weight:700;margin-top:6px;background:rgba(255,255,255,0.15);padding:4px 12px;border-radius:6px;">
                    {{ $data['locator'] }}
                </div>
            </div>
        </div>

        {{-- Dados da Hospedagem --}}
        <div class="fnrh-section">
            <div class="fnrh-section-title">
                <i data-lucide="bed" style="width:13px;height:13px;"></i>
                Dados da Hospedagem
            </div>
            <div class="fnrh-grid fnrh-grid-4">
                <div class="fnrh-field"><label>UH / Quarto</label><div class="val">{{ $data['room_name'] }}</div></div>
                <div class="fnrh-field"><label>Categoria</label><div class="val">{{ $data['room_category'] }}</div></div>
                <div class="fnrh-field"><label>Check-in</label><div class="val">{{ $data['check_in'] }}</div></div>
                <div class="fnrh-field"><label>Check-out</label><div class="val">{{ $data['check_out'] }}</div></div>
                <div class="fnrh-field"><label>Adultos</label><div class="val">{{ $data['adults'] }}</div></div>
                <div class="fnrh-field"><label>Crianças</label><div class="val">{{ $data['children'] ?: '—' }}</div></div>
                @if($data['check_in_realized'])
                <div class="fnrh-field" style="grid-column: span 2;">
                    <label>Check-in Realizado</label><div class="val" style="color:#166534;font-weight:700;">✓ {{ $data['check_in_realized'] }}</div>
                </div>
                @endif
            </div>
        </div>

        {{-- Identificação do Hóspede --}}
        <div class="fnrh-section">
            <div class="fnrh-section-title">
                <i data-lucide="user" style="width:13px;height:13px;"></i>
                Identificação do Hóspede
            </div>
            <div class="fnrh-grid" style="margin-bottom:14px;">
                <div class="fnrh-field" style="grid-column:span 2;"><label>Nome Completo</label><div class="val" style="font-size:15px;">{{ $data['guest_name'] }}</div></div>
                <div class="fnrh-field"><label>Nascimento</label><div class="val">{{ $data['guest_birth_date'] }}</div></div>
            </div>
            <div class="fnrh-grid fnrh-grid-4">
                <div class="fnrh-field"><label>Tipo Doc.</label><div class="val">{{ $data['guest_document_type'] }}</div></div>
                <div class="fnrh-field"><label>Nº Documento</label><div class="val">{{ $data['guest_document_number'] }}</div></div>
                <div class="fnrh-field"><label>Órgão Emissor</label><div class="val">{{ $data['guest_document_issuer'] ?: '—' }}</div></div>
                <div class="fnrh-field"><label>Gênero</label><div class="val">{{ $data['guest_gender'] }}</div></div>
                <div class="fnrh-field"><label>Nacionalidade</label><div class="val">{{ $data['guest_nationality'] }}</div></div>
                <div class="fnrh-field"><label>Profissão</label><div class="val">{{ $data['guest_profession'] }}</div></div>
                <div class="fnrh-field"><label>Telefone</label><div class="val">{{ $data['guest_phone'] }}</div></div>
                <div class="fnrh-field"><label>E-mail</label><div class="val">{{ $data['guest_email'] }}</div></div>
            </div>
        </div>

        {{-- Endereço --}}
        <div class="fnrh-section">
            <div class="fnrh-section-title">
                <i data-lucide="map-pin" style="width:13px;height:13px;"></i>
                Endereço de Residência
            </div>
            <div class="fnrh-grid fnrh-grid-4">
                <div class="fnrh-field" style="grid-column:span 2;"><label>Logradouro</label><div class="val">{{ $data['guest_address'] }}</div></div>
                <div class="fnrh-field"><label>Bairro</label><div class="val">{{ $data['guest_neighborhood'] }}</div></div>
                <div class="fnrh-field"><label>CEP</label><div class="val">{{ $data['guest_zip'] }}</div></div>
                <div class="fnrh-field"><label>Cidade</label><div class="val">{{ $data['guest_city'] }}</div></div>
                <div class="fnrh-field"><label>Estado</label><div class="val">{{ $data['guest_state'] }}</div></div>
                <div class="fnrh-field"><label>País</label><div class="val">{{ $data['guest_country'] }}</div></div>
            </div>
        </div>

        {{-- Motivo / Transporte --}}
        <div class="fnrh-section">
            <div class="fnrh-section-title">
                <i data-lucide="compass" style="width:13px;height:13px;"></i>
                Motivo da Viagem e Transporte
            </div>
            <div class="fnrh-grid fnrh-grid-2">
                <div class="fnrh-field"><label>Motivo da Viagem</label><div class="val">{{ $data['travel_reason'] }}</div></div>
                <div class="fnrh-field"><label>Meio de Transporte</label><div class="val">{{ $data['transport_mode'] }}</div></div>
            </div>
        </div>

        {{-- Acompanhantes --}}
        @if(!empty($data['companions']))
        <div class="fnrh-section">
            <div class="fnrh-section-title">
                <i data-lucide="users" style="width:13px;height:13px;"></i>
                Acompanhantes ({{ count($data['companions']) }})
            </div>
            <table class="companion-table">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Documento</th>
                        <th>Nascimento</th>
                        <th>Parentesco</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['companions'] as $comp)
                    <tr>
                        <td>{{ $comp['name'] }}</td>
                        <td>{{ $comp['doc'] }}</td>
                        <td>{{ $comp['birth'] }}</td>
                        <td>{{ $comp['kinship'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- Assinatura --}}
        <div class="fnrh-signature">
            <div class="sig-box">
                <div style="height:50px;"></div>
                Assinatura do Hóspede
            </div>
            <div class="sig-box">
                <div style="height:50px;"></div>
                Assinatura do Recepcionista
            </div>
        </div>

        {{-- Rodapé do documento --}}
        <div style="background:var(--color-bg);padding:12px 32px;border-top:1px solid var(--color-border-light);display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-muted);">
            <span>Gerado em {{ $data['generated_at'] }} por {{ $data['generated_by'] }}</span>
            <span>Locator: {{ $data['locator'] }} | {{ $data['hotel_name'] }}</span>
        </div>
    </div>
</div>
@endsection