{{-- resources/views/reports/occupancy.blade.php --}}
@extends('layouts.app')
@section('title', 'Occupancy Report')
@section('page_title', 'Occupancy 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.occupancy', 'showExport' => false])

{{-- Stats --}}
<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-door-open"></i>
            </div>
            <div>
                <div class="stat-value">{{ $total_rooms }}</div>
                <div class="stat-label">Total Rooms</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-graph-up"></i>
            </div>
            <div>
                <div class="stat-value">{{ $occupancy_rate }}%</div>
                <div class="stat-label">Occupancy Rate</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-moon-stars"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($occupied_nights) }}</div>
                <div class="stat-label">Room Nights Sold</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-muted">
                <i class="bi bi-calendar-range"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($total_room_nights) }}</div>
                <div class="stat-label">Available Room Nights</div>
            </div>
        </div>
    </div>
</div>

{{-- Chart --}}
<div class="card mb-3">
    <div class="card-header">
        <span class="card-title">
            <i class="bi bi-graph-up me-2" style="color:var(--clay)"></i>
            Daily Occupancy Rate
        </span>
    </div>
    <div class="card-body">
        <canvas id="occupancyChart" height="80"></canvas>
    </div>
</div>

{{-- Daily Table --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">Daily Breakdown</span>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Occupied</th>
                    <th>Available</th>
                    <th>Occupancy</th>
                    <th>Visual</th>
                </tr>
            </thead>
            <tbody>
                @foreach(array_slice($daily, 0, 31) as $date => $day)
                    <tr>
                        <td style="font-size:.8rem;white-space:nowrap;">
                            {{ $day['date'] }}
                        </td>
                        <td style="font-size:.82rem;font-weight:600;color:var(--clay);">
                            {{ $day['occupied'] }}
                        </td>
                        <td style="font-size:.8rem;color:var(--muted);">
                            {{ $day['available'] }}
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">
                            {{ $day['rate'] }}%
                        </td>
                        <td style="width:150px;">
                            <div style="background:var(--border);border-radius:3px;
                                        height:8px;overflow:hidden;">
                                <div style="height:100%;width:{{ $day['rate'] }}%;
                                            background:{{ $day['rate'] >= 80 ? 'var(--success)' : ($day['rate'] >= 50 ? 'var(--clay)' : 'var(--warning)') }};
                                            border-radius:3px;transition:width .3s;">
                                </div>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const daily = @json(array_values($daily));

new Chart(document.getElementById('occupancyChart'), {
    type: 'line',
    data: {
        labels: daily.map(d => d.date),
        datasets: [{
            label: 'Occupancy %',
            data: daily.map(d => d.rate),
            borderColor: '#C4622D',
            backgroundColor: 'rgba(196,98,45,.08)',
            borderWidth: 2,
            fill: true,
            tension: 0.3,
            pointRadius: daily.length > 31 ? 0 : 3,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: { callbacks: { label: c => c.parsed.y + '%' } }
        },
        scales: {
            y: {
                beginAtZero: true, max: 100,
                grid: { color: '#f1f5f9' },
                ticks: { callback: v => v + '%', font: { size: 11 } }
            },
            x: {
                grid: { display: false },
                ticks: {
                    font: { size: 11 },
                    maxTicksLimit: 15,
                }
            }
        }
    }
});
</script>
@endpush