@extends('layouts.app')

@section('title', 'Dashboard Overview')
@section('page-title', 'Dashboard Overview')

@section('content')
<div class="container-fluid py-3">
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h6 class="text-muted">Total Sales</h6>
                    <h4 class="fw-bold">${{ number_format($totalSales, 2) }}</h4>
                    <small class="text-success">{{ $salesChange }}% Than Last Month</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h6 class="text-muted">Total Orders</h6>
                    <h4 class="fw-bold">${{ number_format($totalOrderAmount, 0) }} ({{ $totalOrders }} Invoice)</h4>
                    <small class="text-primary">+{{ $orderChange }}% Than Last Month</small>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h6 class="text-muted">Payment Complete</h6>
                    <h4 class="fw-bold">${{ number_format($totalCompletedPayments, 0) }}</h4>
                    <small class="text-success">+{{ $completedChange }}% Than Last Month</small>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h6 class="text-muted">Payment Pending</h6>
                    <h4 class="fw-bold">${{ number_format($totalPendingPayments, 0) }}</h4>
                    <small class="text-danger">{{ $pendingChange }}% Than Last Month</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts & Widgets --}}
    <div class="row g-4 align-items-stretch">
        <div class="col-12 col-lg-8 d-flex flex-column gap-4">
            <div class="card shadow-sm border-0 flex-fill">
                <div class="card-header bg-white">
                    <h6 class="fw-semibold mb-0">Sales & Orders</h6>
                </div>
                <div class="card-body">
                    <canvas id="salesChart" style="width: 100%; height: 300px;"></canvas>
                </div>
            </div>

            <div class="card shadow-sm border-0 flex-fill">
                <div class="card-header bg-white">
                    <h6 class="fw-semibold mb-0">Recent Invoices</h6>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Invoice ID</th>
                                <th>Table Session</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Active</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recentInvoices as $inv)
                                <tr>
                                    <td>#{{ $inv->id }}</td>
                                    <td>{{ $inv->table_name }}</td>
                                    <td>${{ number_format($inv->total, 2) }}</td>
                                    <td>
                                        @if ($inv->payment_status === 'paid')
                                            <span class="badge bg-success">Paid</span>
                                        @else
                                            <span class="badge bg-warning text-dark">Pending</span>
                                        @endif
                                    </td>
                                    <td>{{ date('d M Y - H:i A', strtotime($inv->created_at)) }}</td>
                                    <td>
                                        <a href="{{ route('sales.create', ['invoice' => $inv->id]) }}" class="btn btn-sm btn-primary">
                                            Create Sale
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-3">No invoices found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4 d-flex flex-column gap-4">
            <div class="card shadow-sm border-0 flex-fill">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">Orders Items</h6>
                    <ul class="list-group small">
                        @foreach ($summaryorders as $item)
                            <li class="list-group-item d-flex justify-content-between flex-wrap">
                                <span>{{ $item->name }}</span>
                                <span>{{ $item->total_amount }} (ចំនួន {{ $item->qty_sold }})</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: @json($labels),
        datasets: [
            { label: 'Sales', data: @json($salesData), backgroundColor: '#0d6efd' },
            { label: 'Orders', data: @json($ordersData), backgroundColor: '#dc3545' }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: { y: { beginAtZero: true } }
    }
});
</script>
@endpush