@extends('admin.layouts.app')

@section('title', __('dashboard.banners'))

@section('content')
<x-admin.page-header title="{{ __('dashboard.banners') }}" :breadcrumbs="[__('dashboard.banners') => route('admin.banners.index')]" />

<div class="row">
    <div class="col-lg-12 p-0">
        <div class="card">
            <div class="card-header pb-0 card-no-border">
                <x-add route="{{ route('admin.banners.create') }}" label="{{ __('dashboard.add_banner') }}"/>

                <div class="filter-section">
                    <div class="row g-3 align-items-end">
                        <div class="col-12">
                            <x-report name="report"/>
                        </div>
                        <div class="col-4">
                            <x-status-filter name="is_active" :enum="\App\Enums\StatusEnum::class" />
                        </div>
                        <x-select col="2" name="orderBy-filter" label="{{ __('dashboard.orderBy') }}" :options="\App\Enums\OrderByEnum::labels()" />
                        <x-date-range name="range-date" label="{{ __('dashboard.date_range') }}" />
                        <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                            <div id="export-buttons-wrapper"></div>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <x-bulk />
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive custom-scrollbar server-side-table">
                    {!! $dataTable->table(['class' => 'table table-bordered', 'id' => 'banners-table']) !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    {!! $dataTable->scripts() !!}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const table = $('#banners-table').DataTable();
            $('.report').on('click', function() {
                $('.report').removeClass('active');
                $(this).addClass('active');
                table.draw();
            });
            $('.status-filter').on('click', function() { table.draw(); });
            $('#orderBy-filter').on('change', function() { table.draw(); });
            $('#range-date').on('change', function() { table.draw(); });
            initDataTableFilters({
                tableId: 'banners-table',
                csrf: '{{ csrf_token() }}',
                filters: ['#orderBy-filter', '#range-date'],
                buttons: { apply: '#apply-filters', clear: '#clear-filters' },
                selectAll: '#check-all',
                bulk: { actions: '#bulk-actions', delete: '#bulk-delete', activate: '#bulk-activate', deactivate: '#bulk-deactivate' },
                routes: { delete: '{{ route("admin.banners.bulkDelete") }}', status: '{{ route("admin.banners.bulkStatus") }}' }
            });
            const dtSearch = document.querySelector('#banners-table_filter');
            const target = document.getElementById('datatable-search-wrapper');
            if (dtSearch && target) { target.appendChild(dtSearch); dtSearch.classList.remove('text-end'); }
        });
    </script>
@endpush
