@extends('admin.templates.layout')

@section('head')
    <link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        #dataTable thead th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .4px;
            color: #64748b;
            font-weight: 600;
            background: #f8fafc;
            white-space: nowrap;
        }
        #dataTable td { font-size: 13px; vertical-align: middle; }
        #dataTable img { object-fit: contain; background: #fff; }

        /* ─── Export button ───────────────────────────────── */
        .btn-export {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 160px;
            height: 38px;
            padding: 0 20px;
            font-size: 13.5px;
            font-weight: 600;
            line-height: 1;
            border-radius: 8px;
            transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
        }

        /* Icon slot — fixed size so nothing shifts when icon ↔ spinner swap */
        .btn-export .icon-slot {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .btn-export .icon-slot i {
            font-size: 16px;
            line-height: 1;
            transition: opacity .15s ease;
        }
        .btn-export .icon-slot .spin {
            position: absolute;
            inset: 0;
            margin: auto;
            animation: btn-spin .7s linear infinite;
            transform-origin: center;
            opacity: 0;
            transition: opacity .15s ease;
        }

        .btn-export .label {
            transition: opacity .15s ease;
            white-space: nowrap;
        }

        /* Loading state */
        .btn-export.is-loading .icon-slot i { opacity: 0; }
        .btn-export.is-loading .icon-slot .spin { opacity: 1; }
        .btn-export.is-loading,
        .btn-export.is-done {
            pointer-events: none;
        }

        /* Done state */
        .btn-export.is-done {
            background-color: #16a34a;
            border-color: #16a34a;
            color: #fff;
        }

        @keyframes btn-spin {
            to { transform: rotate(360deg); }
        }
    </style>
@endsection

@section('content')
    <div class="row"><div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
                <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                <div class="d-flex gap-2 align-items-center">
                    <select id="publishFilter" class="form-select form-select-sm" style="width:180px;">
                        <option value="">All Marketplace</option>
                        <option value="published">Published</option>
                        <option value="unpublished">Unpublished</option>
                        <option value="not_in_delivery">Not in Delivery</option>
                    </select>
                    <select id="scanFilter" class="form-select form-select-sm" style="width:160px;">
                        <option value="">All Scan</option>
                        <option value="generated">Generated</option>
                        <option value="collected">Collected</option>
                        <option value="verified">Verified</option>
                    </select>

                    <button id="exportBtn" type="button" class="btn btn-primary btn-export">
                        <span class="icon-slot">
                            <i class="ri-download-2-line"></i>
                            <svg class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                 stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                <path d="M21 12a9 9 0 1 1-6.2-8.5" />
                            </svg>
                        </span>
                        <span class="label">Export</span>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-nowrap table-hover align-middle" id="dataTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>QR</th>
                                <th>Product</th>
                                <th>Order</th>
                                <th>Merchant</th>
                                <th>Cargo</th>
                                <th>Transporter</th>
                                <!-- <th>Destination</th> -->
                                <th>Delivery</th>
                                <th>Scan</th>
                                <th>Marketplace</th>
                                <th>Verified At</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div></div>
@endsection

@section('script')
    <script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function () {
            $('#scanFilter').select2({ minimumResultsForSearch: -1 });
            $('#publishFilter').select2({ minimumResultsForSearch: -1 });

            const table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("admin.products.list") }}',
                    data: d => {
                        d.scan_status = $('#scanFilter').val();
                        d.publish     = $('#publishFilter').val();
                        // Explicitly forward DataTables' own search box value
                        d.search      = { value: $('.dataTables_filter input').val() || '' };
                    }
                },
                columns: [
                    { data: 'DT_RowIndex',        searchable: false, orderable: false, width: '40px' },
                    { data: 'qr_preview',         searchable: false, orderable: false, width: '60px' },
                    { data: 'product_col',        name: 'reference_id' },
                    { data: 'order_col',          searchable: false, orderable: false },
                    { data: 'merchant_col',       searchable: false, orderable: false },
                    { data: 'cargo_col',          searchable: false, orderable: false },
                    { data: 'transporter_col',    searchable: false, orderable: false },
                    //{ data: 'destination_col',    searchable: false, orderable: false },
                    { data: 'delivery_col',       searchable: false, orderable: false },
                    { data: 'scan_status_col',    searchable: false, orderable: false },
                    { data: 'marketplace_col',    searchable: false, orderable: false },
                    { data: 'verified_at_col',    searchable: false, orderable: false },
                    { data: 'action',             searchable: false, orderable: false, className: 'text-end' }
                ],
                order: [[0, 'desc']],
                pageLength: 10
            });

            $('#scanFilter, #publishFilter').on('change', () => table.ajax.reload());

            // ─── Export button state machine ───
            const $btn   = $('#exportBtn');
            const $label = $btn.find('.label');

            let resetTimer = null;

            function setState(state) {
                clearTimeout(resetTimer);
                $btn.removeClass('is-loading is-done');

                if (state === 'loading') {
                    $btn.addClass('is-loading').prop('disabled', true);
                    $label.text('Generating...');
                } else if (state === 'done') {
                    $btn.addClass('is-done').prop('disabled', true);
                    $label.text('Downloaded');
                    $btn.find('.icon-slot i').attr('class', 'ri-check-line');
                    resetTimer = setTimeout(() => setState('idle'), 1800);
                } else {
                    $btn.prop('disabled', false);
                    $label.text('Export');
                    $btn.find('.icon-slot i').attr('class', 'ri-download-2-line');
                }
            }

            $btn.on('click', function () {
                setState('loading');

                const params = new URLSearchParams();
                if (table.search())            params.set('search', table.search());
                if ($('#scanFilter').val())    params.set('scan_status', $('#scanFilter').val());
                if ($('#publishFilter').val()) params.set('publish', $('#publishFilter').val());

                const url = '{{ route("admin.products.export") }}' +
                            (params.toString() ? '?' + params.toString() : '');

                // Download via hidden iframe — page stays put, browser handles the file
                const iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                iframe.src = url;

                iframe.onload = function () {
                    setState('done');
                    setTimeout(() => {
                        if (iframe.parentNode) document.body.removeChild(iframe);
                    }, 60000);
                };

                iframe.onerror = function () {
                    setState('idle');
                    toastr.error('Export failed. Please try again.');
                    if (iframe.parentNode) document.body.removeChild(iframe);
                };

                document.body.appendChild(iframe);

                // Safety net — if onload never fires, reset after 20s
                resetTimer = setTimeout(() => {
                    if ($btn.hasClass('is-loading')) setState('done');
                }, 20000);
            });
        });
    </script>
@endsection