@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="exampleModalCenter" 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 Bonanza Offer 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 user_details_view_odd">
                    <div class="col-lg-4 col-4 col-md-4">
                        User Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight: bold !important;">

                        Rahul Sharma
                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Type
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        Bonanza Offer
                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Banner Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        Special Retail Bonanza
                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        VER DR ISHWAR BHAI
                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Mobile No
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        9574362886
                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Date
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        -
                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Image
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        No images
                    </div>
                </div>


                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Status
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important">
                        Active
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header pr-0">
            <div class="row w-100 g-2">
                <div class="col-lg-auto my-auto">
                    <h1>Bonanza Detailed Listing</h1>
                </div>
                <div class="col-lg-auto  ml-auto col-md-6 ml-auto">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="SMFilter" id="SMFilter" onchange="getRBMFilterData()">
                            <option value="" selected disabled>Select SM</option>
                            <option value="">Select All</option>
                            @foreach ($sm_users as $user)
                                <option value="{{ $user->position_code }}">{{ $user->emp_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="RBMFilter" id="RBMFilter" onchange="getABMfilterData()">
                            <option value="" selected disabled>Select RBM</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="ABMFilter" id="ABMFilter" onchange="getBEFilterData()">
                            <option value="" selected disabled>Select ABM</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="BEFilter" id="BEFilter">
                            <option value="" selected disabled>Select BE</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                {{-- <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select  w-100">
                            <option value="" selected disabled>Select HQ Name</option>
                            <option value="">Select All</option>
                            <option value="">HQ Name 1</option>
                            <option value="">HQ Name 2</option>
                            <option value="">HQ Name 3</option>
                            <option value="">HQ Name 4</option>
                        </select>
                    </div>
                </div> --}}
                <div class="col-lg-auto col-md-6 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="totalOfferCount">
                                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') == 'Planned' ? 'active' : '' }}"
                    data-status="Planned">
                    <div class="card card-statistic-1 yellow_count">
                        <div class="card-icon count_icon yellow_count_icon">
                            <i class="fas fa-chalkboard-teacher" style="color: #ec9d15"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #fff0d7;">Planned</h4>
                            </div>
                            <div class="card-body" style="color: #fff0d7;" id="PlannedOfferCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" data-status="Implemented"
                    class="filterstatus {{ request()->query('status') == 'Implemented' ? 'active' : '' }}">
                    <div class="card card-statistic-1 info_count">
                        <div class="card-icon count_icon info_count_icon">
                            <i class="fas fa-chart-line" style=" color: #089ab0;;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #d4f9ff;">Implemented</h4>
                            </div>
                            <div class="card-body" style="color: #d4f9ff;" id="ImplementedOfferCount">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="javascript:void(0);" data-status="Canceled"
                    class="filterstatus {{ request()->query('status') == 'Canceled' ? 'active' : '' }}">
                    <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;">Cancelled</h4>
                            </div>
                            <div class="card-body" style="color: #ffdcdb;" id="CanceledOfferCount">
                                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 rowspan="2">Sr. No.</th>
                                        <th rowspan="2">Action</th>
                                        <th rowspan="2">BE Name</th>
                                        <th rowspan="2">Position Code</th>
                                        <th rowspan="2">Position Name</th>
                                        {{-- <th rowspan="2">Type</th> --}}
                                        <th colspan="5">
                                            Planned
                                        </th>
                                        <th colspan="2">Implemented</th>
                                        <th rowspan="2">Status</th>
                                    </tr>
                                    <tr>
                                        <th>Banner Name</th>
                                        <th>Retailer Name</th>
                                        <th>Place</th>
                                        {{-- <th>Bonanza Offer</th> --}}
                                        <th>Mobile No</th>
                                        <th>Slab</th>
                                        <th>Date</th>
                                        <th>Image</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>

<script type="text/javascript">
    function getRBMFilterData() {
        let code = $('#SMFilter option:selected').val();
        if (code && code.trim() !== '') {
            $.ajax({
                url: "{{ route('getChildUserData') }}",
                type: "POST",
                data: {
                    position_code: code,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
                    $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
                    $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');

                    if (result.status === 1) {
                        $.each(result.data, function(key, value) {
                            $("#RBMFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                        });
                    } else {
                        $.notify(result.message || 'An error occurred while fetching the data.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    alert('Error: ' + (xhr.responseJSON ? xhr.responseJSON.message : 'An error occurred while processing the request.'));
                }
            });
        }
    }

    function getABMfilterData() {
        $.ajax({
            url: "{{ route('getChildUserData') }}",
            type: "POST",
            data: {
                position_code: $('#RBMFilter option:selected').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
                $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
                $.each(result.data, function(key, value) {
                    $("#ABMFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                });
            }
        });
    }

    function getBEFilterData() {
        $.ajax({
            url: "{{ route('getChildUserData') }}",
            type: "POST",
            data: {
                position_code: $('#ABMFilter option:selected').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
                $.each(result.data, function(key, value) {
                    $("#BEFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                });
            }
        });
    }

    function getCount() {
        $.ajax({
            url: "{{ route('bonanzaOfferCount') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}',
                'dtFrom': $("#dtFrom").val(),
                'dtTo': $("#dtTo").val(),
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                // console.log(response);
                $("#totalOfferCount").html(response.data.totalOfferCount);
                $("#PlannedOfferCount").html(response.data.PlannedOfferCount);
                $("#ImplementedOfferCount").html(response.data.ImplementedOfferCount);
                $("#CanceledOfferCount").html(response.data.CanceledOfferCount);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    let OfferDataTable;
    $(document).ready(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);


        // Ajax Call
        getCount();

        $('#exportButton').click(function() {
            let dtFrom = $('#dtFrom').val();
            let dtTo = $('#dtTo').val();

            offer_export(dtFrom, dtTo);
        });

        function offer_export(dtFrom, dtTo) {
            $.ajax({
                type: "POST",
                url: '{{ route('bonanzaOfferExport') }}',
                data: {
                    dtFrom: dtFrom,
                    dtTo: dtTo,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status == 1) {
                        $.notify(response.message, "info");
                        let downloadUrl = '{{ asset('storage/exports/bonanza_offer') }}' + '/' +
                            response
                            .filename;
                        window.location.href = downloadUrl;
                    } else {
                        $.notify('Something went wrong !', "error");
                    }
                }
            });
        }

        // function setFilter() {
        //     $('#datatable').DataTable().ajax.reload();
        // }

        // function resetFilter() {
        //     $("#select_status").val('').select2();

        //     var start = moment().subtract('Year').startOf('Year');
        //     var end = moment().subtract('Year').endOf('Year');
        //     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
        //         'MMMM D, YYYY'));
        //     $("#dtFrom").val(start.format('YYYY-MM-DD'));
        //     $("#dtTo").val(end.format('YYYY-MM-DD'));
        //     $('#datatable').DataTable().ajax.reload();
        // }

        let 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: 'type',
            //     name: 'type'
            // },
            {
                data: 'brand_name',
                name: 'brand_name'
            },
            {
                data: 'retailer_name',
                name: 'retailer_name'
            },
            {
                data: 'place',
                name: 'place'
            },
            {
                data: 'mobile_no',
                name: 'mobile_no'
            },
            {
                data: 'slab_amount',
                name: 'slab_amount'
            },
            {
                data: 'date_implemented',
                name: 'date_implemented'
            },
            {
                data: 'images',
                name: 'images',
                searchable: false,
                orderable: false,
            },
            {
                data: 'status',
                name: 'status',
                searchable: false,
                orderable: false,
            }
        ];
        let columnDefs = [{
            "width": "150",
            "targets": [5]
        }];

        getDataTable("{{ route('bonanzaOfferPaginate') }}", columns, columnDefs);

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

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

            $("#SMFilter").val('').change();
            $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
            $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
            $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');

            getCount();
            OfferDataTable.draw();
        });

        function getDataTable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            OfferDataTable = $('#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.SM = $('#SMFilter option:selected').val(),
                        d.RBM = $('#RBMFilter option:selected').val(),
                        d.ABM = $('#ABMFilter option:selected').val(),
                        d.BE = $('#BEFilter option:selected').val(),
                        d.dtFrom = $("#dtFrom").val(),
                        d.dtTo = $("#dtTo").val();
                        const urlParams = new URLSearchParams(window.location.search);
                        d.status = urlParams.get('status');
                    }
                },
                drawCallback: function(settings) {
                    new VenoBox({
                        selector: '.my-image-links',
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'rotating-plane'
                    });
                }
            });

            $('.filterstatus').on('click', function(e) {
                e.preventDefault();

                var status = $(this).data('status');

                addOrUpdateParam('status', status, $(this)); // Pass the clicked element
            });
        }
    });

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

        url.searchParams.set(key, value);

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

        $('.filterstatus').removeClass('active');

        clickedElement.addClass('active');

        OfferDataTable.draw();
    }
</script>