@extends('layouts.admin')
@section('content')
    <div class="main-card">
        @include('admin.partials.page-header', [
            'icon' => 'bi bi-bag',
            'title' => 'G2G Listing',
            'subtitle' => 'G2G Listing Products',
        
            'show_import' => true,
            'import_id' => 'btnImportProducts',
        
            'show_export' => true,
            'export_id' => 'btnExportProducts',
        
            'show_refresh' => true,
        ])

        @include('admin.partials.advanced-filter', [
            'filters' => [
                [
                    'col' => 'col-md-3',
                    'text_id' => 'brand-filter-text',
                    'menu_id' => 'brandFilter',
                    'placeholder' => 'Select Brand',
                    'search' => true,
                    'options' => \App\Helpers\Helper::brands(),
                ],
                [
                    'col' => 'col-md-2',
                    'text_id' => 'status-filter-text',
                    'menu_id' => 'statusFilterMenu',
                    'placeholder' => 'Select Status',
                    'search' => true,
                    'options' => [
                        ['label' => 'Available', 'value' => '1'],
                        ['label' => 'Unavailable', 'value' => '0'],
                    ],
                ],
            ],
        ])

        <div class="table-responsive-custom">
            <table id="productTable" class="table modern-lead-table align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Brand</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Currency</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th width="120">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            window.productTable = initModernDataTable({
                tableId: '#productTable',
                ajax: {
                    url: "{{ route('admin.products.data') }}",
                    data: function(d) {
                        d.brand_id = vsGetValue('brandFilter') || "{{ request('brand') }}";
                        d.status = vsGetValue('statusFilterMenu');
                    }
                },
                columns: [{
                        data: 'name'
                    },
                    {
                        data: 'brand'
                    },
                    {
                        data: 'category'
                    },
                    {
                        data: 'retail_value'
                    },
                    {
                        data: 'price_currency'
                    },
                    {
                        data: 'status_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        $(document).on('click', '.deleteProduct', function() {

            let id = $(this).data('id');
            let row = $(this).closest('tr');
            confirmDelete(function() {
                showLoader('Deleting Product...');
                $.ajax({
                    url: "{{ route('admin.products.delete', ':id') }}"
                        .replace(':id', id),
                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        Swal.close();
                        showSuccess(
                            'Deleted!',
                            response.message
                        );
                        const dt = window.productTable.getInstance();
                        dt.row(row).remove().draw(false);
                    },
                    error: function(xhr) {
                        Swal.close();
                        showError(
                            'Failed!',
                            xhr.responseJSON?.message ??
                            'Something went wrong'
                        );
                    }
                });
            });
        });

        let importRunning = false;
        let statusInterval = null;

        function updateImportUI(running) {
            importRunning = running;

            if (running) {
                $('#btnImportProducts').prop('disabled', true);
                $('#btnImportProducts .spinner-border').removeClass('d-none');
                $('#btnImportProducts .btn-text').html('Importing...');
                $('#btnStopImport').removeClass('d-none');
            } else {
                $('#btnImportProducts').prop('disabled', false);
                $('#btnImportProducts .spinner-border').addClass('d-none');
                $('#btnImportProducts .btn-text').html('<i class="bi bi-download"></i> Import');
                $('#btnStopImport').addClass('d-none');
            }
        }

        function startStatusPolling() {
            if (statusInterval) {
                return;
            }

            statusInterval = setInterval(function() {
                checkImportStatus();
            }, 5000);
        }

        function stopStatusPolling() {

            if (statusInterval) {
                clearInterval(statusInterval);
                statusInterval = null;
            }
        }

        function checkImportStatus() {
            $.get(
                "{{ route('admin.products.import.status') }}",
                function(res) {
                    let wasRunning = importRunning;
                    updateImportUI(res.running);
                    if (wasRunning && !res.running) {
                        stopStatusPolling();
                        if (window.productTable) {
                            window.productTable.reload();
                        }
                        showSuccess(
                            'Success!',
                            'Import Completed'
                        );
                    }
                    if (res.running && !statusInterval) {
                        startStatusPolling();
                    }
                }
            );
        }

        $('#btnImportProducts').on('click', function() {
            $.post("{{ route('admin.products.import') }}", {
                    _token: "{{ csrf_token() }}"
                },
                function(res) {
                    if (res.status) {
                        updateImportUI(true);
                        startStatusPolling();
                        showSuccess(
                            'Success!',
                            'Import Started'
                        );
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: res.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                }
            );
        });

        $('#btnStopImport').on('click', function() {
            $.post(
                "{{ route('admin.products.import.stop') }}", {
                    _token: "{{ csrf_token() }}"
                },
                function(res) {
                    Swal.fire({
                        icon: 'info',
                        title: res.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                    updateImportUI(false);
                    stopStatusPolling();
                }
            );
        });
        checkImportStatus();
    </script>
@endpush