{{-- Shared Ad Images Index View --}}
{{-- Variables needed:
    - $routePrefix: Route prefix (e.g., 'admin.settings.ads-images' or 'vendor.ads-images')
    - $vendors: Collection of vendors (optional, for admin only)
    - $showVendorColumn: Boolean to show/hide vendor column and filter
    - $categories: Collection of categories (for category filter)
--}}

@php
    $showVendorColumn = $showVendorColumn ?? false;
    $vendors = $vendors ?? collect();
    $categories = $categories ?? collect();
@endphp

@section('css')
    @include('admin.helper.tablecss')
@endsection

@section('content')
    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @elseif (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>قائمة الصور</div>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3">
                @if ($showVendorColumn && $vendors->count())
                    <div class="col-lg-3 mt-2">
                        <label class="mt-0">التاجر</label>
                        <select id="vendorFilter" class="form-control select2">
                            <option value="">كل التجار</option>
                            @foreach ($vendors as $vendor)
                                <option value="{{ $vendor->id }}">
                                    {{ $vendor->name() }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div class="col-lg-3 mt-2">
                    <label class="mt-0">القسم</label>
                    <select id="categoryFilter" class="form-control select2">
                        <option value="all">الكل</option>
                        <option value="home">الرئيسية</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-outline-primary me-2" id="btnApplyFilter">تطبيق الفلتر</button>
                    <button class="btn btn-outline-secondary" id="btnClearFilter">مسح</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped" id="adsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>المعاينة</th>
                            <th>العنوان</th>
                            <th>الرابط</th>
                            @if ($showVendorColumn)
                                <th>التاجر</th>
                            @endif
                            <th>القسم</th>
                            <th>الترتيب</th>
                            <th>الحالة</th>
                            <th>إجراءات</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            const tablehead = [
                'id',
                'preview',
                'title',
                'link',
                @if ($showVendorColumn)
                    'vendor',
                @endif
                'category',
                'sort',
                'status',
                'actions'
            ];

            const filterOptions = ['category'];
            @if ($showVendorColumn)
                filterOptions.push('vendor');
            @endif

            const table = initDatatable(
                '#adsTable',
                "{{ route($routePrefix . '.index') }}",
                tablehead, {},
                filterOptions
            );

            // Filter actions
            $('#btnApplyFilter').on('click', function() {
                table.draw();
            });
            $('#btnClearFilter').on('click', function() {
                $('#categoryFilter').val('all').trigger('change');
                @if ($showVendorColumn)
                    $('#vendorFilter').val('').trigger('change');
                @endif
                table.draw();
            });
            $('.select2').select2();

            // Toggle active
            $('#adsTable tbody').on('click', '.toggle', function() {
                const id = $(this).data('id');
                const url = "{{ route($routePrefix . '.toggle', ':id') }}".replace(':id', id);
                Swal.fire({
                    title: 'تبديل حالة الإعلان؟',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    Swal.fire({
                        title: 'جارٍ التنفيذ...',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                    $.post(url, {
                            _token: "{{ csrf_token() }}"
                        })
                        .done(() => {
                            table.ajax.reload(null, false);
                            Swal.close();
                        })
                        .fail(() => {
                            Swal.fire('خطأ', 'تعذر تبديل الحالة', 'error');
                        });
                });
            });

            // Delete ad
            $('#adsTable tbody').on('click', '.delete', function() {
                const id = $(this).data('id');
                const url = "{{ route($routePrefix . '.destroy', ':id') }}".replace(':id', id);
                Swal.fire({
                    title: 'تأكيد حذف الصورة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'حذف',
                    cancelButtonText: 'إلغاء'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    Swal.fire({
                        title: 'جارٍ الحذف...',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                    $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                _method: 'DELETE'
                            }
                        })
                        .done(() => {
                            table.ajax.reload(null, false);
                            Swal.close();
                        })
                        .fail(() => {
                            Swal.fire('خطأ', 'تعذر حذف الصورة', 'error');
                        });
                });
            });
        });
    </script>
@endsection