@extends('admin.layouts.master')

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
            <h2 class="main-content-title tx-24 mg-b-1 mg-b-lg-1">إدارة الإعلانات المنبثقة</h2>
            <p class="mg-b-0 tx-13 text-muted">إضافة/تعديل/حذف وترتيب الإعلانات المنبثقة للمستخدمين</p>
        </div>
        <div class="right-content">
            <a href="{{ route('admin.settings.popup-ads.create') }}" class="btn btn-primary">
                <x-lucide-plus width="20" height="20" /> إضافة إعلان جديد
            </a>
        </div>
    </div>
@endsection

@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="table-responsive">
                <table class="table table-striped" id="popupAdsTable">
                    <thead>
                        <tr>
                            <th>العنوان</th>
                            <th>المعاينة</th>
                            <th>الرابط</th>
                            <th>الحالة</th>
                            <th>الأولوية</th>
                            <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 = [
                'title',
                'preview',
                'link',
                'status',
                'priority',
                'target_audience',
                'starts_at',
                'ends_at',
                'actions'
            ];

            const table = initDatatable(
                '#popupAdsTable',
                "{{ route('admin.settings.popup-ads.index') }}",
                tablehead
            );

            // Toggle active
            $('#popupAdsTable tbody').on('click', '.toggle', function() {
                const id = $(this).data('id');
                const url = "{{ route('admin.settings.popup-ads.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
            $('#popupAdsTable tbody').on('click', '.delete', function() {
                const id = $(this).data('id');
                const url = "{{ route('admin.settings.popup-ads.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