@extends('admin.layouts.app')
@section('title', \App\Helpers\TranslationHelper::translate('Clients'))

@section('crumb')
    <x-bread-crumb :breadcrumbs="[
    ['text'=> \App\Helpers\TranslationHelper::translate('Clients'),'link'=>route('admin.client.index')],
    ['text'=> \App\Helpers\TranslationHelper::translate('List')]
    ]" :button="[]">
    </x-bread-crumb>
@endsection

@push('admin_css')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">


@endpush

<style>
    /* خلفية الجدول بالكامل */
#kt_table_users {
    background-color: rgb(164, 34, 73) !important;
    color: #fff !important;
}

/* رأس الجدول */
#kt_table_users thead th {
    background-color: rgb(164, 34, 73) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* جسم الجدول */
#kt_table_users tbody td {
    background-color: rgb(164, 34, 73) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* لو عايز حتى الصفوف المتناوبة تكون بنفس اللون */
#kt_table_users tbody tr:nth-child(even),
#kt_table_users tbody tr:nth-child(odd) {
    background-color: rgb(164, 34, 73) !important;
    color: #fff !important;
}

</style>


@section('content')

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card-toolbar w-100 mb-7">


          <div class="d-flex justify-content-between w-100 data-kt-Customer-table-toolbar" style="direction: {{ App::getLocale() == 'ar' ? 'rtl' : 'ltr' }}; margin-bottom: 15px;">
    <div class="left-part">
        @if (auth()->guard('admin')->user())
            <a href="{{ route('admin.customer.create') }}" class="btn btn-dark mb-3" style=" background-color: rgb(164, 34, 73); color: #fff;">
                <i class="ki-duotone ki-plus fs-2 " style="color:#fff;"></i>
                {{ \App\Helpers\TranslationHelper::translate('Create Client') }}
            </a>
        @endif
    </div>
</div>
           <!-- DataTable Section -->
            <table class="table table-rounded align-middle border gy-5 gs-7 dataTable no-footer"
                   id="kt_table_users">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('Name') }}</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('email') }}</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('Phone') }}</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('image') }}</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('Created_at') }}</th>
                    <th>{{ \App\Helpers\TranslationHelper::translate('Actions') }}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>


    @include('admin.layouts.delete-modal',['action_message' => \App\Helpers\TranslationHelper::translate('This Item')])

@endsection

@push('admin_js')
<script src="{{asset('dashboard/assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

<script>
    // تهيئة datepicker
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true
    });
</script>

<script>

var table1 = $('#kt_table_users').DataTable({
    serverSide: true,
    orderCellsTop: true,
    fixedHeader: true,
    processing: true,
    language: {
        @if(App::getLocale() == 'ar')
        url: "//cdn.datatables.net/plug-ins/1.11.3/i18n/ar.json",
        @else
        url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json",
        @endif
    },
    processing: true,
    searching: false, // لتعطيل البحث الافتراضي
    dom: `<'row'<'col-sm-6 text-left'f><'col-sm-6 text-end '>>
          <'row'<'col-sm-12'tr>>
          <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
    buttons: ['print', 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'],
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    order: [[0, "desc"]],
    ajax: {
        url: '{{ route('admin.customer.table') }}',
        data: function (d) {
            d.search_value = $('#search').val(); // أخذ قيمة البحث
            d.category = $('#category').val(); 
            d.city_id = $('#city_id').val(); 
            d.created_at = $('#created_at').val(); 
        }
    },
    columns: [
        {data: 'id', name: 'id', defaultContent: '-'},
        {data: 'name', name: 'name', defaultContent: '-'},
        {data: 'email', name: 'email', defaultContent: '-', searchable: true},
        {data: 'phone', name: 'phone', defaultContent: '-'},
        {data: 'image', name: 'image', defaultContent: '-'},
        {data: 'created_at', name: 'created_at', defaultContent: '-'},
        {data: 'action', orderable: false, searchable: false, className: 'text-center'}
    ],
    createdRow: function (row, data, index) {
        $(row).attr('id', 'row-' + data['id']);
    }
});

$('#search').on('keyup', function() {
    table1.ajax.reload(); // إعادة تحميل البيانات بعد كل إدخال
});



$(document).on('change', '.ban-toggle', function () {
    let clientId = $(this).data('id');
    let isBanned = $(this).is(':checked') ? 1 : 0;  

    Swal.fire({
        title: isBanned ? '@lang('Are you sure you want to ban this client?')' : '@lang('Are you sure you want to unban this client?')',
        text: isBanned ? '@lang('This action will block the client and they will not be able to log in.')' : '@lang('This action will lift the ban and the client will be able to log in again.')',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: isBanned ? '@lang('Yes, ban it!')' : '@lang('Yes, unban it!')',
        cancelButtonText: '@lang('Cancel')',
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("admin.client.ban") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: clientId,
                    is_banned: isBanned
                },
                success: function (response) {
                    Swal.fire(
                        isBanned ? '@lang('Client Banned')' : '@lang('Client Unbanned')',
                        isBanned ? '@lang('The client has been banned successfully.')' : '@lang('The client has been unbanned successfully.')',
                        'success'
                    );
                    table1.ajax.reload();  
                }
            });
        } else {
            $(this).prop('checked', !isBanned);
        }
    });
});


</script>


<script>
    // التعامل مع التبديل بين التفعيل والإلغاء
$(document).on('change', '.active-toggle', function () {
    let clientId = $(this).data('id');
    let isActive = $(this).prop('checked') ? 1 : 0; // التحقق من حالة الـ checkbox

    $.ajax({
        url: '{{ route("admin.client.toggleActiveStatus") }}', // المسار الذي سيستقبل الطلب
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            id: clientId,
            is_active: isActive
        },
        success: function (response) {
            if (response.success) {
                Swal.fire(
                    'Success!',
                    response.is_active ? 'Client is activated.' : 'Client is deactivated.',
                    'success'
                );
            } else {
                Swal.fire('Error!', 'Failed to update client status.', 'error');
            }
        },
        error: function () {
            Swal.fire('Error!', 'Something went wrong, please try again later.', 'error');
        }
    });
});

</script>
<script src="{{ asset('dashboard/assets/js/delete-item.js') }}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>



@endpush