@extends('admin.layouts.master')
@section('css')
    <!-- Internal Data table css -->
    @include('admin.helper.tablecss')
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">المستخدمين المحذوفين</h4>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.users.index') }}" class="btn btn-primary">
                <x-lucide-arrow-right width="20" height="20" /> العودة للمستخدمين
            </a>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <!-- row -->
    <div id='gameId'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <form id="filters">
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    تصفية البيانات
                                </div>
                                <div class="row row-sm">
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">اسم المستخدم</label>
                                        <input type="text" id="nameFilter" class="form-control" placeholder="أدخل الاسم">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">البريد الإلكتروني</label>
                                        <input type="text" id="emailFilter" class="form-control"
                                            placeholder="أدخل البريد الإلكتروني">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0"> رقم الهاتف </label>
                                        <input type="text" id="mobileFilter" class="form-control">
                                    </div>
                                    @include('admin.filters.curr')
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h4 class="card-title mg-b-0">المستخدمين المحذوفين</h4>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="trashedUsers">
                                    <thead>
                                        <tr>
                                            <th> id</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>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            $(document).ready(function() {
                const filterdata = ['name', 'email', 'currency', 'mobile'];
                const tablehead = ['id', 'name', 'curr', 'vendor', 'email', 'mobile', 'balance', 'deleted_at_col', 'action'];
                
                const table = initDatatable(
                    '#trashedUsers',
                    "{{ route('admin.users.trashed') }}",
                    tablehead, {},
                    filterdata
                );

                $('#nameFilter, #mobileFilter, #emailFilter, #currencyFilter')
                    .on('keyup change', function() {
                        table.draw();
                    });

                const TOKEN = '{{ csrf_token() }}';

                // استعادة المستخدم
                $('#trashedUsers tbody').on('click', '.restore-user', function() {
                    const id = $(this).data('id');
                    
                    Swal.fire({
                        title: 'هل تريد استعادة هذا المستخدم؟',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#28a745',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'نعم، استعادة',
                        cancelButtonText: 'إلغاء',
                    }).then((result) => {
                        if (!result.isConfirmed) return;
                        
                        Swal.fire({
                            title: 'جارٍ الاستعادة...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading(),
                        });

                        $.ajax({
                            url: "{{ url('admin/users/restore') }}/" + id,
                            type: 'POST',
                            data: { _token: TOKEN },
                            success: function(res) {
                                if (res.err === false) {
                                    Swal.fire('تم', res.msg, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ', res.msg || 'حدث خطأ', 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ', 'حدث خطأ أثناء الاستعادة', 'error');
                            }
                        });
                    });
                });

                // حذف نهائي
                $('#trashedUsers tbody').on('click', '.force-delete-user', function() {
                    const id = $(this).data('id');
                    
                    Swal.fire({
                        title: 'تحذير!',
                        text: 'هل تريد حذف هذا المستخدم نهائياً؟ لا يمكن التراجع عن هذا الإجراء!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'نعم، حذف نهائي',
                        cancelButtonText: 'إلغاء',
                    }).then((result) => {
                        if (!result.isConfirmed) return;
                        
                        Swal.fire({
                            title: 'جارٍ الحذف...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading(),
                        });

                        $.ajax({
                            url: "{{ url('admin/users/force-delete') }}/" + id,
                            type: 'DELETE',
                            data: { _token: TOKEN },
                            success: function(res) {
                                if (res.err === false) {
                                    Swal.fire('تم', res.msg, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ', res.msg || 'حدث خطأ', 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ', 'حدث خطأ أثناء الحذف', 'error');
                            }
                        });
                    });
                });
            });
        });
    </script>
@endsection