{{-- resources/views/reports/reservations.blade.php --}}
@extends('layouts.app')
@section('title', 'Reservations Report')
@section('page_title', 'Reservations Report')
@section('page_subtitle', $from->format('d M Y') . ' — ' . $to->format('d M Y'))

@section('content')

@include('reports.partials.nav')
@include('reports.partials.filters', ['route' => 'reports.reservations'])

<div class="row g-3 mb-3">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-clay">
                <i class="bi bi-calendar3"></i>
            </div>
            <div>
                <div class="stat-value">{{ $total }}</div>
                <div class="stat-label">Total Reservations</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-check-circle"></i>
            </div>
            <div>
                <div class="stat-value">{{ $confirmed }}</div>
                <div class="stat-label">Confirmed / Stayed</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-warning">
                <i class="bi bi-moon-stars"></i>
            </div>
            <div>
                <div class="stat-value">{{ $avg_nights }}</div>
                <div class="stat-label">Avg Nights</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-currency-dollar"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($avg_value, 0) }}
                </div>
                <div class="stat-label">Avg Booking Value</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- By Source --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">By Booking Source</span>
            </div>
            <div class="card-body">
                @php $sourceTotal = $by_source->sum(); @endphp
                @forelse($by_source->take(10) as $source => $count)
                    <div style="margin-bottom:10px;">
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.8rem;margin-bottom:3px;">
                            <span class="fw-semibold">
                                {{ ucfirst(str_replace('_', ' ', $source)) }}
                            </span>
                            <span>{{ $count }}
                                <span style="color:var(--muted);font-size:.72rem;">
                                    ({{ $sourceTotal > 0 ? round(($count / $sourceTotal) * 100, 0) : 0 }}%)
                                </span>
                            </span>
                        </div>
                        <div style="background:var(--border);border-radius:3px;
                                    height:6px;overflow:hidden;">
                            <div style="height:100%;
                                        width:{{ $sourceTotal > 0 ? ($count / $sourceTotal) * 100 : 0 }}%;
                                        background:var(--clay);border-radius:3px;">
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">No data</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- By Status --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">By Status</span>
            </div>
            <div class="card-body">
                @php
                    $statusColors = [
                        'tentative'   => '#f59e0b',
                        'confirmed'   => '#3b82f6',
                        'checked_in'  => '#10b981',
                        'checked_out' => '#64748b',
                        'cancelled'   => '#ef4444',
                        'no_show'     => '#f97316',
                    ];
                    $statusTotal = $by_status->sum();
                @endphp
                @forelse($by_status as $status => $count)
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;padding:8px 0;
                                border-bottom:1px solid var(--border);
                                font-size:.82rem;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span style="width:8px;height:8px;border-radius:50%;
                                         background:{{ $statusColors[$status] ?? '#64748b' }};
                                         display:inline-block;"></span>
                            <span>{{ ucfirst(str_replace('_', ' ', $status)) }}</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span class="fw-semibold">{{ $count }}</span>
                            <span style="color:var(--muted);font-size:.72rem;">
                                {{ $statusTotal > 0 ? round(($count / $statusTotal) * 100, 0) : 0 }}%
                            </span>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">No data</p>
                @endforelse
            </div>
        </div>
    </div>

</div>

@endsection