@extends('dashboard.layouts.main')
@section('body_main')

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h4 class="fw-bold mb-0">Dashboard Pesanan</h4>
    </div>

    {{-- Filter Tanggal --}}
    <div class="row justify-content-end mb-4">
        <div class="col-auto">
            <form method="GET" action="" class="d-flex flex-wrap justify-content-end align-items-end">
                <div class="me-2">
                    <label class="form-label mb-1">Dari Tanggal</label>
                    <input type="date" name="start_date" class="form-control" value="">
                </div>
                <div class="me-2">
                    <label class="form-label mb-1">Sampai Tanggal</label>
                    <input type="date" name="end_date" class="form-control" value="">
                </div>
                <div class="mt-3 mt-md-0">
                    <button type="submit" class="btn btn-primary">Tampilkan</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Row 1: Ringkasan Umum --}}
    <div class="row g-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-primary text-primary">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-calendar me-1"></i> Pesanan Hari Ini</h5>
                    <h2 class="fw-bold mb-1">23</h2>
                    <small>Data tanggal {{ \Carbon\Carbon::now()->format('d M Y') }}</small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-success text-success">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-check-circle me-1"></i> Pesanan Lunas</h5>
                    <h2 class="fw-bold mb-1">15</h2>
                    <small>Status: Lunas</small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-warning text-warning">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-time-five me-1"></i> Belum Selesai</h5>
                    <h2 class="fw-bold mb-1">8</h2>
                    <small>Menunggu Konfirmasi / Pembayaran</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Row 2: Transaksi & Status Pengambilan --}}
    <div class="row g-4 mt-2">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-info text-info">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-money me-1"></i> Total Nilai Transaksi</h5>
                    <h2 class="fw-bold mb-1">Rp 1.240.000</h2>
                    <small>Akumulasi dari pesanan Lunas</small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-secondary text-secondary">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-box me-1"></i> Pesanan Pending</h5>
                    <h2 class="fw-bold mb-1">5</h2>
                    <small>Lunas tapi belum diambil</small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-success text-success">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-check-square me-1"></i> Pesanan Diambil</h5>
                    <h2 class="fw-bold mb-1">10</h2>
                    <small>Pemesan sudah ambil makanannya</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Data Pesanan </h5>
        </div>
        <div class="card-body">
            <table class="table" id="datatableRekapDashboard"></table>
        </div>
    </div>
</div>
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
@endsection