@extends('admin.layout')

@section('title', '')

@section('content')
	<div class="card">
		<div class="card-header bg-success text-white d-flex justify-content-between align-items-start">
			<div>
				<h5 class="mb-0"><i class="bi bi-people-fill me-2"></i>Managemen Pengguna</h5>
				<small class="text-white-50">Mengelolah pengguna (tambah, hapus, lihat detail)</small>
			</div>
		</div>
		<div class="card-body">
			 @php
                $activePeriode = \App\Models\Periode::where('status', \App\Models\Periode::STATUS_AKTIF)->first();
                $tahunPel = $activePeriode->tahun_pelajaran ?? '-';
                $semester = $activePeriode->semester ?? '-';
            @endphp
			<div class="d-flex justify-content-between align-items-center mt-3 mb-2">
				<div>
					<h6 class="mb-0">Daftar Pengguna dan Perannya</h6>
					<div class="small text-muted">Tahun Pelajaran: <strong>{{ $tahunPel }}</strong> &nbsp;|&nbsp; Semester: <strong>{{ $semester }}</strong></div>
				</div>
				<div>
					<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
						<i class="bi bi-plus-lg me-1"></i> Tambah Pengguna
					</button>
				</div>
			</div>
			<table class="table table-sm">
				<thead>
					<tr>
						<th>NO</th>
						<th>Name</th>
						<th>Email</th>
						<th>Role</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					@forelse($users as $i => $user)
					<tr>
						<td>{{ $i + 1 }}</td>
						<td>{{ $user->name }}</td>
						<td>{{ $user->email }}</td>
						<td>{{ $user->role ?? '-' }}</td>
						<td>
							<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#viewUserModal{{ $user->id }}">
								<i class="bi bi-eye"></i> Lihat
							</button>
							<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editUserModal{{ $user->id }}">
								<i class="bi bi-pencil-square"></i> Edit
							</button>
							<form action="{{ url('admin/users/'.$user->id) }}" method="POST" class="d-inline-block" onsubmit="return confirm('Hapus pengguna ini?');">
								@csrf
								@method('DELETE')
								<button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i> Hapus</button>
							</form>
						</td>
					</tr>
					@empty
					<tr>
						<td colspan="5" class="text-center">Belum ada pengguna.</td>
					</tr>
					@endforelse
				</tbody>
			</table>

			@foreach($users as $user)
			<!-- View User Modal -->
			<div class="modal fade" id="viewUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header bg-success bg-opacity-25">
							<h5 class="modal-title text-dark">Detail Pengguna</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<dl class="row">
								<dt class="col-sm-4">Name</dt>
								<dd class="col-sm-8">{{ $user->name }}</dd>
								<dt class="col-sm-4">Username</dt>
								<dd class="col-sm-8">{{ $user->username ?? '-' }}</dd>
								<dt class="col-sm-4">Email</dt>
								<dd class="col-sm-8">{{ $user->email }}</dd>
								<dt class="col-sm-4">Role</dt>
								<dd class="col-sm-8">{{ $user->role ?? '-' }}</dd>
							</dl>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
						</div>
					</div>
				</div>
			</div>

			<!-- Edit User Modal -->
			<div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header bg-success bg-opacity-25">
							<h5 class="modal-title text-dark">Edit Pengguna</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<form action="{{ url('admin/users/'.$user->id) }}" method="POST">
								@csrf
								@method('PUT')
								<div class="mb-3">
									<label class="form-label">Name</label>
									<input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Username</label>
									<input type="text" name="username" class="form-control" value="{{ old('username', $user->username) }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Email</label>
									<input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Password (kosongkan jika tidak diubah)</label>
									<input type="password" name="password" class="form-control" placeholder="masukkan password">
								</div>
								<div class="mb-3">
									<label class="form-label">Role</label>
									<select name="role" class="form-select">
										<option value="admin" @if(($user->role ?? '')=='admin') selected @endif>Admin</option>
										<option value="guru" @if(($user->role ?? '')=='guru') selected @endif>Guru</option>
										<option value="user" @if(($user->role ?? '')=='user') selected @endif>User</option>
									</select>
								</div>
								<div class="text-end">
									<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
									<button class="btn btn-success">Simpan</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			@endforeach

			<!-- Create User Modal -->
			<div class="modal fade" id="createUserModal" tabindex="-1" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header bg-success bg-opacity-25">
							<h5 class="modal-title text-dark">Tambah Pengguna</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<form action="{{ url('admin/users') }}" method="POST">
								@csrf
								<div class="mb-3">
									<label class="form-label">Name</label>
									<input type="text" name="name" class="form-control" value="{{ old('name') }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Username</label>
									<input type="text" name="username" class="form-control" value="{{ old('username') }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Email</label>
									<input type="email" name="email" class="form-control" value="{{ old('email') }}">
								</div>
								<div class="mb-3">
									<label class="form-label">Password</label>
									<input type="password" name="password" class="form-control" placeholder="masukkan password">
								</div>
								<div class="mb-3">
									<label class="form-label">Role</label>
									<select name="role" class="form-select">
										<option value="admin">Admin</option>
										<option value="guru">Guru</option>
										<option value="user">User</option>
									</select>
								</div>
								<div class="text-end">
									<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
									<button class="btn btn-success">Simpan</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection