@extends('layouts.master')

@section('page_title', 'Dashboard')
@section('title', "$dashboard")
@section('main_item', 'Dashboard')
@section('sub_item', '')

@section('content')
<link href="{{asset('css/welcome.css')}}" rel="stylesheet" />
    @can('dashbord')
        {{-- <div class="col-sm-12 text-right right-padding"> --}}
            {{-- <div class="input-group col-lg-3 mb-2 float-right col-12">
                <input type="text" class="form-control" name="dates" id="reportrange" readonly
                    style="background-color: #203647;color: white; !important">
            </div>
            <div class="col-lg-3 col-12 mb-2 float-right" @if ($setting->business_location != '1') style="display: none" @endif>
                <div class="input-group">
                    <select class="form-control" id="location_id" name="location_id"
                        style="background-color: #203647;color: white; !important">
                        <option value="">Select Location</option>
                        @foreach ($business_locations as $business_location)
                            @if ($business_location->is_active == '1')
                                <option value="{{ $business_location->id }}" @if ( $business_location->id == 1) selected @endif>{{ $business_location->name }}
                                </option>
                            @else
                            @endif
                        @endforeach
                    </select>
                </div>
            </div> --}}
        {{-- </div> --}}
        {{-- </div><br> --}}
        {{-- <div class="btn-group" role="group" aria-label="Basic example" style="float: right;">
                <button type="button" id="option1" class="btn date_range"
                    style="background-color: #203647;color: white; !important">Today</button>
                <button type="button" id="option2" class="btn date_range"
                    style="background-color: #203647;color: white; !important !important">This Week</button>
                <button type="button" id="option3" class="btn date_range"
                    style="background-color: #203647;color: white; !important">This Month</button>
                <button type="button" id="option4" class="btn date_range"
                    style="background-color: #203647;color: white; !important">This Financial Year</button>
            </div> --}}
        {{-- <div class="row right-padding" style="margin-top: -15px;">
            <div class="col-sm">
                <div class="card text-white" style="background-color: #203647; !important">
                    <div class="card-body">
                        <h5 class="font-weight fixed-height"><span> </span>Total Sales<span class="float-right" id="total_count">
                                {{ $total_count }}
                            </span></h5>
                        <div class="d-flex justify-content-between">
                        </div>
                        <h4 class="font-weight fixed-height"><span id="total_sum">
                                Rs. {{ number_format($total_sum, 2) }}
                            </span> <span class="float-right"> <i
                                    class="dripicons-cart card-eco-icon text-secondary  align-self-center"></i></span></h4>
                    </div>
                </div>
            </div>
            <div class="col-sm" @if ($setting->total_sale_of_confirmed_orders != '1') style="display: none" @endif>
                <div class="card text-white" style="background-color: #203647; !important">
                    <div class="card-body">
                        <h5 class="font-weight fixed-height"><span> </span>Total Sales Of Only Confirmed<span class="float-right"
                                id="confirm_oders_total_count">
                                Rs. {{ number_format($confirm_oders_total_count, 2) }}
                            </span></h5>
                        <div class="d-flex justify-content-between">
                        </div>
                        <h4 class="font-weight fixed-height"><span id="confirm_oders_total_sum">
                                Rs. {{ number_format($confirm_oders_total_sum, 2) }}
                            </span> <span class="float-right"> <i
                                    class="dripicons-cart card-eco-icon text-secondary  align-self-center"></i></span></h4>
                    </div>
                </div>
            </div>
            <div class="col-sm">
                <div class="card text-white" style="background-color: #203647; !important">
                    <div class="card-body">
                        <h5 class="font-weight fixed-height">Total Purchase <span class="float-right" id="week_count">
                                {{ $total_purchase_count }}
                            </span></h5>
                        <div class="d-flex justify-content-between">
                        </div>
                        <h4 class="font-weight fixed-height"><span id="week_sum">
                                Rs. {{ number_format($total_purchase, 2) }}
                            </span> <span class="float-right">
                                <i class="dripicons-jewel card-eco-icon text-warning  align-self-center"></i></span></h4>
                    </div>
                </div>
            </div>
            <div class="col-sm">
                <div class="card text-white" style="background-color: #203647; !important">
                    <div class="card-body">
                        <h5 class="font-weight fixed-height">Courier Payment Due <span class="float-right" id="month_count">
                                {{ $courier_due_count }}
                            </span></h5>
                        <div class="d-flex justify-content-between">
                        </div>
                        <h4 class="font-weight fixed-height"><span id="month_sum">
                                Rs. {{ number_format($total_payments_due, 2) }}
                            </span><span class="float-right"> <i
                                    class="dripicons-wallet card-eco-icon text-success  align-self-center"></i></span></h4>
                    </div>
                </div>
            </div>
            <div class="col-sm">
                <div class="card text-white" style="background-color: #203647; !important">
                    <div class="card-body">
                        <h5 class="font-weight fixed-height">Purchase Due <span class="float-right" id="grn_due_count">
                                {{ $grn_due_count }}
                            </span></h5>
                        <div class="d-flex justify-content-between">
                        </div>
                        <h4 class="font-weight fixed-height"><span id="grn_due">
                                Rs. {{ number_format($grn_due) }}
                            </span> <span class="float-right">
                                <i class=" fas fa-dolly  card-eco-icon text-pink align-self-center"></i></span></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row right-padding">
            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                        <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                        <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Pending Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="pending_oders">
                                        {{ $pending_oders }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                        <polyline points="9 11 12 14 22 4"></polyline>
                                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                    </svg>

                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Confirmed Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="confirm_oders">
                                        {{ $confirm_oders }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-purple" role="progressbar" style="width: 39%;" aria-valuenow="39"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->

            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-lock icon-lg icon-dual-info">
                                        <rect x="3" y="11" width="18" height="11" rx="2"
                                            ry="2"></rect>
                                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Hold Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hold_oders">
                                        {{ $hold_oders }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 48%;" aria-valuenow="48"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-users align-self-center icon-md icon-dual-purple">
                                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Not Confirm Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="not_confirm">
                                        {{ $not_confirm }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 22%;" aria-valuenow="22"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                        <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                        <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Cancel Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="cancel_oders">
                                        {{ $cancel_oders }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <div class="col-lg-2">
                <div class="card" style="height: 125px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="8" x2="12" y2="16"></line>
                                        <line x1="8" y1="12" x2="16" y2="12"></line>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Release Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="release_order_id">
                                        {{ $release_orders }}
                                    </h3>

                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-gray" role="progressbar" style="width: 48%;" aria-valuenow="48"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg" @if ($setting->delivery_status != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                        <polyline points="13 2 13 9 20 9"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Waybill Print</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="print_order_count">
                                        {{ $print_order_count }}
                                    </h3>

                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-blue" role="progressbar" style="width: 48%;" aria-valuenow="48"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg" @if ($setting->delivery_status != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                        <polyline points="13 2 13 9 20 9"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Dispatch Orders</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="dispatch_order_count">
                                        {{ $dispatch_order_count }}
                                    </h3>

                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-blue" role="progressbar" style="width: 48%;" aria-valuenow="48"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->

            <div class="col-lg" @if ($setting->delivery_status != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                        <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                        <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status (Pending)</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="pending">
                                        {{ $delivery_panding }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg" @if ($setting->delivery_status != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                        <polyline points="13 2 13 9 20 9"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status
                                            (Returned)</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="retun">
                                        {{ $retun }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-pink" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg" @if ($setting->reshedule_and_diliverd != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                        <polyline points="13 2 13 9 20 9"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status
                                            (Reshedule)</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="reshedule">
                                        {{ $reshedule }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-pink" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-lg" @if ($setting->reshedule_and_diliverd != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                        <polyline points="9 11 12 14 22 4"></polyline>
                                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status
                                            (Reshedule & Delivered)</b></p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="reshedule_diliverd">
                                        {{ $reshedule_diliverd }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->

            <div class="col-lg" @if ($setting->delivery_status != '1') style="display: none" @endif>
                <div class="card" style="height: 145px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                        <polyline points="9 11 12 14 22 4"></polyline>
                                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-right">
                                <div class="ml-2">
                                    <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status (Delivered)</b>
                                    </p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold" id="delivered">
                                        {{ $delivered }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
        </div>

        <!--end col-->
        <div class="row right-padding">
            <div class="col-md-4" @if ($setting->lead_resouses_pie_chart != '1') style="display: none" @endif>
                <div class="card card-eco" style="height: 410px;">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Delivery Status Of Only Leads Resoreces</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="table table-responsive" style="height: 350px;">
                                    <table class="table table-striped" id="leeds-resoreces">
                                        <thead class="text-primary">
                                            <tr class="table-primary">
                                                <th>Status</th>
                                                <th></th>
                                                <th>Count</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Leads to Confirm </td>
                                                <td> <label style="background: #2ecc71;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></td>
                                                <td id="ok">
                                                    {{ $ok }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Confirm to Dispatch</td>
                                                <td><label style="background: #2980b9;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                </td>
                                                <td id="ok_to_dispatch">
                                                    {{ $ok_to_dispatch }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Dispatch to Delivered </td>
                                                <td> <label style="background: #1abc9c;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                </td>
                                                <td id="ok_to_deliver">
                                                    {{ $ok_to_deliver }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Leads to Delivered </td>
                                                <td> <label style="background: #ADFF2F;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                </td>
                                                <td id="total_leads_to_delivered">
                                                    {{ $total_leads_to_delivered }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div id="" class="">
                                    {!! $chartjs_2->render() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end card -body-->
                </div>
            </div>
            <div class="col-md-4" @if ($setting->lead_resouses_pie_chart != '1') style="display: none" @endif>
                <div class="card card-eco" style="height: 410px;">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Top Selling Items</h4>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table table-responsive">
                                    <table class="table table-striped" id="top-selling-item">
                                        <thead class="text-primary">
                                            <tr class="table-primary">
                                                <th>SKU</th>
                                                <th>Product Name</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($widget['top_selling_items'] as $item)
                                                <tr>
                                                    <td>{{ $item->sku }}</td>
                                                    <td>{{ $item->product_name }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                            </div>
                        </div>
                    </div>
                    <!--end card -body-->
                </div>
            </div>
            <div class="col-md-4" @if ($setting->lead_resouses_pie_chart != '1') style="display: none" @endif>
                <div class="card card-eco" style="height: 410px;">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Leads Resources List</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="table table-responsive" style="height: 350px;">
                                    <table class="table table-striped" id="leeds-resoreces">
                                        <thead class="text-primary">
                                            <tr class="table-primary">
                                                <th>Resources</th>
                                                <th></th>
                                                <th>Count</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Facebook Massenger </td>
                                                <td><label style="background: rgb(15, 222, 233);">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></td>
                                                <td id="face_book_massenger">
                                                    {{ $face_book_massenger }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Facebook Leads</td>
                                                <td> <label style="background: rgb(12, 230, 165);">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                </td>
                                                <td id="face_book_leeds">
                                                    {{ $face_book_leeds }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>WhatsApp</td>
                                                <td><label style="background: #f1c40f;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></td>
                                                <td id="whats_app">
                                                    {{ $whats_app }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Bulk Order </td>
                                                <td><label style="background: #e74c3c;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></td>
                                                <td id="bulk_order">
                                                    {{ $bulk_order }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Daraz Order </td>
                                                <td><label style="background: #2980b9;">&nbsp;&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></td>
                                                <td id="daraz">
                                                    {{ $daraz }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div id="" class="">
                                    {!! $chartjs->render() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end card -body-->
                </div>
            </div>
        </div>
        <div class="row right-padding">
            <div class="col-md-12" @if ($setting->order_multiple_line_chart != '1') style="display: none" @endif>
                <div class="card card-eco">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Daily Orders Chart</h4>
                        {!! $order_count_chart->render() !!}
                        <div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row right-padding">
            <div class="col-md-8">
                <div class="card card-eco">
                    <div class="card-body">
                        @if ($setting->day_profit_line_chart == '1')
                            <h4 class="card-title mt-0"> Daily Sales & Profit Chart</h4>
                        @else
                            <h4 class="card-title mt-0">Daily Sales Chart</h4>
                        @endif
                        {!! $daily_sales_chart->render() !!}
                        <div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-eco" style="height: 440px;">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Low Stock Items</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="table table-responsive" style="max-height: 350px; overflow-y: auto;">
                                    <table class="table table-striped" id="low-stock">
                                        <thead class="text-primary">
                                            <tr class="table-primary">
                                                <th>Product Name</th>
                                                <th>QTY</th>
                                                <th>Attribute</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($low_stocks as $item)
                                                
                                                <tr>
                                                    <td>{{ $item['name'] }}</td>
                                                    <td>{{ $item['qty'] }}</td>
                                                    <td>{{ $item['attributes'] }}</td>
                                                    
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div id="gg1" class="guge"></div>
                            </div>
                        </div>
                    </div>
                    <!--end card -body-->
                </div>
            </div>
        </div>
        <div class="row right-padding mt-4 mt-lg-0">
            <div class="col-md-12">
                <div class="card card-eco">
                    <div class="card-body">
                        <h4 class="card-title mt-0">Financial Year Sales Chart</h4>
                        {!! $financial_year_sale_chart->render() !!}
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="row right-padding">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title mt-0">Sales Details</h4>
                        <div class="table-responsive dash-social">
                            <table id="laravel_datatable_sale" class="table table-hover">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Call Status</th>
                                        <th>Order Status</th>
                                        <th>Payment Status</th>
                                        <th>Business Location</th>
                                        <th>Customer</th>
                                        <th>Ref No</th>
                                        <th>Mobile</th>
                                        <th>Courier</th>
                                        <th>Grand Total</th>
                                        {{-- <th hidden>Order Status <br> Date</th> --}}
                                        <th>Sale Date</th>
                                        <th>Action</th>
                                    </tr>
                                    <!--end tr-->
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="8" style="text-align: center"></th>
                                        <th style="font-weight: bold">Grand Total</th>
                                        <th colspan="2"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row right-padding">
            <div class="col-md-12">
                <div class="card card-eco">
                    <div class="card-body">
                        <a href="{{ route('orders.create') }}">
                            <button class="btn btn-primary px-4 float-right mt-0 mb-3"></i>+ Add Order</button>
                        </a>
                        <h4 class="card-title mt-0">New Orders</h4>
                        <div class="table table-responsive">
                            <table class="table table-striped" width="100%" id="laravel_datatable">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Date/ Time</th>
                                        <th>Business Location</th>
                                        <th>Name and Address</th>
                                        <th>Phone No</th>
                                        <th>Items</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <!--end card -body-->
                </div>
            </div>
        </div>
    @endcan
@endsection
@section('scripts')

    <script>
        // let dflt = {
        //     min: 0,
        //     max: 100,
        //     donut: true,
        //     gaugeWidthScale: 0.8,
        //     counter: true,
        //     hideInnerShadow: true
        // }

        $(document).ready(function() {
            $('#low-stock').DataTable({
                "searching": false,
                "bInfo": false,
                pagingType: "simple",
                pageLength: 5,
                "bLengthChange": false,
            });
            // var gg1 = new JustGage({
            //     id: 'gg1',
            //     symbol: '%',
            //     value: "{{ $stock_gauge }}",
            //     title: 'javascript call',
            //     label: "Active Items",
            //     defaults: dflt,
            //     levelColors: ["#fd7e14"]
            // });

            report_table = $('#laravel_datatable_sale').DataTable({
                lengthMenu: [
                    [25, 50, 100],
                    ['25 ', '50 ', '100']
                ],
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                serverSide: true,
                ajax: {

                    url: "{{ url('/home/saleslist') }}",
                    data: function(d) {
                        d.contact_id = $('#contact_id').val();
                        d.courier_id = $('#courier_id').val();
                        d.range = $('#reportrange').val();
                        d.status = $('#status').val();
                        d.payment_status = $('#payment_status').val();
                    }

                },
                columnDefs: [{
                    "targets": [10],
                    "orderable": false,
                    "searchable": false,

                }],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    // get basic salary

                    // total allowance
                    let grand_total = api.column(8).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);


                    $(api.column(8).footer()).html(formatNumber(grand_total) + '.00')

                },
                columns: [

                    {
                        data: 'call_status',
                        name: 'call_status'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_status'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        data: 'contacts.name',
                        name: 'contacts.name'
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no'
                    },
                    {
                        data: 'contacts.mobile',
                        name: 'contacts.mobile'
                    },
                    {
                        data: 'couriers_name',
                        name: 'couriers.name'
                    },

                    {
                        data: 'invoice_nettotal',
                        name: 'invoice_nettotal'
                    },
                    // {
                    //     data: 'sales.updated_at',
                    //     name: 'sales.updated_at'
                    // },
                    {
                        data: 'sale_date',
                        name: 'sale_date'
                    },
                    {
                        data: 'action',
                        name: 'action',
                    },
                ]
            });

            report_table = $('#laravel_datatable').DataTable({
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                processing: false,
                serverSide: true,
                ajax: {

                    url: "{{ url('/home/orderlist') }}",
                    data: function(d) {
                        d.contact_id = $('#contact_id').val();
                        d.range = $('#reportrange').val();
                        d.status = $('#status').val();
                    }

                },
                columnDefs: [{
                    "targets": [5],
                    "orderable": false,
                    "searchable": false,

                }],
                "autoWidth": false,
                columns: [{
                        data: 'sale_date',
                        name: 'sale_date'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        data: 'contact_id',
                        name: 'contact_id'
                    },
                    {
                        data: 'contact_no',
                        name: 'contact_no'
                    },
                    {
                        data: 'items',
                        name: 'items'
                    },
                    {
                        data: 'invoice_subtotal',
                        name: 'invoice_subtotal'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },

                ]
            });

        })
        $(document).ready(function() {
            function getData(id) {
                    $('#total_count').text(id['total_count']);
                    $('#total_sum').text(id['total_sum']);
                    $('#week_count').text(id['week_count']);
                    $('#week_sum').text(id['week_sum']);
                    $('#month_sum').text(id['month_sum']);
                    $('#month_count').text(id['month_count']);
                    $('#grn_due').text(id['grn_due']);
                    $('#grn_due_count').text(id['grn_due_count']);
                    $('#pending_oders').text(id['pending_oders']);
                    $('#pending').text(id['pending']);
                    $('#delivered').text(id['delivered']);
                    $('#cancel_oders').text(id['cancel_oders']);
                    $('#confirm_oders').text(id['confirm_oders']);
                    $('#hold_oders').text(id['hold_oders']);
                    $('#not_confirm').text(id['not_confirm']);
                    $('#dispatch_order_count').text(id['dispatch_order_count']);
                    $('#release_order_id').text(id['release_orders']);
                    $('#face_book_massenger').text(id['face_book_massenger']);
                    $('#face_book_leeds').text(id['face_book_leeds']);
                    $('#whats_app').text(id['whats_app']);
                    $('#bulk_order').text(id['bulk_order']);
                    $('#daraz').text(id['daraz']);
                    $('#ok').text(id['ok']);
                    $('#ok_to_dispatch').text(id['ok_to_dispatch']);
                    $('#ok_to_deliver').text(id['ok_to_deliver']);
                    $('#print_order_count').text(id['print_order_count']);
                    $('#confirm_oders_total_count').text(id['confirm_oders_total_count']);
                    $('#confirm_oders_total_sum').text(id['confirm_oders_total_sum']);
                    $('#delivery_panding').text(id['delivery_panding']);
                    $('#reshedule_diliverd').text(id['reshedule_diliverd']);
                    $('#reshedule').text(id['reshedule']);
                    $('#total_leads_to_delivered').text(id['total_leads_to_delivered']);
                    $('#retun').text(id['retun']);
                }

            function fetchData(params) {
                $.ajax({
                    type: 'GET',
                    url: '/home',
                    data: params,
                    success: function(response) {
                        let id = response;
                        getData(id);
                    }
                });
            }

            fetchData({
                'location_id': $('#location_id').val(),
                'dates': $('#reportrange').val()
            });

            //#location_id change
            $(document).on('change', '#location_id', function() {
                fetchData({
                    'location_id': $(this).val(),
                    'dates': $('#reportrange').val()
                });
            });

            //#reportrange change
            $(document).on('change', '#reportrange', function() {
                fetchData({
                    'location_id': $('#location_id').val(),
                    'dates': $(this).val()
                });
            });
        });

        smBalance();
        var intervalId = window.setInterval(function() {
            smBalance();
        }, 60 * 60 * 1000);

        $("#refresh_sms").click(function() {
            smBalance();
        });

        function smBalance() {
            $("#sms_refresh_icon").attr("class", "fas fa-sync fa-spin");
            $.ajax({
                url: '/sms-balance',
                success: function(result) {
                    var js = JSON.parse(result);
                    if (js.hasOwnProperty('balance')) {
                        $("#sms_balance").text(js.balance + " Messeges available");
                        $("#sms_refresh_icon").attr("class", "fas fa-sync");
                    } else {
                        $("#sms_balance").text('');
                        $("#sms_refresh_icon").attr("class", "");
                    }

                }
            });
        }
    </script>
@endsection