@extends('layouts.admin')

@section('content')
    <div class="main-card">
        @include('admin.partials.page-header', [
            'icon' => 'bi bi-box-seam',
            'title' => 'Brands',
            'subtitle' => ' Relograde Brands',
        
            'show_import' => true,
            'import_id' => 'btnImportProducts',
        
            'show_export' => true,
            'export_id' => 'btnExportProducts',
        
            'show_refresh' => true,
        ])

        @include('admin.partials.advanced-filter', [
            'filters' => [],
        ])

        <div class="table-responsive-custom">
            <table id="brandTable" class="table modern-lead-table align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Brand Name</th>
                        <th>Total Products</th>
                        <th>Created At</th>
                        <th width="150">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            initModernDataTable({
                tableId: '#brandTable',
                ajax: {
                    url: "{{ route('admin.brands.data') }}",
                },
                columns: [
                    {
                        data: 'name'
                    },
                    {
                        data: 'products_count'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endpush