@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
    <style>
        .widget-chart-content {
            padding: 15px;
        }
    </style>
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">

            <input type="hidden" id="filterType" value="all">
            <div class="row">
                <div class="col-md-2 mb-4 date-filter" style="">
                    <div class="form-group">
                        <div class="input-group date" id="fromdate" data-target-input="nearest">
                            <input autocomplete="off" type="text" class="form-control datepicker-input"
                                placeholder="Select Date" data-date-format="dd-mm-yyyy" data-date-container="#fromdate"
                                data-provide="datepicker" data-date-autoclose="true" name="from_date" id="from_date">
                            <div class="input-group-append" data-date-container="#fromdate" data-toggle="datepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 mb-3 date-filter" style="">
                    <div class="form-group">
                        <div class="input-group date" id="todate" data-target-input="nearest">
                            <input autocomplete="off" type="text" class="form-control datepicker-input"
                                placeholder="Select Date" data-date-format="dd-mm-yyyy" data-date-container="#todate"
                                data-provide="datepicker" data-date-autoclose="true" name="to_date" id="to_date">
                            <div class="input-group-append" data-date-container="#todate" data-toggle="datepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-1 mb-3 date-filter" style=" width:auto;" id="togglereportDetail">
                    <button type="button" class="Reload_Order btn btn-custom"
                        onclick="loadReportData()">Show</button>
                </div>

                <div class="col-md-2 mb-3 user-filter" style="" data-select2-id="0">
                    <select class="form-control select2-ajax col-3" id="dashboard_user_filter" name="dashboard_user_filter"
                        required=""></select>
                </div>
            </div>
            <!-- </div> -->

            <div class="row">
                @if (in_array('orders', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count" id="toggleOrderDetailCard">
                        <div class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-primary card"
                            id="card1">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content" style="padding: 15px;">
                                    <div class="widget-title opacity-5 box-title ">Orders</div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="25"
                                                            height="25" fill="#fff" class="bi bi-basket2"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0z" />
                                                            <path
                                                                d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6z" />
                                                        </svg>
                                                    </div>
                                                    <h3 class="box-number" id="totalOrder">0</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('current_month_sales', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count" id="togglethismonthsale">
                        <div class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-danger card"
                            id="card2">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content">
                                    <!-- <div class="widget-title opacity-5 box-title">Current Month Sale</div>
                                                                 <p class="box-percentage positive" id="CurrentMonthorderper">+20%</p> -->
                                    <div class="box-header">
                                        <p class="widget-title opacity-5 box-title">Current Month Sale</p>
                                        <p class="box-percentage positive" id="CurrentMonthorderper">+0%</p>
                                    </div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle" style="background: #78c382;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="#fff" class="bi bi-bar-chart-line"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1zm1 12h2V2h-2zm-3 0V7H7v7zm-5 0v-3H2v3z" />
                                                        </svg>
                                                    </div>

                                                    <h3 id="thismonthsale" class="box-number">0</h3>

                                                </div>

                                            </div>
                                            <!-- <div class="widget-title ml-auto font-size-lg font-weight-normal text-muted">
                                                                                 <div class="circle-progress-wrapper">
                                                                                     <div class="circle-progress" id="circle-progress-2"><canvas width="46" height="46"></canvas><small><span id="progress-text-2">0</span><span>%</span></small></div>
                                                                                 </div>
                                                                             </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('this_month_order_amount', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count" id="togglethismonthamount">
                        <div class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-danger card"
                            id="card3">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content">
                                    <!-- <div class="widget-title opacity-5 box-title">Active Subscriptions</div> -->
                                    <div class="box-header">
                                        <p class="box-title">This Month Order Amt</p>
                                        <p class="box-percentage positive" id="CurrentMonthSaleper">+0%</p>
                                    </div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle" style="background-color: #cf4c44;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="#fff" class="bi bi-activity"
                                                            viewBox="0 0 16 16">
                                                            <path fill-rule="evenodd"
                                                                d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2" />
                                                        </svg>
                                                    </div>

                                                    <h3 id="thismonthamount" class="box-number">0</h3>

                                                </div>

                                            </div>
                                            <!-- <div class="widget-title ml-auto font-size-lg font-weight-normal text-muted">
                                                                                 <div class="circle-progress-wrapper">
                                                                                     <div class="circle-progress" id="circle-progress-2"><canvas width="46" height="46"></canvas><small><span id="progress-text-2">0</span><span>%</span></small></div>
                                                                                 </div>
                                                                             </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('today_orders_count', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count" id="toggletodaysale">
                        <div class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-danger card"
                            id="card4">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content">
                                    <!-- <div class="widget-title opacity-5 box-title">Active Subscriptions</div> -->
                                    <div class="box-header">
                                        <p class="box-title">Today Orders Count</p>
                                        <p class="box-percentage positive" id="TodayOrderPer">+20%</p>
                                    </div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle" style="background-color: #ebd627;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                            height="20" fill="#fff" class="bi bi-clipboard-check"
                                                            viewBox="0 0 16 16">
                                                            <path fill-rule="evenodd"
                                                                d="M10.854 6.854a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z" />
                                                            <path
                                                                d="M10 1.5H6a.5.5 0 0 1-.5-.5V.75a.75.75 0 0 0-.75-.75h-3A1.75 1.75 0 0 0 0 1.75v11.5A1.75 1.75 0 0 0 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25V1.75A1.75 1.75 0 0 0 14.25 0h-3a.75.75 0 0 0-.75.75v.25a.5.5 0 0 1-.5.5zM5.5.75a.75.75 0 0 1 .75-.75H9.75a.75.75 0 0 1 .75.75v.25H5.5V.75zM1 1.75A.75.75 0 0 1 1.75 1h12.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V1.75z" />
                                                        </svg>
                                                    </div>
                                                    <h3 id="todaysale" class="box-number">0</h3>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('average_monthly_revenue', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count">
                        <div
                            class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-warning border-warning card">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content">
                                    <!-- <div class="widget-title opacity-5 box-title">Top Selling Subscription</div> -->
                                    <div class="box-header">
                                        <p class="box-title">Avg. Monthly Revenue</p>

                                    </div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle" style="background-color: #484e7a;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" fill="#fff" class="bi bi-bar-chart-line"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M0 0h1v14h1V1h1V0H0zM3 6h1v8H3V6zm3-3h1v11H6V3zm3 5h1v6H9V8zm3-2h1v8h-1V6z" />
                                                        </svg>
                                                    </div>
                                                    <h3 id="avgmonthlyrevenue" class="box-number">0</h3>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('average_monthly_sales', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['cardCol'] }} count">
                        <div
                            class="widget-chart widget-chart2 text-left mb-3 card-btm-border card-shadow-success border-success card">
                            <div class="widget-chat-wrapper-outer">
                                <div class="widget-chart-content">
                                    <!-- <div class="widget-title opacity-5 box-title">User Summary</div>     -->
                                    <div class="box-header">
                                        <p class="box-title">Avg.Monthly Sales</p>

                                    </div>
                                    <div class="widget-numbers mt-2 fsize-4 mb-0 w-100">
                                        <div class="widget-chart-flex align-items-center">
                                            <div>
                                                <div class="box-body">
                                                    <div class="icon-circle" style="background-color: #484e7a;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" fill="#fff" class="bi bi-bar-chart-line"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M0 0h1v14h1V1h1V0H0zM3 6h1v8H3V6zm3-3h1v11H6V3zm3 5h1v6H9V8zm3-2h1v8h-1V6z" />
                                                        </svg>
                                                    </div>
                                                    <h3 id="avgmonthlysales" class="box-number">0</h3>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="row">
                @if (in_array('orders_chart', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['allowedChartCount'] == 1 ? 12 : 8 }} user-chart" style="margin-top: 8px;">
                        <div class="mb-3 card">
                            <div class="card-header-tab card-header" style="background-color: rgb(255 255 255 / 3%);">
                                <div class="card-header-title font-size-lg text-capitalize font-weight-normal"
                                    id="order_items_chart_title">Orders
                                </div>
                            </div>
                            <div class="card-body" style="position: relative;">
                                <div id="order-items-chart-col" style="min-height: 418px;"></div>
                                <!-- <div id="order-items-chart-col" class="chart-container" style=""></div> -->
                            </div>
                        </div>
                    </div>
                @endif
                @if (in_array('products_selling', $data['dashboardPermissions']))
                    <div class="col-md-{{ $data['allowedChartCount'] == 1 ? 12 : 4 }}" style="height: 423px;margin-top: 8px;">
                        <div class="mb-3 card">

                            <div style="height: 441px;" class="">
                                <div id="chart"></div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            @if (in_array('recent_order', $data['dashboardPermissions']))
                <div class="card" style="display: block;">
                    <div class="row" id="ordetable">
                        <div class="col-12">
                            <div class="card-body" style="padding: 20px 0;">
                                <div class="table-responsive table-nowrap custom-table">
                                    <table id="orderdetailtable"
                                        class="table table-striped table-bordered table-responsive"
                                        style="width: 100%; display: none;">
                                        <thead>
                                            <th style="width: 10px;">Id</th>
                                            <th>User/Detail</th>
                                            <th>Saledate</th>
                                            <th>Status</th>
                                            <th>Netamount</th>

                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="reporttableDiv">
                        <div class="col-12">
                            <div class="card-body" style="padding: 20px 0;">
                                <div class="table-responsive table-card">
                                    <table id="reportTable" class="table table-striped table-bordered">
                                        <thead>
                                            <th style="width: 50px;">ID</th>
                                            <th>Saledate</th>
                                            <th>Netamount</th>
                                            <th>Cash</th>
                                            <th>Online</th>

                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>


    {{-- <div class="body" style="background-color: #f7f7f7;">



        <input type="hidden" id="filterType" value="all">

        <div class="row">

            <div class="col-md-2 mb-3" style="margin-top: 1.5rem !important; margin-left: 37px;">
                <div class="form-group">
                    <div class="input-group date" id="fromdate" data-target-input="nearest">
                        <input autocomplete="off" type="text" class="form-control datepicker-input border-all"
                            placeholder="Select Date" data-date-format="dd-mm-yyyy" data-date-container="#fromdate"
                            data-provide="datepicker" data-date-autoclose="true" name="from_date" id="from_date">
                        <div class="input-group-append" data-date-container="#fromdate" data-toggle="datepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-2 mb-3" style="margin-top: 1.5rem !important;">
                <div class="form-group">
                    <div class="input-group date" id="todate" data-target-input="nearest">
                        <input autocomplete="off" type="text" class="form-control datepicker-input border-all"
                            placeholder="Select Date" data-date-format="dd-mm-yyyy" data-date-container="#todate"
                            data-provide="datepicker" data-date-autoclose="true" name="to_date" id="to_date">
                        <div class="input-group-append" data-date-container="#todate" data-toggle="datepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-md-1 mb-3" style="margin-top: 1.5rem !important; width:auto;" id="togglereportDetail">
                <button type="button" class="Reload_Order btn bg-lightdarkgray white btn-block"
                    onclick="loadReportData()">Show</button>
            </div>

            <div class="col-md-2 mb-3" style="margin-top: 1.5rem !important;" data-select2-id="0">
                <select class="form-control select2-ajax col-3" id="dashboard_user_filter" name="dashboard_user_filter"
                    required=""></select>
            </div>

        </div>






        <div class="row info-boxs">

            <!-- <div class="col-md-2 mb-4" style="width: 19.66667%;">
                                            <div class="info-box tusers" id="toggleUserDetailCard" >
                                                <div class="d-flex align-items-center p-3">
                                                    <div class="icon" >
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
                                                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
                                                    </svg>
                                                    </div>
                                                <div>

                                                    <p class="mb-0" >No Of Users</p>
                                                    <h3 id="totaltype" class="font-weight-bold mb-0" style="color: #000; font-size: 24px;">0</h3>
                                                </div>
                                            </div>


                                        </div>

                                    </div> -->

            <!-- <div class="col-md-2 mb-4" style="width: 19.66667%;"> -->
            <!-- <div class="col-md-2 mb-4" style="width:16.3%;margin-left: -25px;">

                                            <div class="info-box torders" id="toggleOrderDetailCard">
                                                <div class="d-flex align-items-center p-3">
                                                    <div class="icon" style="background: #ad734e;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-basket2" viewBox="0 0 16 16">
                                                            <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0z"/>
                                                            <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6z"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <p class="mb-0" >No Of Orders</p>
                                                        <h3 id="totaluser" class="font-weight-bold mb-0" style="color: #000; font-size: 24px;">0</h3>
                                                    </div>
                                                </div>

                                            </div>
                                        </div> -->
            <!-- <div class="col-md-1 mb-4" style="width:15.3%;">
                                            <div class="info-box torders" id="toggleOrderDetailCard">
                                                <div class="d-flex flex-column align-items-center p-3">
                                                    <div>
                                                        <p class="mb-1">No Of Orders</p>
                                                    </div>
                                                        <div class="d-flex align-items-center justify-content-center" style="margin-right: 20px;">
                                                            <div class="icon" style="background: #d78b48;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#fff" class="bi bi-basket2" viewBox="0 0 16 16">
                                                                    <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0z"/>
                                                                    <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6z"/>
                                                                </svg>
                                                            </div>
                                                            <div class="amountdata">
                                                                <h3 id="totaluser" class="font-weight-bold mb-0" style="margin-top: 1px;">
                                                                    0
                                                                </h3>
                                                            </div>
                                                        </div>
                                                </div>
                                            </div>
                                        </div> -->
            <!-- <div class="info-box new-info-box" id="toggleOrderDetailCard">
                                                    <p class="info-title">Orders</p>
                                                    <div class="info-data">
                                                        <div class="info-icon" style="background-color: #d78b48;">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="bi bi-basket2" viewBox="0 0 16 16">
                                                                <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0z"/>
                                                                <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6z"/>
                                                            </svg>
                                                        </div>
                                                        <div class="info-text">
                                                            <h3 id="totaluser" class="info-number">0</h3>

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

            <div class="dashboard-box" id="toggleOrderDetailCard" style="">

                <div class="box-header">
                    <p class="box-title">Orders</p>
                    <!-- <p class="box-percentage positive">+20%</p> -->
                </div>


                <div class="box-body">
                    <div class="icon-circle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="#fff" class="bi bi-basket2"
                            viewBox="0 0 16 16">
                            <path
                                d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0z" />
                            <path
                                d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6z" />
                        </svg>
                    </div>
                    <h3 class="box-number" id="totalOrder">0</h3>
                </div>
            </div>

            <div class="dashboard-box" id="togglethismonthsale">
                <div class="box-header">
                    <p class="box-title">Current Month Sale</p>
                    <p class="box-percentage positive" id="CurrentMonthorderper">+20%</p>
                </div>
                <div class="box-body">
                    <div class="icon-circle" style="background: #78c382;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff"
                            class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                            <path
                                d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1zm1 12h2V2h-2zm-3 0V7H7v7zm-5 0v-3H2v3z" />
                        </svg>
                    </div>

                    <h3 id="thismonthsale" class="box-number">0</h3>

                </div>
            </div>

            <div class="dashboard-box" id="togglethismonthamount">
                <div class="box-header">
                    <p class="box-title">This Month Order Amt</p>
                    <p class="box-percentage positive" id="CurrentMonthSaleper">+20%</p>
                </div>

                <div class="box-body">
                    <div class="icon-circle" style="background-color: #cf4c44;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-activity"
                            viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2" />
                        </svg>
                    </div>

                    <h3 id="thismonthamount" class="box-number">0</h3>

                </div>
            </div>

            <div class="dashboard-box" id="toggletodaysale">
                <div class="box-header">
                    <p class="box-title">Today Orders Count</p>
                    <p class="box-percentage positive" id="TodayOrderPer">+20%</p>
                </div>

                <div class="box-body">
                    <div class="icon-circle" style="background-color: #ebd627;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff"
                            class="bi bi-clipboard-check" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M10.854 6.854a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z" />
                            <path
                                d="M10 1.5H6a.5.5 0 0 1-.5-.5V.75a.75.75 0 0 0-.75-.75h-3A1.75 1.75 0 0 0 0 1.75v11.5A1.75 1.75 0 0 0 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25V1.75A1.75 1.75 0 0 0 14.25 0h-3a.75.75 0 0 0-.75.75v.25a.5.5 0 0 1-.5.5zM5.5.75a.75.75 0 0 1 .75-.75H9.75a.75.75 0 0 1 .75.75v.25H5.5V.75zM1 1.75A.75.75 0 0 1 1.75 1h12.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V1.75z" />
                        </svg>
                    </div>
                    <h3 id="todaysale" class="box-number">0</h3>
                </div>
            </div>

            <div class="dashboard-box" style="margin-left: 15px;">
                <div class="box-header">
                    <p class="box-title">Avg. Monthly Revenue</p>
                    <!-- <p class="box-percentage positive">+20%</p> -->
                </div>

                <div class="box-body">
                    <div class="icon-circle" style="background-color: #484e7a;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff"
                            class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                            <path d="M0 0h1v14h1V1h1V0H0zM3 6h1v8H3V6zm3-3h1v11H6V3zm3 5h1v6H9V8zm3-2h1v8h-1V6z" />
                        </svg>
                    </div>
                    <h3 id="avgmonthlyrevenue" class="box-number">0</h3>
                </div>
            </div>


            <div class="dashboard-box">
                <div class="box-header">
                    <p class="box-title">Avg.Monthly Sales</p>
                    <!-- <p class="box-percentage positive">+20%</p> -->
                </div>

                <div class="box-body">
                    <div class="icon-circle" style="background-color: #484e7a;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff"
                            class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                            <path d="M0 0h1v14h1V1h1V0H0zM3 6h1v8H3V6zm3-3h1v11H6V3zm3 5h1v6H9V8zm3-2h1v8h-1V6z" />
                        </svg>
                    </div>
                    <h3 id="avgmonthlysales" class="box-number">0</h3>
                </div>
            </div>

        </div>

        <div class="row info-boxs" style="margin-top: 0px;">

        </div>



        <div class="row" style="margin-left: 9px;">

            <div class="col-md-3 col-lg-8 order-items-chart" style="margin-top: 10px;min-height: 418px;">
                <div class="d-flex justify-content-between align-items-center" style="margin-left: 1px;">

                    <div class="dropdown">
                        <button type="button" class="btn btn-link p-0" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <i class="bx bx-cog"></i>
                        </button>
                    </div>
                </div>

                <div class="chart-card" style="background: white;  padding: 20px;min-height: 400px;">
                    <h4 class="font-weight-bold mb-0" id="order_items_chart_title" style="margin-left: 16px;">Orders</h4>
                    <div id="order-items-chart-col" class="chart-container" style=""></div>
                </div>
            </div>

            <div class="col-lg-4" style="margin-top: 10px;min-height: 418px;" id="pie_chat">
                <div class="d-flex justify-content-between align-items-center">

                </div>

                <div style="min-height: 418px;">
                    <div id="chart"></div>
                </div>
            </div>
        </div>


        <!-- <div class="col-lg-4">
                                <div class="card package-card" style="margin-top: 10px;margin-right: 10px;">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                        <h4 class="font-weight-bold mb-0 center-text">Package Details</h4>

                                    </div>

                                    <div class="card-body">
                                        <div  class="" style="min-height: 418px;">
                                        <table id="packagedetail" style="width: 100%;min-height: 415px; ">
                                            <thead>
                                                <th>Package Titals</th>
                                                <th>Package Details</th>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Package Name</td>
                                                    <td id="packagename"></td>
                                                </tr>
                                                <tr>
                                                    <td>Package Price</td>
                                                    <td id="Packageprice"></td>
                                                </tr>
                                                <tr>
                                                    <td>Package term</td>
                                                    <td id="Packageterm"></td>
                                                </tr>
                                                <tr>
                                                    <td>Package Features</td>
                                                    <td id="PackageFeatures"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div> -->



        <div class="row" id="UserDetailDatatable">
            <div class="col-12">

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table id="userdetailtable" class="table table-striped table-bordered" style="width: 100%; ">
                            <thead>
                                <th>Id</th>
                                <th> Name</th>
                                <th>Email</th>
                                <th>phone Number</th>
                                <th>Status</th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="ordetable">
            <div class="col-12">

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table id="orderdetailtable" class="table table-striped table-bordered"
                            style="width: 100%; display: none;">
                            <thead>
                                <th>Id</th>
                                <th>User/Detail</th>
                                <th>Saledate</th>
                                <th>Status</th>
                                <th>Netamount</th>

                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="reporttable">
            <div class="col-12">

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table id="reportTable" class="table table-striped table-bordered">
                            <thead>
                                <th>ID</th>
                                <th>Saledate</th>
                                <th>Netamount</th>
                                <th>Cash</th>
                                <th>Online</th>

                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}


@endsection('dashboard-content')
@section('custom-scripts')
    {{-- @include('printer_master')
    @include('category_master')
    @include('counter_master')
    @include('item_master')
    @include('user_master')
    @include('counter_close')
    @include('bill_adjustment')
    @include('table_master') --}}
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>

    <script type="text/javascript">
        var UserdetailDataTable = '{{ Route('get.userdata') }}';
        var OrderdetailDataTable = '{{ Route('get.orderdata') }}';
        var totalordes = '{{ Route('totalorders.users') }}';
        var packagedetails = '{{ Route('package.details') }}';
        var FilterItems = '{{ route('filter.items') }}';
        var Reportdata = '{{ route('load.report.data') }}';

        var ajaxSearchUserFilter = '{{ route('dashboard.filter.select.user') }}';
        const profilePic = document.getElementById('profile-pic');
        const dropdownMenu = document.getElementById('dropdown-menu');
        let apexChartInstance = null;
        const csrfToken = "{{ csrf_token() }}";




        profilePic.addEventListener('click', () => {
            dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
        });


        window.addEventListener('click', (event) => {
            if (!event.target.closest('.profile-container')) {
                dropdownMenu.style.display = 'none';
            }
        });


        $(document).ready(function() {
            var date = new Date();
            var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

            $('#from_date').datepicker('setDate', firstDay);
            $('#to_date').datepicker('setDate', lastDay);
            var options = {
                beforeSubmit: showRequest,
                success: showResponse
            };
            $('#dashboard_user_filter').on('select2:open', function() {
                $(this).next('.select2').addClass('focused');
            });

            $('#dashboard_user_filter').select2({
                ajax: {
                    url: ajaxSearchUserFilter,
                    dataType: 'json',
                    delay: 0,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Search for user',
            }).on('change', function() {
                LoadCountData();
                chartBarOrderItems();
                LoadApexChart();
                ordertable.ajax.reload(null, false);
            });

        });

        function reloadTable() {
            table.ajax.reload(null, false);
        }


        function LoadCountData() {
            const selectedUserId = $('#dashboard_user_filter').val();

            $.ajax({
                url: totalordes,
                type: 'get',
                data: {
                    user_id: selectedUserId,
                },
                success: function(response) {

                    $('#totaltype').text(response.totalType);
                    $('#totalOrder').text(response.totalOrder);
                    $('#thismonthsale').text(response.monthlyOrdersCount);
                    $('#thismonthamount').text(response.monthlySaleAmount);
                    $('#todaysale').text(response.todaysOrdersCount);
                    $('#avgmonthlysales').text(response.avgMonthlySales.toFixed(2));
                    $('#avgmonthlyrevenue').text(response.avgMonthlyRevenue.toFixed(2));

                    $('#CurrentMonthSaleper').text((response.currentMonthSaleper >= 0 ? '+' : '') + response
                        .currentMonthSaleper + '%');
                    $('#CurrentMonthorderper').text((response.currentMonthOrdercountper >= 0 ? '+' : '') +
                        response.currentMonthOrdercountper + '%');
                    $('#TodayOrderPer').text((response.todayOrderPer >= 0 ? '+' : '') + response.todayOrderPer +
                        '%');



                    // If you want to show positive/negative percentage with colors:
                    if (response.currentMonthSaleper >= 0) {
                        $('#CurrentMonthSaleper').addClass('positive').removeClass('negative');
                    } else {
                        $('#CurrentMonthSaleper').addClass('negative').removeClass('positive');
                    }

                    if (response.currentMonthOrdercountper >= 0) {
                        $('#CurrentMonthorderper').addClass('positive').removeClass('negative');
                    } else {
                        $('#CurrentMonthorderper').addClass('negative').removeClass('positive');
                    }

                    if (response.todayOrderPer >= 0) {
                        $('#TodayOrderPer').addClass('positive').removeClass('negative');
                    } else {
                        $('#TodayOrderPer').addClass('negative').removeClass('positive');
                    }

                    // let actualAmount = response.monthlySaleAmount;
                    //updateProgressBar(actualAmount); 
                }
            });
        }

        $(document).ready(function() {

            // showLoader();

            LoadCountData();



            // $.ajax({
            //     url: packagedetails,
            //     type: 'get',
            //     success: function(response) {

            //         // console.log(response.package);
            //         const package = response.package;
            //         $('#packagename').text(package.title);
            //         $('#Packageprice').text(package.price);
            //         $('#Packageterm').text(package.term);
            //         $('#PackageFeatures').text(package.features);



            //     }


            // })

            var options = {
                beforeSubmit: showRequest,
                success: showResponse
            };


            $('#packagemaster').ajaxForm(options);
            $('#table-master').ajaxForm(options);
            $('#printerform').ajaxForm(options);
            $('#itemform').ajaxForm(options);
            $('#category-master').ajaxForm(options);
            $('#counter-master').ajaxForm(options);
            $('#user-master').ajaxForm(options);
            $('#company-master').ajaxForm(options);
            $('#counterclose-master').ajaxForm(options);

        });


        $(document).ready(function() {
            $('#fromdate').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy'
            });
            $('#todate').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy'
            });
            chartBarOrderItems();
            LoadApexChart();



            // $('#orderdetailtable').hide();
            // $('#orderdetailtable_wrapper .dataTables_filter').hide();
            // $('#orderdetailtable_wrapper .dataTables_paginate').hide();
            // $('#orderdetailtable_wrapper .dataTables_length').hide();
            // $('#orderdetailtable_wrapper .dataTables_info').hide();
            $('#orderdetailtable').show();
            $('#orderdetailtable_wrapper .dataTables_filter').show();
            $('#orderdetailtable_wrapper .dataTables_paginate').show();
            $('#orderdetailtable_wrapper .dataTables_length').show();
            $('#orderdetailtable_wrapper .dataTables_info').show();

            $('#UserDetailDatatable').hide();
            $('#userdetailtable_wrapper .dataTables_filter').hide();
            $('#userdetailtable_wrapper .dataTables_paginate').hide();
            $('#userdetailtable_wrapper .dataTables_length').hide();
            $('#userdetailtable_wrapper .dataTables_info').hide();

            $('#reporttableDiv').hide();
            $('#reportTable').hide();
            $('#reportTable_wrapper .dataTables_filter').hide();
            $('#reportTable_wrapper .dataTables_paginate').hide();
            $('#reportTable_wrapper .dataTables_length').hide();
            $('#reportTable_wrapper .dataTables_info').hide();


            $('#toggleOrderDetailCard').on('click', function() {
                $('#card1, #card2, #card3, #card4').removeClass('clicked-border');
                $('#card1').addClass('clicked-border');
                $('#orderdetailtable').show();
                $('#orderdetailtable_wrapper .dataTables_filter').show();
                $('#orderdetailtable_wrapper .dataTables_paginate').show();
                $('#orderdetailtable_wrapper .dataTables_length').show();
                $('#orderdetailtable_wrapper .dataTables_info').show();

                $('#UserDetailDatatable').hide();
                $('#userdetailtable_wrapper .dataTables_filter').hide();
                $('#userdetailtable_wrapper .dataTables_paginate').hide();
                $('#userdetailtable_wrapper .dataTables_length').hide();
                $('#userdetailtable_wrapper .dataTables_info').hide();

                $('#reporttableDiv').hide();
                $('#reportTable').hide();
                $('#reportTable_wrapper .dataTables_filter').hide();
                $('#reportTable_wrapper .dataTables_paginate').hide();
                $('#reportTable_wrapper .dataTables_length').hide();
                $('#reportTable_wrapper .dataTables_info').hide();
            });
            $('#togglethismonthamount').on('click', function() {
                $('#card1, #card2, #card3, #card4').removeClass('clicked-border');
                $('#card3').toggleClass('clicked-border');
                $('#orderdetailtable').show();
                $('#orderdetailtable_wrapper .dataTables_filter').show();
                $('#orderdetailtable_wrapper .dataTables_paginate').show();
                $('#orderdetailtable_wrapper .dataTables_length').show();
                $('#orderdetailtable_wrapper .dataTables_info').show();

                $('#UserDetailDatatable').hide();
                $('#userdetailtable_wrapper .dataTables_filter').hide();
                $('#userdetailtable_wrapper .dataTables_paginate').hide();
                $('#userdetailtable_wrapper .dataTables_length').hide();
                $('#userdetailtable_wrapper .dataTables_info').hide();

                $('#reporttableDiv').hide();
                $('#reportTable').hide();
                $('#reportTable_wrapper .dataTables_filter').hide();
                $('#reportTable_wrapper .dataTables_paginate').hide();
                $('#reportTable_wrapper .dataTables_length').hide();
                $('#reportTable_wrapper .dataTables_info').hide();
            });
            $('#togglethismonthsale').on('click', function() {
                $('#card1, #card2, #card3, #card4').removeClass('clicked-border');
                $('#card2').toggleClass('clicked-border');
                $('#orderdetailtable').show();
                $('#orderdetailtable_wrapper .dataTables_filter').show();
                $('#orderdetailtable_wrapper .dataTables_paginate').show();
                $('#orderdetailtable_wrapper .dataTables_length').show();
                $('#orderdetailtable_wrapper .dataTables_info').show();

                $('#UserDetailDatatable').hide();
                $('#userdetailtable_wrapper .dataTables_filter').hide();
                $('#userdetailtable_wrapper .dataTables_paginate').hide();
                $('#userdetailtable_wrapper .dataTables_length').hide();
                $('#userdetailtable_wrapper .dataTables_info').hide();

                $('#reporttableDiv').hide();
                $('#reportTable').hide();
                $('#reportTable_wrapper .dataTables_filter').hide();
                $('#reportTable_wrapper .dataTables_paginate').hide();
                $('#reportTable_wrapper .dataTables_length').hide();
                $('#reportTable_wrapper .dataTables_info').hide();
            });
            $('#toggletodaysale').on('click', function() {
                $('#card1, #card2, #card3, #card4').removeClass('clicked-border');
                $('#card4').toggleClass('clicked-border');
                $('#orderdetailtable').show();
                $('#orderdetailtable_wrapper .dataTables_filter').show();
                $('#orderdetailtable_wrapper .dataTables_paginate').show();
                $('#orderdetailtable_wrapper .dataTables_length').show();
                $('#orderdetailtable_wrapper .dataTables_info').show();

                $('#UserDetailDatatable').hide();
                $('#userdetailtable_wrapper .dataTables_filter').hide();
                $('#userdetailtable_wrapper .dataTables_paginate').hide();
                $('#userdetailtable_wrapper .dataTables_length').hide();
                $('#userdetailtable_wrapper .dataTables_info').hide();

                $('#reporttableDiv').hide();
                $('#reportTable').hide();
                $('#reportTable_wrapper .dataTables_filter').hide();
                $('#reportTable_wrapper .dataTables_paginate').hide();
                $('#reportTable_wrapper .dataTables_length').hide();
                $('#reportTable_wrapper .dataTables_info').hide();
            });
            $('#toggleUserDetailCard').on('click', function() {
                $('#UserDetailDatatable').show();
                $('#userdetailtable_wrapper .dataTables_filter').show();
                $('#userdetailtable_wrapper .dataTables_paginate').show();
                $('#userdetailtable_wrapper .dataTables_length').show();
                $('#userdetailtable_wrapper .dataTables_info').show();

                $('#orderdetailtable').hide();
                $('#orderdetailtable_wrapper .dataTables_filter').hide();
                $('#orderdetailtable_wrapper .dataTables_paginate').hide();
                $('#orderdetailtable_wrapper .dataTables_length').hide();
                $('#orderdetailtable_wrapper .dataTables_info').hide();

                $('#reporttableDiv').hide();
                $('#reportTable').hide();
                $('#reportTable_wrapper .dataTables_filter').hide();
                $('#reportTable_wrapper .dataTables_paginate').hide();
                $('#reportTable_wrapper .dataTables_length').hide();
                $('#reportTable_wrapper .dataTables_info').hide();
            });
            $('#togglereportDetail').on('click', function() {
                $('#reporttableDiv').show();
                $('#reportTable').show();
                $('#reportTable_wrapper .dataTables_filter').show();
                $('#reportTable_wrapper .dataTables_paginate').show();
                $('#reportTable_wrapper .dataTables_length').show();
                $('#reportTable_wrapper .dataTables_info').show();

                $('#orderdetailtable').hide();
                $('#orderdetailtable_wrapper .dataTables_filter').hide();
                $('#orderdetailtable_wrapper .dataTables_paginate').hide();
                $('#orderdetailtable_wrapper .dataTables_length').hide();
                $('#orderdetailtable_wrapper .dataTables_info').hide();

                $('#UserDetailDatatable').hide();
                $('#userdetailtable_wrapper .dataTables_filter').hide();
                $('#userdetailtable_wrapper .dataTables_paginate').hide();
                $('#userdetailtable_wrapper .dataTables_length').hide();
                $('#userdetailtable_wrapper .dataTables_info').hide();
            });
        });


        // function showResponse(responseText, statusText, xhr, $form) {


        //     if ($form[0]['id'] == "packagemaster") {
        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#offcanvaspackage").offcanvas('hide');
        //             reloadTable();

        //         } else {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "table-master") {

        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             reloadTables();
        //         } else {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "printerform") {

        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#offcanvasPrinter").offcanvas('hide');
        //             reloadprinterTable();
        //         } else {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "itemform") {
        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#additemoffcanvas").offcanvas('hide');
        //             reloaditemTable();
        //         } else {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "counter-master") {
        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#offcanvasCounter").offcanvas('hide');
        //             reloadCounter();

        //         } else if (responseText['status'] == 0) {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "category-master") {
        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#offcanvasCategory").offcanvas('hide');
        //             reloadcategoryTable();

        //         } else if (responseText['status'] == 0) {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "company-master") {
        //         if (responseText['status'] == 1) {
        //             flasher.success(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#companyoffcanvas").offcanvas('hide');
        //             reloadcompanytable();

        //         } else if (responseText['status'] == 0) {
        //             flasher.error(responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     } else if ($form[0]['id'] == "user-master") {
        //         if (responseText['status'] == 1) {
        //             flasher["success"](responseText['msg'], {
        //                 timeout: 1000
        //             });
        //             $("#offcanvasUser").offcanvas('hide');
        //             reloadUser();
        //             reloaduserDetailtable();
        //         } else {
        //             flasher["error"](responseText['msg'], {
        //                 timeout: 1000
        //             });
        //         }
        //     }
        // }


        // var ajaxGetOrderItemsChart = "{{ route('dashboard.chart.order-items') }}";

        // function chartBarOrderItems() {
        //     $.ajax({
        //         type: 'GET',
        //         url: ajaxGetOrderItemsChart,
        //         data: {
        //             "user_id": $('#dashboard_user_filter').val()
        //         },
        //         beforeSend: function() {
        //             $('#order-items-chart-col').html('<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>');
        //         },
        //         success: function(resultData) {
        //             if (resultData['status'] == 1) {
        //                 $("#order_items_chart_title").html(resultData['OrderItemsChart_Title']);
        //                 OrderItemsBarChart(resultData['OrderItemsCountArr'], resultData['OrderItemsMonthArr'], resultData['OrderItemsTitle']);
        //             } else {
        //                 $('#order-items-chart-col').html('<p>No data available.</p>');
        //             }
        //         },
        //         error: function(xhr, status, error) {
        //             console.error("Error fetching Order Items Chart data:", error);
        //             $('#order-items-chart-col').html('<p>Error loading data.</p>');
        //         }
        //     });
        // }

        // function OrderItemsBarChart(OrderItemsCountArr, OrderItemsMonthArr, OrderItemsTitle) {
        //     var options = {
        //         series: [{
        //             name: OrderItemsTitle,
        //             data: OrderItemsCountArr
        //         }],
        //         xaxis: {
        //             categories: OrderItemsMonthArr
        //         },
        //         chart: {
        //             type: 'bar',
        //             height: 350
        //         },
        //         plotOptions: {
        //             bar: {
        //                 horizontal: false,
        //                 columnWidth: '45%',
        //                 endingShape: 'rounded',
        //                 // borderRadius: 10, 
        //             },
        //         },
        //         dataLabels: {
        //             enabled: false
        //         },
        //         stroke: {
        //             show: true,
        //             width: 2,
        //             colors: ['transparent']
        //         },
        //         fill: {
        //             opacity: 1
        //         },
        //         tooltip: {
        //             y: {
        //                 formatter: function(val) {
        //                     return  + val.toLocaleString();
        //                 }
        //             }
        //         },

        //         // colors:['#3e3838'],
        //     };

        //     var barChartEl = document.getElementById('order-items-chart-col');
        //     if (barChartEl) {
        //         $('#order-items-chart-col').html(''); 
        //         var barChart = new ApexCharts(barChartEl, options);
        //         barChart.render();
        //     }

        // }



        var userDetailtable = $('#userdetailtable').DataTable({
            responsive: true,

            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": []
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": UserdetailDataTable,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                }
            },
            "aoColumns": [{
                    "mData": "id"
                },
                {
                    "mData": "first_name"
                },
                {
                    "mData": "email"
                },

                {
                    "mData": "phone_number"
                },
                {
                    "mData": "status"
                },


            ],
            language: {
                searchPlaceholder: "Search records..."
            }
        });


        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            var formId = jqForm.attr('id');

            if (formId === 'table-master') {

                // $("#savetable").html("Saving...");
                $("#savetable").prop('disabled', true);
                $("#tblreset").prop('disabled', true);
                $("#loader").show();
                $("#btnText").html("Saving...");
            }
            if (formId === 'counter-master') {
                // $("#savecounter").html("Saving...");
                $("#savecounter").prop('disabled', true);
                $("#counterReset").prop('disabled', false);
                $("#counter_loader").show();
                $("#counter_btnText").html("Saving...");
            }

            if (formId === 'category-master') {
                // $("#savecategorty").html("Saving...");
                $("#savecategorty").prop('disabled', true);
                $("#categoryreset").prop('disabled', false);
                $("#category_loader").show();
                $("#category_btnText").html("Saving...");
            }

            if (formId === 'itemform') {
                // $("#saveitem").html("Saving...");
                $("#saveitem").prop('disabled', true);
                $("#itemreset").prop('disabled', false);
                $("#item_loader").show();
                $("#item_btnText").html("Saving...");
            }

            if (formId === 'counterclose-master') {
                $("#savecounterclose").prop('disabled', true);
                $("#counter_close_loader").show();
                $("#counter_close_btnText").html("Closing...");
            }

            if (formId === 'user-master') {
                $("#saveuser").prop('disabled', true);
                $("#userreset").prop('disabled', true);
                $("#user_loader").show();
                $("#user_btnText").html("Saving...");

            }
            if (formId === 'company-master') {
                $("#savecompany").prop('disabled', true);
                $("#companyreset").prop('disabled', true);
                $("#company_loader").show();
                $("#company_btnText").html("Saving...");
            }
            if (formId === 'packagemaster') {
                // $('#package_loader').show();
                $("#package_btnText").html("Processing...");
                $("#submitBtn").prop('disabled', true);
                $("#packagereset").prop('disabled', true);
            }
            $("#saveprinter").html("Saving...");
            $("#saveprinter").prop('disabled', true);
            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            if ($form[0]['id'] == "packagemaster") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#offcanvaspackage").offcanvas('hide');
                    reloadTable();
                    $('#package_loader').hide();
                    $("#package_btnText").html("Submit");
                    $("#submitBtn").prop('disabled', false);
                    $("#packagereset").prop('disabled', false);
                } else {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $('#package_loader').hide();
                    $("#package_btnText").html("Submit");
                    $("#submitBtn").prop('disabled', false);
                    $("#packagereset").prop('disabled', false);
                }
            } else if ($form[0]['id'] == "table-master") {

                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#tableoffcanvas").offcanvas('hide');
                    reloadTables();
                    $("#loader").hide();
                    $("#btnText").html("Save");
                    // $("#savetable").html("Save");
                    // $("#savetable").prop('disabled', false); 
                    // $("#tblreset").prop('disabled', false);
                } else {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    // $("#savetable").html("Save");
                    $("#savetable").prop('disabled', false);
                    $("#tblreset").prop('disabled', false);
                    $("#loader").hide();
                    $("#btnText").html("Save");
                }
            } else if ($form[0]['id'] == "printerform") {

                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    // $("#saveprinter").html("Save");
                    // $("#saveprinter").prop('disabled', false); 
                    $("#offcanvasPrinter").offcanvas('hide');
                    reloadprinterTable();
                } else {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#saveprinter").html("Save");
                    $("#saveprinter").prop('disabled', false);
                }
            } else if ($form[0]['id'] == "itemform") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#additemoffcanvas").offcanvas('hide');
                    reloaditemTable();
                    $("#item_loader").hide();
                    $("#item_btnText").html("Save");
                    // $("#saveitem").prop('disabled', false); 
                    // $("#itemreset").prop('disabled', false); 

                } else {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#item_loader").hide();
                    $("#item_btnText").html("Save");
                    $("#saveitem").prop('disabled', false);
                    $("#itemreset").prop('disabled', false);
                }
            } else if ($form[0]['id'] == "counter-master") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#offcanvasCounter").offcanvas('hide');
                    reloadCounter();
                    $("#counter_loader").hide();
                    $("#counter_btnText").html("Save");

                    // $("#savecounter").html("Save");
                    // $("#savecounter").prop('disabled', false); 


                } else if (responseText['status'] == 0) {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#counter_loader").hide();
                    $("#counter_btnText").html("Save");
                    // $("#savecounter").html("Save");
                    $("#savecounter").prop('disabled', false);
                }
            } else if ($form[0]['id'] == "category-master") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#offcanvasCategory").offcanvas('hide');
                    reloadcategoryTable();
                    $("#category_loader").hide();
                    $("#category_btnText").html("Save");
                    // $("#savecategorty").prop('disabled', false);
                    // $("#categoryreset").prop('disabled', false);  

                } else if (responseText['status'] == 0) {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#category_loader").hide();
                    $("#category_btnText").html("Save");
                    $("#savecategorty").prop('disabled', false);
                    $("#categoryreset").prop('disabled', false);
                }
            } else if ($form[0]['id'] == "company-master") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#companyoffcanvas").offcanvas('hide');
                    reloadcompanytable();
                    $("#savecompany").prop('disabled', false);
                    $("#companyreset").prop('disabled', false);
                    $("#company_loader").hide();
                    $("#company_btnText").html("Save");

                } else if (responseText['status'] == 0) {
                    flasher.error(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#savecompany").prop('disabled', false);
                    $("#companyreset").prop('disabled', false);
                    $("#company_loader").hide();
                    $("#company_btnText").html("Save");
                }
            } else if ($form[0]['id'] == "user-master") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 1000
                    });
                    $("#offcanvasUser").offcanvas('hide');
                    reloadUser();
                    // $("#saveuser").prop('disabled', false);
                    // $("#userreset").prop('disabled', false);
                    $("#user_loader").hide();
                    $("#user_btnText").html("Save");
                    window.location.reload();
                } else {
                    if (responseText['msg'] === 'User creation limit reached for this company.') {
                        $("#offcanvasUser").offcanvas('hide');
                        $("#saveuser").prop('disabled', false);
                        $("#userreset").prop('disabled', false);
                        $("#user_loader").hide();
                        $("#user_btnText").html("Save");
                    }
                    flasher.error(responseText['msg'], {
                        timeout: 3000
                    });
                    $("#saveuser").prop('disabled', false);
                    $("#userreset").prop('disabled', false);
                    $("#user_loader").hide();
                    $("#user_btnText").html("Save");
                }
            } else if ($form[0]['id'] == "counterclose-master") {
                if (responseText['status'] == 1) {
                    flasher["success"](responseText['msg'], {
                        timeout: 1000
                    });
                    $("#countercloseoffcanvas").offcanvas('hide');
                    reloadcounterclose();
                    $("#counter_close_loader").hide();
                    $("#counter_close_btnText").html("Close");
                    $("#savecounterclose").prop('disabled', false);
                } else {
                    flasher["error"](responseText['msg'], {
                        timeout: 1000
                    });
                    $("#counter_close_loader").hide();
                    $("#counter_close_btnText").html("Close");
                    $("#savecounterclose").prop('disabled', false);
                }
            }
        }


        function reloaduserDetailtable() {
            userDetailtable.ajax.reload(null, false);
        }


        var ordertable = $('#orderdetailtable').DataTable({
            // responsive: true,
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": []
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            pagingType: "full_numbers",
            "ajax": {
                "url": OrderdetailDataTable,
                "type": "POST",
                "data": function(d) {
                    d._token = csrfToken;
                    d.filter = $('#filterType').val();
                    d.user_id = $('#dashboard_user_filter').val();
                }
            },
            "aoColumns": [{
                    "mData": "id"
                },
                {
                    "mData": "first_name"
                },
                {
                    "mData": "saledate"
                },
                {
                    "mData": "status"
                },
                {
                    "mData": "netamount"
                }
            ],
            language: {
                paginate: {
                    first: '<i class="bx bx-skip-previous"></i>',
                    previous: '<i class="bx bx-chevron-left"></i>',
                    next: '<i class="bx bx-chevron-right"></i>',
                    last: '<i class="bx bx-skip-next"></i>'
                }
            }
        });
        var a = document.querySelector("#orderdetailtable thead"),
            n = a.querySelector("tr").cloneNode(true);
        a.appendChild(n);

        let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
        searchRowTh.forEach(th => {
            th.classList.remove("sorting", "sorting_asc", "sorting_desc");
            th.removeAttribute("aria-sort");
        });

        searchRowTh.forEach((e, t) => {
            let skipColumns = [0, 3];

            if (skipColumns.includes(t)) {
                e.innerHTML = "";
                return;
            }
            var text = e.textContent;
            var input = document.createElement("input");
            input.type = "text";
            input.className = "form-control";
            input.placeholder = "Search " + text;

            e.innerHTML = "";
            e.appendChild(input);

            input.addEventListener("keyup", function() {
                if (ordertable.column(t).search() !== this.value) {
                    ordertable.column(t).search(this.value).draw();
                }
            });

            input.addEventListener("change", function() {
                if (ordertable.column(t).search() !== this.value) {
                    ordertable.column(t).search(this.value).draw();
                }
            });
        });



        $('#toggleOrderDetailCard').on('click', function() {
            $('#filterType').val('all');
            ordertable.ajax.reload();
        });

        $('#togglethismonthsale').on('click', function() {
            $('#filterType').val('current_month');
            ordertable.ajax.reload();
        });
        $('#togglethismonthamount').on('click', function() {
            $('#filterType').val('current_month');
            ordertable.ajax.reload();
        });
        $('#toggletodaysale').on('click', function() {
            $('#filterType').val('today');
            ordertable.ajax.reload();
        });


        function LoadApexChart() {
            if ($('#chart').length) {
                $.ajax({
                    url: "{{ route('top.selling.items') }}",
                    method: 'GET',
                    data: {
                        "user_id": $('#dashboard_user_filter').val()
                    },
                    success: function(response) {


                        if (apexChartInstance) {
                            apexChartInstance.destroy();
                        }
                        let itemLabels = [];
                        let itemSales = [];


                        let totalSales = response.series.reduce(function(acc, curr) {
                            return acc + curr;
                        }, 0);

                        response.labels.forEach(function(label, index) {
                            itemLabels.push(label);
                            let normalizedValue = (response.series[index] / totalSales) * 100;
                            itemSales.push(normalizedValue);
                        });


                        if (itemSales.length === 0) {
                            $('#chart').html('<p>No data available</p>');
                            return;
                        }

                        var options = {
                            series: itemSales,
                            chart: {
                                type: 'donut',
                                height: 418,
                                // radius: 12,
                            },
                            labels: itemLabels,
                            colors: ['#78c382', '#ebd627', '#cf4c44', '#17a2b8', '#6610f2',
                                '#6c757d', '#fd7e14', '#20c997', '#343a40', '#007bff'
                            ],
                            plotOptions: {
                                pie: {
                                    donut: {
                                        size: '70%',
                                        labels: {
                                            show: true,
                                            name: {
                                                show: false
                                            },
                                            value: {
                                                show: true,
                                                fontSize: '24px',
                                                fontWeight: 'bold',
                                                formatter: function() {
                                                    // return '₹' + response.total_netamount.toLocaleString();
                                                }
                                            },
                                            total: {
                                                show: true,
                                                label: '',
                                                formatter: function() {
                                                    // return '₹' + response.total_netamount.toLocaleString();
                                                }
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                y: {
                                    formatter: function(val, opts) {
                                        let index = opts.seriesIndex;
                                        return response.series[index];
                                    }
                                }
                            },
                            responsive: [{
                                breakpoint: 480,
                                options: {
                                    chart: {
                                        width: 300
                                    },
                                    legend: {
                                        position: 'bottom'
                                    }
                                }
                            }],
                            legend: {
                                position: 'bottom',
                                horizontalAlign: 'center',
                                markers: {
                                    width: 12,
                                    height: 12,
                                    radius: 12
                                },
                                labels: {
                                    colors: ['#000']
                                }
                            }
                        };


                        apexChartInstance = new ApexCharts(document.querySelector("#chart"), options);
                        apexChartInstance.render();
                    },
                    error: function() {
                        console.error('Error fetching top-selling items');
                        $('#chart').html('<p>Error fetching data.</p>');
                    }
                });
            }
        }




        var ajaxGetOrderItemsChart = "{{ route('dashboard.chart.order-items') }}";

        function chartBarOrderItems() {
            $.ajax({
                type: 'GET',
                url: ajaxGetOrderItemsChart,
                data: {
                    "user_id": $('#dashboard_user_filter').val()
                },
                beforeSend: function() {
                    $('#order-items-chart-col').html(
                        '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
                    );
                },
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        $("#order_items_chart_title").html(resultData['OrderItemsChart_Title']);
                        OrderItemsAreaChart(
                            resultData['OrderItemsCountArr'],
                            resultData['OrderItemsMonthArr'],
                            resultData['OrderItemsTitle']
                        );
                    } else {
                        $('#order-items-chart-col').html('<p>No data available.</p>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching Order Items Chart data:", error);
                    $('#order-items-chart-col').html('<p>Error loading data.</p>');
                }
            });
        }

        function OrderItemsAreaChart(OrderItemsCountArr, OrderItemsMonthArr, OrderItemsTitle) {
            var options = {
                series: [{
                    name: OrderItemsTitle,
                    data: OrderItemsCountArr
                }],
                chart: {
                    type: 'area',
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#FF5722'],
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'light',
                        type: "vertical",
                        gradientToColors: ['#FFE0B2'],
                        opacityFrom: 0.9,
                        opacityTo: 0.1,
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: OrderItemsMonthArr,
                    labels: {
                        style: {
                            colors: '#666',
                            fontSize: '12px',
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#666',
                            fontSize: '12px',
                        }
                    },
                    min: 0,
                    max: Math.max(...OrderItemsCountArr) + 50
                },
                tooltip: {
                    theme: 'dark',
                    marker: {
                        show: true
                    },
                    y: {
                        formatter: function(val) {
                            return val + " Amt";
                        }
                    }
                },
                grid: {
                    borderColor: '#eee',
                    strokeDashArray: 5
                }
            };

            var chartEl = document.getElementById('order-items-chart-col');
            if (chartEl) {
                $('#order-items-chart-col').html('');
                var chart = new ApexCharts(chartEl, options);
                chart.render();
            }
        }

        function loadReportData() {

            const fromDate = document.getElementById('from_date').value;
            const toDate = document.getElementById('to_date').value;


            if ($.fn.dataTable.isDataTable('#reportTable')) {
                $('#reportTable').DataTable().clear().destroy();
            }


            $('#reportTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: Reportdata,
                    type: 'GET',
                    data: {
                        from_date: fromDate,
                        to_date: toDate
                    },
                    dataSrc: function(json) {

                        return json.data;
                    }
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'saledate'
                    },
                    {
                        data: 'netamount'
                    },
                    {
                        data: 'cash'
                    },
                    {
                        data: 'online'
                    },

                ]
            });
        }




        // $(document).ready(function() {
        //             // Make AJAX request to get top-selling items data
        //             $.ajax({
        //                 url: "{{ route('top.selling.items') }}", // The route for your controller
        //                 method: 'GET',
        //                 success: function(response) {
        //                     // Initialize arrays for the chart data
        //                     let itemLabels = [];
        //                     let itemSales = [];

        //                     // Loop through the response and prepare chart data
        //                     response.forEach(function(item) {
        //                         itemLabels.push(item.item_name); // Use actual item name
        //                         itemSales.push(item.total_sales);
        //                     });

        //                     // If there are no items, skip chart rendering
        //                     if (itemSales.length === 0) {
        //                         $('#chart').html('<p>No data available</p>');
        //                         return;
        //                     }

        //                     // Set the chart options dynamically
        //                     var options = {
        //                         series: itemSales,
        //                         chart: {
        //                             type: 'donut',
        //                             height: 418
        //                         },
        //                         labels: itemLabels,
        //                         responsive: [{
        //                             breakpoint: 480,
        //                             options: {
        //                                 chart: {
        //                                     width: 200
        //                                 },
        //                                 legend: {
        //                                     position: 'bottom'
        //                                 }
        //                             }
        //                         }]
        //                     };

        //                     // Render the chart
        //                     var chart = new ApexCharts(document.querySelector("#chart"), options);
        //                     chart.render();
        //                 },
        //                 error: function() {
        //                     console.error('Error fetching top-selling items');
        //                     $('#chart').html('<p>Error fetching data.</p>');
        //                 }
        //             });
        //         });





        // $(document).ready(function() {
        //     $.ajax({
        //         url: "{{ route('top.selling.items') }}",
        //         method: 'GET',
        //         success: function(response) {
        //             let itemLabels = [];
        //             let itemSales = [];


        //             let totalSales = response.series.reduce(function(acc, curr) {
        //                 return acc + curr;
        //             }, 0);


        //             response.labels.forEach(function(label, index) {
        //                 itemLabels.push(label);
        //                 let normalizedValue = (response.series[index] / totalSales) * 100;
        //                 itemSales.push(normalizedValue);
        //             });


        //             if (itemSales.length === 0) {
        //                 $('#chart').html('<p>No data available</p>');
        //                 return;
        //             }


        //             var options = {
        //                 series: itemSales,
        //                 chart: {
        //                     type: 'donut',
        //                     height: 418
        //                 },
        //                 labels: itemLabels,
        //                 responsive: [{
        //                     breakpoint: 480,
        //                     options: {
        //                         chart: {
        //                             width: 200
        //                         },
        //                         legend: {
        //                             position: 'bottom'
        //                         }
        //                     }
        //                 }],
        //                 plotOptions: {
        //                     pie: {
        //                         donut: {
        //                             size: '70%'
        //                         }
        //                     }
        //                 },
        //                 tooltip: {
        //                     y: {
        //                         formatter: function(val, opts) {
        //                             let index = opts.seriesIndex; // Get the index of the current slice
        //                             return response.series[index]; // Display the actual sales amount instead of percentage
        //                         }
        //                     }
        //                 }
        //             };

        //             var chart = new ApexCharts(document.querySelector("#chart"), options);
        //             chart.render();
        //         },
        //         error: function() {
        //             console.error('Error fetching top-selling items');
        //             $('#chart').html('<p>Error fetching data.</p>');
        //         }
        //     });
        // });

        // var options = {
        //     series: [44, 33, 23], // Adjust the series based on proportions
        //     chart: {
        //         type: 'donut',
        //         height: 418
        //     },
        //     labels: ['Food', 'Drink', 'Others'], // Updated labels
        //     colors: ['#28a745', '#dc3545', '#ffc107'], // Green, Red, Yellow
        //     plotOptions: {
        //         pie: {
        //             donut: {
        //                 size: '70%',
        //                 labels: {
        //                     show: true,
        //                     name: {
        //                         show: false // Hide the name in the center
        //                     },
        //                     value: {
        //                         show: true,
        //                         fontSize: '24px',
        //                         fontWeight: 'bold',
        //                         formatter: function () {
        //                             return '$200K'; // Static center text
        //                         }
        //                     },
        //                     total: {
        //                         show: true,
        //                         label: '', // Leave empty for cleaner center text
        //                         formatter: function () {
        //                             return '$200K';
        //                         }
        //                     }
        //                 }
        //             }
        //         }
        //     },
        //     responsive: [
        //         {
        //             breakpoint: 480,
        //             options: {
        //                 chart: {
        //                     width: 200
        //                 },
        //                 legend: {
        //                     position: 'bottom'
        //                 }
        //             }
        //         }
        //     ],
        //     legend: {
        //         position: 'bottom',
        //         horizontalAlign: 'center',
        //         markers: {
        //             width: 12,
        //             height: 12,
        //             radius: 12 // Circular markers
        //         },
        //         labels: {
        //             colors: ['#000'] // Set legend text color
        //         }
        //     }
        // };

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



        //     var ajaxGetOrderItemsChart = "{{ route('dashboard.chart.order-items') }}";

        // function chartBarOrderItems() {
        //     $.ajax({
        //         type: 'GET',
        //         url: ajaxGetOrderItemsChart,
        //         data: {
        //             "user_id": $('#dashboard_user_filter').val()
        //         },
        //         beforeSend: function() {
        //             $('#order-items-chart-col').html('<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>');
        //         },
        //         success: function(resultData) {
        //             if (resultData['status'] == 1) {
        //                 $("#order_items_chart_title").html(resultData['OrderItemsChart_Title']);
        //                 OrderItemsLineChart(
        //                     resultData['OrderItemsCountArr'],
        //                     resultData['OrderItemsMonthArr'],
        //                     resultData['OrderItemsTitle']
        //                 );
        //             } else {
        //                 $('#order-items-chart-col').html('<p>No data available.</p>');
        //             }
        //         },
        //         error: function(xhr, status, error) {
        //             console.error("Error fetching Order Items Chart data:", error);
        //             $('#order-items-chart-col').html('<p>Error loading data.</p>');
        //         }
        //     });
        // }

        // function OrderItemsLineChart(OrderItemsCountArr, OrderItemsMonthArr, OrderItemsTitle) {
        //     var options = {
        //         series: [{
        //             name: OrderItemsTitle,
        //             data: OrderItemsCountArr
        //         }],
        //         chart: {
        //             type: 'line', // Line chart type
        //             height: 350,
        //             zoom: {
        //                 enabled: false // Disable zoom
        //             }
        //         },
        //         dataLabels: {
        //             enabled: false // Disable data labels
        //         },
        //         stroke: {
        //             curve: 'straight' // Straight line
        //         },
        //         title: {
        //             text: OrderItemsTitle,
        //             align: 'left' // Align title to the left
        //         },
        //         grid: {
        //             row: {
        //                 colors: ['#f3f3f3', 'transparent'], // Alternate background colors
        //                 opacity: 0.5
        //             }
        //         },
        //         xaxis: {
        //             categories: OrderItemsMonthArr // X-axis categories
        //         },
        //         tooltip: {
        //             y: {
        //                 formatter: function(val) {
        //                     return val.toLocaleString(); // Format numbers with commas
        //                 }
        //             }
        //         }
        //     };

        //     var lineChartEl = document.getElementById('order-items-chart-col');
        //     if (lineChartEl) {
        //         $('#order-items-chart-col').html(''); // Clear previous chart
        //         var lineChart = new ApexCharts(lineChartEl, options);
        //         lineChart.render(); // Render new chart
        //     }
        // }
    </script>
@endsection