@extends('layouts/layoutMaster')

@section('title', 'Product List')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
    @vite(['resources/assets/js/gudang-add.js'])
    @vite(['resources/assets/js/gudang-dash.js'])
    @vite(['resources/assets/js/gudang-stat.js'])
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
@endsection

@section('content')
    <!-- Product List Widget -->
    <div class=" mb-6 d-none d-md-block">
        <div class="row gy-6">
            <!-- Cards with few info -->
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="avatar me-4">
                                <div class="avatar-initial bg-label-primary rounded-3">
                                    <i class="ri-user-star-line ri-24px">
                                    </i>
                                </div>
                            </div>
                            <div class="card-info">
                                <div class="d-flex align-items-center">
                                    <h5 class="mb-0 me-2">8,458</h5>
                                    <i class="ri-arrow-down-s-line text-danger ri-20px"></i>
                                    <small class="text-danger">8.10%</small>
                                </div>
                                <p class="mb-0">New Customers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="avatar me-4">
                                <div class="avatar-initial bg-label-warning rounded-3">
                                    <i class="ri-pie-chart-2-line ri-24px"></i>
                                </div>
                            </div>
                            <div class="card-info">
                                <div class="d-flex align-items-center">
                                    <h5 class="mb-0 me-2">28.6k</h5>
                                    <i class="ri-arrow-up-s-line text-success ri-20px"></i>
                                    <small class="text-success">25.8%</small>
                                </div>
                                <p class="mb-0">Total Revenue</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="avatar me-4">
                                <div class="avatar-initial bg-label-info rounded-3">
                                    <i class="ri-bank-card-line ri-24px"></i>
                                </div>
                            </div>
                            <div class="card-info">
                                <div class="d-flex align-items-center">
                                    <h5 class="mb-0 me-2">13.6k</h5>
                                    <i class="ri-arrow-down-s-line text-danger ri-20px"></i>
                                    <small class="text-danger">12.1%</small>
                                </div>
                                <p class="mb-0">New Transactions</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="avatar me-4">
                                <div class="avatar-initial bg-label-success rounded-3">
                                    <i class="ri-money-dollar-circle-line ri-24px"></i>
                                </div>
                            </div>
                            <div class="card-info">
                                <div class="d-flex align-items-center">
                                    <h5 class="mb-0 me-2">2,856</h5>
                                    <i class="ri-arrow-up-s-line text-success ri-20px"></i>
                                    <small class="text-success">54.6%</small>
                                </div>
                                <p class="mb-0">Total Profit</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Product List Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-4">Stok Gudang</h5>
        </div>
        <div class="card-datatable table-responsive">
            <table class="datatables-products table">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Sales Order</th>
                        <th>Produk</th>
                        <th>Kuantum (Kg)</th>
                        <th>Salur (Kg)</th>
                        <th>Stok (Kg)</th>
                        <th>Supplier</th>
                        <th>Gudang</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    <!-- Modal -->
    {{-- @include('_partials/_modals/add-gudang') --}}
@endsection