@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Users')
@section('content')

    <div class="card">

        <div class="flex justify-between items-center gap-3 mb-5">
            <h2 class="text-2xl font-semibold">Requested Author List</h2>
        </div>

        <x-backend::table-wrapper>
            <table>
                <thead>
                    <tr>
                        <th class="text-left">Name</th>
                        <th class="text-left">Email</th>
                        <th class="text-left">Phone</th>
                        <th class="text-left">Username</th>
                        <th class="text-left">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <img class="w-12 h-12 rounded-full" src="{{ $user->getFirstMediaUrl('avatar') }}">
                                    <div>
                                        <h3>{{ $user->name }}</h3>
                                        {{ $user->getMeta('designation') }}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">{{ $user->email }}</td>
                            <td class="px-6 py-4">{{ $user->getMeta('phone') ?? 'N/A' }}</td>
                            <td class="px-6 py-4">{{ $user->username }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">

                                    @include('backend::components.show-button', [
                                        'route' => route('admin.requested.author.show', $user->id),
                                    ])

                                    @include('backend::components.delete-button', [
                                        'id' => $user->id,
                                    ])
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-4 text-center text-gray-500">No users found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </x-backend::table-wrapper>
    </div>

@endsection

@push('scripts')
    <script>
        // Delete functionality
        $(document).on('click', '.delete-btn', function() {

            Swal.fire({
                title: "Are you sure to delete?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).data('id');
                    $.ajax({
                        url: `{{ route('admin.users.destroy', ':id') }}`
                            .replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                window.location.reload();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function() {
                            toastr.error("Server error.");
                        }
                    });
                }
            });
        });
    </script>
@endpush