raditarahman5-cloud
223 lines
14 KiB
PHP
223 lines
14 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.page-container { padding: 28px 32px; background: #f1f5f9; min-height: 100vh; font-family: 'Figtree', 'Segoe UI', sans-serif; }
|
|
.header-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
|
|
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: flex-start; }
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
|
.form-actions { border-top: 1px solid #f1f5f9; padding-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
|
|
|
|
@media (max-width: 768px) {
|
|
.page-container { padding: 16px 12px !important; }
|
|
.header-flex { flex-direction: column !important; gap: 16px !important; }
|
|
.main-grid { grid-template-columns: 1fr !important; }
|
|
.form-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
|
|
.form-actions { flex-direction: column !important; }
|
|
.form-actions a, .form-actions button { width: 100% !important; justify-content: center; }
|
|
}
|
|
</style>
|
|
|
|
<div class="page-container">
|
|
|
|
{{-- HEADER --}}
|
|
<div class="header-flex">
|
|
<div>
|
|
<a href="{{ route('admin.superadmin.user.index') }}"
|
|
style="font-size:12px; color:#64748b; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-bottom:10px; font-weight:600;"
|
|
onmouseover="this.style.color='#0D215C'" onmouseout="this.style.color='#64748b'">
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
|
<path d="M19 12H5M12 5l-7 7 7 7"/>
|
|
</svg>
|
|
Kembali ke Manajemen Pengguna
|
|
</a>
|
|
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.8px; margin:0 0 6px; text-transform:uppercase;">Panel Kendali Sistem</p>
|
|
<h1 style="font-size:28px; font-weight:800; color:#0f172a; margin:0 0 4px;">Tambah Pengguna</h1>
|
|
<p style="margin:0; color:#94a3b8; font-size:13px;">Buat akun baru untuk pegawai atau administrator sistem</p>
|
|
</div>
|
|
<div style="background:#eef2ff; color:#4338ca; padding:9px 14px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;">
|
|
<div style="width:8px; height:8px; background:#4338ca; border-radius:50%;"></div>
|
|
{{ strtoupper(session('user')['role'] ?? 'ADMINISTRATOR') }}
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('error'))
|
|
<div style="margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px; color:#be123c; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;">
|
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="main-grid">
|
|
|
|
{{-- FORM CARD --}}
|
|
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden;">
|
|
<div style="padding:20px 24px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px;">
|
|
<div style="width:32px; height:32px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
|
|
<svg width="16" height="16" fill="none" stroke="#2563eb" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<line x1="19" y1="8" x2="19" y2="14"/>
|
|
<line x1="22" y1="11" x2="16" y2="11"/>
|
|
</svg>
|
|
</div>
|
|
<h3 style="margin:0; font-size:16px; font-weight:700; color:#0f172a;">Data Pengguna Baru</h3>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.superadmin.user.store') }}" method="POST" style="padding:28px 24px;">
|
|
@csrf
|
|
|
|
@if ($errors->any())
|
|
<div style="margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px;">
|
|
<p style="font-weight:700; color:#be123c; margin:0 0 8px; font-size:13px;">Terdapat kesalahan input:</p>
|
|
<ul style="margin:0; padding-left:18px; color:#be123c; font-size:13px;">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="form-grid">
|
|
{{-- NAMA --}}
|
|
<div>
|
|
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
|
Nama Lengkap <span style="color:#ef4444;">*</span>
|
|
</label>
|
|
<input type="text" name="name" value="{{ old('name') }}"
|
|
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
|
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
|
placeholder="Nama lengkap pegawai" required>
|
|
</div>
|
|
|
|
{{-- USERNAME --}}
|
|
<div>
|
|
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
|
Username <span style="color:#ef4444;">*</span>
|
|
</label>
|
|
<input type="text" name="username" value="{{ old('username') }}"
|
|
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
|
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
|
placeholder="Username untuk login" required>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-grid">
|
|
{{-- PASSWORD --}}
|
|
<div>
|
|
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
|
Kata Sandi <span style="color:#ef4444;">*</span>
|
|
</label>
|
|
<div style="position:relative;">
|
|
<input type="password" name="password" id="password_field"
|
|
style="width:100%; padding:11px 40px 11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
|
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
|
placeholder="Minimal 6 karakter" required>
|
|
<button type="button" onclick="togglePassword('password_field', this)"
|
|
style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; justify-content:center;">
|
|
<svg class="eye-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
<svg class="eye-off-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
|
<line x1="1" y1="1" x2="23" y2="23"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ROLE --}}
|
|
<div>
|
|
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
|
Hak Akses (Role) <span style="color:#ef4444;">*</span>
|
|
</label>
|
|
<select name="role"
|
|
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#fff;"
|
|
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'">
|
|
<option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Petugas (User)</option>
|
|
<option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin (KASI)</option>
|
|
<option value="superadmin" {{ old('role') == 'superadmin' ? 'selected' : '' }}>Super Admin</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<a href="{{ route('admin.superadmin.user.index') }}"
|
|
style="padding:10px 20px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:13px; font-weight:700; color:#64748b; text-decoration:none; background:#f8fafc;"
|
|
onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f8fafc'">
|
|
Batal
|
|
</a>
|
|
<button type="submit"
|
|
style="padding:10px 24px; background:#0D215C; color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px;"
|
|
onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<line x1="19" y1="8" x2="19" y2="14"/>
|
|
<line x1="22" y1="11" x2="16" y2="11"/>
|
|
</svg>
|
|
Tambah Pengguna
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- TIPS CARD --}}
|
|
<div>
|
|
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; padding:20px; margin-bottom:16px;">
|
|
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px;">
|
|
<div style="width:28px; height:28px; background:#f0fdf4; border-radius:8px; display:flex; align-items:center; justify-content:center;">
|
|
<svg width="14" height="14" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span style="font-size:14px; font-weight:700; color:#0f172a;">Panduan Pengisian</span>
|
|
</div>
|
|
<ul style="margin:0; padding-left:16px; font-size:12px; color:#64748b; line-height:1.9;">
|
|
<li>Nama sesuai dengan dokumen resmi</li>
|
|
<li>Username digunakan untuk login</li>
|
|
|
|
<li>Kata sandi minimal 6 karakter</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background:#eff6ff; border-radius:16px; border:1px solid #bfdbfe; padding:18px 20px;">
|
|
<div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
|
|
<svg width="16" height="16" fill="#2563eb" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
<span style="font-size:13px; font-weight:700; color:#1d4ed8;">Panduan Role</span>
|
|
</div>
|
|
<ul style="margin:0; padding-left:16px; font-size:12px; color:#3b82f6; line-height:1.8;">
|
|
<li><strong>Petugas</strong>: Input kegiatan harian</li>
|
|
<li><strong>Admin</strong>: Monitor kegiatan & user</li>
|
|
<li><strong>Super Admin</strong>: Akses penuh sistem</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
<script>
|
|
function togglePassword(inputId, buttonElement) {
|
|
const input = document.getElementById(inputId);
|
|
const eyeIcon = buttonElement.querySelector('.eye-icon');
|
|
const eyeOffIcon = buttonElement.querySelector('.eye-off-icon');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
eyeIcon.style.display = 'none';
|
|
eyeOffIcon.style.display = 'block';
|
|
buttonElement.style.color = '#2563eb';
|
|
} else {
|
|
input.type = 'password';
|
|
eyeIcon.style.display = 'block';
|
|
eyeOffIcon.style.display = 'none';
|
|
buttonElement.style.color = '#94a3b8';
|
|
}
|
|
}
|
|
</script>
|