@extends('layouts.admin')

@section('title', 'Data User')

@section('content')

<h1 class="text-2xl font-bold mb-6">Data User</h1>

<!-- TABLE -->
<div class="overflow-x-auto">
<table class="w-full bg-white shadow rounded">
    <thead class="bg-gray-100">
        <tr>
            <th class="p-3 text-left">Nama</th>
            <th class="p-3 text-left">Email</th>
            <th class="p-3 text-left">Aksi</th>
        </tr>
    </thead>

    <tbody id="tableBody">
        @foreach($users as $u)
        <tr id="row-{{ $u->id }}" class="border-b">
            <td class="p-3">{{ $u->name }}</td>
            <td class="p-3">{{ $u->email }}</td>
            <td class="p-3">

                @if($u->id != auth()->id())
                <button onclick="hapus('{{ $u->id }}')"
                        class="text-red-500 hover:underline">
                    Hapus
                </button>
                @else
                <span class="text-gray-400">Login</span>
                @endif

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

<script>

// DELETE USER
function hapus(id) {
    if(confirm('Yakin hapus user ini?')) {

        fetch(`/rahasia-saja/users/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(res => res.json())
        .then(() => {
            document.getElementById('row-'+id).remove();
        });

    }
}

</script>

@endsection