@extends('backend.layouts_backend.master2')

@section('title')
    Custom Date Business Performance
@endsection
@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            @php
                $logged_user_id = Auth::user()->id;
            @endphp
            <h4 class="mb-3 mb-md-0">Hi, <span class="light_blue_text">{{ get_user_fullname_temporary($logged_user_id) ?? 'N/A' }},<span
                        class="light_blue_text"> {{ $searched_data_string ?? '' }}
                    </span>
            </h4>
        </div>
        <div class="d-flex justify-content-md-end">
            <div class="col-12 col-md d-flex justify-content-md-end">
                <div class="btn-group mb-3 mb-md-0" role="group" aria-label="Basic example">
                    <a href="{{ route('dashboard.index') }}"><button type="button" class="btn btn-primary">Todays
                            Performance</button></a> &nbsp;&nbsp;
                    <a href="{{ route('point_of_sale.index') }}"><button type="button" class="btn btn-outline-primary">All
                            Sales</button></a> &nbsp;&nbsp;
                    <a href="{{ route('expenses.index') }}"> <button type="button" class="btn btn-primary">All
                            Expenses</button></a>

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


    {{-- alert --}}
    @if (session('messagedelete'))
        <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-3" role="alert">
            <i class="mdi mdi-block-helper label-icon"></i>
            {{ session('messagedelete') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- search form --}}
    <div class="card light_blue_bg light_blue_border_bottom">
        <div class="card-body">
            <div class="row d-flex justify-content-center">
                <div class="col-12 col-md-3"></div>
                <div class="col-12 col-md-9 align-items-center mx-auto">
                    <form method="post" action="{{ route('business_performance.search_business_performance_period') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md">
                                <div class="form-group ">
                                    <label>Select Period</label>
                                    <select class="form-control form-select search_data" name="dates" id="dates">
                                        {{-- <option value="null">-- Select --</option> --}}
                                        <option value="yesterday" @selected($search_period == 'yesterday' ?? '')>Yesterday</option>
                                        <option value="custom_date" @selected($search_period == 'custom_date' ?? '')>Custom Date</option>
                                        <option value="custom_date_range" @selected($search_period == 'custom_date_range' ?? '')>Date Range</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md" id="custom_date_group" style="display: none;">
                                <div class="form-group">
                                    <label>Custom Date</label>
                                    <div class="input-group">
                                        <input type="date" name="custom_date" id="custom_date" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md" id="start_date_group" style="display: none;">
                                <div class="form-group">
                                    <label>Start Date</label>
                                    <div class="input-group">
                                        <input type="date" name="start_date" id="start_date" class="form-control">
                                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md" id="end_date_group" style="display: none;">
                                <div class="form-group">
                                    <label>End Date</label>
                                    <div class="input-group">
                                        <input type="date" name="end_date" id="end_date" class="form-control">
                                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md">
                                <div class="form-group">
                                    <label></label><br>

                                    <div class="input-group">
                                        <button type="submit" class="btn btn-success"><i class="fa fa-paper-plane"></i>
                                            Search
                                        </button>
                                    </div>

                                </div>
                            </div>

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

            <div class="row text-center">
                <div class="col-md">
                    <div class="row">
                        <div class="col col-md text-center">
                            <small>Choosing Custom range of 7, 28, 30, 31 days gives a clear view of business performance
                                trends for short term analysis. 🚀</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    {{-- end search form --}}
    <br>

    {{-- row --}}
    <div class="row">
        <div class="col-12 col-xl-12 stretch-card">
            <div class="row flex-grow-1">

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg ">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Orders</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_sale_records ?? 0 }} </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Sales Income ( UGX )</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_sales_amount_collected ?? 0 }} </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Sales Balance (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_sales_balance_amount ?? 0 }} </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end row --}}


    {{-- row --}}

    <div class="row">
        <div class="col-12 col-xl-12 stretch-card">
            <div class="row flex-grow-1">

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Assets Hired</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_assets_hired ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Asset Hire Income (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_assets_hired_amount ?? 0 }} </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body light_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Assets Hire Balance (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_assets_hired_balance_amount ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end row --}}


    {{-- row --}}
    <div class="row">
        <div class="col-12 col-xl-12 stretch-card">
            <div class="row flex-grow-1">
                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Expenses</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_expense_records ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Expenses Amount (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_total_expense_amount ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card dark_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Clients Registered</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_registered_clients ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end row --}}





    {{-- row --}}
    <div class="row">
        <div class="col-12 col-xl-12 stretch-card">
            <div class="row flex-grow-1">
                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Total Revenue (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_total_revenue ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Total Balance (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_total_balance ?? 0 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md grid-margin stretch-card">
                    <div class="card light_blue_bg">
                        <div class="card-body dark_blue_border_bottom">
                            <div class=" text-center align-items-center">
                                <h6 class="card-title mb-0 text-center">Net Profit (UGX)</h6> <br>
                                <h3 class="mb-2">{{ $custom_date_total_net_profit ?? 0 }} </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- end row --}}



    <div class="row">
        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center">Revenue Vs Net Profit </h6>
                    <hr>
                    <div><canvas id="revenue_vs_netprofit_chart"></canvas></div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center">Revenue Vs Revenue Balances</h6>
                    <hr>
                    <div><canvas id="revenue_vs_total_balance_chart"></canvas></div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center"> Revenue Vs Expenditure </h6>
                    <hr>
                    <div><canvas id="salesDonutChart6"></canvas></div>
                </div>
            </div>
        </div>

    </div>
    <br>



    {{-- this month --}}
    {{-- <div class="row">
        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center">This Month's Sales </h6>
                    <hr>
                    <div> <canvas id="monthlySalesChart"></canvas></div>
                </div>
            </div>
        </div>

    </div>
    <br> --}}


    {{-- this week --}}
    {{-- <div class="row">
        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center">This Weeks Sales </h6>
                    <hr>
                    <div> <canvas id="monthlySalesChart2"></canvas></div>
                </div>
            </div>
        </div>

    </div>
    <br>  --}}

    {{-- annual sales --}}
    {{-- <div class="row">
        <div class="col-12 col-md">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-center">This Year's Sales </h6>
                    <hr>
                    <div> <canvas id="year_sales_chart_canvas"></canvas></div>
                </div>
            </div>
        </div>

    </div>
    <br> --}}

    {{-- <div class="row">
        <div class="col-lg-5 col-xl-4 grid-margin grid-margin-xl-0 stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-baseline mb-2">
                        <h6 class="card-title mb-0">Top 5 Product Sales </h6>
                        <div class="dropdown mb-2">
                            <a type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="edit-2" class="icon-sm me-2"></i> <span
                                        class="">Edit</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="trash" class="icon-sm me-2"></i> <span
                                        class="">Delete</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="printer" class="icon-sm me-2"></i> <span
                                        class="">Print</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="download" class="icon-sm me-2"></i> <span
                                        class="">Download</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column">
                        <a href="javascript:;" class="d-flex align-items-center border-bottom pb-3">
                            <div class="me-3">
                                <img src="https://www.nobleui.com/html/template/assets/images/faces/face2.jpg"
                                    class="rounded-circle wd-35" alt="user">
                            </div>
                            <div class="w-100">
                                <div class="d-flex justify-content-between">
                                    <h6 class="text-body mb-2">Leonardo Payne</h6>
                                    <p class="text-muted tx-12">12.30 PM</p>
                                </div>
                                <p class="text-muted tx-13">Hey! there I'm available...</p>
                            </div>
                        </a>
                        <a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
                            <div class="me-3">
                                <img src="https://www.nobleui.com/html/template/assets/images/faces/face3.jpg"
                                    class="rounded-circle wd-35" alt="user">
                            </div>
                            <div class="w-100">
                                <div class="d-flex justify-content-between">
                                    <h6 class="text-body mb-2">Carl Henson</h6>
                                    <p class="text-muted tx-12">02.14 AM</p>
                                </div>
                                <p class="text-muted tx-13">I've finished it! See you so..</p>
                            </div>
                        </a>
                        <a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
                            <div class="me-3">
                                <img src="https://www.nobleui.com/html/template/assets/images/faces/face4.jpg"
                                    class="rounded-circle wd-35" alt="user">
                            </div>
                            <div class="w-100">
                                <div class="d-flex justify-content-between">
                                    <h6 class="text-body mb-2">Jensen Combs</h6>
                                    <p class="text-muted tx-12">08.22 PM</p>
                                </div>
                                <p class="text-muted tx-13">This template is awesome!</p>
                            </div>
                        </a>
                        <a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
                            <div class="me-3">
                                <img src="https://www.nobleui.com/html/template/assets/images/faces/face5.jpg"
                                    class="rounded-circle wd-35" alt="user">
                            </div>
                            <div class="w-100">
                                <div class="d-flex justify-content-between">
                                    <h6 class="text-body mb-2">Amiah Burton</h6>
                                    <p class="text-muted tx-12">05.49 AM</p>
                                </div>
                                <p class="text-muted tx-13">Nice to meet you</p>
                            </div>
                        </a>
                        <a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
                            <div class="me-3">
                                <img src="https://www.nobleui.com/html/template/assets/images/faces/face6.jpg"
                                    class="rounded-circle wd-35" alt="user">
                            </div>
                            <div class="w-100">
                                <div class="d-flex justify-content-between">
                                    <h6 class="text-body mb-2">Yaretzi Mayo</h6>
                                    <p class="text-muted tx-12">01.19 AM</p>
                                </div>
                                <p class="text-muted tx-13">Hey! there I'm available...</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-xl-8 stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-baseline mb-2">
                        <h6 class="card-title mb-0">Projects</h6>
                        <div class="dropdown mb-2">
                            <a type="button" id="dropdownMenuButton7" data-bs-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="edit-2" class="icon-sm me-2"></i> <span
                                        class="">Edit</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="trash" class="icon-sm me-2"></i> <span
                                        class="">Delete</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="printer" class="icon-sm me-2"></i> <span
                                        class="">Print</span></a>
                                <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i
                                        data-feather="download" class="icon-sm me-2"></i> <span
                                        class="">Download</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="pt-0">#</th>
                                    <th class="pt-0">Project Name</th>
                                    <th class="pt-0">Start Date</th>
                                    <th class="pt-0">Due Date</th>
                                    <th class="pt-0">Status</th>
                                    <th class="pt-0">Assign</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>NobleUI jQuery</td>
                                    <td>01/01/2022</td>
                                    <td>26/04/2022</td>
                                    <td><span class="badge bg-danger">Released</span></td>
                                    <td>Leonardo Payne</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>NobleUI Angular</td>
                                    <td>01/01/2022</td>
                                    <td>26/04/2022</td>
                                    <td><span class="badge bg-success">Review</span></td>
                                    <td>Carl Henson</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>NobleUI ReactJs</td>
                                    <td>01/05/2022</td>
                                    <td>10/09/2022</td>
                                    <td><span class="badge bg-info">Pending</span></td>
                                    <td>Jensen Combs</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>NobleUI VueJs</td>
                                    <td>01/01/2022</td>
                                    <td>31/11/2022</td>
                                    <td><span class="badge bg-warning">Work in Progress</span>
                                    </td>
                                    <td>Amiah Burton</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>NobleUI Laravel</td>
                                    <td>01/01/2022</td>
                                    <td>31/12/2022</td>
                                    <td><span class="badge bg-danger">Coming soon</span></td>
                                    <td>Yaretzi Mayo</td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>NobleUI NodeJs</td>
                                    <td>01/01/2022</td>
                                    <td>31/12/2022</td>
                                    <td><span class="badge bg-primary">Coming soon</span></td>
                                    <td>Carl Henson</td>
                                </tr>
                                <tr>
                                    <td class="border-bottom">3</td>
                                    <td class="border-bottom">NobleUI EmberJs</td>
                                    <td class="border-bottom">01/05/2022</td>
                                    <td class="border-bottom">10/11/2022</td>
                                    <td class="border-bottom"><span class="badge bg-info">Pending</span></td>
                                    <td class="border-bottom">Jensen Combs</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
@endsection


@section('extra_scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // all select2 ids
        $('.search_data,.add_more_select_ids').select2({
            width: '100%',
        });

        // make select2 better display in input fields //avoid overlap
        $('.select2-selection.select2-selection--single').css('height', 'calc(2.85rem)');
        $('.select2-selection.select2-selection--single').css('padding-top', '3px');
        $('.select2-selection__arrow').css('top', '10px');
    </script>


    {{-- Revenue vs net profit  --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new Chart(document.getElementById('revenue_vs_netprofit_chart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: @json($custom_date_revenue_vs_netprofit_labels),
                    datasets: [{
                        data: @json($custom_date_revenue_vs_netprofit_data),
                        backgroundColor: ["#36A2EB", "#FFCE56", "#4CAF50"],
                        hoverBackgroundColor: ["#1E88E5", "#FFC107", "#388E3C"]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
    </script>

    {{-- revenue vs revenue balances --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new Chart(document.getElementById('revenue_vs_total_balance_chart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: @json($custom_date_revenue_vs_balance_labels),
                    datasets: [{
                        data: @json($custom_date_revenue_vs_balance_data),
                        backgroundColor: ["#36A2EB", "#FFCE56", "#4CAF50"],
                        hoverBackgroundColor: ["#1E88E5", "#FFC107", "#388E3C"]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
    </script>

    {{-- revenue vs revenue balances --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new Chart(document.getElementById('revenue_vs_total_balance_chart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: @json($custom_date_revenue_vs_balance_labels),
                    datasets: [{
                        data: @json($custom_date_revenue_vs_balance_data),
                        backgroundColor: ["#36A2EB", "#FFCE56", "#4CAF50"],
                        hoverBackgroundColor: ["#1E88E5", "#FFC107", "#388E3C"]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
    </script>


    {{-- revenue vs expenditure --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new Chart(document.getElementById('salesDonutChart6').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: @json($custom_date_revenue_vs_expendure_labels),
                    datasets: [{
                        data: @json($custom_date_revenue_vs_expendure_data),
                        backgroundColor: ["#36A2EB", "#FFCE56", "#4CAF50"],
                        hoverBackgroundColor: ["#1E88E5", "#FFC107", "#388E3C"]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
    </script>





    {{-- bar chart 1  --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var ctx = document.getElementById('monthlySalesChart').getContext('2d');

            // Example Data for Sales in a Month (Modify with real data)
            var labels = [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
            ];
            var salesData = [120, 180, 150, 200, 220, 190, 170, 140, 160, 210, 250, 300, 310, 280, 270, 260, 240,
                220, 200, 190, 210, 230, 250, 270, 300, 320, 350, 370, 390, 400
            ];

            var salesChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Daily Sales ($)",
                        data: salesData,
                        backgroundColor: "#36A2EB",
                        borderColor: "#1E88E5",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: "Sales Amount ($)"
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: "Day of the Month"
                            }
                        }
                    },
                    layout: {
                        padding: {
                            top: 20,
                            bottom: 20
                        }
                    }
                }
            });
        });
    </script>

    {{-- bar chart 2  --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var ctx = document.getElementById('monthlySalesChart2').getContext('2d');

            // Example Data for Sales in a Month (Modify with real data)
            var labels = [1, 2, 3, 4, 5, 6, 7];
            var salesData = [120, 180, 150, 200, 220, 190, 170];

            var salesChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Daily Sales ($)",
                        data: salesData,
                        backgroundColor: "#36A2EB",
                        borderColor: "#1E88E5",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: "Sales Amount ($)"
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: "Day of the Month"
                            }
                        }
                    },
                    layout: {
                        padding: {
                            top: 20,
                            bottom: 20
                        }
                    }
                }
            });

            // Increase chart height
            document.getElementById('monthlySalesChart2').style.height = '400px';
        });
    </script>

    {{-- Year sales --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var ctx = document.getElementById('year_sales_chart_canvas').getContext('2d');

            // Example Data for Sales in a Month (Modify with real data)
            var labels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            var salesData = [120, 180, 150, 200, 220, 190, 170, 140, 160, 210, 250, 300];

            var salesChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Daily Sales ($)",
                        data: salesData,
                        backgroundColor: "#36A2EB",
                        borderColor: "#1E88E5",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: "Sales Amount ($)"
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: "Day of the Month"
                            }
                        }
                    },
                    layout: {
                        padding: {
                            top: 20,
                            bottom: 20
                        }
                    }
                }
            });

            // Increase chart height
            document.getElementById('year_sales_chart_canvas').style.height = '400px';
        });
    </script>

    <script>
        $(document).ready(function() {
            function updateForm() {
                var selectedDate = $('#dates').val();
                $('#custom_date_group').hide();
                $('#start_date_group').hide();
                $('#end_date_group').hide();

                if (selectedDate === 'custom_date') {
                    $('#custom_date_group').show();
                } else if (selectedDate === 'custom_date_range') {
                    $('#start_date_group').show();
                    $('#end_date_group').show();
                }
            }

            $('#dates').change(updateForm);
            updateForm(); // Initial call to set the correct fields on page load
        });
    </script>
@endsection