@include('admin.layout.header')
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div class="modal fade" id="productDetailsListModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">View Product Record</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <table class="table table-bordered" style="font-size: 15px;" id="productTable">
                            <thead>
                                <tr>
                                    <th>Product Name</th>
                                    <th>Product Count</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center;">
                                {{-- Details Added Here --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header pr-0">
            <div class="row w-100">
                <div class="col-lg-3 col-md-6 my-auto">
                    <h1>POB</h1>
                </div>
                <div class="col-lg-auto col-md-6 ml-auto my-2 my-lg-0 my-md-0">
                    <div id="reportrange">
                        <i class="fa fa-calendar" style="font-size:18px !important;"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down" style="font-size:18px !important;"></i>
                        <input type="hidden" name="dtFrom" id="dtFrom">
                        <input type="hidden" name="dtTo" id="dtTo">
                    </div>
                </div>
                <div class="col-lg-auto my-2 my-lg-0 my-md-0 col-md-6">
                    <button id="applyButton" class="btn btn-primary mr-2">Apply</button>
                    <button id="clearButton" class="btn btn-danger mr-2">Clear</button>
                    <button class="btn btn-success" id="exportButton"><i class="fas fa-download mr-2"
                            style="font-size: 14px!important;"></i>Export</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" data-status="" class="filterstatus {{ request()->query('status')=='' ? 'active' : '' }}">
                    <div class="card card-statistic-1 yellow_count">
                        <div class="card-icon count_icon yellow_count_icon">
                            <i class="fa fa-stopwatch" style="color: #ec9d15"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #fff0d7;">All Count</h4>
                            </div>
                            <div class="card-body" style="color: #fff0d7;" id="pobCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" class="filterstatus {{ request()->query('status')=='Requested' ? 'active' : '' }}" data-status="Requested">
                    <div class="card card-statistic-1 yellow_count">
                        <div class="card-icon count_icon yellow_count_icon">
                            <i class="fas fa-hourglass-half" style="color: #ec9d15"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #fff0d7;">Requested</h4>
                            </div>
                            <div class="card-body" style="color: #fff0d7;" id="pobRequestedCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" class="filterstatus {{ request()->query('status')=='Approved' ? 'active' : '' }}" data-status="Approved">
                    <div class="card card-statistic-1 green_card">
                        <div class="card-icon count_icon green_count_icon">
                            <i class="fa fa-tasks" style="color: #9ab007;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #edf2c8;">Approved</h4>
                            </div>
                            <div class="card-body" style="color: #edf2c8;" id="pobApprovedCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" class="filterstatus {{ request()->query('status')=='Rejected' ? 'active' : '' }}" data-status="Rejected">
                    <div class="card card-statistic-1 red_count">
                        <div class="card-icon count_icon red_count_icon">
                            <i class="fas fa-ban" style="color: #fc5d59;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #ffdcdb;">Rejected</h4>
                            </div>
                            <div class="card-body" style="color: #ffdcdb;" id="pobRejectedCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <!-- <div class="card-header">
                    <h4>Striped</h4>
                  </div> -->
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Action</th>
                                        <th>BE Name</th>
                                        <th>Position Code</th>
                                        <th>Position Name</th>
                                        <th>Customer Name</th>
                                        <th>Mobile No.</th>
                                        <th>Place</th>
                                        <th>Supply Through</th>
                                        <th>Date</th>
                                        <th>Reason</th>
                                        <th>Product Detail</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@include('admin.layout.footer')

<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"></script>
<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>

<!-- JS Libraies -->
<script src="{{ asset('assets/modules/sweetalert/sweetalert.min.js') }}"></script>

<!-- Page Specific JS File -->
<script src="{{ asset('assets/js/page/modules-sweetalert.js') }}"></script>

<script type="text/javascript">
    $(function() {
        $('#reportrange span').html('');
        $("#dtFrom").val('');
        $("#dtTo").val('');

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

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-D'));
            $("#dtTo").val(end.format('YYYY-MM-D'));
        }

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

        cb(start, end);

    });
</script>

<script>
    function listProductSet(productNames, productCounts) {
        // Split the product names and counts by commas
        let names = productNames.split(',');
        let counts = productCounts.split(',');

        // Get the table body where the data will be appended
        let tableBody = document.querySelector('#productTable tbody');
        tableBody.innerHTML = ''; // Clear the table body before appending new rows

        // Loop through the product names and counts and append them as rows
        for (let i = 0; i < names.length; i++) {
            let row = `
            <tr>
                <td>${names[i]}</td>
                <td>${counts[i]}</td>
            </tr>
        `;
            tableBody.innerHTML += row;
        }
    }

    var pobDataTable;

    function pobStatusChange(Id, status, message) {
        var decodedMessage = decodeURIComponent(message.replace(/\+/g, ' '));
        Swal.fire({
            title: 'Are you sure?',
            text: decodedMessage,
            icon: status === 'Rejected' ? 'warning' : 'info',
            showDenyButton: true,
            showCloseButton: true,
            // REMOVE BELOW LINE FOR denyButton FOCUS
            focusConfirm: false,
            confirmButtonColor: '#3085d6',
            denyButtonColor: '#d33',
            denyButtonText: 'No',
            confirmButtonText: status === 'Rejected' ? 'Yes, Reject it!' : 'Yes, Approve it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // This block runs if the user clicks 'Yes'
                $.ajax({
                    url: "{{ route('updatePobStatus') }}",
                    type: 'POST',
                    data: {
                        'pob_id': Id,
                        'status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $.notify(response.msg, "success");
                        } else {
                            $.notify(response.msg, "error");
                        }
                        // setTimeout(function() {
                        // $('#datatable').DataTable().ajax.reload();
                        //     // window.location.reload();
                        //     location.reload(true);
                        // }, 1000);
                        pobDataTable.draw();
                        getCount();
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.msg, "error");
                    }
                });
            } else {
                $.notify("The status remains unchanged.", "info");
            }
        });
    }

    function getCount() {
        $.ajax({
            url: "{{ route('pobCount') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}',
                'dtFrom': $("#dtFrom").val(),
                'dtTo': $("#dtTo").val(),
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                // console.log(response);
                $("#pobCount").html(response.data.pobCount);
                $("#pobRequestedCount").html(response.data.pobRequestedCount);
                $("#pobApprovedCount").html(response.data.pobApprovedCount);
                $("#pobRejectedCount").html(response.data.pobRejectedCount);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }
    $(document).ready(function() {
        // call Count api
        getCount();

        $('#exportButton').click(function() {

            var dtFrom = $('#dtFrom').val();
            var dtTo = $('#dtTo').val();

            pobExport(dtFrom, dtTo);
        });

        function pobExport(dtFrom, dtTo) {
            $.ajax({
                type: "POST",
                url: '{{ route('pobExport') }}',
                //  async: false,
                data: {
                    dtFrom: dtFrom,
                    dtTo: dtTo,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status == 1) {
                        $.notify(response.message, "info");
                        // Trigger the file download
                        var downloadUrl = '{{ asset('storage/pob_exports') }}' + '/' + response
                            .filename;
                        window.location.href = downloadUrl; // Redirect to the download URL
                    } else {
                        $.notify('Something went wrong !', "error");
                    }
                }
            });
        }

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'beName',
                    name: 'beName'
                },
                {
                    data: 'bePositionCode',
                    name: 'bePositionCode'
                },
                {
                    data: 'bePositionName',
                    name: 'bePositionName'
                },
                {
                    data: 'customer_name',
                    name: 'customer_name'
                },
                {
                    data: 'mob_no',
                    name: 'mob_no'
                },
                {
                    data: 'place',
                    name: 'place'
                },
                {
                    data: 'supply_through',
                    name: 'supply_through'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'reason',
                    name: 'reason'
                },
                {
                    data: 'productDetails',
                    name: 'productDetails',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: false,
                    orderable: false,
                }
            ];
            var columnDefs = [{
                // "width": "150",
                // "targets": [5]
            }];
            getdatatable("{{ route('managePobPaginate') }}", columns, columnDefs);

            $('#applyButton').click(function() {
                getCount();
                pobDataTable.draw();
            });

            $('#clearButton').click(function() {
                $('#reportrange span').html('');
                $("#dtFrom").val('');
                $("#dtTo").val('');
                getCount();
                pobDataTable.draw();
            });
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            pobDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.dtFrom = $("#dtFrom").val(),
                            d.dtTo = $("#dtTo").val();
                        const urlParams = new URLSearchParams(window.location.search);
                        d.status = urlParams.get('status'); // Updated status from the current URL
                    }
                },
                // drawCallback: function(settings) {
                //     // Reinitialize Venobox
                //     new VenoBox({
                //         selector: '.my-video-links',
                //     });
                // }
            });

            // Click event for the anchor tags to call the function
            $('.filterstatus').on('click', function(e) {
                e.preventDefault();

                // Get the updated 'data-status' attribute value
                var status = $(this).data('status');

                // Call the function with the 'status' parameter
                addOrUpdateParam('status', status, $(this)); // Pass the clicked element
            });
        }
    });

    function addOrUpdateParam(key, value, clickedElement) {
        // Get the current URL
        const url = new URL(window.location.href);

        // Set or update the query parameter
        url.searchParams.set(key, value);

        // Update the URL in the address bar without reloading the page
        window.history.pushState({}, '', url);

        // Remove the 'active' class from all anchor tags with the filterstatus class
        $('.filterstatus').removeClass('active');

        // Add the 'active' class to the clicked anchor tag
        clickedElement.addClass('active');

        // Redraw the DataTable using the updated status from the URL
        pobDataTable.draw(); // This now redraws the DataTable with the updated status
    }
</script>