@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <form method="get" id="offlineSearchForm">
                <div class="row">
                    @if ($reseller)
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Select Manager</label>
                                <select name="reseller" id="offlineReseller" class="form-control form-control-sm select2">
                                    <option value="">Select One</option>
                                    @foreach ($reseller as $r)
                                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    <div class="col-md-3">
                        <label> Select POP </label>
                        <select name="pop" id="offlinePop" class="form-control form-control-sm select2">
                            <option value=""> Select One</option>
                            @if ($poplist)
                                @foreach ($poplist as $r)
                                    <option value="{{ $r->id }}">{{ $r->popname }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Select Area</label>
                            <select name="area" id="offlineArea" class="form-control form-control-sm select2">
                                <option value="">Select One</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 d-flex justify-content-end align-items-end mt-3">
                    <div class="form-group float-right mt-4">
                        <button class="btn btn-primary" type="submit" id="offlineSearchBtn"><i class="fa fa-search"></i> Search</button>
                        <button class="btn btn-info" type="reset" id="offlineReset">Reset</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div id="offlineResult" class="table-responsive">
            <!-- Result fragment loads here -->
        </div>
    </div>

    <style>
        .dt-buttons { margin-bottom: 10px; }
        .dataTables_filter { padding-top: 10px; padding-right: 10px; }
        .dataTables_length select {
            width: 60px !important;
            min-width: auto;
            display: inline-block;
            margin: 0 5px;
        }
        .br-spacer { height: 10px; }
    </style>
@endsection

@section('ajax')
    <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">
    <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() {
            $('#offlineReset').on('click', function() {
                $('#offlineResult').html('');
                $('#offlinePop').val('').trigger('change');
                $('#offlineArea').html('<option value="">Select One</option>');
            });

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

                $.ajax({
                    type: 'get',
                    url: '{{ route('offlineCustomerListResult') }}',
                    data: $('#offlineSearchForm').serialize(),
                    success: function(result) {
                        $('#offlineResult').html(result);
                        initializeOfflineDataTable();
                        $("#loader").hide();
                    },
                    error: function(xhr) {
                        $("#loader").hide();
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) || "An error occurred while processing your request.";
                        toastr.error(msg, "Error");
                    }
                });
            });

            $('#offlineReseller').on('change', function() {
                $('#offlineArea').html('<option value="">Select One</option>');
                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerPopList') }}',
                    data: { id: $(this).val() },
                    success: function(result) {
                        $('#offlinePop').html(result);
                    }
                });
            });

            $('#offlinePop').on('change', function() {
                var popId = $(this).val();
                if (!popId || popId === 'all') {
                    $('#offlineArea').html('<option value="">Select One</option>');
                    return;
                }
                $.ajax({
                    type: 'get',
                    url: '{{ route('getPopWiseAreaList') }}',
                    data: { id: popId },
                    success: function(result) {
                        $('#offlineArea').html(result);
                    }
                });
            });

            function initializeOfflineDataTable() {
                if ($.fn.DataTable.isDataTable('#offlineDataTable')) {
                    $('#offlineDataTable').DataTable().destroy();
                }

                var table = $('#offlineDataTable').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' } },
                        action: function(e, dt, button, config) {
                            var csv = dt.buttons.exportData(config.exportOptions);
                            var csvContent = '';
                            if (csv.header.length > 0) {
                                csvContent += csv.header.join(',') + '\n';
                            }
                            csvContent += csv.body.join('\n');
                            var finalCsv = '' + csvContent;
                            var blob = new Blob([finalCsv], { type: 'text/csv;charset=utf-8;' });
                            var link = document.createElement('a');
                            link.setAttribute('href', URL.createObjectURL(blob));
                            var filename = config.title ? config.title.replace(/[^a-z0-9]/gi, '_') : 'Offline_Customers';
                            link.setAttribute('download', filename + '.csv');
                            link.style.visibility = 'hidden';
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }
                    }],
                    responsive: true,
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    pageLength: 25,
                    initComplete: function() {
                        $('.dt-buttons').hide();
                    }
                });

                $(document).off('click', '#offlineDownloadCsv').on('click', '#offlineDownloadCsv', function() {
                    table.button('.buttons-csv').trigger();
                });
            }
        });
    </script>
@endsection