@extends('layouts.admin')

@section('content')
<div class="page-header">
    <h1 class="page-title">CRM & Inteligência do Hóspede</h1>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl);">
    
    <!-- VIPs do Dia -->
    <div class="card" style="padding: var(--space-lg);">
        <h3 style="margin-bottom: var(--space-md); color: var(--primary);">
            <i data-lucide="star" style="width: 20px; vertical-align: text-bottom; margin-right: 5px;"></i> VIPs no Hotel Hoje
        </h3>
        @if($vipGuests->isEmpty())
            <p class="text-muted">Nenhum hóspede VIP esperado ou hospedado hoje.</p>
        @else
            <ul style="list-style: none; padding: 0;">
                @foreach($vipGuests as $guest)
                <li style="padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
                    <div>
                        <strong><a href="{{ route('admin.registers.guests.edit', $guest->id) }}" style="color: var(--text-color); text-decoration: none;">{{ $guest->first_name }} {{ $guest->last_name }}</a></strong>
                        <div style="font-size: 0.85em; color: var(--text-muted);">{{ ucfirst($guest->vip_level) }} &bullet; {{ $guest->total_stays }} estadas</div>
                    </div>
                </li>
                @endforeach
            </ul>
        @endif
    </div>

    <!-- Aniversariantes do Mês -->
    <div class="card" style="padding: var(--space-lg);">
        <h3 style="margin-bottom: var(--space-md); color: #ebb305;">
            <i data-lucide="gift" style="width: 20px; vertical-align: text-bottom; margin-right: 5px;"></i> Aniversariantes do Mês
        </h3>
        @if($birthdays->isEmpty())
            <p class="text-muted">Nenhum hóspede faz aniversário neste mês.</p>
        @else
            <ul style="list-style: none; padding: 0;">
                @foreach($birthdays as $guest)
                <li style="padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
                    <div>
                        <strong><a href="{{ route('admin.registers.guests.edit', $guest->id) }}" style="color: var(--text-color); text-decoration: none;">{{ $guest->first_name }} {{ $guest->last_name }}</a></strong>
                        <div style="font-size: 0.85em; color: var(--text-muted);">Aniversário: {{ $guest->birth_date->format('d/m') }}</div>
                    </div>
                </li>
                @endforeach
            </ul>
        @endif
    </div>

</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);">
    
    <!-- Top Hóspedes por Estadas -->
    <div class="card" style="padding: var(--space-lg);">
        <h3 style="margin-bottom: var(--space-md);">Maiores Frequências (Top 5)</h3>
        @if($topByStays->isEmpty())
            <p class="text-muted">Dados insuficientes.</p>
        @else
            <ul style="list-style: none; padding: 0;">
                @foreach($topByStays as $guest)
                <li style="padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
                    <span><a href="{{ route('admin.registers.guests.edit', $guest->id) }}" style="color: var(--text-color); text-decoration: none;">{{ $guest->first_name }} {{ $guest->last_name }}</a></span>
                    <strong>{{ $guest->total_stays }} estadas</strong>
                </li>
                @endforeach
            </ul>
        @endif
    </div>

    <!-- Top Hóspedes por Gastos -->
    <div class="card" style="padding: var(--space-lg);">
        <h3 style="margin-bottom: var(--space-md);">Maiores Receitas (Top 5)</h3>
        @if($topBySpent->isEmpty())
            <p class="text-muted">Dados insuficientes.</p>
        @else
            <ul style="list-style: none; padding: 0;">
                @foreach($topBySpent as $guest)
                <li style="padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
                    <span><a href="{{ route('admin.registers.guests.edit', $guest->id) }}" style="color: var(--text-color); text-decoration: none;">{{ $guest->first_name }} {{ $guest->last_name }}</a></span>
                    <strong>R$ {{ number_format($guest->total_spent, 2, ',', '.') }}</strong>
                </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Inicializar lucide icons, se necessário
    if(typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
</script>
@endpush