{{-- resources/views/dashboard.blade.php --}}
@extends('layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')
@section('page_subtitle', today()->format('l, d F Y'))

@section('content')

{{-- Top Stats --}}
<div class="row g-3 mb-3">

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon si-clay">
                <i class="bi bi-box-arrow-in-right"></i>
            </div>
            <div>
                <div class="stat-value">{{ $arrivalsToday }}</div>
                <div class="stat-label">Arrivals Today</div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-box-arrow-right"></i>
            </div>
            <div>
                <div class="stat-value">{{ $departuresToday }}</div>
                <div class="stat-label">Departures Today</div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-person-check"></i>
            </div>
            <div>
                <div class="stat-value">{{ $inHouse }}</div>
                <div class="stat-label">In House</div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon si-muted">
                <i class="bi bi-door-open"></i>
            </div>
            <div>
                <div class="stat-value">{{ $occupancyRate }}%</div>
                <div class="stat-label">
                    Occupancy
                    <span style="display:block;font-size:.65rem;">
                        {{ $availableRooms }}/{{ $totalRooms }} available
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-cash-coin"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($revenueThisMonth, 0) }}
                </div>
                <div class="stat-label">
                    Revenue ({{ now()->format('M') }})
                    @if($revenueLastMonth > 0)
                        @php
                            $change = $revenueLastMonth > 0
                                ? (($revenueThisMonth - $revenueLastMonth) / $revenueLastMonth) * 100
                                : 0;
                        @endphp
                        <span class="stat-trend {{ $change >= 0 ? 'trend-up' : 'trend-down' }}">
                            {{ $change >= 0 ? '↑' : '↓' }}
                            {{ abs(round($change)) }}% vs last month
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-4 col-xl-2">
        <div class="stat-card">
            <div class="stat-icon {{ $overdueCount > 0 ? 'si-danger' : 'si-muted' }}">
                <i class="bi bi-receipt"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($outstandingAmount, 0) }}
                </div>
                <div class="stat-label">
                    Outstanding
                    @if($overdueCount > 0)
                        <span class="stat-trend trend-down">
                            {{ $overdueCount }} overdue
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row g-3">

    {{-- Revenue Chart --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-graph-up me-2"
                       style="color:var(--clay)"></i>
                    Revenue — Last 7 Days
                </span>
                <a href="{{ tenant_route('reports.revenue') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    Full report →
                </a>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="80"></canvas>
            </div>
        </div>
    </div>

    {{-- Room Status --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-door-open me-2"
                       style="color:var(--clay)"></i>
                    Room Status
                </span>
                <a href="{{ tenant_route('rooms.status-board') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    Board →
                </a>
            </div>
            <div class="card-body">
                @php
                    $statusConfig = [
                        'available'   => ['label' => 'Available',    'class' => 'rd-available'],
                        'occupied'    => ['label' => 'Occupied',     'class' => 'rd-occupied'],
                        'dirty'       => ['label' => 'Dirty',        'class' => 'rd-dirty'],
                        'clean'       => ['label' => 'Clean',        'class' => 'rd-clean'],
                        'maintenance' => ['label' => 'Maintenance',  'class' => 'rd-maintenance'],
                        'out_of_order'=> ['label' => 'Out of Order', 'class' => 'rd-maintenance'],
                    ];
                @endphp

                @forelse($statusConfig as $status => $config)
                    @if(isset($roomStatus[$status]) && $roomStatus[$status] > 0)
                        <div style="display:flex;align-items:center;
                                    justify-content:space-between;
                                    margin-bottom:10px;">
                            <div style="display:flex;align-items:center;gap:8px;">
                                <span class="room-dot {{ $config['class'] }}"></span>
                                <span style="font-size:.8rem;">
                                    {{ $config['label'] }}
                                </span>
                            </div>
                            <div style="display:flex;align-items:center;gap:10px;">
                                <div style="width:80px;height:5px;
                                            background:var(--border);
                                            border-radius:3px;overflow:hidden;">
                                    <div style="height:100%;width:{{ ($roomStatus[$status] / $totalRooms) * 100 }}%;
                                                background:{{ $status === 'available' ? 'var(--success)' :
                                                             ($status === 'occupied' ? 'var(--clay)' :
                                                             ($status === 'dirty' ? 'var(--warning)' : 'var(--muted)')) }};">
                                    </div>
                                </div>
                                <span class="fw-semibold"
                                      style="font-size:.82rem;min-width:20px;
                                             text-align:right;">
                                    {{ $roomStatus[$status] }}
                                </span>
                            </div>
                        </div>
                    @endif
                @empty
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">
                        No rooms configured yet.
                        <a href="{{ tenant_route('rooms.create') }}"
                           style="color:var(--clay);">
                            Add rooms →
                        </a>
                    </p>
                @endforelse

                @if($totalRooms === 0)
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">
                        No rooms configured yet.
                        <a href="{{ tenant_route('rooms.create') }}"
                           style="color:var(--clay);">
                            Add rooms →
                        </a>
                    </p>
                @endif
            </div>
        </div>
    </div>

    {{-- Today's Arrivals --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-box-arrow-in-right me-2"
                       style="color:var(--clay)"></i>
                    Arrivals Today
                    @if($arrivalsToday > 0)
                        <span style="font-size:.72rem;font-weight:400;
                                     color:var(--muted);margin-left:6px;">
                            {{ $arrivalsToday }} guests
                        </span>
                    @endif
                </span>
                <a href="{{ tenant_route('reservations.arrivals') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    View all →
                </a>
            </div>

            @if($arrivals->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-calendar-check"
                       style="font-size:1.8rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0"
                       style="font-size:.8rem;">
                        No arrivals today
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Guest</th>
                                <th>Room</th>
                                <th>Nights</th>
                                <th>Balance</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($arrivals as $res)
                                <tr>
                                    <td>
                                        <a href="{{ tenant_route('reservations.show', ['reservation' => $res->id]) }}"
                                           style="color:var(--text);
                                                  text-decoration:none;
                                                  font-weight:600;
                                                  font-size:.8rem;">
                                            {{ $res->guest?->first_name }}
                                            {{ $res->guest?->last_name }}
                                        </a>
                                        <div style="font-size:.68rem;
                                                    color:var(--muted);">
                                            {{ $res->reference }}
                                        </div>
                                    </td>
                                    <td style="font-size:.78rem;">
                                        {{ $res->rooms->first()?->room?->number ?? '—' }}
                                    </td>
                                    <td style="font-size:.78rem;
                                               color:var(--muted);">
                                        {{ $res->nights }}
                                    </td>
                                    <td style="font-size:.78rem;">
                                        @if($res->balance_due > 0)
                                            <span style="color:var(--danger);
                                                         font-weight:600;">
                                                ${{ number_format($res->balance_due, 0) }}
                                            </span>
                                        @else
                                            <span style="color:var(--success);">
                                                Paid
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="status-badge sb-{{ $res->status }}">
                                            {{ $res->status }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Today's Departures --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-box-arrow-right me-2"
                       style="color:var(--clay)"></i>
                    Departures Today
                    @if($departuresToday > 0)
                        <span style="font-size:.72rem;font-weight:400;
                                     color:var(--muted);margin-left:6px;">
                            {{ $departuresToday }} guests
                        </span>
                    @endif
                </span>
                <a href="{{ tenant_route('reservations.departures') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    View all →
                </a>
            </div>

            @if($departures->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-calendar-check"
                       style="font-size:1.8rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0"
                       style="font-size:.8rem;">
                        No departures today
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Guest</th>
                                <th>Room</th>
                                <th>Balance</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($departures as $res)
                                <tr>
                                    <td>
                                        <a href="{{ tenant_route('reservations.show', ['reservation' => $res->id]) }}"
                                           style="color:var(--text);
                                                  text-decoration:none;
                                                  font-weight:600;
                                                  font-size:.8rem;">
                                            {{ $res->guest?->first_name }}
                                            {{ $res->guest?->last_name }}
                                        </a>
                                        <div style="font-size:.68rem;
                                                    color:var(--muted);">
                                            {{ $res->reference }}
                                        </div>
                                    </td>
                                    <td style="font-size:.78rem;">
                                        {{ $res->rooms->first()?->room?->number ?? '—' }}
                                    </td>
                                    <td style="font-size:.78rem;">
                                        @if($res->balance_due > 0)
                                            <span style="color:var(--danger);
                                                         font-weight:600;">
                                                ${{ number_format($res->balance_due, 0) }}
                                            </span>
                                        @else
                                            <span style="color:var(--success);">
                                                Settled
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($res->balance_due > 0)
                                            <a href="{{ tenant_route('reservations.folio', ['reservation' => $res->id]) }}"
                                               class="btn btn-xs"
                                               style="background:var(--danger);
                                                      color:#fff;border:none;">
                                                Pay & Out
                                            </a>
                                        @else
                                            <form method="POST"
                                                  action="{{ tenant_route('reservations.check-out', ['reservation' => $res->id]) }}">
                                                @csrf
                                                <button class="btn btn-xs btn-outline-secondary"
                                                        type="submit">
                                                    Check Out
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Recent Payments --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-cash-coin me-2"
                       style="color:var(--clay)"></i>
                    Recent Payments
                </span>
                <a href="{{ tenant_route('invoicing.payments.index') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    View all →
                </a>
            </div>

            @if($recentPayments->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-cash-stack"
                       style="font-size:1.8rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0"
                       style="font-size:.8rem;">
                        No payments yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Reference</th>
                                <th>Method</th>
                                <th>Amount</th>
                                <th>When</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentPayments as $payment)
                                <tr>
                                    <td>
                                        <div style="font-size:.8rem;
                                                    font-weight:600;">
                                            {{ $payment->reference }}
                                        </div>
                                        <div style="font-size:.68rem;
                                                    color:var(--muted);">
                                            {{ $payment->invoice?->invoice_number ?? '—' }}
                                        </div>
                                    </td>
                                    <td style="font-size:.78rem;
                                               color:var(--muted);">
                                        {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                                    </td>
                                    <td>
                                        <span style="font-weight:700;
                                                     color:var(--success);
                                                     font-size:.82rem;">
                                            {{ $payment->currency }}
                                            {{ number_format($payment->amount, 2) }}
                                        </span>
                                    </td>
                                    <td style="font-size:.73rem;
                                               color:var(--muted);">
                                        {{ $payment->paid_at?->diffForHumans() ?? '—' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-lightning me-2"
                       style="color:var(--clay)"></i>
                    Quick Actions
                </span>
            </div>
            <div class="card-body">
                <div style="display:grid;
                            grid-template-columns:1fr 1fr;
                            gap:8px;">

                    <a href="{{ tenant_route('reservations.create') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-calendar-plus"
                           style="color:var(--clay)"></i>
                        New Reservation
                    </a>

                    <a href="{{ tenant_route('guests.create') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-person-plus"
                           style="color:var(--clay)"></i>
                        Add Guest
                    </a>

                    <a href="{{ tenant_route('invoicing.invoices.create') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-receipt"
                           style="color:var(--clay)"></i>
                        New Invoice
                    </a>

                    <a href="{{ tenant_route('invoicing.payments.create') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-cash-coin"
                           style="color:var(--clay)"></i>
                        Record Payment
                    </a>

                    <a href="{{ tenant_route('expenses.create') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-wallet2"
                           style="color:var(--clay)"></i>
                        Add Expense
                    </a>

                    <a href="{{ tenant_route('rooms.status-board') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-grid-3x3-gap"
                           style="color:var(--clay)"></i>
                        Room Board
                    </a>

                    <a href="{{ tenant_route('reports.index') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-bar-chart-line"
                           style="color:var(--clay)"></i>
                        Reports
                    </a>

                    <a href="{{ tenant_route('settings.index') }}"
                       class="btn btn-outline-secondary text-start
                              d-flex align-items-center gap-2">
                        <i class="bi bi-gear"
                           style="color:var(--clay)"></i>
                        Settings
                    </a>

                </div>

                {{-- Open shift info --}}
                @if($openShift)
                    <div style="margin-top:12px;padding:10px 12px;
                                background:#d1fae5;border-radius:8px;
                                font-size:.78rem;color:#065f46;
                                display:flex;align-items:center;
                                justify-content:space-between;">
                        <span>
                            <i class="bi bi-safe me-1"></i>
                            Shift open since
                            {{ $openShift->opened_at->format('H:i') }}
                        </span>
                        <a href="{{ tenant_route('cashing-up.show', ['shift' => $openShift->id]) }}"
                           style="color:#065f46;font-weight:600;
                                  text-decoration:none;font-size:.75rem;">
                            View →
                        </a>
                    </div>
                @elseif(has_feature('cashing_up'))
                    <div style="margin-top:12px;padding:10px 12px;
                                background:var(--bg);border-radius:8px;
                                font-size:.78rem;color:var(--muted);
                                display:flex;align-items:center;
                                justify-content:space-between;">
                        <span>
                            <i class="bi bi-safe me-1"></i>
                            No shift open
                        </span>
                        <form method="POST"
                              action="{{ tenant_route('cashing-up.open') }}">
                            @csrf
                            <input type="hidden" name="opening_float" value="0">
                            <button class="btn btn-xs btn-outline-secondary"
                                    type="submit">
                                Open Shift
                            </button>
                        </form>
                    </div>
                @endif
            </div>
        </div>
    </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 ctx = document.getElementById('revenueChart');
if (ctx) {
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($chartLabels),
            datasets: [{
                label: 'Revenue (USD)',
                data: @json($chartData),
                backgroundColor: 'rgba(196,98,45,.15)',
                borderColor: '#C4622D',
                borderWidth: 2,
                borderRadius: 5,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: ctx => '$' + ctx.parsed.y.toFixed(2)
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: '#f1f5f9' },
                    ticks: {
                        font: { size: 11 },
                        callback: v => '$' + v
                    }
                },
                x: {
                    grid: { display: false },
                    ticks: { font: { size: 11 } }
                }
            }
        }
    });
}
</script>
@endpush