@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
@php $currency = \App\Models\Hotel::query()->value('currency') ?? 'USD'; @endphp

<x-page-header title="Dashboard" subtitle="Front office overview for today">
    <x-slot:actions>
        <a href="{{ route('admin.reservations.create') }}" class="btn btn-hp-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Reservation</a>
        <a href="{{ route('admin.check-in.index') }}" class="btn btn-hp-outline btn-sm">Check-in</a>
    </x-slot:actions>
</x-page-header>

<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3"><x-stat-card label="Occupancy" :value="$occupancy.'%'" icon="pie-chart" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Rooms Available" :value="$availableRooms.' / '.$totalRooms" icon="door-open" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Revenue Today" :value="$currency.' '.number_format($revenueToday, 2)" icon="cash-stack" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Revenue (MTD)" :value="$currency.' '.number_format($revenueMonth, 2)" icon="graph-up-arrow" /></div>
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="Occupied" :value="$occupiedRooms" icon="person-check" /></div>
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="Reserved" :value="$reservedRooms" icon="bookmark" /></div>
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="Dirty" :value="$dirtyRooms" icon="brush" /></div>
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="Clean" :value="$cleanRooms" icon="check2-circle" /></div>
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="Maintenance" :value="$underMaintenance" icon="tools" /></div>
    <div class="col-6 col-md-4 col-xl-2"><x-stat-card label="ADR / RevPAR" :value="$currency.' '.$adr.' / '.$revpar" icon="calculator" /></div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="hp-card">
            <div class="hp-card-header">Room Status Overview</div>
            <div class="hp-card-body"><canvas id="roomStatusChart" height="120"></canvas></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="hp-card h-100">
            <div class="hp-card-header">Today's Activity</div>
            <div class="hp-card-body">
                <canvas id="activityChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header d-flex justify-content-between"><span>Arrivals Today</span><span class="hp-badge hp-badge-info">{{ $arrivals->count() }}</span></div>
            <div class="list-group list-group-flush">
                @forelse($arrivals->take(8) as $r)
                    <a href="{{ route('admin.reservations.show', $r) }}" class="list-group-item list-group-item-action">
                        <div class="fw-semibold">{{ $r->guest?->first_name }} {{ $r->guest?->last_name }}</div>
                        <small class="text-muted">{{ $r->number }} · {{ $r->roomType?->name }}</small>
                    </a>
                @empty
                    <div class="list-group-item text-muted">No arrivals today</div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header d-flex justify-content-between"><span>Departures Today</span><span class="hp-badge hp-badge-warning">{{ $departures->count() }}</span></div>
            <div class="list-group list-group-flush">
                @forelse($departures->take(8) as $r)
                    <a href="{{ route('admin.reservations.show', $r) }}" class="list-group-item list-group-item-action">
                        <div class="fw-semibold">{{ $r->guest?->first_name }} {{ $r->guest?->last_name }}</div>
                        <small class="text-muted">Room {{ $r->room?->number ?? '—' }}</small>
                    </a>
                @empty
                    <div class="list-group-item text-muted">No departures today</div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header d-flex justify-content-between"><span>In-House</span><span class="hp-badge hp-badge-success">{{ $inHouse->count() }}</span></div>
            <div class="list-group list-group-flush">
                @forelse($inHouse->take(8) as $r)
                    <a href="{{ route('admin.reservations.show', $r) }}" class="list-group-item list-group-item-action">
                        <div class="fw-semibold">{{ $r->guest?->first_name }} {{ $r->guest?->last_name }}</div>
                        <small class="text-muted">Room {{ $r->room?->number ?? '—' }}</small>
                    </a>
                @empty
                    <div class="list-group-item text-muted">No in-house guests</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="hp-card">
            <div class="hp-card-header">Recent Reservations</div>
            <div class="table-responsive">
                <table class="table hp-table mb-0">
                    <thead><tr><th>#</th><th>Guest</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        @foreach($recentReservations as $r)
                            <tr>
                                <td>{{ $r->number }}</td>
                                <td>{{ $r->guest?->first_name }} {{ $r->guest?->last_name }}</td>
                                <td><x-status-badge :status="$r->status" /></td>
                                <td><a href="{{ route('admin.reservations.show', $r) }}" class="btn btn-sm btn-hp-outline">View</a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="hp-card">
            <div class="hp-card-header">Recent Payments</div>
            <div class="table-responsive">
                <table class="table hp-table mb-0">
                    <thead><tr><th>Date</th><th>Guest</th><th>Amount</th><th></th></tr></thead>
                    <tbody>
                        @foreach($recentPayments as $p)
                            <tr>
                                <td>{{ $p->transaction_date?->format('M j') }}</td>
                                <td>{{ $p->guest?->first_name }} {{ $p->guest?->last_name }}</td>
                                <td>{{ number_format($p->amount, 2) }}</td>
                                <td><a href="{{ route('admin.payments.show', $p) }}" class="btn btn-sm btn-hp-outline">View</a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@if($housekeepingTasks->isNotEmpty() || $maintenanceAlerts->isNotEmpty() || $lowStock->isNotEmpty())
<div class="row g-4 mt-1">
    @if($housekeepingTasks->isNotEmpty())
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header">Housekeeping Tasks</div>
            <ul class="list-group list-group-flush">
                @foreach($housekeepingTasks as $t)
                    <li class="list-group-item d-flex justify-content-between"><span>Room {{ $t->room?->number }}</span><x-status-badge :status="$t->status" /></li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif
    @if($maintenanceAlerts->isNotEmpty())
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header text-danger">Maintenance Alerts</div>
            <ul class="list-group list-group-flush">
                @foreach($maintenanceAlerts as $m)
                    <li class="list-group-item"><a href="{{ route('admin.maintenance.show', $m) }}">{{ $m->number }}</a> — Room {{ $m->room?->number ?? 'N/A' }}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif
    @if($lowStock->isNotEmpty())
    <div class="col-lg-4">
        <div class="hp-card">
            <div class="hp-card-header text-warning">Low Stock</div>
            <ul class="list-group list-group-flush">
                @foreach($lowStock as $item)
                    <li class="list-group-item d-flex justify-content-between"><span>{{ $item->name }}</span><span class="hp-badge hp-badge-danger">{{ $item->quantity_on_hand }}</span></li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif
</div>
@endif
@endsection

@push('scripts')
<script>
(function () {
    function initDashboardCharts() {
        if (typeof Chart === 'undefined') return;

        var roomEl = document.getElementById('roomStatusChart');
        var activityEl = document.getElementById('activityChart');
        if (!roomEl || !activityEl) return;

        if (roomEl.chart) { roomEl.chart.destroy(); }
        if (activityEl.chart) { activityEl.chart.destroy(); }

        roomEl.chart = new Chart(roomEl, {
            type: 'bar',
            data: {
                labels: ['Available', 'Occupied', 'Reserved', 'Dirty', 'Clean', 'Maintenance'],
                datasets: [{
                    label: 'Rooms',
                    data: [{{ $availableRooms }}, {{ $occupiedRooms }}, {{ $reservedRooms }}, {{ $dirtyRooms }}, {{ $cleanRooms }}, {{ $underMaintenance }}],
                    backgroundColor: ['#70B56A','#243922','#3b82f6','#f87171','#86efac','#eab308'],
                    borderRadius: 8
                }]
            },
            options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
        });

        activityEl.chart = new Chart(activityEl, {
            type: 'doughnut',
            data: {
                labels: ['Arrivals', 'Departures', 'In-House'],
                datasets: [{
                    data: [{{ $arrivals->count() }}, {{ $departures->count() }}, {{ $inHouse->count() }}],
                    backgroundColor: ['#70B56A','#f87171','#243922']
                }]
            },
            options: { plugins: { legend: { position: 'bottom' } } }
        });
    }

    document.addEventListener('DOMContentLoaded', initDashboardCharts);
    document.addEventListener('turbo:load', initDashboardCharts);
})();
</script>
@endpush