@extends('layouts.app')
@section('content')
<div class="page-bar d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
    <div>
        <div class="page-kicker">Counter overview</div>
        <h1 class="page-title">Today</h1>
        <div class="muted-line">Activity from {{ $from->format('d M Y') }} to {{ $to->format('d M Y') }}</div>
    </div>
    <div class="d-flex flex-wrap gap-2 align-items-center">
        <form class="d-flex flex-wrap gap-2 align-items-center" method="get">
            <input class="form-control" type="date" name="date_from" value="{{ $from->toDateString() }}">
            <input class="form-control" type="date" name="date_to" value="{{ $to->toDateString() }}">
            <button class="btn btn-outline-primary"><i class="bi bi-funnel me-1"></i> Filter</button>
        </form>
        <span class="quick-chip"><i class="bi bi-clock-history"></i>{{ now()->format('h:i A') }}</span>
        <span class="quick-chip"><i class="bi bi-person-badge"></i>{{ auth()->user()->name }}</span>
        <a class="btn btn-primary" href="{{ route('tickets.index') }}"><i class="bi bi-plus-circle me-1"></i> New ticket</a>
    </div>
</div>

@php
    $cards = [
        ['Visitors checked in', $stats['todayVisitors'], 'bi-person-walking', 'Entries marked used today'],
        ['Cash received today', 'Rs. '.number_format($stats['todayRevenue']), 'bi-wallet2', 'Tickets and memberships'],
        ['This month', 'Rs. '.number_format($stats['monthlyRevenue']), 'bi-calendar3', 'Running revenue total'],
        ['Active members', $stats['activeMemberships'], 'bi-person-check', 'Valid cards on record'],
        ['Expired cards', $stats['expiredMemberships'], 'bi-person-dash', 'Need renewal follow-up'],
        ['Tickets issued', $stats['todayTickets'], 'bi-ticket-perforated', 'Printed from counter'],
        ['New memberships', $stats['todayMemberships'], 'bi-person-vcard', 'Created today'],
        ['Offline queue', $stats['offlineQueued'], 'bi-cloud-slash', 'Pending counter sync'],
        ['Pending refunds', $stats['pendingRefunds'], 'bi-arrow-counterclockwise', 'Awaiting approval'],
        ['Open shifts', $stats['openShifts'], 'bi-cash-coin', 'Cashiers currently open'],
    ];
@endphp

<div class="dashboard-shell">
    <section class="dashboard-main">
        <div class="kpi-grid mb-3">
        @foreach($cards as $card)
            <div class="panel panel-pad stat">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <small>{{ $card[0] }}</small>
                        <strong class="d-block mt-1">{{ $card[1] }}</strong>
                        <div class="muted-line mt-2">{{ $card[3] }}</div>
                    </div>
                    <div class="stat-icon"><i class="bi {{ $card[2] }}"></i></div>
                </div>
            </div>
        @endforeach
        </div>

        <div class="row g-3">
            <div class="col-xl-8">
                <div class="panel panel-pad">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h2 class="panel-title">Receipts trend</h2>
                            <div class="panel-subtitle">Cash collected for selected date range</div>
                        </div>
                        <span class="quick-chip">{{ $from->diffInDays($to) + 1 }} days</span>
                    </div>
                    <div class="chart-box mini-chart"><canvas id="revenueChart"></canvas></div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="panel panel-pad">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h2 class="panel-title">Category mix</h2>
                            <div class="panel-subtitle">Issued tickets by class for selected range</div>
                        </div>
                        <span class="quick-chip">{{ $to->format('d M') }}</span>
                    </div>
                    <div class="chart-box compact mini-chart"><canvas id="categoryChart"></canvas></div>
                </div>
            </div>
        </div>
    </section>

    <aside class="dashboard-side no-print">
        <div class="panel panel-pad">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <h2 class="panel-title">Activity panel</h2>
                    <div class="panel-subtitle">Receipts and gate scans</div>
                </div>
                <a class="muted-line text-decoration-none" href="{{ route('reports.index') }}">Day book</a>
            </div>

            <ul class="nav nav-pills gap-2 mb-3" role="tablist">
                <li class="nav-item" role="presentation"><button class="btn btn-sm btn-primary" data-bs-toggle="pill" data-bs-target="#receiptFeed" type="button">Receipts</button></li>
                <li class="nav-item" role="presentation"><button class="btn btn-sm btn-outline-secondary" data-bs-toggle="pill" data-bs-target="#gateFeed" type="button">Gate</button></li>
            </ul>

            <div class="tab-content activity-scroll">
                <div class="tab-pane fade show active" id="receiptFeed">
                    @forelse($stats['latestTransactions'] as $t)
                        <div class="activity-item d-flex gap-3">
                            <div class="activity-icon"><i class="bi bi-receipt"></i></div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{{ $t->description }}</div>
                                <div class="muted-line">{{ $t->paid_at->format('d M h:i A') }}</div>
                            </div>
                            <div class="fw-bold text-end">Rs. {{ number_format($t->amount) }}</div>
                        </div>
                    @empty
                        <div class="empty-note">No receipts posted yet.</div>
                    @endforelse
                </div>
                <div class="tab-pane fade" id="gateFeed">
                    @forelse($entryLogs as $log)
                        <div class="activity-item d-flex gap-3 align-items-start">
                            <div class="activity-icon"><i class="bi bi-upc-scan"></i></div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{{ $log->message }}</div>
                                <div class="muted-line">{{ $log->gate_name }} - {{ $log->entry_time->format('h:i A') }}</div>
                            </div>
                            <span class="badge badge-soft">{{ strtoupper($log->status) }}</span>
                        </div>
                    @empty
                        <div class="empty-note">No gate scans recorded yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </aside>
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('[data-bs-toggle="pill"]').forEach(button => {
    button.addEventListener('shown.bs.tab', event => {
        document.querySelectorAll('[data-bs-toggle="pill"]').forEach(item => {
            item.classList.toggle('btn-primary', item === event.target);
            item.classList.toggle('btn-outline-secondary', item !== event.target);
        });
    });
});

const chartGrid = { color: '#e6edf5', drawBorder: false };
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: @json($revenueByDay->pluck('label')),
        datasets: [{
            label: 'Receipts',
            data: @json($revenueByDay->pluck('total')),
            borderColor: '#0f766e',
            backgroundColor: 'rgba(15,118,110,.08)',
            pointBackgroundColor: '#fff',
            pointBorderColor: '#0f766e',
            pointRadius: 3.5,
            pointHoverRadius: 5,
            borderWidth: 2,
            fill: true,
            tension: .28
        }]
    },
    options: {
        maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { backgroundColor: '#101828', padding: 10, callbacks: { label: ctx => 'Rs. ' + Number(ctx.raw || 0).toLocaleString() } } },
        scales: { x: { grid: { display: false }, ticks: { color: '#667085' } }, y: { grid: chartGrid, ticks: { color: '#667085', callback: value => Number(value).toLocaleString() } } }
    }
});
new Chart(document.getElementById('categoryChart'), {
    type: 'doughnut',
    data: {
        labels: @json($visitorsByCategory->pluck('label')),
        datasets: [{ data: @json($visitorsByCategory->pluck('total')), backgroundColor: ['#0f766e', '#c18a12', '#345f9f', '#b45309', '#64748b'], borderColor: '#fff', borderWidth: 4, hoverOffset: 6 }]
    },
    options: { maintainAspectRatio: false, cutout: '62%', plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, usePointStyle: true } } } }
});
</script>
@endpush