@extends('layouts.app')
@section('title', __('home.home'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header content-header-custom">
        <h1>{{ __('home.welcome_message', ['name' => Session::get('user.first_name')]) }}
        </h1>
    </section>
    <section class="content content-custom no-print">


        @if(userHasPermission('dashboard.data'))
            @if(true)
                <div class="row">
                    <div class="col-md-4 col-xs-12">
                        @if(count($all_locations) > 1)
                            {!! Form::select('dashboard_location', $all_locations, null, ['class' => 'form-control select2', 'placeholder' => __('lang_v1.select_location'), 'id' => 'dashboard_location']); !!}
                        @endif
                    </div>
                    <div class="col-md-8 col-xs-12">
                        <div class="form-group pull-right">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary" id="dashboard_date_filter">
                              <span>
                                <i class="fa fa-calendar"></i> {{ __('home.filter_by_date') }}
                              </span>
                                    <i class="fa fa-caret-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.total_sales_cash_credit') }}</h4>
                                    <i class="fs-24 fa fa-shopping-cart"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number total_sell"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.cash_sale') }} @show_tooltip(__('app.net_home_tooltip'))</h4>
                                    <i class="fs-24 fa fa-shopping-cart"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number net"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.outstanding') }}</h4>
                                    <i class="fs-24 fa fa-exclamation"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number invoice_due"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('app.total_sell_return') }}</h4>
                                    <i class="fs-24 fa fa-undo"></i>

                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number total_sell_return"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>

                                    </div>
                                    <div  class="col-6 pull-right">
                                        <p class="mb-0 fs-10 mt-5">{{ __('home.total_sell_return_filed')}}: <span class="total_sr"></span><br>
                                            {{ __('home.total_sell_return_paid')}}: <span class="total_srp"></span></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                                        </div>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.total_purchase') }}</h4>
                                    <i class="fs-24 fa fa-cart-arrow-down"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number total_purchase"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.purchase_due') }}</h4>
                                    <i class="fs-24 fa fa-shopping-cart"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number purchase_due"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="box @random_background_class()">
                            <div class="box-body">
                                <div class="mb-15 d-flex justify-content-between align-items-center">
                                    <h4 class="my-0"> {{ __('home.total_lp') }}</h4>
                                    <i class="fs-24 fa fa-exclamation"></i>

                                </div>
                                <div>
                                    <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> <span class="info-box-number total_lp"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                </div>
                            </div>
                            <div class="box-body pt-0 ps-0">
                                <div id=""></div>
                            </div>
                        </div>
                    </div>



                                        <div class="row">
                                                <div class="col-xl-3 col-lg-6 col-12">
                            <div class="box @random_background_class()">
                                <div class="box-body">
                                    <a href="{{ route('stocktakes.due') }}?start_date={{ \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d') }}&end_date={{ \Carbon\Carbon::today()->format('Y-m-d') }}" class="text-decoration-none link-light">
                                    <div class="mb-15 d-flex justify-content-between align-items-center">
                                        <h4 class="my-0"> {{ __('home.current_month') }}</h4>
                                        <i class="fs-24 fa fa-braille"></i>

                                    </div>
                                    <div>
                                        <h5 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> {{ __('home.over_due_stock_take') }}: <span class="info-box-number total_due_for_stock_takes"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h5>
                                    </div>
                                    </a>
                                </div>
                                <div class="box-body pt-0 ps-0">
                                    <div id=""><br></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-6 col-12">
                            <div class="box @random_background_class()">
                                <div class="box-body">
                                    <a href="{{ route('stocktakes.due') }}?start_date={{ \Carbon\Carbon::today()->format('Y-m-d') }}&end_date={{ \Carbon\Carbon::today()->format('Y-m-d') }}" class="text-decoration-none link-light">
                                        <div class="mb-15 d-flex justify-content-between align-items-center">
                                            <h4 class="my-0"> {{ __('home.todays_stock_take') }}</h4>
                                            <i class="fs-24 fa fa-braille"></i>
                                        </div>
                                        <div class="row">
                                                                                        <div class="col-12 pull-right">
                                                
                                                <!-- Due, Added, Remaining Stock Take in one row -->
                                                <div class="row">
                                                    <div class="col-3 text-center">
                                                        <strong>{{ __('home.todays') }}:</strong>
                                                    </div>
                                                    <div class="col-2 text-center">
                                                        <strong>{{ __('home.due_stock_take') }}</strong>
                                                        <div class="text-center">
                                                            <span class="due_stock_take_count">0</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-1 text-center">
                                                        <strong>|</strong>
                                                    </div>
                                                    <div class="col-2 text-center">
                                                        <strong>{{ __('home.added_stock_take') }}</strong>
                                                        <div class="text-center">
                                                            <span class="added_stock_take_count">0</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-1 text-center">
                                                        <strong>|</strong>
                                                    </div>
                                                    <div class="col-3 text-center">
                                                        <strong>{{ __('home.remaining_stock_take') }}</strong>
                                                        <div class="text-center">
                                                            <span class="remaining_stock_take_count">0</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <h6 class="fw-400 my-0"> <i class="fa fa-arrow-circle-right"></i> {{ __('home.todays_stock_inequality') }}: <span class="stock_inequality_today"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span></h6>

                                                <!-- Today's Stock Take Summary -->
                                                                                                </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>


                    </div>
                    @if(!empty($widgets['after_sale_purchase_totals']))
                        @foreach($widgets['after_sale_purchase_totals'] as $widget)
                            {!! $widget !!}
                        @endforeach
                    @endif
                    @endif
                    <!-- end is_admin check -->
                    @if(auth()->user()->can('sell.view') || auth()->user()->can('direct_sell.view'))
                        @if(!empty($all_locations))
                            <!-- sales chart start -->
                            <div class="row">
                                <div class="col-sm-12">
                                    @component('components.widget', ['class' => 'box-primary', 'title' => __('home.sells_last_30_days')])
                                        {!! $sells_chart_1->container() !!}
                                    @endcomponent
                                </div>
                            </div>
                        @endif
                        @if(!empty($widgets['after_sales_last_30_days']))
                            @foreach($widgets['after_sales_last_30_days'] as $widget)
                                {!! $widget !!}
                            @endforeach
                        @endif
                        @if(!empty($all_locations))
                            <div class="row">
                                <div class="col-sm-12">
                                    @component('components.widget', ['class' => 'box-primary', 'title' => __('home.sells_current_fy')])
                                        {!! $sells_chart_2->container() !!}
                                    @endcomponent
                                </div>
                            </div>
                        @endif
                    @endif
                                            @endif
                    <!-- can('dashboard.data') end -->
    </section>
    <!-- Main content -->
    <div class="">
        <div class="container-full">
            <!-- Main content -->

            <section class="content">
                <div class="row">
                    <div class="col-xxxl-9 col-xl-8 col-12">

                        <div class="row">
                            <div class="col-xxxl-12 col-xl-12  col-12">
                                <div class="box">
                                    <div class="box-header no-border pb-0">
                                        <h4 class="box-title">@lang('home.sales')</h4>
                                    </div>

                                    <div class="box-body">
                                        <div id="multiple-xy" class="c3" style="max-height: 350px; position: relative;">
                                            <svg width="800" height="350" style="overflow: hidden;">
                                                <defs>
                                                    <clipPath id="c3-1695204772737-clip">
                                                        <rect width="1121.550048828125" height="296"></rect>
                                                    </clipPath>
                                                    <clipPath id="c3-1695204772737-clip-xaxis">
                                                        <rect x="-41" y="-20" width="1193.550048828125"
                                                              height="70"></rect>
                                                    </clipPath>
                                                    <clipPath id="c3-1695204772737-clip-yaxis">
                                                        <rect x="-39" y="-4" width="60" height="320"></rect>
                                                    </clipPath>
                                                    <clipPath id="c3-1695204772737-clip-grid">
                                                        <rect width="1121.550048828125" height="296"></rect>
                                                    </clipPath>
                                                    <clipPath id="c3-1695204772737-clip-subchart">
                                                        <rect width="1121.550048828125"></rect>
                                                    </clipPath>
                                                </defs>
                                                <g transform="translate(40.5,4.5)">
                                                    <text class="c3-text c3-empty" text-anchor="middle"
                                                          dominant-baseline="middle" x="560.7750244140625" y="148"
                                                          style="opacity: 0;"></text>
                                                    <rect class="c3-zoom-rect" width="1121.550048828125" height="296"
                                                          style="opacity: 0;"></rect>
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip)"
                                                       class="c3-regions" style="visibility: visible;"></g>
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-grid)"
                                                       class="c3-grid" style="visibility: visible;">
                                                        <g class="c3-ygrids">
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="285"
                                                                  y2="285"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="253"
                                                                  y2="253"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="220"
                                                                  y2="220"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="188"
                                                                  y2="188"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="155"
                                                                  y2="155"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="123"
                                                                  y2="123"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="91"
                                                                  y2="91"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="58"
                                                                  y2="58"></line>
                                                            <line class="c3-ygrid" x1="0" x2="1122" y1="26"
                                                                  y2="26"></line>
                                                        </g>
                                                        <g class="c3-xgrid-focus">
                                                            <line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0"
                                                                  y2="296" style="visibility: hidden;"></line>
                                                        </g>
                                                    </g>
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip)"
                                                       class="c3-chart">
                                                        <g class="c3-event-rects c3-event-rects-multiple"
                                                           style="fill-opacity: 0;">
                                                            <rect x="0" y="0" width="1121.550048828125" height="296"
                                                                  class=" c3-event-rect c3-event-rect"></rect>
                                                        </g>
                                                        <g class="c3-chart-bars">
                                                            <g class="c3-chart-bar c3-target c3-target-data1"
                                                               style="pointer-events: none;">
                                                                <g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1"
                                                                   style="cursor: pointer;"></g>
                                                            </g>
                                                            <g class="c3-chart-bar c3-target c3-target-data2"
                                                               style="pointer-events: none;">
                                                                <g class=" c3-shapes c3-shapes-data2 c3-bars c3-bars-data2"
                                                                   style="cursor: pointer;"></g>
                                                            </g>
                                                        </g>
                                                        <g class="c3-chart-lines">
                                                            <g class="c3-chart-line c3-target c3-target-data1"
                                                               style="opacity: 1; pointer-events: none;">
                                                                <g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1">
                                                                    <path
                                                                        class=" c3-shape c3-shape c3-line c3-line-data1"
                                                                        d="M11,264.94736842105266L211,154.96929824561403L361,219.66228070175436L411,25.583333333333346L611,187.31578947368422L911,122.62280701754385"
                                                                        style="stroke: rgb(62, 142, 247); opacity: 1;"></path>
                                                                </g>
                                                                <g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1">
                                                                    <path
                                                                        class=" c3-shape c3-shape c3-area c3-area-data1"
                                                                        d="M 11 264.94736842105266"
                                                                        style="fill: rgb(62, 142, 247); opacity: 0.2;"></path>
                                                                </g>
                                                                <g class=" c3-selected-circles c3-selected-circles-data1"></g>
                                                                <g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1"
                                                                   style="cursor: pointer;">
                                                                    <circle
                                                                        class="c3-shape c3-shape-0 c3-circle c3-circle-0"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="11" cy="264.94736842105266"></circle>
                                                                    <circle
                                                                        class="c3-shape c3-shape-1 c3-circle c3-circle-1"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="211" cy="154.96929824561403"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-2 c3-circle c3-circle-2"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="361" cy="219.66228070175436"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-3 c3-circle c3-circle-3"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="411" cy="25.583333333333346"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-4 c3-circle c3-circle-4"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="611" cy="187.31578947368422"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-5 c3-circle c3-circle-5"
                                                                        r="4"
                                                                        style="fill: rgb(62, 142, 247); opacity: 1;"
                                                                        cx="911" cy="122.62280701754385"></circle>
                                                                </g>
                                                            </g>
                                                            <g class="c3-chart-line c3-target c3-target-data2"
                                                               style="opacity: 1; pointer-events: none;">
                                                                <g class=" c3-shapes c3-shapes-data2 c3-lines c3-lines-data2">
                                                                    <path
                                                                        class=" c3-shape c3-shape c3-line c3-line-data2"
                                                                        d="M211,271.41666666666663L411,167.90789473684208L661,129.09210526315792L911,219.66228070175436L1111,161.43859649122808"
                                                                        style="stroke: rgb(255, 76, 82); opacity: 1;"></path>
                                                                </g>
                                                                <g class=" c3-shapes c3-shapes-data2 c3-areas c3-areas-data2">
                                                                    <path
                                                                        class=" c3-shape c3-shape c3-area c3-area-data2"
                                                                        d="M 211 271.41666666666663"
                                                                        style="fill: rgb(255, 76, 82); opacity: 0.2;"></path>
                                                                </g>
                                                                <g class=" c3-selected-circles c3-selected-circles-data2"></g>
                                                                <g class=" c3-shapes c3-shapes-data2 c3-circles c3-circles-data2"
                                                                   style="cursor: pointer;">
                                                                    <circle
                                                                        class=" c3-shape c3-shape-0 c3-circle c3-circle-0"
                                                                        r="4"
                                                                        style="fill: rgb(255, 76, 82); opacity: 1;"
                                                                        cx="211" cy="271.41666666666663"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-1 c3-circle c3-circle-1"
                                                                        r="4"
                                                                        style="fill: rgb(255, 76, 82); opacity: 1;"
                                                                        cx="411" cy="167.90789473684208"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-2 c3-circle c3-circle-2"
                                                                        r="4"
                                                                        style="fill: rgb(255, 76, 82); opacity: 1;"
                                                                        cx="661" cy="129.09210526315792"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-3 c3-circle c3-circle-3"
                                                                        r="4"
                                                                        style="fill: rgb(255, 76, 82); opacity: 1;"
                                                                        cx="911" cy="219.66228070175436"></circle>
                                                                    <circle
                                                                        class=" c3-shape c3-shape-4 c3-circle c3-circle-4"
                                                                        r="4"
                                                                        style="fill: rgb(255, 76, 82); opacity: 1;"
                                                                        cx="1111" cy="161.43859649122808"></circle>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g class="c3-chart-arcs"
                                                           transform="translate(560.7750244140625,143)">
                                                            <text class="c3-chart-arcs-title"
                                                                  style="text-anchor: middle; opacity: 0;"></text>
                                                        </g>
                                                        <g class="c3-chart-texts">
                                                            <g class="c3-chart-text c3-target c3-target-data1"
                                                               style="opacity: 1; pointer-events: none;">
                                                                <g class=" c3-texts c3-texts-data1"></g>
                                                            </g>
                                                            <g class="c3-chart-text c3-target c3-target-data2"
                                                               style="opacity: 1; pointer-events: none;">
                                                                <g class=" c3-texts c3-texts-data2"></g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-grid)"
                                                       class="c3-grid c3-grid-lines">
                                                        <g class="c3-xgrid-lines"></g>
                                                        <g class="c3-ygrid-lines"></g>
                                                    </g>
                                                    <g class="c3-axis c3-axis-x"
                                                       clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-xaxis)"
                                                       transform="translate(0,296)"
                                                       style="visibility: visible; opacity: 1;">
                                                        <text class="c3-axis-x-label" transform=""
                                                              style="text-anchor: end;" x="1121.550048828125"
                                                              dx="-0.5em" dy="-0.5em"></text>
                                                        <g class="tick" transform="translate(11, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">10</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(211, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">30</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(361, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">45</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(411, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">50</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(611, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">70</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(661, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">75</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(911, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">100</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(1111, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">120</tspan>
                                                            </text>
                                                        </g>
                                                        <path class="domain" d="M0,6V0H1121.550048828125V6"></path>
                                                    </g>
                                                    <g class="c3-axis c3-axis-y"
                                                       clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-yaxis)"
                                                       transform="translate(0,0)"
                                                       style="visibility: visible; opacity: 1;">
                                                        <text class="c3-axis-y-label" transform="rotate(-90)"
                                                              style="text-anchor: end;" x="0" dx="-0.5em"
                                                              dy="1.2em"></text>
                                                        <g class="tick" transform="translate(0,285)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">0</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,253)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">50</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,220)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">100</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,188)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">150</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,155)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">200</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,123)"
                                                           style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">250</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,91)" style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">300</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,58)" style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">350</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,26)" style="opacity: 1;">
                                                            <line x2="-6"></line>
                                                            <text x="-9" y="0" style="text-anchor: end;">
                                                                <tspan x="-9" dy="3">400</tspan>
                                                            </text>
                                                        </g>
                                                        <path class="domain" d="M-6,1H0V296H-6"></path>
                                                    </g>
                                                    <g class="c3-axis c3-axis-y2"
                                                       transform="translate(1121.550048828125,0)"
                                                       style="visibility: hidden; opacity: 1;">
                                                        <text class="c3-axis-y2-label" transform="rotate(-90)"
                                                              style="text-anchor: end;" x="0" dx="-0.5em"
                                                              dy="-0.5em"></text>
                                                        <g class="tick" transform="translate(0,296)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,267)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.1</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,237)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.2</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,208)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.3</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,178)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.4</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,149)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.5</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,119)"
                                                           style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.6</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,90)" style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.7</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,60)" style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.8</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,31)" style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">0.9</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(0,1)" style="opacity: 1;">
                                                            <line x2="6" y2="0"></line>
                                                            <text x="9" y="0" style="text-anchor: start;">
                                                                <tspan x="9" dy="3">1</tspan>
                                                            </text>
                                                        </g>
                                                        <path class="domain" d="M6,1H0V296H6"></path>
                                                    </g>
                                                </g>
                                                <g transform="translate(20.5,350.5)" style="visibility: hidden;">
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-subchart)"
                                                       class="c3-chart">
                                                        <g class="c3-chart-bars"></g>
                                                        <g class="c3-chart-lines"></g>
                                                    </g>
                                                    <g clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip)"
                                                       class="c3-brush"
                                                       style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                                        <rect class="background" x="0" width="1141.550048828125"
                                                              style="visibility: hidden; cursor: crosshair;"></rect>
                                                        <rect class="extent" x="0" width="0"
                                                              style="cursor: move;"></rect>
                                                        <g class="resize e" transform="translate(0,0)"
                                                           style="cursor: ew-resize; display: none;">
                                                            <rect x="-3" width="6" height="6"
                                                                  style="visibility: hidden;"></rect>
                                                        </g>
                                                        <g class="resize w" transform="translate(0,0)"
                                                           style="cursor: ew-resize; display: none;">
                                                            <rect x="-3" width="6" height="6"
                                                                  style="visibility: hidden;"></rect>
                                                        </g>
                                                    </g>
                                                    <g class="c3-axis-x" transform="translate(0,0)"
                                                       clip-path="url(http://159.138.121.123/html/main/charts_c3_line.html#c3-1695204772737-clip-xaxis)"
                                                       style="visibility: hidden; opacity: 1;">
                                                        <g class="tick" transform="translate(11, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">10</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(211, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">30</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(361, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">45</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(411, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">50</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(611, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">70</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(661, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">75</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(911, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">100</tspan>
                                                            </text>
                                                        </g>
                                                        <g class="tick" transform="translate(1111, 0)"
                                                           style="opacity: 1;">
                                                            <line x1="0" x2="0" y2="6"></line>
                                                            <text x="0" y="9" transform=""
                                                                  style="text-anchor: middle; display: block;">
                                                                <tspan x="0" dy=".71em" dx="0">120</tspan>
                                                            </text>
                                                        </g>
                                                        <path class="domain" d="M0,6V0H1121.550048828125V6"></path>
                                                    </g>
                                                </g>
                                                <g transform="translate(0,330)">
                                                    <g class="c3-legend-item c3-legend-item-data1"
                                                       style="visibility: visible; cursor: pointer;">
                                                        <text x="545.7375240325928" y="9" style="pointer-events: none;">
                                                            data1
                                                        </text>
                                                        <rect class="c3-legend-item-event" x="531.7375240325928" y="-5"
                                                              width="55.03750038146973" height="17.600000381469727"
                                                              style="fill-opacity: 0;"></rect>
                                                        <line class="c3-legend-item-tile" x1="529.7375240325928" y1="4"
                                                              x2="539.7375240325928" y2="4" stroke-width="10"
                                                              style="stroke: rgb(62, 142, 247); pointer-events: none;"></line>
                                                    </g>
                                                    <g class="c3-legend-item c3-legend-item-data2"
                                                       style="visibility: visible; cursor: pointer;">
                                                        <text x="600.7750244140625" y="9" style="pointer-events: none;">
                                                            data2
                                                        </text>
                                                        <rect class="c3-legend-item-event" x="586.7750244140625" y="-5"
                                                              width="45.03750038146973" height="17.600000381469727"
                                                              style="fill-opacity: 0;"></rect>
                                                        <line class="c3-legend-item-tile" x1="584.7750244140625" y1="4"
                                                              x2="594.7750244140625" y2="4" stroke-width="10"
                                                              style="stroke: rgb(255, 76, 82); pointer-events: none;"></line>
                                                    </g>
                                                </g>
                                                <text class="c3-title" x="581.7750244140625" y="0"></text>
                                            </svg>
                                            <div class="c3-tooltip-container"
                                                 style="position: absolute; pointer-events: none; display: none; top: 286.15px; left: 71.5px;">
                                                <table class="c3-tooltip">
                                                    <tbody>
                                                    <tr>
                                                        <th colspan="2">10</th>
                                                    </tr>
                                                    <tr class="c3-tooltip-name--data1">
                                                        <td class="name"><span style="background-color:#3e8ef7"></span>data1
                                                        </td>
                                                        <td class="value">30</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>


                            <div class="col-xl-7 col-7 col-md-7 col-xxxl-7">

                                <div class="box">
                                    <div class="box-header with-border">
                                        <h5 class="box-title">@lang('home.medicine_sales')</h5>
                                        <div class="box-tools pull-right">
                                            <ul class="card-controls">
                                                <li class="dropdown">
                                                    <a data-bs-toggle="dropdown" href="#"><i class="ion-android-more-vertical"></i></a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item active" href="#">Today</a>
                                                        <a class="dropdown-item" href="#">Yesterday</a>
                                                        <a class="dropdown-item" href="#">Last week</a>
                                                        <a class="dropdown-item" href="#">Last month</a>
                                                    </div>
                                                </li>
                                                <li><a href="" class="link card-btn-reload" data-bs-toggle="tooltip" title="" data-bs-original-title="Refresh"><i class="fa fa-circle-thin"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="box-body">
                                        <div class="text-center pb-25">
                                            <div class="donut" data-peity="{ &quot;fill&quot;: [&quot;#fc4b6c&quot;, &quot;, &quot;#398bf7&quot;], &quot;radius&quot;: 86, &quot;innerRadius&quot;: 50  }" style="display: none;">9,6,5</div><svg class="peity" height="172" width="172"><path d="M 86 0 A 86 86 0 0 1 112.57546151624548 167.7908604013832 L 101.45084971874738 133.55282581475768 A 50 50 0 0 0 86 36" fill="#fc4b6c"></path><path d="M 112.57546151624548 167.7908604013832 A 86 86 0 0 1 0 86.00000000000001 L 36 86 A 50 50 0 0 0 101.45084971874738 133.55282581475768" fill="#ffb22b"></path><path d="M 0 86.00000000000001 A 86 86 0 0 1 85.99999999999999 0 L 85.99999999999999 36 A 50 50 0 0 0 36 86" fill="#398bf7"></path></svg>
                                        </div>

                                        <ul class="list-inline">
                                            <li class="flexbox mb-5">
                                                <div>
                                                    <span class="badge badge-dot badge-lg me-1" style="background-color: #fc4b6c"></span>
                                                    <span>@lang('home.prescribed')</span>
                                                </div>
                                                <div>8952</div>
                                            </li>

                                            <li class="flexbox mb-5">
                                                <div>
                                                    <span class="badge badge-dot badge-lg me-1" style="background-color: #ffb22b"></span>
                                                    <span>@lang('home.non-prescribed')</span>
                                                </div>
                                                <div>7458</div>
                                            </li>

                                            <li class="flexbox">
                                                <div>
                                                    <span class="badge badge-dot badge-lg me-1" style="background-color: #398bf7"></span>
                                                    <span>@lang('home.other')</span>
                                                </div>
                                                <div>3254</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xxxl-4 col-xl-5 col-12">
                                <div class="box">
                                    <div class="box-body px-0 bb-1 text-center">

                                        <h4>@lang('home.pending_orders')</h4>

                                    </div>
                                    <div class="box-body">
                                        <div class="row">
                                            <div class="col-6 be-1">
                                                <div class="d-flex align-items-center">

                                                    <img src="{{ asset('/theme/images/health-2-color.png') }}" class="img-fluid me-10 w-50" alt="">
                                                    <div>
                                                        <h3 class="mb-0">10</h3>
                                                        <p class="mb-2 text-muted">@lang('home.opd')</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="d-flex align-items-center">
                                                    <img src="{{ asset('/theme/images/health-1-color.png') }}" class="img-fluid me-10 w-50" alt="">
                                                    <div>
                                                        <h3 class="mb-0">47</h3>
                                                        <p class="mb-2 text-muted">@lang('home.ipd')</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-xxxl-3 col-xl-4 col-12">
                        
                        <div class="box">
                            <div class="box-header no-border pb-0">
                                <h4 class="box-title">@lang('home.top_selling_products')Top 10 Selling Products</h4>
                            </div>

                            <div class="box-body">
                                <div class="flexbox mt-10">
                                    <div class="bar"
                                         data-peity="{ &quot;fill&quot;: [&quot;#666EE8&quot;, &quot;#1E9FF2&quot;, &quot;#28D094&quot;, &quot;#FF4961&quot;, &quot;#FF9149&quot;], &quot;height&quot;: 268, &quot;width&quot;: 120, &quot;padding&quot;:0.2 }"
                                         style="display: none;">952,558,1254,427,784
                                    </div>
                                    <svg class="peity" height="268" width="120">
                                        <rect fill="#666EE8" x="4.8" y="64.54226475279106" width="14.399999999999999"
                                              height="203.45773524720894"></rect>
                                        <rect fill="#1E9FF2" x="28.8" y="148.7464114832536" width="14.400000000000002"
                                              height="119.25358851674639"></rect>
                                        <rect fill="#28D094" x="52.8" y="0" width="14.400000000000006"
                                              height="268"></rect>
                                        <rect fill="#FF4961" x="76.8" y="176.7432216905901" width="14.400000000000006"
                                              height="91.2567783094099"></rect>
                                        <rect fill="#FF9149" x="100.8" y="100.44657097288678" width="14.400000000000006"
                                              height="167.55342902711322"></rect>
                                    </svg>
                                    <ul class="list-inline align-self-end text-muted text-end mb-0">
                                        <li>Panadol <span class="badge badge-primary ms-2">154</span></li>
                                        <li>Flagyl <span class="badge badge-info ms-2">154</span></li>
                                        <li>Risek <span class="badge badge-success ms-2">254</span></li>
                                        <li>Amygra <span class="badge badge-danger ms-2">854</span></li>
                                        <li>Nospa Forte <span class="badge badge-warning ms-2">215</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="box-header no-border pb-0">
                                <h4 class="box-title">@lang('home.products_information')</h4>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-6">
                                        <a class="box box-link-shadow text-center" @if (userHasPermission('product.view'))
                                            href="{{action([\App\Http\Controllers\ProductController::class, 'index'])}}"
                                            @endif>
                                            <div class="box-body">
                                                <div class="fs-24 total_products">0</div>
                                                <span>@lang('home.total_products')</span>
                                            </div>
                                            <div class="box-body bg-info btsr-0 bter-0">
                                                <p>
                                                    <span class="fa fa-fw fa-th fs-30"></span>
                                                </p>
                                            </div>
                                        </a>
                                        <a class="box box-link-shadow text-center" href="javascript:void(0)">
                                            <div class="box-body">
                                                <div class="fs-24">110</div>
                                                <span>@lang('home.near_expiry')</span>
                                            </div>
                                            <div class="box-body bg-success btsr-0 bter-0">
                                                <p>
                                                    <i class="mdi mdi-ticket-confirmation fs-30"></i>
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6">
                                        <a class="box box-link-shadow text-center" href="javascript:void(0)">
                                            <div class="box-body">
                                                <div class="fs-24">175</div>
                                                <span>@lang('home.out_of_stock')</span>
                                            </div>
                                            <div class="box-body bg-warning btsr-0 bter-0">
                                                <p>
                                                    <span class="fa fa-fw fa-list-alt fs-30"></span>
                                                </p>
                                            </div>
                                        </a>
                                        <a class="box box-link-shadow text-center" href="javascript:void(0)">
                                            <div class="box-body">
                                                <div class="fs-24">59</div>
                                                <span>@lang('home.expired')</span>
                                            </div>
                                            <div class="box-body bg-danger btsr-0 bter-0">
                                                <p>
                                                    <span class="mdi mdi-do-not-disturb-off fs-30"></span>
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
    </div>
    <!-- /.content -->
    <div class="modal fade payment_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade edit_pso_status_modal" tabindex="-1" role="dialog"></div>
    <div class="modal fade edit_payment_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel">
    </div>


@stop
@section('javascript')
    <script src="{{ asset('theme/assets/vendor_components/datatable/datatables.min.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/home.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/payment.js?v=' . $asset_v) }}"></script>
    @includeIf('sales_order.common_js')
    @includeIf('purchase_order.common_js')
    @if(!empty($all_locations))
        {!! $sells_chart_1->script() !!}
        {!! $sells_chart_2->script() !!}
    @endif
    <script type="text/javascript">
        $(document).ready( function(){
            sales_order_table = $('#sales_order_table').DataTable({
                processing: true,
                serverSide: true,
                scrollY: "75vh",
                scrollX:        true,
                scrollCollapse: true,
                aaSorting: [[1, 'desc']],
                "ajax": {
                    "url": '{{action([\App\Http\Controllers\SellController::class, 'index'])}}?sale_type=sales_order',
                    "data": function ( d ) {
                        d.for_dashboard_sales_order = true;

                        if ($('#so_location').length > 0) {
                            d.location_id = $('#so_location').val();
                        }
                    }
                },
                columnDefs: [ {
                    "targets": 7,
                    "orderable": false,
                    "searchable": false
                } ],
                columns: [
                    { data: 'action', name: 'action'},
                    { data: 'transaction_date', name: 'transaction_date'  },
                    { data: 'invoice_no', name: 'invoice_no'},
                    { data: 'conatct_name', name: 'conatct_name'},
                    { data: 'mobile', name: 'contacts.mobile'},
                    { data: 'business_location', name: 'bl.name'},
                    { data: 'status', name: 'status'},
                    { data: 'shipping_status', name: 'shipping_status'},
                    { data: 'so_qty_remaining', name: 'so_qty_remaining', "searchable": false},
                    { data: 'added_by', name: 'u.first_name'},
                ]
            });

            @if(auth()->user()->can('account.access') && config('constants.show_payments_recovered_today') == true)

            // Cash Flow Table
            cash_flow_table = $('#cash_flow_table').DataTable({
                processing: true,
                serverSide: true,
                "ajax": {
                    "url": "{{action([\App\Http\Controllers\AccountController::class, 'cashFlow'])}}",
                    "data": function ( d ) {
                        d.type = 'credit';
                        d.only_payment_recovered = true;
                    }
                },
                "ordering": false,
                "searching": false,
                columns: [
                    {data: 'operation_date', name: 'operation_date'},
                    {data: 'account_name', name: 'account_name'},
                    {data: 'sub_type', name: 'sub_type'},
                    {data: 'method', name: 'TP.method'},
                    {data: 'payment_details', name: 'payment_details', searchable: false},
                    {data: 'credit', name: 'amount'},
                    {data: 'balance', name: 'balance'},
                    {data: 'total_balance', name: 'total_balance'},
                ],
                "fnDrawCallback": function (oSettings) {
                    __currency_convert_recursively($('#cash_flow_table'));
                },
                "footerCallback": function ( row, data, start, end, display ) {
                    var footer_total_credit = 0;

                    for (var r in data){
                        footer_total_credit += $(data[r].credit).data('orig-value') ? parseFloat($(data[r].credit).data('orig-value')) : 0;
                    }
                    $('.footer_total_credit').html(__currency_trans_from_en(footer_total_credit));
                }
            });
            @endif

            $('#so_location').change( function(){
                sales_order_table.ajax.reload();
            });
            @if(!empty($common_settings['enable_purchase_order']))
            //Purchase table
            purchase_order_table = $('#purchase_order_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [[1, 'desc']],
                scrollY: "75vh",
                scrollX:        true,
                scrollCollapse: true,
                ajax: {
                    url: '{{action([\App\Http\Controllers\PurchaseOrderController::class, 'index'])}}',
                    data: function(d) {
                        d.from_dashboard = true;

                        if ($('#po_location').length > 0) {
                            d.location_id = $('#po_location').val();
                        }
                    },
                },
                columns: [
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'transaction_date', name: 'transaction_date' },
                    { data: 'ref_no', name: 'ref_no' },
                    { data: 'location_name', name: 'BS.name' },
                    { data: 'name', name: 'contacts.name' },
                    { data: 'status', name: 'transactions.status' },
                    { data: 'po_qty_remaining', name: 'po_qty_remaining', "searchable": false},
                    { data: 'added_by', name: 'u.first_name' }
                ]
            })

            $('#po_location').change( function(){
                purchase_order_table.ajax.reload();
            });
            @endif

            @if(!empty($common_settings['enable_purchase_requisition']))
            //Purchase table
            purchase_requisition_table = $('#purchase_requisition_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [[1, 'desc']],
                scrollY: "75vh",
                scrollX:        true,
                scrollCollapse: true,
                ajax: {
                    url: '{{action([\App\Http\Controllers\PurchaseRequisitionController::class, 'index'])}}',
                    data: function(d) {
                        d.from_dashboard = true;

                        if ($('#pr_location').length > 0) {
                            d.location_id = $('#pr_location').val();
                        }
                    },
                },
                columns: [
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'transaction_date', name: 'transaction_date' },
                    { data: 'ref_no', name: 'ref_no' },
                    { data: 'location_name', name: 'BS.name' },
                    { data: 'status', name: 'status' },
                    { data: 'delivery_date', name: 'delivery_date' },
                    { data: 'added_by', name: 'u.first_name' },
                ]
            })

            $('#pr_location').change( function(){
                purchase_requisition_table.ajax.reload();
            });

            $(document).on('click', 'a.delete-purchase-requisition', function(e) {
                e.preventDefault();
                swal({
                    title: LANG.sure,
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then(willDelete => {
                    if (willDelete) {
                        var href = $(this).attr('href');
                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            dataType: 'json',
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    purchase_requisition_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            },
                        });
                    }
                });
            });
            @endif

                sell_table = $('#shipments_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [[1, 'desc']],
                scrollY:        "75vh",
                scrollX:        true,
                scrollCollapse: true,
                "ajax": {
                    "url": '{{action([\App\Http\Controllers\SellController::class, 'index'])}}',
                    "data": function ( d ) {
                        d.only_pending_shipments = true;
                        if ($('#pending_shipments_location').length > 0) {
                            d.location_id = $('#pending_shipments_location').val();
                        }
                    }
                },
                columns: [
                    { data: 'action', name: 'action', searchable: false, orderable: false},
                    { data: 'transaction_date', name: 'transaction_date'  },
                    { data: 'invoice_no', name: 'invoice_no'},
                    { data: 'conatct_name', name: 'conatct_name'},
                    { data: 'mobile', name: 'contacts.mobile'},
                    { data: 'business_location', name: 'bl.name'},
                    { data: 'shipping_status', name: 'shipping_status'},
                        @if(!empty($custom_labels['shipping']['custom_field_1']))
                    { data: 'shipping_custom_field_1', name: 'shipping_custom_field_1'},
                        @endif
                        @if(!empty($custom_labels['shipping']['custom_field_2']))
                    { data: 'shipping_custom_field_2', name: 'shipping_custom_field_2'},
                        @endif
                        @if(!empty($custom_labels['shipping']['custom_field_3']))
                    { data: 'shipping_custom_field_3', name: 'shipping_custom_field_3'},
                        @endif
                        @if(!empty($custom_labels['shipping']['custom_field_4']))
                    { data: 'shipping_custom_field_4', name: 'shipping_custom_field_4'},
                        @endif
                        @if(!empty($custom_labels['shipping']['custom_field_5']))
                    { data: 'shipping_custom_field_5', name: 'shipping_custom_field_5'},
                        @endif
                    { data: 'payment_status', name: 'payment_status'},
                    { data: 'waiter', name: 'ss.first_name', @if(empty($is_service_staff_enabled)) visible: false @endif }
                ],
                "fnDrawCallback": function (oSettings) {
                    __currency_convert_recursively($('#sell_table'));
                },
                createdRow: function( row, data, dataIndex ) {
                    $( row ).find('td:eq(4)').attr('class', 'clickable_td');
                }
            });

            $('#pending_shipments_location').change( function(){
                sell_table.ajax.reload();
            });
        });
    </script>
@endsection