<x-app-layout>
    <div class="app-main flex-column flex-row-fluid" >
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-toolbar py-3 py-lg-6">
                <div class="app-container container-xxl d-flex flex-stack">
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">User Management</h1>
                        {{ Breadcrumbs::render('user-management.index') }}
                    </div>
                    @can('user-add')
                    <div class="d-flex align-items-center ml-auto gap-2 gap-lg-3">
                        <x-add-back-button onclick="window.location='{{route('admin.users.create')}}'">
                            <i class="ki-duotone ki-plus fs-2"></i>
                            <span class="indicator-label">{{ __('Add User') }}</span>
                        </x-add-back-button>
                    </div>
                    @endcan
                </div>
            </div>
            <div class="app-content flex-column-fluid">
                <div class="app-container  container-xxl ">
                    <div class="pb-0 sm:p-8 bg-white shadow sm:rounded-lg">
                        <section>
                            <!--begin::Table-->
                            @livewire('usertable')
                            <!--end::Table-->
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end:::Main-->
    <x-slot name="scripts">
        <script>
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.delete').on('click', function () {
                var userId = $(this).data('id');
                var userName = $(this).data('name');

                Swal.fire({
                    title: 'Confirm Deletion',
                    text: 'Are you sure you want to delete user "' + userName + '"?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true,
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    },
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = '{{ route("admin.users.destroy", ":id") }}';
                        url = url.replace(':id', userId); // Use userId here

                        $.ajax({
                            url: url,
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                '_method': 'DELETE'
                            },
                            success: function(data) {
                                if (data['alert-type'] == 'success') {
                                    toastr.success(data.message);
                                    setTimeout(function () {
                                        location.reload(); // Reload the page after deletion
                                    }, 1000);
                                }
                            },
                            error: function(data) {
                                Swal.fire({
                                    title: 'Oops...',
                                    html:
                                        'Report to admin with the following message <br/>' +
                                        data.responseJSON.message,
                                    icon: 'error',
                                })
                            }
                        });
                    }
                });
            });
        });
        </script>
    </x-slot>
</x-app-layout>
