@extends('layouts.app')
@section('content')

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">{{__('admin.admin-dashboard')}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{__('admin.admin-dashboard')}}</a></li>
                                <li class="breadcrumb-item active"> {{__('admin.dashboard')}}</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-xl-4">
                    <div class="card overflow-hidden">
                        <div class="bg-primary bg-soft">
                            <div class="row">
                                <div class="col-7">
                                    <div class="text-primary p-3">
                                        <h4 class="text-primary">{{__('admin.welcome-back')}}</h4>
                                        <p>{{__('admin.admin-dashboard')}}</p>
                                    </div>
                                </div>
                                <div class="col-5 align-self-end">
                                    <img src="{{auth()->guard('admin')->user()->img}}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="avatar-md profile-user-wid mb-4">
                                        <img src="{{auth()->guard('admin')->user()->img}}" alt="" class="img-thumbnail rounded-circle">
                                    </div>
                                    <h5 class="font-size-15 text-truncate">{{auth()->guard('admin')->user()->name}}</h5>
{{--                                    <p class="text-muted mb-0 text-truncate">للتجارة الإلكترونية</p>--}}
                                </div>

                                <div class="col-sm-8">
                                    <div class="pt-4">

                                        <div class="row">
                                            <div class="col-6">
                                                <h5 class="font-size-15">{{$products}}</h5>
                                                <p class="text-muted mb-0">{{__('admin.purchased-products')}}</p>
                                            </div>
                                            <div class="col-6">
                                                <h5 class="font-size-15">  {{$totalProfits}}

                                                    {{$currency->value}} </h5>
                                                <p class="text-muted mb-0">{{__('admin.profits')}}</p>
                                            </div>
                                        </div>
                                        <div class="mt-4">
                                            <a href="{{route('admins.profile')}}" class="btn btn-primary waves-effect waves-light btn-sm">{{__('admin.my-profile')}}<i class="mdi mdi-arrow-right ms-1"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">{{__('admin.monthly-income')}}</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <p class="text-muted">{{__('admin.this-month')}}</p>
                                    <h3>

                                        {{$monthlyProfits}}
                                        {{$currency->value}}
                                    </h3>
                                    <p class="text-muted"><span class="@if($lessOrMore=='more') text-success @else text-danger @endif me-2"> {{$monthlyPreviousProfitsPercentage}}% <i class="mdi @if($lessOrMore=='more') mdi-arrow-up @else mdi-arrow-down @endif "></i> </span> {{__('admin.previous-month')}}</p>

{{--                                    <div class="mt-4">--}}
{{--                                        <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light btn-sm">{{__('admin.view-more')}} <i class="mdi mdi-arrow-right ms-1"></i></a>--}}
{{--                                    </div>--}}
                                </div>
                                <div class="col-sm-6">
                                    <div class="mt-4 mt-sm-0">
                                        <div id="radialBar-chart" data-colors='["--bs-primary"]' class="apex-charts"></div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-muted mb-0">
                                {{__('admin.view-more')}}

                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium">{{__('admin.finished-orders')}}</p>
                                            <h4 class="mb-0">{{$orders}}</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                            <span class="avatar-title">
                                                                <i class="bx bx-check-shield font-size-24"></i>
                                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium">{{__('admin.purchased-products')}}</p>
                                            <h4 class="mb-0"> {{$totalPurchasedProducts}}</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center ">
                                            <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                            <span class="avatar-title rounded-circle bg-primary">
                                                                <i class="bx bx-cart-alt font-size-24"></i>
                                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium"> {{__('admin.refunded-orders')}} </p>
                                            <h4 class="mb-0"> {{$refundedOrders}}</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                            <span class="avatar-title rounded-circle bg-primary">
                                                                <i class="bx bx-analyse font-size-24"></i>
                                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="card">
                        <div class="card-body">
                            <div class="d-sm-flex flex-wrap">
                                <h4 class="card-title mb-4"> {{__('admin.order-statistics')}}</h4>
                                <div class="ms-auto">
                                </div>
                            </div>

                            <div id="stacked-column-chart" class="apex-charts" data-colors='["--bs-primary", "--bs-warning", "--bs-success"]' dir="ltr"></div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end row -->

            <div class="row">


                @if(count($cities))
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">{{__('admin.top-cities')}}</h4>

                            <div class="text-center">
                                <div class="mb-4">
                                    <i class="bx bx-map-pin text-primary display-4"></i>
                                </div>
                                <h3>{{$cities[0]->orders_count}}</h3>
                                <p>{{$cities[0]->name}}</p>
                            </div>

                            <div class="table-responsive mt-4">
                                <table class="table align-middle table-nowrap">
                                    <tbody>
                                    @php $i=1; @endphp
                                    @foreach($cities as $key=>$city)

                                    <tr>
                                        <td style="width: 30%">
                                            <p class="mb-0">{{$city->name}}</p>
                                        </td>
                                        <td style="width: 25%">
                                            <h5 class="mb-0">{{$city->orders_count}}</h5></td>
                                        <td>
                                            <div class="progress bg-transparent progress-sm">
                                                <div class="progress-bar bg-primary rounded" role="progressbar" @if($key==0) style="width: 100%" @else style="width: {{($i)*100}}%" @endif aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </td>
                                    </tr>
                                        @php $i = ($i-0.25); @endphp
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                    @endif
                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-sm-flex flex-wrap">
                                <h4 class="card-title mb-4"> {{__('admin.products-statistics')}}</h4>
                                <div class="ms-auto">
                                </div>
                            </div>

                            <div id="stacked-column-chart2" class="apex-charts" data-colors='["--bs-primary", "--bs-warning", "--bs-success"]' dir="ltr"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4"> {{__('admin.latest-orders')}} </h4>
                            <div class="table-responsive">
                                <table class="table align-middle table-nowrap table-check">
                                    <thead class="table-light">
                                    <tr>

                                        <th scope="col">{{__('admin.id')}}</th>
                                        <th scope="col">{{__('admin.orders_num')}}</th>
                                        <th scope="col">{{__('admin.total')}}</th>
                                        <th scope="col">{{__('admin.status')}}</th>
                                        <th scope="col">{{__('admin.shipping')}}</th>
                                        <th scope="col">{{__('admin.payment_method')}}</th>
                                        <th scope="col">{{__('admin.created_at')}}</th>
                                        <th scope="col">{{__('admin.more')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($orders5 as $order)

                                        <tr>
                                            <td><a href="{{route('orders.show',$order->id)}}" class="text-body fw-bold">{{$order->id}}</a></td>
                                            <td><a href="{{route('orders.show',$order->id)}}"
                                                   class="text-body fw-bold">{{$order->orders_num}}</a></td>
                                            <td>
                                                {{$order->total}} {{$currency->value}}
                                            </td>
                                            <td>
                                    <span class="badge badge-pill badge-soft-success font-size-12">@if($order->order_status==0)
                                            {{__('admin.pending')}}
                                        @elseif($order->order_status==1)
                                            {{__('admin.processing')}}

                                        @elseif($order->order_status==2)
                                            {{__('admin.on-the-way')}}
                                        @elseif($order->order_status==3)
                                            {{__('admin.delivered')}}
                                        @elseif($order->order_status==-1)
                                            {{__('admin.cancelled')}}
                                        @elseif($order->order_status==4)
                                            {{__('admin.refunded')}}

                                        @else
                                            {{__('admin.refunded-admin')}}
                                        @endif</span>
                                            </td>
                                            <td>
                                                {{$order->shipping}} {{$currency->value}}
                                            </td>
                                            <td>
                                                <i class="fab fa-cc-visa me-1"></i> @if($order->payment_method==0) {{__('admin.cash')}} @else {{__('admin.online')}}  @endif
                                            </td>
                                            <td>
                                                {{Carbon\Carbon::parse($order->created_at)->locale(app()->getLocale())->translatedFormat('l dS F G:i - Y')}}
                                            </td>
                                            <td>
                                                <div class="d-flex gap-3">
                                                    @can('edit_orders')

                                                        <a href="{{route('orders.show',$order->id)}}" class="text-success"><i
                                                                class="mdi mdi-information font-size-18"></i></a>
                                                    @endcan

                                                    @can('delete_orders')

                                                        <a onclick="openModalDelete({{$order->id}})" class="text-danger"><i
                                                                class="mdi mdi-delete font-size-18"></i></a>
                                                    @endcan

                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach


                                    </tbody>
                                </table>
                            </div>
                            <!-- end table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
@endsection
@section('extra-js')
    <script src="{{asset('admin_assets/libs/apexcharts/apexcharts.min.js')}}"></script>
    <script>
        function getChartColorsArray(e) {
            if (null !== document.getElementById(e)) {
                var t = document.getElementById(e).getAttribute("data-colors");
                if (t) return (t = JSON.parse(t)).map(function (e) {
                    var t = e.replace(" ", "");
                    if (-1 === t.indexOf(",")) {
                        var r = getComputedStyle(document.documentElement).getPropertyValue(t);
                        return r || t
                    }
                    var a = e.split(",");
                    return 2 != a.length ? t : "rgba(" + getComputedStyle(document.documentElement).getPropertyValue(a[0]) + "," + a[1] + ")"
                })
            }
        }
        setTimeout(function () {
            $("#subscribeModal").modal("show")
        }, 2e3);
        var linechartBasicColors = getChartColorsArray("stacked-column-chart");
        linechartBasicColors && (options = {
            chart: {
                height: 360,
                type: "bar",
                stacked: !0,
                toolbar: {
                    show: !1
                },
                zoom: {
                    enabled: !0
                }
            },
            plotOptions: {
                bar: {
                    horizontal: !1,
                    columnWidth: "15%",
                    endingShape: "rounded"
                }
            },
            dataLabels: {
                enabled: !1
            },
            series: [{
                name: "{{__('admin.pending-orders')}}",
                data: [
                    {{$orders1Pending}},
                    {{$orders2Pending}},
                    {{$orders3Pending}},
                    {{$orders4Pending}},
                    {{$orders5Pending}},
                    {{$orders6Pending}},
                    {{$orders7Pending}},
                    {{$orders8Pending}},
                    {{$orders9Pending}},
                    {{$orders10Pending}},
                    {{$orders11Pending}},
                    {{$orders12Pending}}]
            }, {
                name: "{{__('admin.finished-orders')}}",
                data: [
                    {{$orders1Finished}},
                    {{$orders2Finished}},
                    {{$orders3Finished}},
                    {{$orders4Finished}},
                    {{$orders5Finished}},
                    {{$orders6Finished}},
                    {{$orders7Finished}},
                    {{$orders8Finished}},
                    {{$orders9Finished}},
                    {{$orders10Finished}},
                    {{$orders11Finished}},
                    {{$orders12Finished}}]
            }, {
                name: "{{__('admin.refunded-orders')}}",
                data: [{{$orders1Refunded}}, {{$orders2Refunded}}, {{$orders3Refunded}}, {{$orders3Refunded}}, {{$orders4Refunded}}, {{$orders5Refunded}}, {{$orders6Refunded}}, {{$orders7Refunded}}, {{$orders8Refunded}}, {{$orders9Refunded}}, {{$orders10Refunded}}, {{$orders11Refunded}}]
            }],
            xaxis: {
                categories: [
                    "{{Carbon\Carbon::now()->subMonths(11)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(10)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(9)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(8)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(7)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(6)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(5)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(4)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(3)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(2)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonth()->format('F')}}"
                    ,"{{Carbon\Carbon::now()->format('F')}}"]


            },
            colors: linechartBasicColors,
            legend: {
                position: "bottom"
            },
            fill: {
                opacity: 1
            }
        }

            , (chart = new ApexCharts(document.querySelector("#stacked-column-chart"), options)).render());
        var linechartBasicColors = getChartColorsArray("stacked-column-chart2");
        linechartBasicColors && (options = {
            chart: {
                height: 360,
                type: "bar",
                stacked: !0,
                toolbar: {
                    show: !1
                },
                zoom: {
                    enabled: !0
                }
            },
            plotOptions: {
                bar: {
                    horizontal: !1,
                    columnWidth: "15%",
                    endingShape: "rounded"
                }
            },
            dataLabels: {
                enabled: !1
            },
            series: [{
                name: "{{__('admin.all-products')}}",
                data: [
                    {{$totalProducts1}},
                    {{$totalProducts2}},
                    {{$totalProducts3}},
                    {{$totalProducts4}},
                    {{$totalProducts5}},
                    {{$totalProducts6}},
                    {{$totalProducts7}},
                    {{$totalProducts8}},
                    {{$totalProducts9}},
                    {{$totalProducts10}},
                    {{$totalProducts11}},
                    {{$totalProducts12}}
                ]
            }, {
                name: "{{__('admin.sold-products')}}",
                data: [
                    {{$soldProducts1}},
                    {{$soldProducts2}},
                    {{$soldProducts3}},
                    {{$soldProducts4}},
                    {{$soldProducts5}},
                    {{$soldProducts6}},
                    {{$soldProducts7}},
                    {{$soldProducts8}},
                    {{$soldProducts9}},
                    {{$soldProducts10}},
                    {{$soldProducts11}},
                    {{$soldProducts12}}
                ]
            }],
            xaxis: {
                categories: [
                    "{{Carbon\Carbon::now()->subMonths(11)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(10)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(9)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(8)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(7)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(6)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(5)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(4)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(3)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonths(2)->format('F')}}",
                    "{{Carbon\Carbon::now()->subMonth()->format('F')}}"
                    ,"{{Carbon\Carbon::now()->format('F')}}"]

            },
            colors: linechartBasicColors,
            legend: {
                position: "bottom"
            },
            fill: {
                opacity: 1
            }
        }

            , (chart = new ApexCharts(document.querySelector("#stacked-column-chart2"), options)).render());
        var options, chart, radialbarColors = getChartColorsArray("radialBar-chart");
        radialbarColors && (options = {
            chart: {
                height: 200,
                type: "radialBar",
                offsetY: -10
            },
            plotOptions: {
                radialBar: {
                    startAngle: -135,
                    endAngle: 135,
                    dataLabels: {
                        name: {
                            fontSize: "13px",
                            color: void 0,
                            offsetY: 60
                        },
                        value: {
                            offsetY: 22,
                            fontSize: "16px",
                            color: void 0,
                            formatter: function (e) {
                                return e + "%"
                            }
                        }
                    }
                }
            },
            colors: radialbarColors,
            fill: {
                type: "gradient",
                gradient: {
                    shade: "dark",
                    shadeIntensity: .15,
                    inverseColors: !1,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 65, 91]
                }
            },
            stroke: {
                dashArray: 4
            },
            series: [{{$monthlyProfitsPercentage}}],
            labels: ["معدل الزيادة هذا الشهر"]
        }, (chart = new ApexCharts(document.querySelector("#radialBar-chart"), options)).render());
    </script>

    <!-- dashboard init -->


@endsection