@extends('layout.master')
@section('content')

<div class="container">
    <h1>User List</h1>
    @can('user create')
        <a href="{{ route('user.create') }}" class="btn btn-primary mb-3">Create User</a>
    @endcan
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <table class="table table-bordered">
        <thead>
            <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
                <th>User Type</th>
                <th>Phone</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr>
                <td>{{ $user->id }} </td>
                <td>{{ $user->fname }} {{ $user->lname }}</td>
                <td>{{ $user->email }}</td>
                    <td>{{ $user->user_type }}</td>
                    <td>{{ $user->phone }}</td>
                    <td>
                        @can('user edit')
                            <a href="{{ route('user.edit', $user->id) }}" class="btn btn-warning">Edit</a>
                        @endcan
                        @can('user delete')

                        <form  id="delete-form-{{ $user->id }}" action="{{ route('user.destroy', $user->id) }}" method="POST" style="display: inline-block;">
                            @csrf
                            @method('DELETE')
                            <button
                                                        type="button"
                                                        class="btn  btn-danger"
                                                        onclick="confirmDelete({{ $user->id }})"
                                                    >
                                                        Delete
                                                    </button>
                        </form>
                        @endcan

                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function confirmDelete(noteId) {
        Swal.fire({
            title: "Are you sure?",
            text: "This action cannot be undone!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel",
        }).then((result) => {
            if (result.isConfirmed) {
                // Submit the form
                document.getElementById("delete-form-" + noteId).submit();
            }
        });
    }
</script>
@endpush