@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" id="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" id="end_date" class="form-control" value="">
                </div>
                <div class="mt-3 mt-md-0">
                    <button type="button" class="btn btn-primary" id="filterDashboard">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" id="confirm_filter_name"><i class="bx bx-calendar me-1"></i> Pesanan Hari Ini</h5>
                    <h2 class="fw-bold mb-1" id="pesanan_data">23</h2>
                    <small id="confirm_filter_time">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" id="pesanan_lunas">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> Konfirmasi Pesanan</h5>
                    <h2 class="fw-bold mb-1" id="pesanan_waiting">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" id="nilai_transaksi_total">Rp 1.240.000</h2>
                    <small>Akumulasi dari pesanan</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 Lunas, Menunggu Pengambilan</h5>
                    <h2 class="fw-bold mb-1" id="pesanan_belum_diambil">5</h2>
                    <small>Pembayaran sudah lunas, namun pesanan belum diambil karena tanggal pengambilan belum sesuai. </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 Selesai</h5>
                    <h2 class="fw-bold mb-1" id="pesanan_diambil">10</h2>
                    <small>Pemesan makanan sudah ambil</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-2">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-info text-secondary">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-money me-1"></i> Karyawan RSAB Harapan Kita</h5>
                    <h2 class="fw-bold mb-1" id="nilai_transaksi_karyawan">Rp 1.240.000</h2>
                    <small>Total Nilai Transaksi Karyawan RSAB Harapan Kita</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-money me-1"></i> Keluarga Pasien / Penunggu Pasien</h5>
                   <h2 class="fw-bold mb-1" id="nilai_transaksi_pasien">Rp 1.240.000</h2>
                    <small>Total Nilai Transaksi Keluarga Pasien / Penunggu Pasien</small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-light-success text-secondary">
                <div class="card-body">
                    <h5 class="card-title mb-1"><i class="bx bx-money me-1"></i> Masyarakat Umum</h5>
                    <h2 class="fw-bold mb-1" id="nilai_transaksi_masyarakat">Rp 1.240.000</h2>
                    <small>Total Nilai Transaksi Masyarakat Umum</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