@extends('index')
@section('title', Helper::getSiteTitle('Dashboard'))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <h4 class="page-title">Dashboard</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-xl-3">
        <div class="widget-rounded-circle card-box" style="background-color:#95CD60">
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h3 class="mt-1" style="color:#fff;"><span data-plugin="counterup">{{ Helper::displayStocks($total_orders) }}</span></h3>
                        <p class="mb-1 text-truncate" title="{{ __('Orders Today') }}" style="color:#fff;">{{ __('Orders Today') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="widget-rounded-circle card-box" style="background-color:#F46827">
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h3 class="mt-1" style="color:#fff;"><span data-plugin="counterup">{{ Helper::displayStocks($total_products) }}</span></h3>
                        <p class="mb-1 text-truncate" title="{{ __('Total Products') }}" style="color:#fff;">{{ __('Total Products') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="widget-rounded-circle card-box" style="background-color:#8C6AAE">
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h3 class="mt-1" style="color:#fff;"><span data-plugin="counterup">{{ Helper::displayStocks($total_customers) }}</span></h3>
                        <p class="mb-1 text-truncate" title="{{ __('Total Customers') }}" style="color:#fff;">{{ __('Total Customers') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="widget-rounded-circle card-box" style="background-color:#FCBE20">
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h3 class="mt-1" style="color:#fff;"><span data-plugin="counterup">{{ Helper::displayStocks($total_pending_enquiries) }}</span></h3>
                        <p class="mb-1 text-truncate" title="{{ __('Pending Enquiries') }}" style="color:#fff;">{{ __('Pending Enquiries') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="card-box">
            <h4 class="header-title mb-0">Sales</h4>

            <div class="widget-chart text-center" dir="ltr">
                
                @php
                    $difference = Helper::percentageDifference($total_revenue_this_month, $total_revenue_last_month);
                @endphp

                @if($total_revenue_this_month == 0 || $total_revenue_this_month < $total_revenue_last_month)
                    <div id="total-revenue" class="mt-0" data-colors="#f35d5d" data-difference="{{ $difference }}"></div>
                @else
                    <div id="total-revenue" class="mt-0" data-colors="#11ca6d" data-difference="{{ $difference }}"></div>
                @endif

                <h5 class="text-muted mt-0">Total Sale In {{ now()->year }}</h5>
                <h2>{{ Helper::showCurrencyFormats($total_revenue) }}</h2>

                <div class="row mt-3">
                    <div class="col-6">
                        <p class="text-muted font-15 mb-1 text-truncate">{{ __('Last Month') }}</p>
                        @if($total_revenue_last_month == 0 || $total_revenue_last_month < $total_revenue_this_month)
                            <h4><i class="fe-arrow-down text-danger mr-1"></i>{{ Helper::showCurrencyFormats($total_revenue_last_month) }}</h4>
                        @else
                            <h4><i class="fe-arrow-up text-success mr-1"></i>{{ Helper::showCurrencyFormats($total_revenue_last_month) }}</h4>
                        @endif
                    </div>
                    <div class="col-6">
                        <p class="text-muted font-15 mb-1 text-truncate">{{ __('This Month') }}</p>
                        @if($total_revenue_this_month == 0 || $total_revenue_this_month < $total_revenue_last_month)
                            <h4><i class="fe-arrow-down text-danger mr-1"></i>{{ Helper::showCurrencyFormats($total_revenue_this_month) }}</h4>
                        @else
                            <h4><i class="fe-arrow-up text-success mr-1"></i>{{ Helper::showCurrencyFormats($total_revenue_this_month) }}</h4>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card-box pb-2">
            <h4 class="header-title mb-3">Sales Analytics</h4>
            <div dir="ltr">
                <div id="sales-analytics" class="mt-4" data-colors="#43bfe5,#6c757d"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="card-box">
            
            <h4 class="header-title mb-3">Top 10 Selling Products</h4>

            <div class="table-responsive">
                <table class="table table-borderless table-hover table-nowrap table-centered m-0">

                    <thead class="thead-light">
                        <tr>
                            <th class="font-weight-medium">Image</th>
                            <th class="font-weight-medium">Title</th>
                            <th class="font-weight-medium">Price (Incl. VAT)</th>
                            <th class="font-weight-medium text-right">Total In Stock</th>
                        </tr>
                    </thead>
                    <tbody>
                    	@if(!$top_selling_products->isEmpty())
	                    	@foreach($top_selling_products as $product)
	                        <tr>
	                            <td style="width: 36px;">
	                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" title="{{ $product->name }}" class="rounded-circle avatar-sm" style="object-fit: contain;" />
	                            </td>

	                            <td>
	                                <h5 class="m-0 font-weight-normal"><a href="{{ route('edit-product-details', [$product->id]) }}">{{ $product->name }}</a></h5>
	                                <p class="mb-0 text-muted"><small>{{ $product->sku }}</small></p>
	                                <p class="mb-0 text-muted"><small>{{ $product->total }} Times Sold</small></p>
	                            </td>

	                            <td>
	                                {{ Helper::showCurrencyFormats($product->selling_price) }}
	                            </td>

	                            <td class="text-right">
	                                {{ Helper::displayStocks($product->instock) }}
	                            </td>
	                        </tr>
	                        @endforeach
	                    @else
	                    	<tr>
	                    		<td colspan="4" class="text-center">No product found yet</td>
	                    	</tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div> <!-- end col -->

    <div class="col-xl-6">
        <div class="card-box">
            <h4 class="header-title mb-3">Orders Today</h4>

            <div class="table-responsive">
                <table class="table table-borderless table-nowrap table-hover table-centered m-0">

                    <thead class="thead-light">
                        <tr>
                            <th class="font-weight-medium">#</th>
                            <th class="font-weight-medium">Customer Details</th>
                            <th class="font-weight-medium">Grand Total</th>
                            <th class="font-weight-medium text-right">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                    	@if(!$orders_today->isEmpty())
                    	@foreach($orders_today as $row)
                        <tr>
                            <td>
                                <h5 class="m-0 font-weight-normal">
                                	<a href="{{ route('view-order-details', [$row->id]) }}">
                                		{{ $row->id }} <br>
                                		({{ with(new \Carbon\Carbon($row->created_at))->diffForHumans() }})
                                	</a>
                                </h5>
                            </td>

                            <td>
                                <b>{{ $row->shipping_first_name }} {{ $row->shipping_last_name }}</b><br>
								<a href="mailto:{{ $row->shipping_email }}">{{ $row->shipping_email }}</a><br>
								<a href="tel:{{ $row->shipping_phone }}">{{ $row->shipping_phone }}</a>
                            </td>

                            <td>
                                <b>{{ Helper::showCurrencyFormats($row->grand_total) }}</b><br>
                                @if ($row->paid == 0)
                                	<div class="badge badge-danger badge-pill">NOT PAID</div>
                                @else
                                	<div class="badge badge-success badge-pill">PAID</div>
                                @endif
                            </td>

                            <td class="text-right">
                                @if (empty($row->orders_status_name))
                                	<span class="badge bg-soft-warning text-warning">Pending</span>
                                @else
                                	<span class="badge bg-soft-{{ $row->color }} text-{{ $row->color }}">{{ $row->orders_status_name }}</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        @else
	                    	<tr>
	                    		<td colspan="4" class="text-center">No order today</td>
	                    	</tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js-lib')
<script src="{{ asset('libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('libs/selectize/js/standalone/selectize.min.js') }}"></script>
@endsection

@section('js')
<script type="text/javascript">
	var dataColors;
	
	var revenue = '{!! json_encode($revenue) !!}';
	revenue = JSON.parse(revenue);
	
	var sales = '{!! json_encode($sales) !!}';
	sales = JSON.parse(sales);
	
	var date = '{!! json_encode($date) !!}';
	date = JSON.parse(date);

	colors = ["#1abc9c", "#4a81d4"];
	(dataColors = $("#sales-analytics").data("colors")) && (colors = dataColors.split(","));
	var chart;
	options = {
	    series: [
	        { name: "Revenue", type: "column", data: revenue },
	        { name: "Sales", type: "line", data: sales },
	    ],
	    chart: { height: 378, type: "line" },
	    stroke: { width: [2, 3] },
	    plotOptions: { bar: { columnWidth: "50%" } },
	    colors: colors,
	    dataLabels: { enabled: !0, enabledOnSeries: [1] },
	    labels: date,
	    xaxis: { type: "datetime" },
	    legend: { offsetY: 7 },
	    grid: { padding: { bottom: 20 } },
	    fill: { type: "gradient", gradient: { shade: "light", type: "horizontal", shadeIntensity: 0.25, gradientToColors: void 0, inverseColors: !0, opacityFrom: 0.75, opacityTo: 0.75, stops: [0, 0, 0] } },
	    yaxis: [{ title: { text: "Net Revenue" } }, { opposite: !0, title: { text: "Total Sales" } }],
	};
	(chart = new ApexCharts(document.querySelector("#sales-analytics"), options)).render(), $("#dash-daterange").flatpickr({ altInput: !0, mode: "range", altFormat: "F j, y", defaultDate: "today" });
</script>
@endsection