@extends('layouts.order-master')
@section('title')
    Dashboard
@endsection
@section('css')
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />

    <style>
        #list-syncs li {
            list-style: none;
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
        }

        .ordr-dshbrd-btm {
            margin-bottom: 20px
        }

        div.dataTables_wrapper div.dataTables_filter input {
            margin-left: 0;
            display: flex;
            width: 100%;
        }

        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 9px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            text-wrap: auto ! important;
        }

        .select2-selection.select2-selection--multiple {
            display: flex !important;
        }

        .card-body .col-md-4 {
            padding: 0 5px !important;
        }


        .dt-buttons button {
            border-radius: 5px !important;
        }

        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }

        @media screen and (max-width: 767px) {
            div.dataTables_wrapper div.dataTables_filter {
                text-align: start !important;
            }
        }

        @media screen and (max-width: 575px) {
            .card-body h4 {
                font-size: 15px;
            }
        }

        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }
    </style>
@endsection
@section('content')
    @can('view dashboard')
        <div class="row">
            <div class="col">
                <div class="h-100">
                    <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                <div class="flex-grow-1">
                                    <h4 class="fs-16 mb-1"> {{ Auth::user()->name }}!</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your business
                                        today.</p>
                                </div>
                                <div class="col-md-2 col-sm-6 mb-2 float-end">
                                    <a class="btn btn-soft-primary mt-4 me-3 float-end"
                                        href="/admin/detailed-order-dashboard">Detailed Report</a>
                                </div>
                                @if (Auth::user()->staff == null || Auth::user()->staff->all_ledgers == 1)
                                    <div class="col-md-2 col-sm-6 mb-2">
                                        <label for="start date">Branch</label>
                                        <select name="branch" class="form-control" id="branch">
                                            <option value="">All Branches</option>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}"
                                                    @if (app('request')->input('branch_id') == $branch->id) selected @endif>{{ $branch->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                                @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                                    <div class="col-md-2  col-sm-6 mb-2" style="margin-left: 5px;">
                                        <label for="order_type">Order Type (Primary/Secondary)</label>
                                        <select name="order_type" id="order_type" class="form-control w-100">
                                            <option value="">Select Order Type</option>
                                            <option value="primary" @if (app('request')->input('order_type') == 'primary') selected @endif>Primary
                                            </option>
                                            <option value="secondary" @if (app('request')->input('order_type') == 'secondary') selected @endif>
                                                Secondary</option>
                                        </select>
                                    </div>
                                @endif
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                    <div class="row">
                        <!-- dashboard init -->
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a
                                href="{{ Auth::user()->company_profile->mybuss_fas == 1 ? route('order.index') : route('mop-order.index') }}">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Orders / Amount</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                <h5 class="text-success fs-14 mb-0">
                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i>
                                    +16.24 %
                                </h5>
                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="">{{ $today_order_count }}</span> /
                                                    <span class="counter-value" data-target="">{{ $today_order_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/collection">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Today's Collections / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="">{{ $today_collection_count }}</span> /
                                                    <span class="counter-value"
                                                        data-target="">{{ $today_collection_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a
                                href="{{ Auth::user()->company_profile->mybuss_fas == 1 ? route('billed-order.index') : route('mop-billed-order') }}">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Today's Sales / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="">{{ $today_sales_count }}</span>
                                                    /
                                                    <span class="counter-value" data-target="">{{ $today_sales_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a
                                href="{{ Auth::user()->company_profile->mybuss_fas == 1 ? route('billed-order.index') : route('mop-billed-order') }}">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    This Month Sales / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="">{{ $this_month_sales_count }}</span> /
                                                    <span class="counter-value"
                                                        data-target="">{{ $this_month_sales_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->
                    </div> <!-- end row-->
                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                Today Packed & Ready to Ship</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="">{{ $today_packed_orders_count }}</span>
                                                /
                                                <span class="counter-value"
                                                    data-target="">{{ $total_order_in_packing_today }}</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-primary rounded fs-3">
                                                <i class="las la-shopping-cart text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                Delivered Today</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="">{{ $today_delivered_orders_count }}</span> /
                                                <span class="counter-value"
                                                    data-target="">{{ $total_order_in_delivery_today }}</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-primary rounded fs-3">
                                                <i class="las la-shopping-cart text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/collection">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    This Month Collections</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="">{{ $this_month_collection_count }}</span> /
                                                    <span class="counter-value"
                                                        data-target="">{{ $this_month_collection_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                Cancelled Today</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="">{{ $cancelled_orders_today_count }}</span> /
                                                <span class="counter-value"
                                                    data-target="">{{ $cancelled_orders_today_amount }}</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-primary rounded fs-3">
                                                <i class="las la-shopping-cart text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end col -->
                        </div>
                    </div> <!-- end .h-100-->
                    <div class="row ordr-dshbrd-btm">
                        {{-- Todays Summary --}}
                        <div class="col-lg-6 col-md-12">
                            <div class="card h-100 ">
                                <div class="card-body">
                                    <div style="display: flex; justify-content: space-between; margin: 15px 0px;">
                                        <h4>Todays Summary</h4>
                                        <span class="text-right text-uppercase font-weight-bold"
                                            style="float: right;padding: 10px;background: #3a497b; color: #fff;">
                                            <span>{{ $pending_order_count }}</span> Pending Orders</span>
                                    </div>
                                    <div class="col-md-12">
                                        <table
                                            class="table table-bordered w-100  dt-responsive nowrap table-striped align-middle dataTable"
                                            id="todaysSummaryTable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Sale Executive</th>
                                                    <th scope="col">Order</th>
                                                    <th scope="col">Sale</th>
                                                    <th scope="col">Collection</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                                <th>Total: </th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- monthly summary --}}
                        <div class="col-lg-6 col-md-12">
                            <div class="card h-100 ">
                                <div class="card-body">
                                    <div style="display: flex; justify-content: space-between; margin: 15px 0px;">
                                        <h4>Monthly Summary</h4>
                                    </div>
                                    <div class="col-md-12">
                                        <table
                                            class="table table-bordered w-100  dt-responsive nowrap table-striped align-middle dataTable"
                                            id="monthlyOrderReport">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Sale Executive</th>
                                                    <th scope="col">Order</th>
                                                    <th scope="col">Sale</th>
                                                    <th scope="col">Collection</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                                <th>Total: </th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> <!-- end col -->
            </div>
            <div class="">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header border-0 align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Order - Collection - Billed Order Week Graph</h4>
                            <div>
                                <button type="button" class="btn btn-soft-secondary btn-sm filter active" data-id="week">
                                    This Week
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0 pb-2">
                            <div class="w-100">
                                <div id="customer_impression_charts" data-colors='["--vz-light", "--vz-primary", "--vz-info"]'
                                    class="apex-charts" dir="ltr"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-12 mb-5">
                <div class="card h-100 ">
                    <div class="card-body">
                        <div style="display: flex; justify-content: space-between; margin: 15px 0px;">
                            <h4>Stock Group Report</h4>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="start date">Start Date</label>
                                <input class="form-control" type="date" name="from_date" id="from_date"
                                    value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-md-4">
                                <label for="start date">To Date</label>
                                <input class="form-control" type="date" name="to_date" id="to_date"
                                    value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-md-2 " style="margin-top: 30px">
                                <button type="button" name="filter" id="filter" class="btn btn-sm btn-primary"><i
                                        class="ri-search-line fs-6"></i></button>
                            </div>
                        </div>
                        <table class="table table-bordered w-100  dt-responsive nowrap table-striped align-middle dataTable"
                            id="StockGroupReport">
                            <thead>
                                <tr>
                                    <th scope="col">Stock Group</th>
                                    <th scope="col">Total Base Quantity</th>
                                    <th scope="col">Total Amount</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <th>Total: </th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        </div>
    @endcan
@endsection

@section('script')
    {{-- <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script> --}}
    <script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jsvectormap/jsvectormap.min.js') }}"></script>
    <script src="{{ URL::asset('assets/libs/swiper/swiper.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/dashboard-ecommerce.init.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#branch,#order_type').select2({});
            $('#todaysSummaryTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                pageLength: 5,
                "scrollX": true,
                autoWidth: true,
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                }, ],
                lengthMenu: [
                    [5, 25, 50],
                    [5, 25, 50]
                ],
                ajax: {
                    url: "{{ route('order-todays-summary') }}",
                    type: 'GET',
                    data: function(d) {
                        d.branch_id = $("#branch").val();
                        @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                            d.order_type = $("#order_type").val();
                        @endif
                        d._token = '{{ csrf_token() }}';
                    },
                },
                columns: [{
                        data: 'sales_exe',
                        name: 'sales_exe'
                    },
                    {
                        data: 'order',
                        name: 'order'
                    },
                    {
                        data: 'sale',
                        name: 'sale'
                    },
                    {
                        data: 'collection',
                        name: 'collection'
                    },
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    var orderCountTotal = 0;
                    var orderAmountTotal = 0;
                    var salesCountTotal = 0;
                    var salesAmountTotal = 0;
                    var collectionCountTotal = 0;
                    var collectionAmountTotal = 0;

                    api.column(1).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) orderCountTotal += count;
                        if (!isNaN(amount)) orderAmountTotal += amount;
                    });
                    api.column(2).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) salesCountTotal += count;
                        if (!isNaN(amount)) salesAmountTotal += amount;
                    });
                    api.column(3).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) collectionCountTotal += count;
                        if (!isNaN(amount)) collectionAmountTotal += amount;
                    });




                    $(api.column(1).footer()).html(orderCountTotal + ' / ' + orderAmountTotal
                        .toFixed());
                    $(api.column(2).footer()).html(salesCountTotal + ' / ' + salesAmountTotal
                        .toFixed());
                    $(api.column(3).footer()).html(collectionCountTotal + ' / ' + collectionAmountTotal
                        .toFixed());
                },
            });
            $('#monthlyOrderReport').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                pageLength: 5,
                "scrollX": true,
                autoWidth: true,
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                }, ],
                lengthMenu: [
                    [5, 25, 50],
                    [5, 25, 50]
                ],
                ajax: {
                    url: "{{ route('order-monthly-summary') }}",
                    type: 'GET',
                    data: function(d) {
                        d.branch_id = $("#branch").val();
                        @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                            d.order_type = $("#order_type").val();
                        @endif
                        d._token = '{{ csrf_token() }}';
                    },
                },

                columns: [{
                        data: 'sales_exe',
                        name: 'sales_exe'
                    },
                    {
                        data: 'order',
                        name: 'order'
                    },
                    {
                        data: 'sale',
                        name: 'sale'
                    },
                    {
                        data: 'collection',
                        name: 'collection'
                    },
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    var orderCountTotal = 0;
                    var orderAmountTotal = 0;
                    var salesCountTotal = 0;
                    var salesAmountTotal = 0;
                    var collectionCountTotal = 0;
                    var collectionAmountTotal = 0;

                    api.column(1).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) orderCountTotal += count;
                        if (!isNaN(amount)) orderAmountTotal += amount;
                    });
                    api.column(2).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) salesCountTotal += count;
                        if (!isNaN(amount)) salesAmountTotal += amount;
                    });
                    api.column(3).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) collectionCountTotal += count;
                        if (!isNaN(amount)) collectionAmountTotal += amount;
                    });

                    $(api.column(1).footer()).html(orderCountTotal + ' / ' + orderAmountTotal
                        .toFixed());
                    $(api.column(2).footer()).html(salesCountTotal + ' / ' + salesAmountTotal
                        .toFixed());
                    $(api.column(3).footer()).html(collectionCountTotal + ' / ' +
                        collectionAmountTotal
                        .toFixed());
                },
            });

            $('#StockGroupReport').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                pageLength: 10,
                "scrollX": true,
                autoWidth: true,
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                }, ],
                lengthMenu: [
                    [10, 25, 50],
                    [10, 25, 50]
                ],
                ajax: {
                    url: "{{ route('order-stock-group-report') }}",
                    type: 'GET',
                    data: function(d) {
                        d.from_date = $("#from_date").val();
                        d.to_date = $("#to_date").val();
                        d.branch_id = $("#branch").val();
                        @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                            d.order_type = $("#order_type").val();
                        @endif
                        d._token = '{{ csrf_token() }}';
                    }
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'quantity',
                        name: 'quantity'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'percentage',
                        name: 'percentage'
                    },
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    var totalQuantity = 0;
                    var totalAmount = 0;

                    api.column(1).data().each(function(value) {
                        if (!isNaN(value)) totalQuantity += value;
                    });
                    api.column(2).data().each(function(value) {
                        if (!isNaN(value)) totalAmount += intVal(value);
                    });
                    totalAmount = totalAmount.toFixed(2);

                    $(api.column(1).footer()).html(totalQuantity);
                    $(api.column(2).footer()).html(totalAmount);
                },
            });
            loadChart('week');

        })

        function loadChart(val) {
            var category = [];
            if (val === 'week') {
                category = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            } else {
                category = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                // category = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
            }
            $.ajax({
                type: "get",
                url: "{{ route('order-dashboard-chart') }}",
                data: {
                    filter: val,
                    branch_id: $('#branch').val(),
                    @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                        order_type: $("#order_type").val(),
                    @endif
                    _token: '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(response) {
                    orders = response.monthlyOrders
                    billedOrders = response.monthlyBilledOrders
                    collection = response.monthlyCollections
                    collectionValues = Object.values(collection);
                    const orderValues = Object.values(orders);
                    const billedorderValues = Object.values(billedOrders);
                    var linechartcustomerColors = getChartColorsArray("customer_impression_charts");
                    if (chart) {
                        chart.destroy();
                    }
                    if (linechartcustomerColors) {
                        var options = {
                            series: [{
                                    name: "Orders",
                                    type: "bar",
                                    data: orderValues,
                                },
                                {
                                    name: "Collection",
                                    type: "bar",
                                    data: collectionValues,
                                },
                                {
                                    name: "Billed Orders",
                                    type: "bar",
                                    data: billedorderValues,
                                },
                            ],
                            chart: {
                                height: 370,
                                type: "line",
                                toolbar: {
                                    show: false,
                                },
                            },
                            stroke: {
                                curve: "straight",
                                dashArray: [0, 0, 8],
                                width: [2, 0, 2.2],
                            },
                            fill: {
                                opacity: [1, 1, 1],
                            },
                            markers: {
                                size: [0, 0, 0],
                                strokeWidth: 2,
                                hover: {
                                    size: 4,
                                },
                            },
                            xaxis: {
                                categories: category,
                                axisTicks: {
                                    show: false,
                                },
                                axisBorder: {
                                    show: false,
                                },
                            },
                            grid: {
                                show: true,
                                xaxis: {
                                    lines: {
                                        show: true,
                                    },
                                },
                                yaxis: {
                                    lines: {
                                        show: false,
                                    },
                                },
                                padding: {
                                    top: 0,
                                    right: -2,
                                    bottom: 15,
                                    left: 10,
                                },
                            },
                            legend: {
                                show: true,
                                horizontalAlign: "center",
                                offsetX: 0,
                                offsetY: -5,
                                markers: {
                                    width: 9,
                                    height: 9,
                                    radius: 6,
                                },
                                itemMargin: {
                                    horizontal: 10,
                                    vertical: 0,
                                },
                            },
                            plotOptions: {
                                bar: {
                                    columnWidth: "30%",
                                    barHeight: "70%",
                                },
                            },
                            colors: ['#176ce3', '#0acf97', '#e3d917'],
                            tooltip: {
                                shared: true,
                                y: [{
                                        formatter: function(y) {
                                            if (typeof y !== "undefined") {
                                                return y.toFixed(0);
                                            }
                                            return y;
                                        },
                                    },
                                    {
                                        formatter: function(y) {
                                            if (typeof y !== "undefined") {
                                                return "" + y.toFixed(2) + "";
                                            }
                                            return y;
                                        },
                                    },
                                    {
                                        formatter: function(y) {
                                            if (typeof y !== "undefined") {
                                                return y.toFixed(0) + " Sales";
                                            }
                                            return y;
                                        },
                                    },
                                ],
                            },
                        };
                        chart = new ApexCharts(
                            document.querySelector("#customer_impression_charts"),
                            options
                        );
                        chart.render();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", status, error);
                    // Optionally, display an error message to the user
                    alert('An error occurred while fetching data. Please try again.');
                }
            });
        }
        $('#filter').on('click', function() {
            $('#StockGroupReport').DataTable().ajax.reload();
        });


        $('#branch').on('change', function(e) {
            let branchValue = $(this).val();
            if (branchValue == '') {
                window.location.href = window.location.origin + window.location.pathname;
                return;
            }
            let url = window.location.origin + window.location.pathname;
            let params = new URLSearchParams(window.location.search);
            params.set('branch_id', branchValue);
            @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                params.set('order_type', $("#order_type").val());
            @endif
            window.location.href = url + '?' + params.toString();
        });
        @if (Auth::user()->company_profile->manage_ledger_stock == 1)
            $('#order_type').on('change', function(e) {
                let orderTypeValue = $(this).val();
                if (orderTypeValue == '') {
                    window.location.href = window.location.origin + window.location.pathname;
                    return;
                }
                let url = window.location.origin + window.location.pathname;
                let params = new URLSearchParams(window.location.search);
                params.set('order_type', orderTypeValue);
                params.set('branch_id', $('#branch').val());
                window.location.href = url + '?' + params.toString();
            });
        @endif
    </script>
@endsection