@extends('operations.layout.mainlayout')

<link rel="stylesheet" href="/warehouse_components/css/dashboard.css">
<style>

    .container {
        display: grid;
        grid-template-columns: repeat(1, 160px);
        grid-gap: 80px;
        margin: auto 0;
    }

    @media (min-width: 420px) and (max-width: 659px) {
        .container {
            grid-template-columns: repeat(2, 160px);
        }
    }

    @media (min-width: 660px) and (max-width: 899px) {
        .container {
            grid-template-columns: repeat(3, 160px);
        }
    }

    @media (min-width: 900px) {
        .container {
            grid-template-columns: repeat(4, 160px);
        }
    }

    .container .box {
        width: 100%;
    }

    .container .box h2 {
        display: block;
        text-align: center;
        color: #fff;
    }

    .container .box .chart {
        position: relative;
        width: 50%;
        height: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 81px;
        color: #fff;
    }

    .container .box canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }


    .filter-parent {
        direction: rtl;
    }

    .filter-button {
        direction: ltr;
    }

    [class$="-legend"] tr td:first-child span {
        border-radius: 10px;
        display: inline-block;
        height: 12px;
        margin-top: 5px;
        width: 12px;
        cursor: pointer;
    }

    [class$="-legend"] li {
        list-style: none;
    }

    .custom-chart {
        float: left;
        width: 70%;
    }

    /*.chart-table {
        width: 30% !important;
    }*/

    .chart-table > tbody > tr:first-child > td {
        border: none;
    }

    .quantity-chart-table > tbody > tr:first-child > td {
        border: none;
    }

    [class$="-legend"] tr.hidden {
        text-decoration: line-through;
    }

    .dot-chart {
        width: 0;
    }

    .filter-group {
        float: right;
        display: inline-flex;
        justify-content: flex-end;
        margin-right: -7%;
    }

    .chart-title {
        float: left;
        display: inline-flex;
        justify-content: flex-end;
        margin-left: -7%;
    }

    .wave-loader {
        left: 22vw;
        bottom: 8vw;
    }

    #sales-loader {
        left: 40vw;
        bottom: 8vw;
    }
    .left-card{
        width: 59%;
    }
    .right-card{
        width: 40%;
    }
    @media (max-width: 768px) {
        .contain-card{
            flex-direction: column;
        }
        .left-card,.right-card{
            width: 100%;
            margin: 12px 0 ;
        }
    }
</style>
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Sales Dashboard </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Outpatients Sales</h6>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="branch_sales_dropDown"
                                                  role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="branch_sales_range">Date Range</label>
                                                            <div id="branch_sales_range" class="form-control"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                            <select class="form-control" id="outpatients-branch-id" name="status">
                                                                <option value="">Select Branch</option>
                                                                @foreach($branches as $branch)
                                                                    <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="branch_sales_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>

                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-12 col-xl-12">
                                                <div id="branchesChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Medical Complex</h6>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="medical_complex_dropDown"
                                                  role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="medical_complex_range">Date Range</label>
                                                            <div id="medical_complex_range" class="form-control"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                            <select class="form-control" id="medical-complex-branch-id" name="status">
                                                                <option value="">Select Branch</option>
                                                                @foreach($branches as $branch)
                                                                    <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Company</b></span>
                                                            <select class="form-control" id="medical-complex-company-id" name="status">
                                                                <option value="">Select Company</option>
                                                                @foreach($medicalCompanies as $user)
                                                                    <option value="{{$user->ID}}">{{$user->COMPANY_NAME}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="medical_complex_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>

                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-12 col-xl-12">
                                                <div id="medicalComplexChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Companies</h6>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="companies_dropDown"
                                                  role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="companies_range">Date Range</label>
                                                            <div id="companies_range" class="form-control"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                            <select class="form-control" id="companies-branch-id" name="status">
                                                                <option value="">Select Branch</option>
                                                                @foreach($branches as $branch)
                                                                    <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Company</b></span>
                                                            <select class="form-control" id="companies-branch-user-id" name="status">
                                                                <option value="">Select Company</option>
                                                                @foreach($companies as $user)
                                                                    <option value="{{$user->ID}}">{{$user->COMPANY_NAME}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="companies_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>
                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-12 col-xl-12">
                                                <div id="companiesChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="max-height: 166px;">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Booking Sources</h6>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="booking_sources_dropDown"
                                                  role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="booking_sources_range">Date Range</label>
                                                            <div id="booking_sources_range" class="form-control"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                            <select class="form-control" id="booking-sources-branch-id" name="status">
                                                                <option value="">Select Branch</option>
                                                                @foreach($branches as $branch)
                                                                    <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="booking_sources_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>
                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-12 col-xl-12">
                                                <div id="booking-sources-chart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>

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

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row">
                            <div class="col d-flex contain-card justify-content-between mb-3">
                            <div class="stretch-card left-card">
                                <div class="card" style="min-height: 100%">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Sales Per Hour</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group" style="margin-right: -3%;">
                                                        <div class="btn-group mb-3 mb-md-0" id="parent_item_sales_dates"
                                                             item_sales_date_role="year" role="group"
                                                             aria-label="Basic example">
                                                            <button type="button"
                                                                    class="btn btn-outline-info item_sales"
                                                                    value="day">Today
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-info d-none d-md-block item_sales"
                                                                    value="week">Week
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info item_sales"
                                                                    value="month">
                                                                Month
                                                            </button>
                                                            {{--<button type="button" class="btn btn-outline-info item_sales"
                                                                    value="year">Year
                                                            </button>--}}
                                                        </div>
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="item_sales_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="item_sales_range">Date
                                                                            Range</label>
                                                                        <div id="item_sales_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                                        <select class="form-control" id="heatmap-branch-id" name="status">
                                                                            <option value="">Select Branch</option>
                                                                            @foreach($branches as $branch)
                                                                                <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button"
                                                                               id="item_sales_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="wave-loader" id="heatmap-loader">
                                                    <div class="wave top-wave">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                    <div class="wave bottom-wave">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                </div>
                                                <div id="heatmap-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="stretch-card right-card"
                                >
                                <div class="card" style="min-height: 100%"{{--style="flex-grow: 1; position: relative; left: 0px; top: 0px; color: var(--blazma-primary) ;"--}}>
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Reservation Per City</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group" style="margin-right: -3%;">
                                                        <button class="dropdown btn btn-sm">
                                    <span class=" dropdown-toggle" href="#" id="city_dropDown"
                                          role="button"
                                          data-toggle="dropdown" aria-haspopup="true"
                                          aria-expanded="false">
                            <i class="fa fa-filter"></i>
                                    </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="map_sales_range">Date Range</label>
                                                                        <div id="map_sales_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button"
                                                                               id="map_sales_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="wave-loader-map" id="map-loader">
                                                    <div class="wave top-wave" style="margin-left: 30%;width: 50%">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                    <div class="wave bottom-wave"  style="margin-left: 30%;width: 50%">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                </div>
                                                <div id="container"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-12 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="btn-group mb-3 mb-md-0" id="parent_po_dates"
                                                         role="group">
                                                        <button type="button" class="btn btn-info sales-check"
                                                                value="1">Test Sales
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-outline-info d-none d-md-block sales-check"
                                                                value="2">Package Sales
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group" style="margin-right: -3%;">
                                                        <div class="btn-group mb-3 mb-md-0"
                                                             id="parent_sales_by_item_dates"
                                                             sales_by_item_date_role="year" role="group"
                                                             aria-label="Basic example">
                                                            <button type="button"
                                                                    class="btn btn-outline-info sales_by_item_dates"
                                                                    value="day">Today
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-info d-none d-md-block sales_by_item_dates"
                                                                    value="week">Week
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info sales_by_item_dates"
                                                                    value="month">
                                                                Month
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info sales_by_item_dates"
                                                                    value="year">Year
                                                            </button>
                                                        </div>
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#"
                                                              id="sales_by_item_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="sales_by_item_range">Date
                                                                            Range</label>
                                                                        <div id="sales_by_item_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                                        <select class="form-control select2" id="sales-items-branch-id" name="status">
                                                                            <option value="">Select Branch</option>
                                                                            @foreach($branches as $branch)
                                                                                <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Select Test</b></span>
                                                                        <select class="form-control select2" id="sales-items-test-id" name="status">
                                                                            <option value="">Select Test</option>
                                                                            @foreach($allTests as $test)
                                                                                <option value="{{$test->ID}}">{{$test->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Select Package</b></span>
                                                                        <select class="form-control select2" id="sales-items-package-id" name="status">
                                                                            <option value="">Select Package</option>
                                                                            @foreach($allPackages as $package)
                                                                                <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button"
                                                                               id="sales_by_item_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="wave-loader" id="sales-loader">
                                                    <div class="wave top-wave">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                    <div class="wave bottom-wave">
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                        <div></div>
                                                    </div>
                                                </div>
                                                    <div id="salesByItem-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-12 grid-margin stretch-card">

                                <div class="card" style="flex-grow: 1; position: relative; left: 0px; top: 0px; color: var(--blazma-primary) ;">
                                    <div class="card-header border-0">
                                        <h3 class="card-title">
                                            <i class="fas fa-th mr-1"></i>
                                            Turnaround Graph
                                        </h3>
                                        <div class="card-tools">
                                            <div class="row">
                                                <div class="col-lg-6 offset-3" style="right: 40%;">
                                                    <div class="filter-group-graph" style="margin-right: -3%;">
                                                        <button class="dropdown btn btn-sm">
                                                        <span class="dropdown-toggle dropdown-toggle-graph" href="#"
                                                              id="graph_sales_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                        <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="graph_sales_range">Date
                                                                            Range</label>
                                                                        <div id="graph_sales_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Status</b></span>
                                                                        <select class="form-control multi" id="sales-graph-status-id" name="status[]" multiple="multiple">
                                                                            @foreach($statuses as $status)
                                                                                <option value="{{$status->LAB_ORDER_STATUS_ID}}">{{$status->DESC_EN}}</option>
                                                                            @endforeach
                                                                        </select>

                                                                        <span class="text-muted text-sm"><b>Test Category</b></span>
                                                                        <select class="form-control" id="sales-graph-category-id" name="status">
                                                                            <option value="">Select Test Category</option>
                                                                            @foreach($packages as $package)
                                                                                <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <span class="text-muted text-sm"><b>Select Branch</b></span>
                                                                        <select class="form-control" id="turnaround-branch-id" name="status">
                                                                            <option value="">Select Branch</option>
                                                                            @foreach($branches as $branch)
                                                                                <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button"
                                                                               id="graph_sales_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">

                                        <div class="chartjs-size-monitor">
                                            <div class="chartjs-size-monitor-expand">
                                                <div class=""></div>
                                            </div>
                                            <div class="chartjs-size-monitor-shrink">
                                                <div class=""></div>
                                            </div>
                                        </div>

                                        <canvas class="chart" id="graph-sales-chart" style="min-height: 215px;"></canvas>
                                    </div>
                                    <!-- /.card-body -->
                                    <div class="card-footer bg-transparent">
                                        <div class="row">
                                            <div class="col-12" style="text-align: -webkit-center;padding-left: 38px;">
                                                <div class="container">
                                                    <div class="box">
                                                        <div class="chart" id="avg-tat" data-percent="0" data-scale-color="var(--blazma-primary)"><span style="color: #007bff;" id="avg-tat-span" class="font-weight-bold">0</span> <h6 style="color: var(--blazma-text);" class="mt-1">Avg TAT</h6></div>
                                                    </div>
                                                    <div class="box">
                                                        <div class="chart" id="min-tat" data-percent="0" data-scale-color="var(--blazma-primary)"><span style="color: #007bff;" id="min-tat-span" class="font-weight-bold">0</span> <h6 style="color: var(--blazma-text);" class="mt-1">Min TAT</h6></div>
                                                    </div>
                                                    <div class="box">
                                                        <div class="chart" id="max-tat" data-percent="0" data-scale-color="var(--blazma-primary)"><span style="color: #007bff;" id="max-tat-span" class="font-weight-bold">0</span> <h6 style="color: var(--blazma-text);" class="mt-1">Max TAT</h6></div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <!-- ./col -->
                                             <div class="col-4 text-center">
                                                 <div style="display:inline;width:60px;height:60px;">
                                                     <canvas width="60" height="60"></canvas>
                                                     <input type="text" class="knob" data-readonly="true" value="50"
                                                            data-width="60" data-height="60" data-fgcolor="#39CCCC"
                                                            readonly="readonly"
                                                            style="width: 34px; height: 20px; position: absolute; vertical-align: middle; margin-top: 20px; margin-left: -47px; border: 0px; background: none; font: bold 12px Arial; text-align: center; color: rgb(57, 204, 204); padding: 0px; appearance: none;">
                                                 </div>

                                                 <div class="text-white">Online</div>
                                             </div>
                                             <!-- ./col -->
                                             <div class="col-4 text-center">
                                                 <div style="display:inline;width:60px;height:60px;">
                                                     <canvas width="60" height="60"></canvas>
                                                     <input type="text" class="knob" data-readonly="true" value="30"
                                                            data-width="60" data-height="60" data-fgcolor="#39CCCC"
                                                            readonly="readonly"
                                                            style="width: 34px; height: 20px; position: absolute; vertical-align: middle; margin-top: 20px; margin-left: -47px; border: 0px; background: none; font: bold 12px Arial; text-align: center; color: rgb(57, 204, 204); padding: 0px; appearance: none;">
                                                 </div>

                                                 <div class="text-white">In-Store</div>
                                             </div>
                                             <!-- ./col -->
                                             --}}
                                        </div>
                                        <!-- /.row -->
                                    </div>
                                    <!-- /.card-footer -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--<div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-9 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Finance Exceptions</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group">
                                                        <div class="btn-group mb-3 mb-md-0" id="parent_po_dates"
                                                             po_date_role="year" role="group"
                                                             aria-label="Basic example">
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="day">Today
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info d-none d-md-block po_dates"
                                                                    value="week">Week
                                                            </button>
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="month">
                                                                Month
                                                            </button>
                                                            <button type="button" class="btn btn-info po_dates"
                                                                    value="year">Year
                                                            </button>
                                                        </div>
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="po_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="purchase_orders_range">Date
                                                                            Range</label>
                                                                        <div id="purchase_orders_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button" id="po_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="sample-status-chart"></div>
                                                <div id="columnChart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="flex-grow: 1;" --}}{{--style="height: 619px;"--}}{{-->
                                    <div class="card-body" style="height: 0;">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Branch Quantity Chart</b>
                                                </div>
                                                <div class="col-lg-6" style="left: 4%;">
                                                    <div class="filter-group" style="margin-right: -3%;">
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#"
                                                              id="branch_quantity_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="branch_quantity_range">Date
                                                                            Range</label>
                                                                        <div id="branch_quantity_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button"
                                                                               id="branch_quantity_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="radial-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Finance Exceptions</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group">
                                                        <div class="btn-group mb-3 mb-md-0" id="parent_po_dates"
                                                             po_date_role="year" role="group"
                                                             aria-label="Basic example">
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="day">Today
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info d-none d-md-block po_dates"
                                                                    value="week">Week
                                                            </button>
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="month">
                                                                Month
                                                            </button>
                                                            <button type="button" class="btn btn-info po_dates"
                                                                    value="year">Year
                                                            </button>
                                                        </div>
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="po_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                        <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="purchase_orders_range">Date
                                                                            Range</label>
                                                                        <div id="purchase_orders_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button" id="po_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div>
                                                    <div class="custom-chart">
                                                        <canvas id="financeExceptionChart"></canvas>
                                                    </div>
                                                    <div id="finance-legend"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Sales</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group">
                                                        <div class="btn-group mb-3 mb-md-0" id="parent_po_dates"
                                                             po_date_role="year" role="group"
                                                             aria-label="Basic example">
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="day">Today
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-outline-info d-none d-md-block po_dates"
                                                                    value="week">Week
                                                            </button>
                                                            <button type="button" class="btn btn-outline-info po_dates"
                                                                    value="month">
                                                                Month
                                                            </button>
                                                            <button type="button" class="btn btn-info po_dates"
                                                                    value="year">Year
                                                            </button>
                                                        </div>
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="po_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                        <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="purchase_orders_range">Date
                                                                            Range</label>
                                                                        <div id="purchase_orders_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button" id="po_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="radialChart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header mb-3">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <b>Operations</b>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="filter-group">
                                                        <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="po_dropDown"
                                                              role="button"
                                                              data-toggle="dropdown" aria-haspopup="true"
                                                              aria-expanded="false">
                                                        <i class="fa fa-filter"></i>
                                                        </span>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <form class="px-3 py-1 form-dropdown-menu">
                                                                    <div class="form-group">
                                                                        <label for="purchase_orders_range">Date
                                                                            Range</label>
                                                                        <div id="purchase_orders_range"
                                                                             class="form-control"
                                                                             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                                            <span></span> <i
                                                                                    class="fa fa-caret-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dropdown-divider"></div>
                                                                    <div class="form-group">
                                                                        <input type="button" id="po_filter_range"
                                                                               class="btn btn-block btn-sm btn-info"
                                                                               value="Apply">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div>
                                                    <div class="custom-chart"
                                                         style="height: 177px; width: 100%; margin: 0 auto;">
                                                        <canvas id="operationExceptionChart"></canvas>
                                                    </div>
                                                    <div id="operation-legend"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>--}}
            </div>
        </section>
    </div>

@endsection

{{--<script src="/warehouse_components/js/echarts.min.js"></script>--}}

<script src="/warehouse_components/js/apexcharts.min.js"></script>

<script  src="/js/moment.min.js"></script>

<link rel="stylesheet" type="text/css" href="/warehouse_components/css/daterangepicker.css"/>

<script src="/js/highmaps.js"></script>
<script src="/js/exporting.js"></script>

@section('warehouse_scripts')
    <script src="/warehouse_components/js/jquery.easypiechart.min.js" ></script>
    <script>
        $('.select2').select2();
        var colors = {
            primary: "#6571ff",
            secondary: "#7987a1",
            success: "#05a34a",
            info: "#66d1d1",
            warning: "#fbbc06",
            danger: "#ff3366",
            theme: "var(--blazma-primary)",
            light: "#e9ecef",
            dark: "#060c17",
            muted: "#7987a1",
            gridBorder: "rgba(77, 138, 240, .15)",
            bodyColor: "#000",
            cardBg: "#fff"
        }

        var start = moment().subtract(29, 'days');
        var end = moment();

        //initFinanceExceptions();
        //initOperationExceptions();
        //initColumnChart();
        //initRadialChart();
        //initSampleStatusChart();
        //initRadial2Chart();

        document.addEventListener('DOMContentLoaded', function() {
            initSalesByItemChart();
            initMedicalComplexChart();
            initCompaniesChart();

            initHighchartsMap();
            initHeatMapChart();
            initBranchSalesChart();
            initSalesGraph();
            initBookingSourcesChart();
        });




        function initFinanceExceptions() {
            var ctx = document.getElementById("financeExceptionChart");

            var chartData = [60, 90, 120];
            var chartLabels = [' BillAmount Edits', ' Cancelled/Write Off', 'Refunded'];

            var chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: chartLabels,
                    datasets: [{
                        backgroundColor: [
                            'var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E'
                        ],
                        data: chartData
                    }]
                },
                options: {
                    cutoutPercentage: 75,
                    legend: {
                        display: false
                    },
                    layout: {
                        padding: 50
                    },
                    "plugins": {
                        "legend": false,
                        "outlabels": {
                            "text": "%l %p",
                            "color": "white",
                            "stretch": 35,
                            "font": {
                                "resizable": true,
                                "minSize": 12,
                                "maxSize": 18
                            }
                        }
                    },
                    legendCallback: function (chart) {
                        var text = [];
                        var ds = chart.data.datasets[0];
                        var sum = ds.data.reduce(function add(a, b) {
                            return a + b;
                        }, 0);
                        text.push('<div class="row"><div class="col-sm-8 font-weight-bold">Total Exceptions</div> <div class="col-sm-4 text-right font-weight-bold">' + sum + '</div></div>')
                        text.push('<table class="table chart-table "><tbody class="0-legend">');
                        for (var i = 0; i < ds.data.length; i++) {
                            text.push('<tr>');
                            var perc = Math.round(100 * ds.data[i] / sum, 0);
                            text.push('<td class="dot-chart"><span style="background-color:' + ds.backgroundColor[i] + '"></span>' + '</td>' + '<td class="text-left pl-0">' + chart.data.labels[i] + '</td>' + '<td class="text-right">' + ds.data[i] + '</td>');
                            text.push('</tr>');
                        }
                        text.push('</tbody></table>');
                        return text.join("");
                    }
                }
            });

            var myLegendContainer = document.getElementById("finance-legend");
            myLegendContainer.innerHTML = chart.generateLegend();
            var legendItems = myLegendContainer.getElementsByTagName('tr');
            for (var i = 0; i < legendItems.length; i += 1) {
                legendItems[i].addEventListener("click", legendClickCallback, false);
            }

            function legendClickCallback(event) {
                event = event || window.event;

                var target = event.target || event.srcElement;
                while (target.nodeName !== 'TR') {
                    target = target.parentElement;
                }
                var parent = target.parentElement;
                var chartId = parseInt(parent.classList[0].split("-")[0], 10);
                var chart = Chart.instances[chartId];
                var index = Array.prototype.slice.call(parent.children).indexOf(target);
                var meta = chart.getDatasetMeta(0);
                var item = meta.data[index];

                if (item.hidden === null || item.hidden === false) {
                    item.hidden = true;
                    target.classList.add('hidden');
                } else {
                    target.classList.remove('hidden');
                    item.hidden = null;
                }
                chart.update();
            }

            $('.po_dates').on('click', function (e) {
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                $(this).removeClass('btn-outline-info').addClass('btn-info');
                $('#po_dropDown').css('color', 'unset');
                purchaseOrderChart(this.value)
            })

            $(document).on('click', '#po_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#purchase_orders_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let vendors = $('#po_vendors').val();
                let parent = $('#po_filter_range').closest('.show');
                $('#po_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                    'vendors': vendors,
                }
                purchaseOrderChart(rangeDates)
            })

            function cb(start, end) {
                $('#purchase_orders_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#purchase_orders_range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initOperationExceptions() {
            var ctx = document.getElementById("operationExceptionChart");

            var chartData = [60, 90, 120];
            var chartLabels = ['Sample Redrawn', 'Report Redo', 'Dismissed'];

            var chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: chartLabels,
                    datasets: [{
                        backgroundColor: [
                            'var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E'
                        ],
                        data: chartData
                    }],
                },
                options: {
                    layout: {
                        padding: 10
                    },
                    legend: {
                        display: false
                    },
                    legendCallback: function (chart) {
                        var text = [];
                        var ds = chart.data.datasets[0];
                        var sum = ds.data.reduce(function add(a, b) {
                            return a + b;
                        }, 0);
                        //text.push('<div class="row"><div class="col-sm-12">Totals Exceptions: <b>' + sum + '</b></div></div>')
                        text.push('<table class="table chart-table "><thead style="color: black; font-weight: bold; background: transparent"><tr><td style="border-top: none" colspan="2">Total Exceptions</td><td style="text-align: right; border-top: none">' + sum + '</td></tr></thead><tbody class="1-legend">');
                        for (var i = 0; i < ds.data.length; i++) {
                            text.push('<tr>');
                            var perc = Math.round(100 * ds.data[i] / sum, 0);
                            text.push('<td class="dot-chart"><span style="background-color:' + ds.backgroundColor[i] + '"></span>' + '</td>' + '<td class="text-left pl-0">' + chart.data.labels[i] + '</td>' + '<td class="text-right">' + ds.data[i] + '</td>');
                            text.push('</tr>');
                        }
                        text.push('</tbody></table>');
                        return text.join("");
                    }
                }
            });

            var myLegendContainer = document.getElementById("operation-legend");
            myLegendContainer.innerHTML = chart.generateLegend();
            var legendItems = myLegendContainer.getElementsByTagName('tr');
            for (var i = 0; i < legendItems.length; i += 1) {
                legendItems[i].addEventListener("click", legendClickCallback, false);
            }

            function legendClickCallback(event) {
                event = event || window.event;

                var target = event.target || event.srcElement;
                while (target.nodeName !== 'TR') {
                    target = target.parentElement;
                }
                var parent = target.parentElement;
                var chartId = parseInt(parent.classList[0].split("-")[0], 10);
                var chart = Chart.instances[chartId];
                var index = Array.prototype.slice.call(parent.children).indexOf(target);
                var meta = chart.getDatasetMeta(0);
                var item = meta.data[index];

                if (item.hidden === null || item.hidden === false) {
                    item.hidden = true;
                    target.classList.add('hidden');
                } else {
                    target.classList.remove('hidden');
                    item.hidden = null;
                }
                chart.update();
            }

            $('.po_dates').on('click', function (e) {
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                $(this).removeClass('btn-outline-info').addClass('btn-info');
                $('#po_dropDown').css('color', 'unset');
                purchaseOrderChart(this.value)
            })

            $(document).on('click', '#po_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#purchase_orders_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let vendors = $('#po_vendors').val();
                let parent = $('#po_filter_range').closest('.show');
                $('#po_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                    'vendors': vendors,
                }
                purchaseOrderChart(rangeDates)
            })

            function cb(start, end) {
                $('#purchase_orders_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#purchase_orders_range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initColumnChart() {
            var options = {
                series: [{
                    name: 'Net Profit',
                    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
                }, {
                    name: 'Revenue',
                    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
                }, {
                    name: 'Free Cash Flow',
                    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
                }],
                colors: ['var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E'],
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                },
                yaxis: {
                    title: {
                        text: '$ (thousands)'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "$ " + val + " thousands"
                        }
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#columnChart"), options);
            chart.render();
        }

        function initRadialChart() {
            var options = {
                series: [76, 67, 61, 90],
                chart: {
                    height: 390,
                    type: 'radialBar',
                },
                plotOptions: {
                    radialBar: {
                        offsetY: 0,
                        /*startAngle: 0,
                        endAngle: 270,*/
                        hollow: {
                            margin: 5,
                            size: '30%',
                            background: 'transparent',
                            image: undefined,
                        },
                        dataLabels: {
                            name: {
                                show: false,
                            },
                            value: {
                                show: false,
                            }
                        }
                    }
                },
                colors: ['var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E',],
                labels: ['Vendor1', 'VitLab', 'Beckman Colture', 'Vendor2'],
                legend: {
                    show: true,
                    floating: true,
                    fontSize: '16px',
                    position: 'right',
                    /*offsetX: 160,
                    offsetY: 15,*/
                    labels: {
                        useSeriesColors: true,
                    },
                    markers: {
                        size: 0
                    },
                    formatter: function (seriesName, opts) {
                        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
                    },
                    itemMargin: {
                        vertical: 3
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        legend: {
                            show: false
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#radialChart"), options);
            chart.render();
        }

        function initBookingSourcesChart() {
            var options = {
                series: [0, 0, 0, 0],
                chart: {
                    height: 125,
                    type: 'radialBar',
                },
                colors: ['var(--blazma-primary)', '#FF869E', '#FFC4C4', '#3db191'],
                plotOptions: {
                    radialBar: {
                        offsetX: -30,
                        offsetY: -15,
                        floating: true,
                        hollow: {
                            margin: 5,
                            size: '15%',
                            background: 'transparent',
                        },
                        track: {
                            show: true,
                            startAngle: undefined,
                            endAngle: undefined,
                            background: '#f2f2f2',
                            strokeWidth: '97%',
                            opacity: 1,
                            margin: 3,
                        },
                        dataLabels: {
                            show: false,
                            name: {
                                fontSize: '12px',
                            },
                            value: {
                                fontSize: '12px',
                                formatter: function (val) {
                                    return val
                                }
                            },
                        }
                    }
                },
                legend: {
                    show: true,
                    offsetX: 40,
                    offsetY: -13,
                    fontSize: '13%',
                    position: 'right',
                    labels: {
                        useSeriesColors: true,
                    },
                    markers: {
                        size: 0
                    },
                    formatter: function (seriesName, opts) {
                        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
                    },
                },
                labels: ['Blazma Care','Operations', 'Booking Portal', 'Mobile App'],
            };

            var chart = new ApexCharts(document.querySelector("#booking-sources-chart"), options);
            chart.render();
            bookingSourcesFunction();

            $(document).on('click', '#booking_sources_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#booking_sources_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#booking_sources_filter_range').closest('.show');
                $('#booking_sources_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.booking_sources_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                bookingSourcesFunction(rangeDates)
            })

            function cb(start, end) {
                $('#booking_sources_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#booking_sources_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });

            function bookingSourcesFunction(dateRole = null) {
                var branchId = $('#booking-sources-branch-id').val();

                if ($('#booking-sources-chart').length) {
                    $.ajax({
                        url: '/operations/sales/booking-sources',
                        data: {
                            date: dateRole,
                            branchId: branchId
                        },
                        success: function (data) {
                            const gData = data.series;
                            const gMax = gData.reduce((a, b) => a + Number(b), 0); // sum of all gData as max
                            const gMaxFixed = 500; // fixed  as max
                            let gMaxData = 0; // largest item in gData array as max
                            for (let i = 0; i < gData.length; i++) {
                                let num = parseFloat(gData[i]);
                                if (num > gMaxData) {
                                    gMaxData = num;
                                }
                            }

                            gSeries = gData.map((n) => n === null ? 0 : (n / gMax) * 100.0);
                            chart.updateOptions({
                                series: gSeries,
                                legend: {
                                    formatter: function (seriesName, opts) {
                                        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex].toFixed(2) + "%"
                                    }
                                },
                                plotOptions: {
                                    radialBar: {
                                        dataLabels: {
                                            value: {
                                                show: true,
                                                formatter: function (val, opts) {
                                                    //val = percentage and turn back to number using the total
                                                    let perc = parseFloat(val).toFixed(2);
                                                    let origValue = (val / 100) * gMax;
                                                    return perc + "%" + " (" + origValue.toFixed(1) + ")";
                                                }
                                            },
                                            total: {
                                                show: true,
                                                label: "Total sum",
                                                formatter: function () {
                                                    return gMax;
                                                }
                                            },
                                        }
                                    }
                                }
                            })
                            //$('.wave-loader').hide()
                        }
                    });
                }
            }
        }

        function initRadial2Chart() {
            var options = {
                series: [/*44, 55, 67, 83*/],
                chart: {
                    //height: 300,
                    type: 'radialBar',
                },
                plotOptions: {
                    radialBar: {
                        //offsetY: 40,
                        hollow: {
                            margin: 5,
                            size: '34%',
                            background: 'transparent',
                            image: undefined,
                            imageWidth: 150,
                            imageHeight: 150,
                            imageOffsetX: 0,
                            imageOffsetY: 0,
                            imageClipped: true,
                            position: 'front',
                            dropShadow: {
                                enabled: false,
                                top: 0,
                                left: 0,
                                blur: 3,
                                opacity: 0.5
                            }
                        },
                        track: {
                            show: true,
                            startAngle: undefined,
                            endAngle: undefined,
                            background: '#f2f2f2',
                            strokeWidth: '97%',
                            opacity: 1,
                            margin: 3,
                        },
                        dataLabels: {
                            name: {
                                fontSize: '12px',
                            },
                            value: {
                                fontSize: '12px',
                                formatter: function (val) {
                                    return val
                                }
                            },
                            total: {
                                show: false,
                                label: 'Total',
                                color: '#373d3f',
                                fontSize: '12px',
                                fontFamily: undefined,
                                fontWeight: 600,
                                formatter: function (w) {
                                    return w.globals.seriesTotals.reduce((a, b) => {
                                        return a + b
                                    }, 0) / w.globals.series.length + '%'
                                }
                            }
                        }
                    }
                },
                colors: ['var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E'],
                legend: {
                    show: true,
                    //floating: true,
                    fontSize: '13%',
                    position: 'top',
                    //position: 'left',
                    /*offsetX: 160,
                    offsetY: 15,*/
                    labels: {
                        useSeriesColors: true,
                    },
                    markers: {
                        size: 0
                    },
                    formatter: function (seriesName, opts) {
                        /*var text = [];
                        text.push('<table class="table quantity-chart-table"><tbody class="0-legend">');
                            text.push('<tr>');
                            text.push('<td class="dot-chart"><span></span>' + '</td>' + '<td class="text-left pl-0">' + seriesName + '</td>' + '<td class="text-right">' + opts.w.globals.series[opts.seriesIndex] + '</td>');
                            text.push('</tr>');
                        text.push('</tbody></table>');
                        return text.join("");*/
                        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
                    },
                    /*itemMargin: {
                        vertical: 3,
                        horizontal: 15
                    }*/
                },
                labels: [/*'Apples', 'Oranges', 'Bananas', 'Berries'*/],
            };
            var chart = new ApexCharts(document.querySelector("#radial-chart"), options);
            chart.render();
            salesChartFunction()

            function salesChartFunction(dateRole = null) {
                if ($('#radial-chart').length) {
                    $.ajax({
                        url: '/operations/sales/branch-sales',
                        data: {
                            date: dateRole
                        },
                        success: function (data) {
                            const gData = data.qty;
                            const gMax = gData.reduce((a, b) => a + Number(b), 0); // sum of all gData as max
                            const gMaxFixed = 500; // fixed  as max
                            let gMaxData = 0; // largest item in gData array as max
                            for (let i = 0; i < gData.length; i++) {
                                let num = parseFloat(gData[i]);
                                if (num > gMaxData) {
                                    gMaxData = num;
                                }
                            }

                            gSeries = gData.map((n) => n === null ? 0 : (n / gMax) * 100.0);
                            chart.updateOptions({
                                labels: data.names,
                                series: gSeries,
                                legend: {
                                    formatter: function (seriesName, opts) {
                                        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex].toFixed(2) + "%"
                                    }
                                },
                                plotOptions: {
                                    radialBar: {
                                        dataLabels: {
                                            value: {
                                                show: true,
                                                formatter: function (val, opts) {
                                                    //val = percentage and turn back to number using the total
                                                    let perc = parseFloat(val).toFixed(2);
                                                    let origValue = (val / 100) * gMax;
                                                    return perc + "%" + " (" + origValue.toFixed(1) + ")";
                                                }
                                            },
                                            total: {
                                                show: true,
                                                label: "Total sum",
                                                formatter: function () {
                                                    return gMax;
                                                }
                                            },
                                        }
                                    }
                                }
                            })

                            //$('.wave-loader').hide()
                        }
                    });
                }
            }

            $(document).on('click', '#branch_quantity_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#branch_quantity_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#branch_quantity_filter_range').closest('.show');
                $('#branch_quantity_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.branch_quantity_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                salesChartFunction(rangeDates)
            })

            function cb(start, end) {
                $('#branch_quantity_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#branch_quantity_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initCompaniesChart() {

            var options = {
                series: [{
                    data: []
                }],
                colors: ['var(--blazma-primary)'],
                chart: {
                    type: "line",
                    height: 80,
                    sparkline: {
                        enabled: !0
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    },
                    categories: [],
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                markers: {
                    size: 0
                },
                title: {
                    text: '0 SAR',
                    offsetX: 10,
                    align: 'left',
                    floating: false,
                    style: {
                        fontSize: '16px',
                        color: '#3db071'
                    }
                },

            };
            var companiesChart = new ApexCharts(document.querySelector("#companiesChart"), options);
            companiesChart.render();

            companiesChartFunction()

            function companiesChartFunction(dateRole = null) {
                var branchId = $('#companies-branch-id').val();
                var outsourceUserId = $('#companies-branch-user-id').val();

                if ($('#companiesChart').length) {
                    $.ajax({
                        url: '/operations/sales/companies-sales',
                        data: {
                            date: dateRole,
                            branchId: branchId,
                            outsourceUserId: outsourceUserId
                        },
                        success: function (data) {
                            companiesChart.updateOptions({
                                title: {
                                    text: data.TOTAL_SUM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' SAR'
                                },
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.times
                                }

                                //series: gSeries,
                            })

                            //$('.wave-loader').hide()
                        }
                    });
                }
            }

            $(document).on('click', '#companies_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#companies_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#companies_filter_range').closest('.show');
                $('#companies_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.companies_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                companiesChartFunction(rangeDates)
            })

            function cb(start, end) {
                $('#companies_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#companies_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initMedicalComplexChart() {

            var options = {
                series: [{
                    data: []
                }],
                colors: ['var(--blazma-primary)'],
                chart: {
                    type: "line",
                    height: 80,
                    sparkline: {
                        enabled: !0
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    },
                    categories: [],
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                markers: {
                    size: 0
                },
                title: {
                    text: '0 SAR',
                    offsetX: 10,
                    align: 'left',
                    floating: false,
                    style: {
                        fontSize: '16px',
                        color: '#3db071'
                    }
                },

            };
            var companiesChart = new ApexCharts(document.querySelector("#medicalComplexChart"), options);
            companiesChart.render();

            medicalComplexFunction()

            function medicalComplexFunction(dateRole = null) {
                var branchId = $('#medical-complex-branch-id').val();
                var medicalComplexId = $('#medical-complex-company-id').val();

                if ($('#medicalComplexChart').length) {
                    $.ajax({
                        url: '/operations/sales/medical-complex-sales',
                        data: {
                            date: dateRole,
                            branchId: branchId,
                            medicalComplexId: medicalComplexId
                        },
                        success: function (data) {
                            companiesChart.updateOptions({
                                title: {
                                    text: data.TOTAL_SUM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' SAR'
                                },
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.times
                                }

                                //series: gSeries,
                            })

                            //$('.wave-loader').hide()
                        }
                    });
                }
            }

            $(document).on('click', '#medical_complex_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#medical_complex_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#medical_complex_filter_range').closest('.show');
                $('#medical_complex_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.medical_complex_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                medicalComplexFunction(rangeDates)
            })

            function cb(start, end) {
                $('#medical_complex_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#medical_complex_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initBranchSalesChart() {

            var options = {
                series: [{
                    data: []
                }],
                colors: ['var(--blazma-primary)'],
                chart: {
                    type: "line",
                    height: 80,
                    sparkline: {
                        enabled: !0
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    },
                    categories: [],
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                markers: {
                    size: 0
                },
                title: {
                    text: '0 SAR',
                    offsetX: 10,
                    align: 'left',
                    floating: false,
                    style: {
                        fontSize: '16px',
                        color: '#3db071'
                    }
                },

            };
            var branchesChart = new ApexCharts(document.querySelector("#branchesChart"), options);
            branchesChart.render();

            medicalComplexFunction()

            function medicalComplexFunction(dateRole = null) {
                var branchId = $('#outpatients-branch-id').val();
                if ($('#branchesChart').length) {
                    $.ajax({
                        url: '/operations/sales/branches-sales',
                        data: {
                            date: dateRole,
                            branchId: branchId
                        },
                        success: function (data) {
                            branchesChart.updateOptions({
                                title: {
                                    text: data.TOTAL_SUM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' SAR'
                                },
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.times
                                }

                                //series: gSeries,
                            })

                            //$('.wave-loader').hide()
                        }
                    });
                }
            }

            $(document).on('click', '#branch_sales_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#branch_sales_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#branch_sales_filter_range').closest('.show');
                $('#branch_sales_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                $('.branch_sales_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                medicalComplexFunction(rangeDates)
            })

            function cb(start, end) {
                $('#branch_sales_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#branch_sales_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initSampleStatusChart() {
            var options = {
                series: [
                    {
                        name: "High",
                        data: [78, 29, 13, 36, 32, 32, 33]
                    },
                    {
                        name: "Medium",
                        data: [138, 49, 36, 76, 132, 32, 233]
                    },
                    {
                        name: "Low",
                        data: [182, 11, 0, 18, 17, 13, 13]
                    },
                    {
                        name: "Low2",
                        data: [52, 11, 110, 128, 217, 113, 143]
                    }
                ],
                chart: {
                    height: 350,
                    type: 'line',
                    /*dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },*/
                    toolbar: {
                        show: false
                    }
                },
                //colors: ['var(--blazma-primary)', '#77B6EA', '#5AE3BD'],
                colors: ['var(--blazma-primary)', '#d5cfcf', '#222831', '#30475E'],
                dataLabels: {
                    enabled: true,
                },
                stroke: {
                    curve: 'smooth'
                },
                title: {
                    text: 'Average Collection, Outsourcing & Receiving Status',
                    align: 'left'
                },
                grid: {
                    borderColor: '#e7e7e7',
                    row: {
                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                        opacity: 0.5
                    },
                },
                markers: {
                    size: 1
                },
                xaxis: {
                    categories: ['12 Jan', '11 Jan', '15 Jan', '20 Jan', '23 Jan', '24 Jan', '28 Jan'],
                },
                yaxis: {
                    title: {
                        text: 'Sample Status'
                    },
                    min: 5,
                    max: 240
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    floating: true,
                    offsetY: -25,
                    offsetX: -5
                }
            };

            var chart = new ApexCharts(document.querySelector("#sample-status-chart"), options);
            chart.render();

        }

        function initHeatMapChart() {
            if ($('#heatmap-chart').length) {
                function generateData(count, yrange) {
                    var i = 0;
                    var series = [];

                    while (i < count) {
                        if ((i + 1) > 12)
                            var x = (i + 1).toString() + 'PM';
                        else
                            var x = (i + 1).toString() + 'AM';
                        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
                        series.push({
                            x: x,
                            y: y
                        });
                        i++;
                    }
                    return series;
                }

                var options = {
                    chart: {
                        height: 350,
                        type: 'heatmap',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    grid: {
                        borderColor: colors.gridBorder,
                        padding: {
                            bottom: -4
                        },
                        xaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    dataLabels: {
                        //enabled: false // display text on each cell
                        enabled: false
                    },
                    colors: [colors.info],
                    stroke: {
                        colors: [colors.cardBg]
                    },
                    series: [
                        /*{
                            name: 'Tuesday',
                            data: generateData(24, {
                                min: 0,
                                max: 490
                            })
                        },*/
                    ],
                    xaxis: {
                        axisBorder: {
                            color: colors.gridBorder,
                        },
                        axisTicks: {
                            color: colors.gridBorder,
                        },

                    },
                    title: {
                        text: '',
                        align: 'left',
                        style: {
                            fontWeight: 'bold',
                        },
                    },
                    plotOptions: {
                        heatmap: {
                            radius: 0,
                            reverseNegativeShade: true,
                            colorScale: {
                                ranges: [{
                                    from: 0,
                                    to: 1,
                                    color: 'var(--blazma-pale)',
                                    name: 'Low',
                                }, {
                                    from: 1,
                                    to: 100,
                                    color: 'var(--blazma-light)',
                                    name: 'Medium',
                                }, {
                                    from: 101,
                                    to: 500,
                                    color: 'var(--blazma-primary)',
                                    name: 'High',
                                },

                                ]
                            }
                        }
                    },
                }

                var chart = new ApexCharts(document.querySelector("#heatmap-chart"), options);
                chart.render();
                itemsExpires()

                function itemsExpires(dateRole = null) {
                    var branchId = $('#heatmap-branch-id').val();

                    if ($('#heatmap-chart').length) {
                        $.ajax({
                            url: '/operations/sales/lastWeekSales',
                            data: {
                                date: dateRole,
                                branchId: branchId
                            },
                            success: function (data) {
                                chart.updateOptions({
                                    series: data,
                                })

                                let lengthData = parseInt(data.length);
                                switch (true) {
                                    case (0 <= lengthData && lengthData < 10):
                                        chart.updateOptions({
                                            chart: {height: 350}
                                        })
                                        break;
                                    case (10 <= lengthData && lengthData < 15):
                                        chart.updateOptions({
                                            chart: {height: 400}
                                        })
                                        break;
                                    case (15 <= lengthData && lengthData < 25):
                                        chart.updateOptions({
                                            chart: {height: 500}
                                        })
                                        break;
                                    case (25 <= lengthData && lengthData <= 31):
                                        chart.updateOptions({
                                            chart: {height: 550}
                                        })
                                    case (lengthData > 31):
                                        chart.updateOptions({
                                            chart: {height: 600}
                                        })
                                        break;
                                }
                                $('#heatmap-loader').hide()
                            }
                        });
                    }
                }

                $('.item_sales').on('click', function (e) {
                    $('#heatmap-loader').show()
                    $('.item_sales').removeClass('btn-info').addClass('btn-outline-info');
                    $(this).removeClass('btn-outline-info').addClass('btn-info');
                    $('#item_sales_dropDown').css('color', 'unset');
                    itemsExpires(this.value)
                })

                $(document).on('click', '#item_sales_filter_range', function (e) {
                    e.preventDefault();
                    $('#heatmap-loader').show()
                    let rangePicker = $('#item_sales_range');
                    let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                    let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                    let parent = $('#item_sales_filter_range').closest('.show');
                    $('#item_sales_dropDown').css('color', 'var(--blazma-primary)');
                    parent.removeClass('show');
                    $('.item_sales').removeClass('btn-info').addClass('btn-outline-info');
                    var rangeDates = {
                        'from': fromDate,
                        'to': toDate,
                    }
                    itemsExpires(rangeDates)
                })

                function cb(start, end) {
                    $('#item_sales_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }

                $('#item_sales_range').daterangepicker({
                    startDate: start,
                    endDate: end,
                    showDropdowns: true,
                    "maxSpan": {
                        "days": 31
                    },
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        /*'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],*/
                    }
                }, cb);

                cb(start, end);
                $(".daterangepicker").click(function (e) {
                    e.stopPropagation();
                });
            }
        }

        function initSalesByItemChart() {
            if ($('#salesByItem-chart').length) {
                var options = {
                    colors: ['var(--blazma-primary)'],
                    chart: {
                        type: 'bar',
                        height: '318',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: true,
                            export: {
                                csv: {
                                    filename: undefined,
                                    columnDelimiter: ',',
                                    headerCategory: 'labels',
                                    headerValue: 'value',
                                },
                            },
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    fill: {
                        opacity: .9
                    },
                    /*title: {
                        text: 'Stock Balance',
                        align: 'left',
                        style: {
                            fontWeight:  'bold',
                        },
                    },*/
                    grid: {
                        padding: {
                            bottom: -4
                        },
                        borderColor: colors.gridBorder,
                        xaxis: {
                            lines: {
                                show: false
                            }
                        },
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'QTY',
                        data: []
                    }],
                    xaxis: {
                        //type: 'text',
                        categories: [],
                        axisBorder: {
                            color: 'gray',
                        },
                        axisTicks: {
                            color: 'gray',
                        },
                        labels: {
                            show: true,
                            rotate: -45,
                            rotateAlways: false,
                            hideOverlappingLabels: true,
                            showDuplicates: false,
                            trim: true,
                            minHeight: undefined,
                            maxHeight: 120,
                            style: {
                                colors: [],
                                fontSize: '10px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            offsetX: 0,
                            offsetY: 0,
                            format: undefined,
                            formatter: undefined,
                        },
                    },
                    yaxis: {
                        title: {
                            text: 'Item Sales',
                            style: {
                                size: 9,
                                color: 'gray'
                            }
                        },
                    },
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                        itemMargin: {
                            horizontal: 8,
                            vertical: 0
                        },
                    },
                    stroke: {
                        width: 0
                    },
                    dataLabels: {
                        enabled: false,
                        style: {
                            fontSize: '10px',
                        },
                        offsetY: -27
                    },
                    plotOptions: {
                        bar: {
                            columnWidth: "50%",
                            borderRadius: 4,
                            dataLabels: {
                                position: 'top',
                                orientation: 'vertical',
                            }
                        },
                    },
                }
                var apexBarChart = new ApexCharts(document.querySelector("#salesByItem-chart"), options);
                let type = 1;

                apexBarChart.render();
                itemSales(null, type)

                $('.sales-check').on('click', function (e) {
                    if ($(this).val() === '2')
                        type = 2;
                    else type = 1;

                    $('.sales-check').removeClass('btn-info').addClass('btn-outline-info');
                    $(this).removeClass('btn-outline-info').addClass('btn-info');
                    $('#stock_dropDown').css('color', 'unset');
                    if ($(".btn-info", "#parent_sales_by_item_dates").length === 1)
                        itemSales($('.sales_by_item_dates.btn-info').val(), type)
                    else
                        itemSales(null, type)
                })

                function itemSales(dateRole = null, type = 1) {
                    var branchId = $('#sales-items-branch-id').val();
                    var testId = $('#sales-items-test-id').val();
                    var packageId = $('#sales-items-package-id').val();


                    $('#sales-loader').show();
                    $.ajax({
                        url: '/operations/sales/itemSales',
                        data: {
                            'date': dateRole,
                            'type': type,
                            branchId: branchId,
                            testId: testId,
                            packageId: packageId,
                        },
                        success: function (data) {
                            apexBarChart.updateOptions({
                                series: [{
                                    data: data.series
                                }],
                                xaxis: {
                                    categories: data.labels
                                }
                            })
                            $('#sales-loader').hide();
                        }
                    });
                }

                $('.sales_by_item_dates').on('click', function (e) {
                    $('.sales_by_item_dates').removeClass('btn-info').addClass('btn-outline-info');
                    $(this).removeClass('btn-outline-info').addClass('btn-info');
                    $('#sales_by_items_dropDown').css('color', 'unset');
                    itemSales(this.value, type)
                })

                $(document).on('click', '#sales_by_item_filter_range', function (e) {
                    e.preventDefault();
                    let rangePicker = $('#sales_by_item_range');
                    let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                    let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                    let parent = $('#sales_by_item_filter_range').closest('.show');
                    $('#sales_by_item_dropDown').css('color', 'var(--blazma-primary)');
                    parent.removeClass('show');
                    $('.sales_by_item_dates').removeClass('btn-info').addClass('btn-outline-info');
                    var rangeDates = {
                        'from': fromDate,
                        'to': toDate,
                    }
                    itemSales(rangeDates, type)
                })

                function cb(start, end) {
                    $('#sales_by_item_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }

                $('#sales_by_item_range').daterangepicker({
                    startDate: start,
                    endDate: end,
                    showDropdowns: true,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    }
                }, cb);

                cb(start, end);
                $(".daterangepicker").click(function (e) {
                    e.stopPropagation();
                });
            }
        }

        function initSalesGraph() {
            var salesGraphChartCanvas = $('#graph-sales-chart').get(0).getContext('2d');

            var salesGraphChartData = {
                labels  : [],
                datasets: [
                    {
                        label               : '',
                        fill                : false,
                        borderWidth         : 2,
                        lineTension         : 0,
                        spanGaps : true,
                        borderColor         : 'var(--blazma-primary) ',
                        pointRadius         : 3,
                        pointHoverRadius    : 7,
                        pointColor          : 'var(--blazma-primary) ',
                        pointBackgroundColor: 'var(--blazma-primary) ',
                        data                : []
                    }
                ]
            }

            var salesGraphChartOptions = {
                maintainAspectRatio : false,
                responsive : true,
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    position: 'top',
                    text: '',
                    fontColor: 'var(--blazma-primary) ',
                    fontSize: 14
                },
                scales: {
                    xAxes: [{
                        ticks : {
                            fontColor: 'var(--blazma-primary) ',
                        },
                        gridLines : {
                            display : false,
                            color: '#efefef',
                            drawBorder: false,
                        }
                    }],
                    yAxes: [{
                        ticks : {
                            stepSize: 0.1,
                            fontColor: 'var(--blazma-primary) ',
                        },
                        gridLines : {
                            display : true,
                            color: '#efefef',
                            drawBorder: false,
                        }
                    }]
                }
            }
            var salesGraphChart = new Chart(salesGraphChartCanvas, {
                    type: 'line',
                    data: salesGraphChartData,
                    options: salesGraphChartOptions
                }
            )

            graphSalesFunction()

            function graphSalesFunction(dateRole = null) {
                var status = $('#sales-graph-status-id').val();
                var category = $('#sales-graph-category-id').val();
                var branchId = $('#turnaround-branch-id').val();
                $.ajax({
                    url: '/operations/sales/graph',
                    data: {
                        date: dateRole,
                        status: status,
                        category: category,
                        branchId: branchId
                    },
                    success: function (data) {
                        salesGraphChart.data.labels = data.labels;
                        salesGraphChart.data.datasets[0].label = data.name;
                        salesGraphChart.data.datasets[0].data = data.series;
                        salesGraphChart.options.title.text = data.name === null ? '' : data.name;
                        $('#avg-tat').attr('data-percent', data.avg_percentage);
                        $('#min-tat').attr('data-percent', data.min_percentage);
                        $('#max-tat').attr('data-percent', data.max_percentage);
                        $('#avg-tat-span').text(data.avg)
                        $('#min-tat-span').text(data.min)
                        $('#max-tat-span').text(data.max)

                       $('.chart').easyPieChart({
                            size: 100,
                            barColor: "#ffffff",
                            scaleLength: 0,
                            lineWidth: 15,
                            trackColor: "var(--blazma-primary)",
                            lineCap: "circle",
                            animate: 1000,
                        });
                        salesGraphChart.update();

                        $('#avg-tat').data('easyPieChart').update(data.avg_percentage);
                        $('#min-tat').data('easyPieChart').update(data.min_percentage);
                        $('#max-tat').data('easyPieChart').update(data.max_percentage);
                        //$('.wave-loader').hide()
                    }
                });
            }

            $(document).on('click', '#graph_sales_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#graph_sales_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#graph_sales_filter_range').closest('.show');
                $('#graph_sales_dropDown').css('color', 'black');
                parent.removeClass('show');
                $('.graph_sales_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                graphSalesFunction(rangeDates)
            })

            function cb(start, end) {
                $('#graph_sales_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#graph_sales_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }

        function initHighchartsMap() {
            function reservationMap(data) {
                Highcharts.getJSON('https://code.highcharts.com/mapdata/countries/sa/sa-all.topo.json', function (geojson) {

                    // Initialize the chart
                    Highcharts.mapChart('container', {
                        maintainAspectRatio : false,
                        responsive : true,
                        chart: {
                            map: geojson
                        },
                        title: {
                            text: ''
                        },
                        mapNavigation: {
                            enabled: true,
                            buttonOptions: {
                                verticalAlign: 'bottom'
                            }
                        },
                        colorAxis: {
                            min: 0,
                        },

                        series: [{
                            data: data,
                            name: 'Total Reservation',
                            states: {
                                hover: {
                                    color: 'var(--blazma-primary)'
                                }
                            },
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        }]
                    });
                    //});
                })
            }

            function cb(start, end) {
                $('#map_sales_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }


            $(document).on('click', '#map_sales_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#map_sales_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#map_sales_filter_range').closest('.show');
                $('#city_dropDown').css('color', 'var(--blazma-primary)');
                parent.removeClass('show');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                filterReservationMap(rangeDates)
            });
            filterReservationMap();
            $('#map-loader').show();
            function filterReservationMap(date = null){
                $.ajax({
                    url: '/operations/sales/map-reservation',
                    data: {
                        date: date
                    },
                    type: 'GET',
                    async: true,
                    dataType: "json",
                    success: function (data) {
                        reservationMap(data);
                        $('.wave-loader').hide()
                        $('#map-loader').hide();
                    }
                });
            }
            $('#map_sales_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function (e) {
                e.stopPropagation();
            });
        }
    </script>
@endsection