@extends('layouts.admin')

@section('content')
    <div class="row">
        <div class="col-lg-4">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <div class=" d-flex align-items-center">
                        <span class="btn btn-primary rounded-circle round-48 hstack justify-content-center">
                            <i class="fa-solid fa-fish fs-6"></i>
                        </span>
                        <div class="ms-3">
                            <h5 class="mb-0 fw-bolder fs-4">Jumlah Stok Ikan</h5>
                        </div>
                        <div class="ms-auto">
                            <span class="badge bg-secondary-subtle text-muted">{{ $product_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card overflow-hidden">
                <div class="card-body ">
                    <div class="d-flex align-items-center">
                        <span class="btn btn-warning rounded-circle round-48 hstack justify-content-center">
                            <i class="fa-solid fa-bag-shopping fs-6"></i>
                        </span>
                        <div class="ms-3">
                            <h5 class="mb-0 fw-bolder fs-4">Produk Terjual</h5>
                        </div>
                        <div class="ms-auto">
                            <span class="badge bg-secondary-subtle text-muted">{{ $bestProduct }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card overflow-hidden">
                <div class="card-body ">

                    <div class="d-flex align-items-center">
                        <span class="btn btn-success rounded-circle round-48 hstack justify-content-center">
                            <i class="fa-solid fa-users fs-6"></i>
                        </span>
                        <div class="ms-3">
                            <h5 class="mb-0 fw-bolder fs-4">Jumlah Pelanggan</h5>
                        </div>
                        <div class="ms-auto">
                            <span class="badge bg-secondary-subtle text-muted">{{ $customer_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-md-flex align-items-center">
                        <div>
                            <h4 class="card-title">Pesanan Terbaru</h4>
                        </div>
                    </div>
                    <div class="table-responsive mt-4">
                        <table class="table mb-0 text-nowrap varient-table align-middle fs-3">
                            <thead>
                                <tr>
                                    <th scope="col" class="px-0 text-muted">Nama</th>
                                    <th scope="col" class="px-0 text-muted">Status</th>
                                    <th scope="col" class="px-0 text-muted">Tanggal Pemesanan</th>
                                    <th scope="col" class="px-0 text-muted">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($latest_order as $item)
                                    <tr>
                                        <td class="px-0">
                                            <h6 class="mb-0 fw-bolder">{{ $item->getCustomerName($item->id) }}</h6>
                                        </td>
                                        <td class="px-0 text-muted">
                                            @switch($item->status)
                                                @case(0)
                                                    <span class="badge bg-secondary-subtle text-muted">Sedang di Proses</span>
                                                @break

                                                @case(1)
                                                    <span class="badge bg-secondary-subtle text-muted">Sudah di Bayar</span>
                                                @break

                                                @case(2)
                                                    <span class="badge bg-secondary-subtle text-muted">Sedang di Antar</span>
                                                @break

                                                @case(3)
                                                    <span class="badge bg-secondary-subtle text-muted">Sudah di Terima</span>
                                                @break

                                                @default
                                            @endswitch
                                        </td>
                                        <td class="px-0">{{ date('d-m-Y H:i:s', strtotime($item->created_at)) }}</td>
                                        <td class="px-0">
                                            <a href="{{ route('admin.order.edit', $item->id) }}"
                                                style="text-decoration: none">
                                                <button class="btn btn-warning btn-sm text-white mb-0 me-0"
                                                    type="button"><i class="mdi mdi-pencil"></i>Edit</button>
                                            </a>
                                            <a href="{{ route('admin.order.order_detail', $item->id) }}"
                                                style="text-decoration: none">
                                                <button class="btn btn-secondary btn-sm text-white mb-0 me-0"
                                                    type="button"><i class="mdi mdi-pencil"></i>Detail Pemesanan</button>
                                            </a>
                                            <form action="{{ route('admin.order.delete') }}" style="display: inline-block"
                                                method="POST">
                                                @csrf @method('DELETE')
                                                <input type="hidden" value="{{ $item->id }}" name="id">
                                                <button class="btn btn-danger btn-sm text-white mb-0 me-0" type="submit"><i
                                                        class="mdi mdi-delete"></i>Hapus</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="card w-100">
                <div class="card-body">
                    <div class="d-md-flex align-items-center">
                        <div>
                            <h4 class="card-title">Ulasan Penjualan</h4>
                            <p class="card-subtitle">
                                Master Admin Pasar Nelayan
                            </p>
                        </div>
                        <div class="ms-auto">
                            <ul class="list-unstyled mb-0">
                                <li class="list-inline-item text-primary">
                                    <span class="round-8 text-bg-primary rounded-circle me-1 d-inline-block"></span>
                                    Pesanan Terjual
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="sales-overview" class="mt-4 mx-n6"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-scripts')
    <script>
        $(function() {
            // -----------------------------------------------------------------------
            // sales overview
            // -----------------------------------------------------------------------

            var options_sales_overview = {
                series: [{
                    name: "Ample Admin",
                    data: @json($dataValue),
                }, ],
                chart: {
                    type: "bar",
                    height: 275,
                    toolbar: {
                        show: false,
                    },
                    foreColor: "#adb0bb",
                    fontFamily: "inherit",
                    sparkline: {
                        enabled: false,
                    },
                },
                grid: {
                    show: false,
                    borderColor: "transparent",
                    padding: {
                        left: 0,
                        right: 0,
                        bottom: 0,
                    },
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: "25%",
                        endingShape: "rounded",
                        borderRadius: 5,
                    },
                },
                colors: ["var(--bs-primary)", "var(--bs-secondary)"],
                dataLabels: {
                    enabled: false,
                },
                yaxis: {
                    show: true,
                    min: 1,
                    max: 100,
                    tickAmount: 3,
                },
                stroke: {
                    show: true,
                    width: 5,
                    lineCap: "butt",
                    colors: ["transparent"],
                },
                xaxis: {
                    type: "category",
                    categories: @json($dataLabel),
                    axisBorder: {
                        show: false,
                    },
                },
                fill: {
                    opacity: 1,
                },
                tooltip: {
                    theme: "dark",
                },
                legend: {
                    show: false,
                },
            };

            var chart_column_basic = new ApexCharts(
                document.querySelector("#sales-overview"),
                options_sales_overview
            );
            chart_column_basic.render();
        })
    </script>
@endsection
