@extends('layouts.admin')

@section('title', 'Check-in — ' . $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">Check-in</span>
@endsection

@push('styles')
<style>
.wizard-steps {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.wizard-step {
    flex: 1;
    padding: 12px 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: default;
    transition: all 0.2s;
}
.wizard-step:last-child { border-right: none; }
.wizard-step.active {
    background: var(--color-primary);
    color: #fff;
}
.wizard-step.done {
    background: #F0FDF4;
    color: #166534;
}
.step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.wizard-step .step-num { border: 1.5px solid currentColor; background: transparent; }
.wizard-step.active .step-num { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); }
.wizard-step.done .step-num { background: #16a34a; border-color: #16a34a; color: #fff; }
.section-divider {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 14px;
    margin-top: 6px;
}
.cep-row { display: flex; gap: 8px; align-items: flex-end; }
</style>
@endpush

@section('content')
{{-- PAGE HEADER --}}
<div class="page-header">
    <div>
        <h1 class="page-title">Check-in Digital</h1>
        <p class="page-subtitle">Reserva {{ $reservation->locator }} — {{ $reservation->guest?->full_name }} — UH {{ $reservation->room?->name ?? '—' }}</p>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger mb-md">
    <strong>Corrija os erros abaixo:</strong>
    <ul style="margin:6px 0 0 16px; padding:0;">
        @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
    </ul>
</div>
@endif

<div x-data="{ step: 1 }">

    {{-- WIZARD STEPS --}}
    <div class="wizard-steps">
        <div class="wizard-step" :class="{ active: step === 1, done: step > 1 }">
            <span class="step-num" x-text="step > 1 ? '✓' : '1'"></span>
            <span class="hidden-sm">Validação</span>
        </div>
        <div class="wizard-step" :class="{ active: step === 2, done: step > 2 }">
            <span class="step-num" x-text="step > 2 ? '✓' : '2'"></span>
            <span class="hidden-sm">Dados do Hóspede</span>
        </div>
        <div class="wizard-step" :class="{ active: step === 3, done: step > 3 }">
            <span class="step-num" x-text="step > 3 ? '✓' : '3'"></span>
            <span class="hidden-sm">Hospedagem</span>
        </div>
        <div class="wizard-step" :class="{ active: step === 4 }">
            <span class="step-num">4</span>
            <span class="hidden-sm">Confirmação</span>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.reservations.doCheckin', $reservation) }}">
        @csrf

        {{-- ─── STEP 1: Validação / Resumo ─── --}}
        <div x-show="step === 1">
            <div class="card">
                <div class="card-header">
                    <h3 style="margin:0;font-size:15px;font-weight:700;">Validação da Reserva</h3>
                </div>
                <div class="card-body" style="padding:24px;">
                    {{-- Checklist visual --}}
                    <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:24px;">
                        @php
                            $checks = [
                                ['ok' => in_array($reservation->status, ['provisional','confirmed']), 'label' => 'Status apto para check-in (' . $reservation->status_label . ')'],
                                ['ok' => (bool)$reservation->room_id, 'label' => 'UH atribuída: ' . ($reservation->room?->name ?? 'NÃO ATRIBUÍDA')],
                                ['ok' => (bool)$reservation->guest_id, 'label' => 'Hóspede vinculado: ' . ($reservation->guest?->full_name ?? 'SEM HÓSPEDE')],
                                ['ok' => $reservation->check_in_expected->isToday() || $reservation->check_in_expected->isPast(), 'label' => 'Data de entrada: ' . $reservation->check_in_expected->format('d/m/Y') . ($reservation->check_in_expected->isFuture() ? ' (entrada futura — verifique)' : '')],
                            ];
                        @endphp
                        @foreach($checks as $check)
                        <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:{{ $check['ok'] ? '#F0FDF4' : '#FFF2F2' }};border:1px solid {{ $check['ok'] ? '#BBF7D0' : '#FECACA' }};">
                            <div style="width:24px;height:24px;border-radius:50%;background:{{ $check['ok'] ? '#16a34a' : '#ef4444' }};display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:13px;font-weight:800;">
                                {{ $check['ok'] ? '✓' : '!' }}
                            </div>
                            <span style="font-size:13px;font-weight:{{ $check['ok'] ? '500' : '700' }};color:{{ $check['ok'] ? '#166534' : '#b91c1c' }};">{{ $check['label'] }}</span>
                        </div>
                        @endforeach
                    </div>

                    <div style="background:var(--color-bg);border-radius:10px;padding:16px;border:1px solid var(--color-border);">
                        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:10px;">Resumo</div>
                        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
                            <div><div style="font-size:10px;color:var(--color-text-muted);">Check-in previsto</div><div style="font-weight:700;">{{ $reservation->check_in_expected->format('d/m/Y') }}</div></div>
                            <div><div style="font-size:10px;color:var(--color-text-muted);">Check-out previsto</div><div style="font-weight:700;">{{ $reservation->check_out_expected->format('d/m/Y') }}</div></div>
                            <div><div style="font-size:10px;color:var(--color-text-muted);">Diárias</div><div style="font-weight:700;">{{ $reservation->nights }}</div></div>
                            <div><div style="font-size:10px;color:var(--color-text-muted);">UH</div><div style="font-weight:700;">{{ $reservation->room?->name ?? '—' }}</div></div>
                            <div><div style="font-size:10px;color:var(--color-text-muted);">Adultos</div><div style="font-weight:700;">{{ $reservation->adults }}</div></div>
                            <div><div style="font-size:10px;color:var(--color-text-muted);">Total</div><div style="font-weight:700;">R$ {{ number_format($reservation->total_expected, 2, ',', '.') }}</div></div>
                        </div>
                    </div>
                </div>
                <div class="card-footer" style="display:flex;justify-content:flex-end;">
                    <button type="button" class="btn btn-primary" @click="step = 2">Próximo: Dados do Hóspede →</button>
                </div>
            </div>
        </div>

        {{-- ─── STEP 2: Dados do Hóspede ─── --}}
        <div x-show="step === 2" x-cloak>
            <div class="card">
                <div class="card-header">
                    <h3 style="margin:0;font-size:15px;font-weight:700;">Dados do Hóspede Principal</h3>
                    <span style="font-size:12px;color:var(--color-text-muted);">Revise ou complete os dados</span>
                </div>
                <div class="card-body" style="padding:24px;">

                    <div class="section-divider">Identificação</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                        <div>
                            <label class="form-label">Nome *</label>
                            <input type="text" name="guest[first_name]" class="form-input" required
                                value="{{ old('guest.first_name', $reservation->guest?->first_name) }}">
                        </div>
                        <div>
                            <label class="form-label">Sobrenome</label>
                            <input type="text" name="guest[last_name]" class="form-input"
                                value="{{ old('guest.last_name', $reservation->guest?->last_name) }}">
                        </div>
                        <div>
                            <label class="form-label">Tipo de Documento *</label>
                            <select name="guest[document_type]" class="form-input" required>
                                <option value="cpf" {{ ($reservation->guest?->document_type ?? 'cpf') === 'cpf' ? 'selected' : '' }}>CPF</option>
                                <option value="rg"  {{ ($reservation->guest?->document_type) === 'rg' ? 'selected' : '' }}>RG</option>
                                <option value="passport" {{ ($reservation->guest?->document_type) === 'passport' ? 'selected' : '' }}>Passaporte</option>
                                <option value="cnh" {{ ($reservation->guest?->document_type) === 'cnh' ? 'selected' : '' }}>CNH</option>
                                <option value="other" {{ ($reservation->guest?->document_type) === 'other' ? 'selected' : '' }}>Outro</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Número do Documento *</label>
                            <input type="text" name="guest[document_number]" class="form-input" required
                                value="{{ old('guest.document_number', $reservation->guest?->document_number) }}">
                        </div>
                        <div>
                            <label class="form-label">Data de Nascimento</label>
                            <input type="date" name="guest[birth_date]" class="form-input"
                                value="{{ old('guest.birth_date', $reservation->guest?->birth_date?->format('Y-m-d')) }}">
                        </div>
                        <div>
                            <label class="form-label">Gênero</label>
                            <select name="guest[gender]" class="form-input">
                                <option value="">Não informado</option>
                                <option value="male"   {{ ($reservation->guest?->gender) === 'male' ? 'selected' : '' }}>Masculino</option>
                                <option value="female" {{ ($reservation->guest?->gender) === 'female' ? 'selected' : '' }}>Feminino</option>
                                <option value="other"  {{ ($reservation->guest?->gender) === 'other' ? 'selected' : '' }}>Outro</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Nacionalidade</label>
                            <input type="text" name="guest[nationality]" class="form-input"
                                value="{{ old('guest.nationality', $reservation->guest?->nationality ?? 'Brasileira') }}">
                        </div>
                        <div>
                            <label class="form-label">Profissão</label>
                            <input type="text" name="guest[profession]" class="form-input"
                                value="{{ old('guest.profession', $reservation->guest?->profession) }}">
                        </div>
                        <div>
                            <label class="form-label">Telefone</label>
                            <input type="text" name="guest[phone]" class="form-input"
                                value="{{ old('guest.phone', $reservation->guest?->phone) }}">
                        </div>
                        <div>
                            <label class="form-label">E-mail</label>
                            <input type="email" name="guest[email]" class="form-input"
                                value="{{ old('guest.email', $reservation->guest?->email) }}">
                        </div>
                    </div>

                    <div class="section-divider" style="margin-top:20px;">Motivo da Viagem (FNRH)</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                        <div>
                            <label class="form-label">Motivo da Viagem</label>
                            <select name="guest[travel_reason]" class="form-input">
                                <option value="">Não informado</option>
                                <option value="lazer"    {{ ($reservation->guest?->travel_reason) === 'lazer' ? 'selected' : '' }}>Lazer / Turismo</option>
                                <option value="negocios" {{ ($reservation->guest?->travel_reason) === 'negocios' ? 'selected' : '' }}>Negócios</option>
                                <option value="evento"   {{ ($reservation->guest?->travel_reason) === 'evento' ? 'selected' : '' }}>Evento</option>
                                <option value="saude"    {{ ($reservation->guest?->travel_reason) === 'saude' ? 'selected' : '' }}>Saúde</option>
                                <option value="outros"   {{ ($reservation->guest?->travel_reason) === 'outros' ? 'selected' : '' }}>Outros</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Meio de Transporte</label>
                            <select name="guest[transport_mode]" class="form-input">
                                <option value="">Não informado</option>
                                <option value="carro"   {{ ($reservation->guest?->transport_mode) === 'carro' ? 'selected' : '' }}>Carro</option>
                                <option value="onibus"  {{ ($reservation->guest?->transport_mode) === 'onibus' ? 'selected' : '' }}>Ônibus</option>
                                <option value="aviao"   {{ ($reservation->guest?->transport_mode) === 'aviao' ? 'selected' : '' }}>Avião</option>
                                <option value="trem"    {{ ($reservation->guest?->transport_mode) === 'trem' ? 'selected' : '' }}>Trem</option>
                                <option value="navio"   {{ ($reservation->guest?->transport_mode) === 'navio' ? 'selected' : '' }}>Navio</option>
                                <option value="outros"  {{ ($reservation->guest?->transport_mode) === 'outros' ? 'selected' : '' }}>Outros</option>
                            </select>
                        </div>
                    </div>

                    <div class="section-divider" style="margin-top:20px;">Endereço</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;margin-bottom:12px;">
                        <div class="cep-row" style="grid-column:1 / span 3;">
                            <div style="flex:0 0 160px;">
                                <label class="form-label">CEP</label>
                                <input type="text" name="guest[zip_code]" id="cep-input" class="form-input"
                                    placeholder="00000-000" maxlength="9"
                                    value="{{ old('guest.zip_code', $reservation->guest?->zip_code) }}"
                                    @input="fetchCep($event.target.value)">
                            </div>
                            <button type="button" class="btn btn-secondary" style="height:38px;"
                                onclick="fetchCep(document.getElementById('cep-input').value)">
                                <i data-lucide="search" style="width:14px;height:14px;"></i> Buscar
                            </button>
                        </div>
                        <div style="grid-column:1 / span 2;">
                            <label class="form-label">Logradouro</label>
                            <input type="text" name="guest[address]" id="address-input" class="form-input"
                                value="{{ old('guest.address', $reservation->guest?->address) }}">
                        </div>
                        <div>
                            <label class="form-label">Número</label>
                            <input type="text" name="guest[address_number]" id="address-number-input" class="form-input"
                                value="{{ old('guest.address_number', $reservation->guest?->address_number) }}">
                        </div>
                        <div>
                            <label class="form-label">Complemento</label>
                            <input type="text" name="guest[address_complement]" class="form-input"
                                value="{{ old('guest.address_complement', $reservation->guest?->address_complement) }}">
                        </div>
                        <div>
                            <label class="form-label">Bairro</label>
                            <input type="text" name="guest[neighborhood]" id="neighborhood-input" class="form-input"
                                value="{{ old('guest.neighborhood', $reservation->guest?->neighborhood) }}">
                        </div>
                        <div>
                            <label class="form-label">Cidade</label>
                            <input type="text" name="guest[city]" id="city-input" class="form-input"
                                value="{{ old('guest.city', $reservation->guest?->city) }}">
                        </div>
                        <div>
                            <label class="form-label">Estado</label>
                            <input type="text" name="guest[state]" id="state-input" class="form-input"
                                value="{{ old('guest.state', $reservation->guest?->state) }}">
                        </div>
                        <div>
                            <label class="form-label">País</label>
                            <input type="text" name="guest[country]" class="form-input"
                                value="{{ old('guest.country', $reservation->guest?->country ?? 'Brasil') }}">
                        </div>
                    </div>
                </div>
                <div class="card-footer" style="display:flex;justify-content:space-between;">
                    <button type="button" class="btn btn-secondary" @click="step = 1">← Voltar</button>
                    <button type="button" class="btn btn-primary" @click="step = 3">Próximo: Hospedagem →</button>
                </div>
            </div>
        </div>

        {{-- ─── STEP 3: Dados da Hospedagem ─── --}}
        <div x-show="step === 3" x-cloak>
            <div class="card">
                <div class="card-header">
                    <h3 style="margin:0;font-size:15px;font-weight:700;">Dados da Hospedagem</h3>
                </div>
                <div class="card-body" style="padding:24px;">
                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px;">
                        <div>
                            <label class="form-label">Adultos *</label>
                            <input type="number" name="adults" class="form-input" min="1" max="20" required
                                value="{{ old('adults', $reservation->adults) }}">
                        </div>
                        <div>
                            <label class="form-label">Crianças</label>
                            <input type="number" name="children" class="form-input" min="0" max="10"
                                value="{{ old('children', $reservation->children) }}">
                        </div>
                        <div style="display:flex;align-items:flex-end;">
                            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;padding-bottom:6px;">
                                <input type="checkbox" name="breakfast_included" value="1"
                                    {{ $reservation->breakfast_included ? 'checked' : '' }}
                                    style="width:18px;height:18px;">
                                <span class="form-label" style="margin:0;">☕ Café da manhã incluso</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Observações Operacionais</label>
                        <textarea name="operational_notes" class="form-input" rows="4"
                            placeholder="Preferências do hóspede, solicitações especiais, observações internas…">{{ old('operational_notes', $reservation->operational_notes) }}</textarea>
                    </div>
                </div>
                <div class="card-footer" style="display:flex;justify-content:space-between;">
                    <button type="button" class="btn btn-secondary" @click="step = 2">← Voltar</button>
                    <button type="button" class="btn btn-primary" @click="step = 4">Próximo: Confirmação →</button>
                </div>
            </div>
        </div>

        {{-- ─── STEP 4: Confirmação ─── --}}
        <div x-show="step === 4" x-cloak>
            <div class="card">
                <div class="card-header">
                    <h3 style="margin:0;font-size:15px;font-weight:700;">✅ Confirmar Check-in</h3>
                </div>
                <div class="card-body" style="padding:24px;text-align:center;">
                    <div style="width:64px;height:64px;border-radius:50%;background:#F0FDF4;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
                        <i data-lucide="log-in" style="width:28px;height:28px;color:#16a34a;"></i>
                    </div>
                    <h2 style="font-size:20px;margin:0 0 8px;">Tudo Certo!</h2>
                    <p style="color:var(--color-text-secondary);margin:0 0 24px;max-width:360px;margin-left:auto;margin-right:auto;">
                        Ao confirmar, o check-in será registrado agora ({{ now()->format('d/m/Y H:i') }}) e o status da reserva mudará para <strong>Hospedado</strong>.
                    </p>
                    <div style="background:var(--color-bg);border-radius:12px;padding:16px;border:1px solid var(--color-border);text-align:left;max-width:400px;margin:0 auto;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--color-text-muted);">Reserva</span><strong>{{ $reservation->locator }}</strong></div>
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--color-text-muted);">Hóspede</span><strong>{{ $reservation->guest?->full_name }}</strong></div>
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--color-text-muted);">UH</span><strong>{{ $reservation->room?->name ?? '—' }}</strong></div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;"><span style="color:var(--color-text-muted);">Check-out previsto</span><strong>{{ $reservation->check_out_expected->format('d/m/Y') }}</strong></div>
                    </div>
                </div>
                <div class="card-footer" style="display:flex;justify-content:space-between;">
                    <button type="button" class="btn btn-secondary" @click="step = 3">← Voltar</button>
                    <button type="submit" class="btn btn-primary" style="font-size:15px;padding:10px 24px;">
                        <i data-lucide="log-in" style="width:15px;height:15px;"></i>
                        Confirmar Check-in Agora
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
async function fetchCep(cep) {
    cep = cep.replace(/\D/g, '');
    if (cep.length !== 8) return;
    try {
        const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
        const d = await r.json();
        if (d.erro) return;
        document.getElementById('address-input').value      = d.logradouro || '';
        document.getElementById('neighborhood-input').value = d.bairro     || '';
        document.getElementById('city-input').value         = d.localidade  || '';
        document.getElementById('state-input').value        = d.uf          || '';
        document.getElementById('address-number-input').focus();
    } catch(e) {}
}
</script>
@endpush