@extends('layouts.app')

@section('title', 'Manajemen Pengguna (User)')

@section('content')
<div class="row">
    <!-- Header & Action Buttons -->
    <div class="col-12 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h3 class="font-bold text-dark m-0">Kelola Pengguna Sistem</h3>
            <p class="text-muted small m-0">Manajemen akun Administrator dan Operator Fakultas/Unit</p>
        </div>
        <div>
            <button type="button" class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahUser">
                <i class="fas fa-user-plus me-1"></i> Tambah Pengguna Baru
            </button>
        </div>
    </div>

    <!-- Data Table Card -->
    <div class="col-12 mb-4">
        <div class="card card-custom bg-white p-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-dark">
                        <tr class="small text-uppercase">
                            <th>ID User</th>
                            <th>Username</th>
                            <th>Nama Lengkap</th>
                            <th>Level Role</th>
                            <th>Status Akun</th>
                            <th>Terakhir Login</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $u)
                            <tr>
                                <td class="font-mono text-primary font-bold">{{ $u->id_user }}</td>
                                <td class="font-bold text-dark font-mono">{{ $u->username }}</td>
                                <td class="font-semibold">{{ $u->nama_lengkap }}</td>
                                <td>
                                    <span class="badge {{ $u->kode_role == 'ADMIN' ? 'bg-danger-subtle text-danger border border-danger-subtle' : 'bg-primary-subtle text-primary border border-primary-subtle' }} px-3 py-1">
                                        <i class="fas {{ $u->kode_role == 'ADMIN' ? 'fa-shield-alt' : 'fa-user-cog' }} me-1"></i>
                                        {{ $u->kode_role }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge {{ $u->status == 'active' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ ucfirst($u->status ?? 'active') }}
                                    </span>
                                </td>
                                <td class="small text-muted">{{ $u->last_login ? date('d/m/Y H:i', strtotime($u->last_login)) : 'Belum pernah' }}</td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-outline-warning btn-sm me-1" data-bs-toggle="modal" data-bs-target="#modalEditUser_{{ $u->id_user }}" title="Edit">
                                        <i class="fas fa-edit me-1"></i> Edit
                                    </button>
                                    @if (Auth::user()->id_user !== $u->id_user)
                                        <form action="{{ route('users.destroy', $u->id_user) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun {{ $u->username }}?')" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-sm" title="Hapus">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-muted py-4">Belum ada data pengguna.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah User (Placed outside table) -->
<div class="modal fade" id="modalTambahUser" tabindex="-1" aria-labelledby="modalTambahUserLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header bg-primary text-white rounded-top-4">
                <h5 class="modal-title font-bold" id="modalTambahUserLabel"><i class="fas fa-user-plus me-2"></i> Tambah Pengguna Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('users.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4 space-y-3">
                    <div class="mb-3">
                        <label class="form-label small font-bold">Username *</label>
                        <input type="text" name="username" required placeholder="Contoh: op_teknik" class="form-control font-mono">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small font-bold">Password *</label>
                        <input type="password" name="password" required placeholder="Minimal 6 karakter" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small font-bold">Nama Lengkap *</label>
                        <input type="text" name="nama_lengkap" required placeholder="Nama operator atau admin" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small font-bold">Level Role *</label>
                        <select name="kode_role" required class="form-select">
                            <option value="OPERATOR" selected>OPERATOR (Read & Export Only)</option>
                            <option value="ADMIN">ADMIN (Full Access)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small font-bold">Status Akun *</label>
                        <select name="status" required class="form-select">
                            <option value="active" selected>Active (Aktif)</option>
                            <option value="inactive">Inactive (Nonaktif)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm font-bold rounded-3 px-4">Simpan Pengguna</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modals Edit User for Each User (Placed strictly outside the table DOM) -->
@foreach ($users as $u)
    <div class="modal fade" id="modalEditUser_{{ $u->id_user }}" tabindex="-1" aria-labelledby="modalEditUserLabel_{{ $u->id_user }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header bg-warning text-dark rounded-top-4">
                    <h5 class="modal-title font-bold" id="modalEditUserLabel_{{ $u->id_user }}">
                        <i class="fas fa-user-edit me-2"></i> Edit Pengguna: {{ $u->username }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('users.update', $u->id_user) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body p-4 space-y-3">
                        <div class="mb-3">
                            <label class="form-label small font-bold">Username</label>
                            <input type="text" value="{{ $u->username }}" disabled class="form-control bg-light font-mono">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small font-bold">Nama Lengkap *</label>
                            <input type="text" name="nama_lengkap" value="{{ $u->nama_lengkap }}" required class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small font-bold">Level Role *</label>
                            <select name="kode_role" required class="form-select">
                                <option value="OPERATOR" {{ $u->kode_role == 'OPERATOR' ? 'selected' : '' }}>OPERATOR (Read & Export Only)</option>
                                <option value="ADMIN" {{ $u->kode_role == 'ADMIN' ? 'selected' : '' }}>ADMIN (Full Access)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small font-bold">Status Akun *</label>
                            <select name="status" required class="form-select">
                                <option value="active" {{ $u->status == 'active' ? 'selected' : '' }}>Active (Aktif)</option>
                                <option value="inactive" {{ $u->status == 'inactive' ? 'selected' : '' }}>Inactive (Nonaktif)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small font-bold">Ganti Password (Opsional)</label>
                            <input type="password" name="password" placeholder="Kosongkan jika tidak ingin mengubah password" class="form-control">
                            <small class="text-muted">Isi minimal 6 karakter jika ingin mengganti password.</small>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning btn-sm font-bold text-dark rounded-3 px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach
@endsection