@extends('backend.layouts.app')
@section('content')
<div class="d-flex flex-column flex-column-fluid">
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar pt-6 pb-2">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex align-items-stretch">
            <!--begin::Toolbar wrapper-->
            <div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex flex-column justify-content-center text-gray-900 fw-bold fs-3 m-0">{{translate('Statistic Dashboard')}} </h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="index.html" class="text-muted text-hover-primary">{{translate('Home')}}</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-500 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">{{translate('Dashboards')}}</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
                <!--begin::Actions-->
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <a href="{{route('products.create')}}" class="btn btn-flex btn-outline btn-color-gray-700 btn-active-color-primary bg-body h-40px fs-7 fw-bold">{{translate('Add Products')}}</a>
                    <a href="{{route('marketers.index')}}" class="btn btn-flex btn-primary h-40px fs-7 fw-bold">{{translate('Marketers')}}</a>
                </div>
                <!--end::Actions-->
            </div>
            <!--end::Toolbar wrapper-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->
    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-fluid">

            <div class="row gy-5 gx-xl-10">
                <!--begin::Col-->
                <div class="col-sm-6 col-xl-3 mb-xl-10">

                    <!--begin::Card widget 2-->
                    <div class="card h-lg-80">
                        <!--begin::Body-->
                        <div class="card-body d-flex justify-content-between align-items-start flex-column">
                            <!--begin::Icon-->
                            <div class="m-0">
                                <i class="fa fa-user fs-2hx text-gray-600"></i>


                            </div>
                            <!--end::Icon-->

                            <!--begin::Section-->
                            <div class="d-flex flex-column my-7">
                                <!--begin::Number-->
                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{$adminsCount}}</span>
                                <!--end::Number-->

                                <!--begin::Follower-->
                                <div class="m-0">
                                    <span class="fw-semibold fs-6 text-gray-500">
                                        {{translate('Total Admins')}} </span>

                                </div>
                                <!--end::Follower-->
                            </div>
                            <!--end::Section-->


                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Card widget 2-->


                </div>
                <!--end::Col-->

                <!--begin::Col-->
                <div class="col-sm-6 col-xl-3 mb-xl-10">

                    <!--begin::Card widget 2-->
                    <div class="card h-lg-80">
                        <!--begin::Body-->
                        <div class="card-body d-flex justify-content-between align-items-start flex-column">
                            <!--begin::Icon-->
                            <div class="m-0">
                                <i class="fa fa-user-tie fs-2hx text-gray-600"></i> <!-- Represents a business customer -->

                            </div>
                            <!--end::Icon-->

                            <!--begin::Section-->
                            <div class="d-flex flex-column my-7">
                                <!--begin::Number-->
                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{$customersCount}}</span>
                                <!--end::Number-->

                                <!--begin::Follower-->
                                <div class="m-0">
                                    <span class="fw-semibold fs-6 text-gray-500">
                                        {{translate('Total Customer')}} </span>

                                </div>
                                <!--end::Follower-->
                            </div>
                            <!--end::Section-->

                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Card widget 2-->


                </div>
                <!--end::Col-->

                <!--begin::Col-->
                <div class="col-sm-6 col-xl-3 mb-xl-10">

                    <!--begin::Card widget 2-->
                    <div class="card h-lg-80">
                        <!--begin::Body-->
                        <div class="card-body d-flex justify-content-between align-items-start flex-column">
                            <!--begin::Icon-->
                            <div class="m-0">
                                <i class="fa fa-shipping-fast fs-2hx text-gray-600"></i> <!-- Fast shipping -->


                            </div>
                            <!--end::Icon-->

                            <!--begin::Section-->
                            <div class="d-flex flex-column my-7">
                                <!--begin::Number-->
                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{$totalcarrier}}</span>
                                <!--end::Number-->

                                <!--begin::Follower-->
                                <div class="m-0">
                                    <span class="fw-semibold fs-6 text-gray-500">
                                        {{translate('Total Carrier')}} </span>

                                </div>
                                <!--end::Follower-->
                            </div>
                            <!--end::Section-->


                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Card widget 2-->


                </div>
                <!--end::Col-->

                <!--begin::Col-->
                <div class="col-sm-6 col-xl-3 mb-xl-10">

                    <!--begin::Card widget 2-->
                    <div class="card h-lg-80">
                        <!--begin::Body-->
                        <div class="card-body d-flex justify-content-between align-items-start flex-column">
                            <!--begin::Icon-->
                            <div class="m-0">
                                <i class="fa fa-dollar-sign fs-2hx text-gray-600"></i> <!-- Dollar sign -->


                            </div>
                            <!--end::Icon-->

                            <!--begin::Section-->
                            <div class="d-flex flex-column my-7">
                                <!--begin::Number-->
                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{$totalProfits}} $</span>
                                <!--end::Number-->

                                <!--begin::Follower-->
                                <div class="m-0">
                                    <span class="fw-semibold fs-6 text-gray-500">
                                        {{translate('Total Profits')}} </span>

                                </div>
                                <!--end::Follower-->
                            </div>
                            <!--end::Section-->


                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Card widget 2-->


                </div>
                <!--end::Col-->

            </div>

            <div class="row">
                <div class="col-xl-12 mb-xl-12">
                    <div class="card">
                        <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
                            <!--begin::Chart-->
                            <div id="kt_charts_widget_38_chart44" class="h-325px w-100 min-h-auto ps-4 pe-6"></div>
                            <!--end::Chart-->
                        </div>
                    </div>
                </div>
            </div>



            {{-- cubicBezier , stepline , monotoneCubic ,straight ,smooth this shapes for charts --}}
            <!--end::Col-->



            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">

                <!--begin::Col-->
                <div class="col-xl-12 mb-5 mb-xl-10">
                    <!--begin::Table Widget 4-->
                    <div class="card card-flush h-xl-100">
                        <!--begin::Card header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">Product Orders</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">Last New Orders</span>

                            </h3>
                            <!--end::Title-->

                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-2">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-3" id="kt_table_widget_4_table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">ID</th>
                                        <th class="text-end min-w-100px">Created</th>
                                        <th class="text-end min-w-125px">Customer</th>
                                        <th class="text-end min-w-100px">Total</th>
                                        <th class="text-end min-w-100px">Status</th>
                                        <th class="text-end min-w-50px"></th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600">
                                    @if ($orders->isEmpty())
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">{{ __('No data in database record') }}</td>
                                    </tr>
                                    @else
                                    @foreach($orders as $order)
                                    <tr data-bs-toggle="collapse" data-bs-target="#order-{{ $order->id }}" class="accordion-toggle">
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td class="text-end">{{ $order->created_at->format('Y-m-d') }}</td>
                                        <td class="text-end">{{ $order->user ? $order->user->name : 'Guest' }}</td>
                                        <td class="text-end">{{ number_format($order->grand_total, 2) }} {{ $order->currency->code ?? '' }}</td>
                                        <td class="text-end">
                                            @if ($order->order_status == 1)
                                            <span class="badge py-3 px-4 fs-7 badge-light-success">{{ translate('Accepted') }}</span>
                                            @else
                                            <span class="badge py-3 px-4 fs-7 badge-light-danger">{{ translate('Declined') }}</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <i class="fas fa-chevron-down"></i>
                                        </td>
                                    </tr>
                                    <tr id="order-{{ $order->id }}" class="collapse">
                                        <td colspan="6">
                                            <table class="table align-middle table-row-dashed fs-6 gy-3">
                                                <thead>
                                                    <tr>
                                                        <th>Product</th>
                                                        <th class="text-end">Cost</th>
                                                        <th class="text-end">Qty</th>
                                                        <th class="text-end">Total</th>
                                                        <th class="text-end">On Hand</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($order->orderDetails as $detail)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center gap-3">
                                                                <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded">
                                                                    <img src="{{ isset($detail->product->gallery[0]) ? $detail->product->gallery[0] : asset('assets/images/icons/bag.svg') }}" alt="{{ $detail->product ? $detail->product->getTranslation('name') : ' Image' }}" class="img-fluid" />
                                                                </a>
                                                                <div class="d-flex flex-column text-muted">
                                                                    <a href="#" class="text-gray-800 text-hover-primary fw-bold">
                                                                        {{ $detail->product ? $detail->product->getTranslation('name') : 'N/A' }}
                                                                    </a>
                                                                    <div class="fs-7">
                                                                        {{ $detail->product ? $detail->product->getTranslation('description') : 'No description' }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="text-end">{{ number_format($detail->price, 2) }}</td>
                                                        <td class="text-end">{{ $detail->quantity }}</td>
                                                        <td class="text-end">{{ number_format($detail->price * $detail->quantity, 2) }}</td>
                                                        <td class="text-end">
                                                            {{ $detail->product && $detail->product->stockDetails ? $detail->product->stockDetails->stock : 'N/A' }}
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @endif


                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Table Widget 4-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">

                <!--begin::Col-->
                <div class="col-xl-12">
                    <!--begin::Table Widget 5-->
                    <div class="card card-flush h-xl-100">
                        <!--begin::Card header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-900">Stock Report</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">Total {{ $stocks->sum('qty') }} Items in the Stock</span>
                            </h3>
                            <!--end::Title-->

                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-3" id="kt_table_widget_5_table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                        <th>Product Image</th>
                                        <th>Product Name</th>
                                        <th>SKU</th>
                                        <th>Price</th>
                                        <th>Inventory</th>
                                        <th>Status</th>
                                        <th>Quantity</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600">
                                    @if ($stocks->isEmpty())
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">{{ __('No data in database record') }}</td>
                                    </tr>
                                    @else
                                    @foreach ($stocks as $stock)
                                    <tr>
                                        <td>
                                            <img width="50" src="{{ isset($stock->product->gallery[0]) ? $stock->product->gallery[0] : asset('assets/images/icons/bag.svg') }}" alt="" class="img-fluid" />
                                        </td>
                                        <td>{{ $stock['product_name'] }}</td>
                                        <td>{{ $stock['product_id'] }}</td>
                                        <td>${{ number_format($stock['price'], 2) }}</td>
                                        <td>{{ $stock['stock_name'] }}</td>
                                        <td>
                                            <span class="badge {{ $stock['status'] == 1 ? 'badge-success' : 'badge-danger' }}">
                                                {{ $stock['status'] == 1 ? 'Available' : 'Not available' }}
                                            </span>
                                        </td>
                                        <td>{{ $stock['qty'] }} PCS</td>
                                    </tr>
                                    @endforeach
                                    @endif


                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Table Widget 5-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
</div>


@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#stock_table').DataTable({
                responsive: true
                , autoWidth: false
            });
        });

    </script>



    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var dailyRevenue = {{$dailyRevenue}};
            var weeklyRevenue = {{$weeklyRevenue}};
            var monthlyRevenue = {{$monthlyRevenue}};
            var yearlyRevenue = {{$yearlyRevenue}};


            var element = document.getElementById("kt_charts_widget_38_chart44");

            if (element) {
                var options = {
                    series: [{
                        name: "Revenue"
                        , data: [dailyRevenue, weeklyRevenue, monthlyRevenue, yearlyRevenue]
                    }]
                    , chart: {
                        type: "area"
                        , height: 325
                        , toolbar: {
                            show: false
                        }
                    }
                    , dataLabels: {
                        enabled: false
                    }
                    , stroke: {
                        curve: "monotoneCubic"
                    }
                    , xaxis: {
                        categories: ['Daily', 'Weekly', 'Monthly', 'Yearly']
                    }
                    , colors: ['#009EF7']
                    , fill: {
                        type: "smooth"
                        , gradient: {
                            shadeIntensity: 1
                            , opacityFrom: 0.4
                            , opacityTo: 0
                            , stops: [0, 90, 100]
                        }
                    }
                };

                var chart = new ApexCharts(element, options);
                chart.render();
            }
        });

    </script>
@endsection