@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; }
        .filter-select .select2-container { width: 100% !important; }
        .filter-select .select2-selection--single { height: 34px; border: 1px solid #e2e8f0; border-radius: 8px; }
        .filter-select .select2-selection--single .select2-selection__rendered { line-height: 32px; font-size: 13px; color: #334155; }
        .filter-select .select2-selection--single .select2-selection__arrow { height: 32px; }
        .btn-clear-filters {
            height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500;
            color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
            border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
            transition: all .15s ease; white-space: nowrap;
        }
        .btn-clear-filters:hover { color: #1d4ed8; background: #e0e9ff; border-color: #c7d6f8; }
    </style>
@endsection

@section('content')
    <div class="row"><div class="col-lg-12">
        <div class="card">
            <div class="card-header py-3 border-bottom">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                    <button type="button" id="clearFilters" class="btn-clear-filters">
                        <i class="ri-refresh-line"></i> Clear Filters
                    </button>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4 col-md-6 filter-select">
                        <select id="merchantFilter" class="form-select form-select-sm">
                            <option value="">All Merchants</option>
                            @foreach($merchants as $m)
                                <option value="{{ $m->id }}" {{ (string)$merchant_filter === (string)$m->id ? 'selected' : '' }}>
                                    {{ $m->company_name ?: $m->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-6 filter-select">
                        <select id="statusFilter" class="form-select form-select-sm">
                            <option value="published"   {{ $status_filter === 'published'   ? 'selected' : '' }}>Published</option>
                            <option value="unpublished" {{ $status_filter === 'unpublished' ? 'selected' : '' }}>Unpublished</option>
                            <option value="all"         {{ $status_filter === 'all'         ? 'selected' : '' }}>All</option>
                        </select>
                    </div>
                </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>Product</th>
                                <th>Merchant</th>
                                <th>Variants</th>
                                <th>Qty</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Created</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 () {
            $('#merchantFilter, #statusFilter').select2({ minimumResultsForSearch: 0, width: '100%' });

            const table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("admin.marketplace.list") }}',
                    data: d => {
                        d.merchant_filter = $('#merchantFilter').val();
                        d.status_filter   = $('#statusFilter').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex',  searchable: false, orderable: false, width: '40px' },
                    { data: 'product_col',  name: 'name' },
                    { data: 'merchant_col', searchable: false, orderable: false },
                    { data: 'variants_col', searchable: false, orderable: false },
                    { data: 'qty_col',      searchable: false, orderable: false },
                    { data: 'amount_col',   searchable: false, orderable: false },
                    { data: 'status_badge', searchable: false, orderable: false },
                    { data: 'created_at',   name: 'created_at' },
                    { data: 'action',       searchable: false, orderable: false, className: 'text-end' }
                ],
                order: [[7, 'desc']],
                pageLength: 10
            });

            $('#merchantFilter, #statusFilter').on('change', () => table.ajax.reload());

            $('#clearFilters').on('click', function () {
                $('#merchantFilter').val('').trigger('change.select2');
                $('#statusFilter').val('published').trigger('change.select2');
                if (window.history.replaceState) {
                    window.history.replaceState({}, document.title, window.location.origin + window.location.pathname);
                }
                table.ajax.reload();
                const $btn = $(this);
                const orig = $btn.html();
                $btn.html('<i class="ri-check-line"></i> Cleared').prop('disabled', true);
                setTimeout(() => $btn.html(orig).prop('disabled', false), 900);
            });
        });
    </script>
@endsection