@extends('layouts.app')
@section('title', 'Kelola Pengguna')

@section('content')
<div class="page-header mb-4">
    <h2>Kelola Pengguna</h2>
    <p>Tambah dan kelola akun pengguna sistem</p>
</div>

<!-- Add User Form -->
<div class="content-card mb-4">
    <div class="card-header">
        <i class="bi bi-person-plus-fill me-2"></i>Tambah Pengguna Baru
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.users.store') }}" autocomplete="off">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-bold">Nama Lengkap</label>
                    <input type="text" name="name" class="form-control" required style="border-radius:10px;" autocomplete="off">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-bold">Email</label>
                    <input type="email" name="email" class="form-control" required style="border-radius:10px;" autocomplete="off">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-bold">No. Telepon</label>
                   <input type="text"
       name="phone"
       class="form-control"
       maxlength="13"
       oninput="this.value=this.value.replace(/[^0-9]/g,'')"
       style="border-radius:10px;"
       autocomplete="off">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-bold">Role</label>
                    <select name="role" class="form-select" required style="border-radius:10px;">
                        <option value="pemohon">Pemohon</option>
                        <option value="operator">Operator</option>
                        <option value="tpa">TPA</option>
                        <option value="tpt">TPT</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-bold">Password</label>
                    <input type="password" name="password" class="form-control" required minlength="8" style="border-radius:10px;" autocomplete="new-password">
                </div>
                <div class="col-md-4 mb-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100" style="padding: 10px;">
                        <i class="bi bi-plus-lg me-1"></i> Tambah User
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Users Table -->
<div class="content-card">
    <div class="card-header">
        <i class="bi bi-people-fill me-2"></i>Daftar Pengguna ({{ $users->total() }})
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Telepon</th>
                        <th>Role</th>
                        <th>Terdaftar</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td><strong>{{ $user->name }}</strong></td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->phone ?? '-' }}</td>
                        <td>
                            <span class="badge" style="background:
                                {{ $user->role === 'admin' ? '#1e3a5f' :
                                   ($user->role === 'operator' ? '#6366f1' :
                                   ($user->role === 'tpa' ? '#059669' :
                                   ($user->role === 'tpt' ? '#0891b2' : '#8b5cf6'))) }};
                                font-size:11px; padding: 4px 10px; border-radius:6px;">
                                {{ strtoupper($user->role) }}
                            </span>
                        </td>
                        <td>{{ $user->created_at->format('d/m/Y') }}</td>
                        <td>
                            @if($user->id !== auth()->id())
                            <form method="POST" action="{{ route('admin.users.destroy', $user->id) }}" onsubmit="return confirm('Yakin hapus user ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger" style="border-radius:8px;">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </form>
                            @else
                            <span class="text-muted" style="font-size:12px;">Akun aktif</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection