@extends('layout.master')

@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="overviewbtns">
                        <a href="{{ url('/home') }}" class="btn btn-secondary mr-2">Overview</a>
                        <a href="{{ url('/orders/dashboard') }}" class="btn btn-secondary mr-2 active">Orders</a>
                        <a href="{{ url('/dashboard/shipments') }}" class="btn btn-secondary mr-2">Shipments</a>
                        <a href="{{ url('/dashboard/weight-discrepancy') }}" class="btn btn-secondary mr-2">Weight
                            Discrepancy</a>
                        <a href="{{ url('/dashboard/ndr') }}" class="btn btn-secondary mr-2">NDR</a>
                        <a href="{{ url('/dashboard/rto') }}" class="btn btn-secondary mr-2">RTO </a>
                        <a href="{{ url('/dashboard/lsp-performance') }}" class="btn btn-secondary mr-2">LSP Performance</a>
                        <!-- <a href="{{ url('/dashboard/delays') }}" class="btn btn-secondary">Delays</a> -->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Date range</label>
                        <input class="form-control" placeholder="" type="text"
                            value="{{ date('d/m/Y', strtotime('-1 month +1 day')) . ' - ' . date('d/m/Y') }}"
                            id="date-range">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select zone</label>
                        <select class="form-control" id="zone-filter">
                            <option value="">Select Zone</option>
                            @foreach ($zones as $key => $zone)
                                <option value="{{ $zone->name }}">{{ $zone->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select LSP</label>
                        <select class="form-control" id="lsp-filter">
                            <option value="">Select LSP</option>
                            @foreach ($lsps as $key => $lsp)
                                <option value="{{ $lsp->id }}">{{ $lsp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select payment mode</label>
                        <select class="form-control" id="mode-filter">
                            <option value="">Select Payment Mode</option>
                            @foreach ($payment_modes as $key => $mode)
                                <option value="{{ $mode }}">{{ strtoupper($mode) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row py-4 pt-sm-4 pb-sm-5">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Shipment Overview by Date</p>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped" id="datewise-shipments">
                            <thead>
                                <tr>
                                    <th scope="col">Date</th>
                                    <th scope="col">Total Orders</th>
                                    <th scope="col">Pickup Unscheduled</th>
                                    <th scope="col">Pickup Scheduled</th>
                                    <th scope="col">Intrasit</th>
                                    <th scope="col">Weight Conflict</th>
                                    <th scope="col">Delivered</th>
                                    <th scope="col">RTO</th>
                                    <th scope="col">Lost/Damaged</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="title-section">
                        <p>Prepaid vs COD Orders</p>
                    </div>

                    <div class="zone-box">
                        <div class="row mb-3">
                            <div class="col-md-12 text-center">
                                <canvas id="myChart" width="100%" height="200px"></canvas>
                                <span id="noRecordsFound"><strong>No record(s) found.</strong></span>
                                <!-- <div id="chartContainer" style="height: 370px; width: 100%;"></div> -->
                            </div>



                            <div class="col-md-12 mt-3">
                                <p class="mb-0">Last Month Total Orders</p>
                                <p class="f-20" id="lastMonthTotal"></p>
                                <hr class="mt-0" />

                                <div class="row">
                                    <div class="col-6">
                                        <p class="mb-0">
                                            <img src="/assets/images/orderdot1.png" alt="" /> Prepaid
                                            <br />
                                            <span id="prepaid"></span>
                                        </p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-0">
                                            <img src="/assets/images/orderdot2.png" alt="" /> COD <br />
                                            <span id="cod"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="title-section">
                        <p>Buyer Demographic</p>
                    </div>

                    <div class="zone-box">
                        <div class="row mb-3">
                            <div class="col-md-12 text-center">
                                <canvas id="configChart" width="100%" height="130px"></canvas>
                                <!-- <span id="noRecordsFound1"><strong>No record(s) found.</strong></span> -->
                            </div>

                            <div class="col-md-12">
                                <p class="mb-0">Total shipments</p>
                                <p class="f-20" id="total_shipments_id">0</p>
                                <hr class="mt-0" />

                               <!--  <div class="row">
                                    <div class="col-6">
                                        <p class="mb-3">
                                            <img src="/assets/images/orderdot2.png" alt="" /> B Type 1
                                            25%
                                        </p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-0">
                                            <img src="/assets/images/orderdot1.png" alt="" /> B Type 2
                                            10%
                                        </p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-0">
                                            <img src="/assets/images/orderdot3.png" alt="" /> B Type 3
                                            25%
                                        </p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-0">
                                            <img src="/assets/images/orderdot4.png" class="" alt="" /> B
                                            Type 4 35%
                                        </p>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title-section">
                        <p>Most Popular Order Location</p>
                    </div>
                    <div class="zone-box">
                        <div class="zone-content order-location">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">States</th>
                                            <th scope="col">Order Count</th>
                                            <th scope="col">Revenue</th>
                                            <th scope="col">Revenue %</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                      

                                        @if(count($stateWiseData) > 0)
                                        @foreach ($stateWiseData as $row)
                                            <tr>
                                                <td>{{$row->name}}</td>
                                                <td>{{$row->order_count}}</td>
                                                <td>₹ 19,263</td>
                                                <td>₹ 19,263 %</td>

                                            </tr>
                                        @endforeach
                                        @else
                                        <tr>
                                            <td style="text-align: center;"> </td>
                                            <td style="text-align: center;"> </td>
                                            <td style="text-align: center;"></td>
                                            <td style="text-align: center;"></td>
                                        </tr>
                                         <tr>
                                            <td style="text-align: center;"> </td>
                                            <td style="text-align: center;"> </td>
                                            <td style="text-align: center;"></td>
                                            <td style="text-align: center;"></td>
                                        </tr>  
                                        <tr>
                                            <td style="text-align: center;"> </td>
                                            <td style="text-align: center;"> </td>
                                            <td> No record(s) found.</td>
                                            <td style="text-align: center;"></td>
                                        </tr>
                                        </tr>

                                        @endif

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

            <div class="row py-4 pt-sm-5">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Order Vs Revenue</p>
                    </div>

                    <div class="zone-box">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Orders</h6>
                                <p>Revenue earned from total orders</p>
                            </div>
                            {{-- <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <select class="form-control">
                                        <option value="">Month</option>
                                    </select>
                                </div>
                            </div> --}}
                        </div>

                        <canvas id="percentChart" width="100%" height="56px"></canvas>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top 10 Product</p>
                    </div>

                    <div class="zone-box">
                        {{-- <div class="row">
                            <div class="col-md-4 d-flex">
                                <h6>Sort your result:</h6>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group custom-form-group">
                                    <select class="form-control">
                                        <option value="">Last 7 days</option>
                                    </select>
                                </div>
                            </div>
                        </div> --}}

                        <table class="table table-striped" id="top10-products">
                            <thead>
                                <tr>
                                    <th scope="col">Product Name</th>
                                    <th scope="col">Unit Sold</th>
                                    <th scope="col">Revenue</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </div>

            <div class="row pt-sm-4 pt-4">

            <div class="col-md-6" style="display:none">
                    <div class="title-section">
                        <p>Channel Wise Split</p>
                    </div>

                    <div class="zone-box">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Channel</h6>
                                <p>Some additional info if any</p>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <select class="form-control">
                                        <option value="">Month</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <canvas id="splitChart" width="100%" height="50px"></canvas>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex mb-0 float-right mt-2">
                                    <p class="mb-0">
                                        <img src="/assets/images/data1.png" alt="" /> Data pointer 1
                                    </p>
                                    <p class="mb-0">
                                        <img src="/assets/images/data1.png" alt="" class="ml-3" />
                                        Data pointer 2
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top 10 Customers</p>
                    </div>

                    <div class="zone-box">
                        {{-- <div class="row">
                            <div class="col-md-4 d-flex">
                                <h6>Sort your result:</h6>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group custom-form-group">
                                    <select class="form-control">
                                        <option value="">Last 7 days</option>
                                    </select>
                                </div>
                            </div>
                        </div> --}}

                        <table class="table table-striped" id="top10-customers">
                            <thead>
                                <tr>
                                    <th scope="col">Customer Name</th>
                                    <th scope="col">Order Count</th>
                                    <th scope="col">Revenue</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

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

    <script>
        const ctx = document.getElementById("myChart").getContext("2d");
        const myChart = new Chart(ctx, {
            type: "doughnut",
            data: {
                labels: ["COD", "Prepaid", ],
                datasets: [{
                    data: [400, 150],
                    backgroundColor: ["#049CFF", "#B6EDFF"],
                    hoverOffset: 1,

                    borderWidth: 0,
                }, ],
            },
            options: {
                plugins: {
                    legend: {
                        display: false,
                    },
                },
            },
        });

        // Chart 2

        const data = {
            labels: ["Sales Channel1", "Sales Channel2", "Sales Channel3"],
            datasets: [{
                label: "Sales Channel1",
                data: [25, 10, 35, 30],
                backgroundColor: ["#43B5F4", "#89CFF5", "#B4E2FB", "#D4EDFB"],
                hoverOffset: 1,
            }, ],
        };
        const config = {
            type: "pie",
            data: data,
            options: {
                plugins: {
                    legend: {
                        display: false,
                    },
                },
            },
        };

        const configChart = new Chart(
            document.getElementById("configChart"), config
        );

        // Chart 3

        var n = document.getElementById("percentChart").getContext("2d");
        var percentChart = new Chart(n, {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                datasets: [{
                    // label: 'RTO Status',
                    data: [0, 65, 40, 30, 20, 0],
                    fill: false,
                    borderColor: "#4db8ff",
                    tension: 0.1,
                }, {
                    // label: 'RTO Status',
                    data: [, 0, 83, 60, 40, 0],
                    fill: false,
                    borderColor: "#000000",
                    tension: 0.1,
                }, ],
            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false,
                    },
                }, ],
            },
        });

        function zoneShipmentDonutData() {
            jQuery.ajax({
                url: "{{ route('zone-shipment-donut-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    // userAddressFormArray: '',
                    // zone: $('#zone-filter').val(),
                    // mode: $('#mode-filter').val(),
                    // lsp: $('#lsp-filter').val(),
                    // date_range: $('#date-range').val(),
                },
                success: function(data) {
                    configChart.data.labels = [];
                    configChart.data.datasets = [];

                    let dataArr = [];
                    let backgroundColorArray = [];
                    let totalShipments = 0;

                    jQuery.each(data.data, function(key, value) {
                        configChart.data.labels.push(value?.zone);
                        dataArr.push(value?.total_shipment_count);
                        backgroundColorArray.push(value?.color);
                        totalShipments += value?.total_shipment_count;

                        //console.log('totalShipments',totalShipments);
                    });

                    configChart.data.datasets.push({
                        'data': dataArr,
                        'backgroundColor': backgroundColorArray
                    })

                     $('#total_shipments_id').text(totalShipments);

                    configChart.update();
                   

                }
            });
        }

        zoneShipmentDonutData();

        // Chart 4

        var d = document.getElementById("splitChart").getContext("2d");
        var splitChart = new Chart(d, {
            type: "bar",
            data: {
                labels: [
                    "Channel1", "Channel2", "Channel3", "Channel4", "Channel5", "Channel6",
                ],
                datasets: [{
                    label: "# of Votes",
                    data: [10, 20, 35, 45, 48, 45],
                    backgroundColor: "#D4EDFB",
                    borderWidth: 1,
                    // borderRadius: 5,
                }, {
                    label: "# of Votes",
                    data: [29, 25, 18, 20, 22, 23],
                    backgroundColor: "#43B5F4",
                    borderWidth: 1,
                    // borderRadius: 5,
                }, ],
            },

            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                    },
                },
            },
        });

        $(document).ready(function() {

            $('#date-range').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY'
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                autoApply: true,
            });

            var dateWiseShipment = $('#datewise-shipments').DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                "autoWidth": false,
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'desc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/orders/dashboard/datewise-shipments') }}",
                    data: function(d) {
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-filter').val();
                        d.lsp = $('#lsp-filter').val();
                        d.date_range = $('#date-range').val();
                    }
                },

                columns: [{
                    data: 'date',
                    name: 'date',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'total_shipment',
                    name: 'total_shipment',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'pickup_unscheduled',
                    name: 'pickup_unscheduled',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'pickup_scheduled',
                    name: 'pickup_scheduled',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'in_transit',
                    name: 'in_transit',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'delivered',
                    name: 'delivered',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'weight_discrapancy',
                    name: 'weight_discrapancy',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'rto',
                    name: 'rto',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'lost_damage',
                    name: 'lost_damage',
                    searchable: true,
                    orderable: false,
                    defaultContent: 'NA'
                }],
                select: {
                    style: 'multi',
                },
            });

            var top10Customers = $('#top10-customers').DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                "autoWidth": false,
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                searchable: true,
                bStateSave: false,
                order: ['1', 'desc'],

                ajax: {
                    url: "{{ url('/orders/dashboard/top10-customers') }}",
                    data: function(d) {
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-filter').val();
                        d.lsp = $('#lsp-filter').val();
                        d.date_range = $('#date-range').val();
                    }
                },

                columns: [{
                    data: 'name',
                    name: 'name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'orders_count',
                    name: 'orders_count',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'mobile',
                    name: 'mobile',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, ],
                select: {
                    style: 'multi',
                },
            });

            var top10Products = $('#top10-products').DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                "autoWidth": false,
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/orders/dashboard/top10-products') }}",
                    data: function(d) {
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-filter').val();
                        d.lsp = $('#lsp-filter').val();
                        d.date_range = $('#date-range').val();
                    }
                },

                columns: [{
                    data: 'name',
                    name: 'name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'units_sold',
                    name: 'units_sold',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, {
                    data: 'total_revenue',
                    name: 'total_revenue',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                }, ],
                select: {
                    style: 'multi',
                },
            });

            codGraph();
            orderRevenueGraph();
        });

        $('#zone-filter, #mode-filter, #lsp-filter, #date-range').change(function() {
            $('#datewise-shipments').DataTable().draw();
            $('#top10-customers').DataTable().draw();
            $('#top10-products').DataTable().draw();

            codGraph();
            orderRevenueGraph();
            zoneShipmentDonutData();
        });


        //Prepaid Cod Graph
        // function codGraph() {
        //     jQuery.ajax({
        //         url: "{{ route('prepaid-cod-graph') }}",
        //         type: "POST",
        //         data: {
        //             _token: "{{ csrf_token() }}",
        //             userAddressFormArray: '',
        //             zone: $('#zone-filter').val(),
        //             mode: $('#mode-filter').val(),
        //             lsp: $('#lsp-filter').val(),
        //             date_range: $('#date-range').val(),
        //         },
        //         success: function(data) {
        //             let total = data.data.prepaid + data.data.cod;
        //             let cod = data.data.cod / total * 360;
        //             let prepaid = data.data.prepaid / total * 360;
        //             // console.log(cod);


        //             myChart.data.datasets['0']['data'] = [];
        //             myChart.data.datasets['0']['data'].push(data.data.cod);
        //             myChart.data.datasets['0']['data'].push(data.data.prepaid);

        //             $('#prepaid').text(data.data.prepaid);
        //             $('#cod').text(data.data.cod);
        //             $('#lastMonthTotal').text(data.data.lastMont);
        //             $('#average_cod').text(cod);
        //             $('#average_prepaid').text(prepaid);

        //             myChart.update();

        //         }
        //     });
        // }

        function codGraph() {
            jQuery.ajax({
                url: "{{ route('prepaid-cod-graph') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {
                    if (data && data.data && data.data.cod !== undefined && data.data.prepaid !== undefined) {
                        let total = data.data.prepaid + data.data.cod;
                        let cod = (data.data.cod / total) * 360;
                        let prepaid = (data.data.prepaid / total) * 360;

                        myChart.data.datasets[0].data = [data.data.cod, data.data.prepaid];
                        myChart.update();

                        $('#prepaid').text(data.data.prepaid);
                        $('#cod').text(data.data.cod);
                         if(data.data.cod == 0 && data.data.prepaid == 0) {
                             $('#noRecordsFound').show();
                         }else {
                             $('#noRecordsFound').hide();
                         }
                        $('#lastMonthTotal').text(data.data.lastMonth);
                        //console.log('Last month total Orders',data.data.lastMonth);
                        $('#average_cod').text(cod);
                        $('#average_prepaid').text(prepaid);

                // Hide the "No Records Found" message if it was previously displayed
                       
                    } else {
                        //alert('aya');
                // Display "No Records Found" message and hide the chart
                        $('#noRecordsFound').show();
                        myChart.data.datasets[0].data = [];
                        myChart.update();
                    }
                }
            });
        }


        //Orders vs Revenue Graph
        function orderRevenueGraph() {
            jQuery.ajax({
                url: "{{ route('orders-vs-revenue-graph') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {

                    /* {
                            // label: 'RTO Status',
                            data: [0, 65, 40, 30, 20, 0],
                            fill: false,
                            borderColor: "#4db8ff",
                            tension: 0.1,
                        },
                    */
                    orderCountValue = [];
                    revenuePrice = [];

                    percentChart.data.datasets = [];
                    percentChart.data.labels = [];

                    jQuery.each(data.data, function(key, value) {

                        percentChart.data.labels.push(value.dateRange);
                        orderCountValue.push(value.totalOrdersCount);
                        revenuePrice.push(value.revenue);


                    });

                    //Order Count Data

                    percentChart.data.datasets.push({
                        label: 'Orders',
                        data: orderCountValue,
                        fill: false,
                        borderColor: "#4db8ff",
                        tension: 0.1,

                    })
                    //Revenue
                    percentChart.data.datasets.push({
                        label: 'Revenue',
                        data: revenuePrice,
                        fill: false,
                        borderColor: "#000000",
                        tension: 0.1,

                    })

                    percentChart.update();

                }
            });
        }
    </script>
@endsection