<?php $__env->startSection('content'); ?>
    <div class="card">
        <div class="card-body">
            <form method="post" id="searchForm">
                <?php echo csrf_field(); ?>
                <?php echo method_field('post'); ?>
                <div class="row">
                    <?php if($reseller): ?>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Select Manager</label>
                                <select name="reseller" id="reseller" class="form-control form-control-sm select2">
                                    <option value="">Select One</option>
                                    <?php $__currentLoopData = $reseller; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($r->id); ?>"><?php echo e($r->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if($poplist): ?>
                        <div class="col-md-4">
                            <label> Select POP </label>
                            <select name="pop" id="pop" class="form-control form-control-sm select2">
                                <option value=""> Select One</option>
                                <?php $__currentLoopData = $poplist; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($r->id); ?>"><?php echo e($r->popname); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                    <?php else: ?>
                        <div class="col-md-4">
                            <label> Select POP </label>
                            <select name="pop" id="pop" class="form-control form-control-sm select2">
                                <option value=""> Select One</option>
                            </select>
                        </div>
                    <?php endif; ?>
                    <div class="col-md-4">
                        <div class="form-group float-right mt-4">
                            <button class="btn btn-primary" type="submit" id="searchBtn"><i class="fa fa-search"></i> Search</button>
                            <button class="btn btn-info" type="reset" id="reset">Reset</button>

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

    <div class="row">
        <div id="result" class="table-responsive">
            <!-- Table will be loaded here -->
        </div>
    </div>

    <style>
        div#processing {
            display: none;
        }
        div#processing div {
            background: rgba(0, 0, 0, .5);
            position: fixed;
            width: 100vw;
            height: 100vh;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dt-buttons {
            margin-bottom: 10px;
        }

        .dataTables_filter {
            padding-top: 10px;
            padding-right: 10px;
        }
        .dataTables_length select {
            width: 60px !important;  /* Adjust this value as needed */
            min-width: auto;
            display: inline-block;
            margin: 0 5px;
            padding-top: 10px;
            padding-left: 10px;
        }
        .br-spacer {
            height: 10px;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('ajax'); ?>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#reset').click(function() {
            $('#result').html('');
            $('#pop').html('<option value="all">Select One</option>');
        });

        $('#searchBtn').on('click', function(e) {
            e.preventDefault();
            $("#loader").show();

            $.ajax({
                type: 'get',
                url: '<?php echo e(route('oflineCustomerResult')); ?>',
                data: $('#searchForm').serialize(),
                success: function(result) {
                    $('#result').html(result);
                    initializeDataTable();
                    $("#loader").hide();
                },
                error: function(xhr, status, error) {
                    $("#loader").hide();
                    var errorMessage = xhr.responseJSON?.message || "An error occurred while processing your request.";
                    toastr.error(errorMessage, "Error");
                }
            });
        });

        $('#reseller').on('change', function(e) {
            e.preventDefault();
            $('body').append('<div class="hidden" id="processing">processing.....</div>');

            $.ajax({
                type: 'get',
                url: '<?php echo e(route('getResellerPopList')); ?>',
                data: {
                    id: $(this).val()
                },
                success: function(result) {
                    $('#pop').html(result);
                    $('#processing').remove();
                }
            });
        });

        function initializeDataTable() {
            // Destroy any existing DataTable instance first
            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().destroy();
            }

            var table = $('#dataTable').DataTable({
                dom: '<"top"lfB><"br-spacer">rt<"bottom"ip><"clear">',
                buttons: [
                    {
                        extend: 'csv',
                        text: '<i class="fa fa-file-csv"></i> CSV',
                        className: 'btn btn-success btn-sm',
                        title: 'Offline_Customers_' + new Date().toISOString().slice(0, 10),
                        exportOptions: {
                            columns: ':visible',
                            modifier: {
                                page: 'all'
                            }
                        }
                    }
                ],
                responsive: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                pageLength: 25,
                initComplete: function() {
                    // Hide the default DataTables button and use our custom button
                    $('.dt-buttons').hide();
                }
            });

            // Trigger CSV export when our custom button is clicked
            $(document).on('click', '#downloadCsv', function() {
                table.button('.buttons-csv').trigger();
            });
        }
    });
</script>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/extranet/radius-circle/resources/views/clients/onlineofline/oflineCustomer.blade.php ENDPATH**/ ?>