Dwi F Sukmana
55 lines
3.3 KiB
PHP
55 lines
3.3 KiB
PHP
<x-app-layout>
|
|
<div class="py-12">
|
|
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white shadow-xl rounded-[2rem] overflow-hidden border border-slate-100">
|
|
|
|
{{-- Header --}}
|
|
<div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-900 tracking-tight">Tambah Role Baru</h2>
|
|
<p class="text-slate-500 font-medium">Definisikan tingkat otoritas pengguna baru.</p>
|
|
</div>
|
|
<a href="{{ route('admin.roles.index') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest italic">Batal</a>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.roles.store') }}" method="POST" class="p-8 space-y-6">
|
|
@csrf
|
|
|
|
{{-- Nama Role --}}
|
|
<div class="space-y-2">
|
|
<label for="name" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nama Role</label>
|
|
<input type="text" name="name" id="name" required placeholder="Contoh: Manager Operasional"
|
|
class="block w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-slate-900 font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all">
|
|
<x-input-error :messages="$errors->get('name')" class="mt-1" />
|
|
</div>
|
|
|
|
{{-- Slug Role --}}
|
|
<div class="space-y-2">
|
|
<label for="slug" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Slug (ID Sistem)</label>
|
|
<input type="text" name="slug" id="slug" required placeholder="contoh: manager-ops"
|
|
class="block w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-slate-400 font-mono text-sm focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all">
|
|
<p class="text-[10px] text-slate-400 italic ml-1">*Slug digunakan sistem untuk identifikasi rute dan middleware.</p>
|
|
<x-input-error :messages="$errors->get('slug')" class="mt-1" />
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-[0.3em] hover:bg-indigo-700 shadow-2xl shadow-indigo-600/20 transition-all active:scale-[0.98]">
|
|
<i class="fas fa-plus-circle mr-2"></i> Buat & Lanjut Atur Izin
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script Sederhana untuk Auto-Slug --}}
|
|
<script>
|
|
const nameInput = document.getElementById('name');
|
|
const slugInput = document.getElementById('slug');
|
|
|
|
nameInput.addEventListener('keyup', function() {
|
|
let text = this.value;
|
|
slugInput.value = text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
|
|
});
|
|
</script>
|
|
</x-app-layout> |