MIF_E31222596/website/resources/views/gurus/create.blade.php

130 lines
7.2 KiB
PHP

<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Tambah Guru') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form action="{{ route('gurus.store') }}" method="POST">
@csrf
<!-- Nama -->
<div class="mb-4">
<label for="nama" class="block text-sm font-medium text-gray-700">Nama Guru</label>
<input type="text" name="nama" id="nama"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
value="{{ old('nama') }}" required>
@error('nama')
<div class="text-sm text-red-500">{{ $message }}</div>
@enderror
</div>
<!-- CODE_GURU -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Kode Guru</label>
<input type="text" name="code_guru"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
value="{{ $codeGuruBaru }}" readonly>
@error('code_guru')
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
@enderror
</div>
<!-- Alamat -->
<div class="mb-4">
<label for="alamat" class="block text-sm font-medium text-gray-700">Alamat</label>
<input type="text" name="alamat" id="alamat"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
value="{{ old('alamat') }}">
</div>
<!-- Tanggal Lahir -->
<div class="mb-4">
<label for="tanggal_lahir" class="block text-sm font-medium text-gray-700">Tanggal
Lahir</label>
<input type="date" name="tanggal_lahir" id="tanggal_lahir"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
value="{{ old('tanggal_lahir') }}">
</div>
<!-- Jenis Kelamin -->
<div class="mb-4">
<label for="jenis_kelamin" class="block text-sm font-medium text-gray-700">Jenis
Kelamin</label>
<select name="jenis_kelamin" id="jenis_kelamin"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
<option value="">Pilih</option>
<option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki</option>
<option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
</select>
</div>
<!-- Username -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
Username <span class="text-red-600">*</span>
</label>
<input type="text" name="username"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
value="{{ $codeGuruBaru }}" readonly>
@error('username')
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
@enderror
</div>
<!-- Password -->
<div class="bg-gray-50 rounded-xl p-6 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Password</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="relative">
<label class="block text-sm font-medium text-gray-700 mb-2">
Password <span class="text-red-600">*</span>
</label>
<input type="password" id="passwordField" name="password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
value="{{ 12345678 }}" readonly>
<!-- Tombol untuk toggle -->
<button type="button" onclick="togglePassword()"
class="absolute right-3 top-10 text-gray-500 hover:text-gray-700">
👁
</button>
@error('password')
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
@enderror
</div>
<div class="relative">
<label class="block text-sm font-medium text-gray-700 mb-2">
Konfirmasi Password <span class="text-red-600">*</span>
</label>
<input type="password" name="password_confirmation"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
value="12345678" readonly>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600">Password minimal 8 karakter dengan kombinasi huruf dan
angka</p>
</div>
</div>
<!-- Tombol Simpan -->
<div class="mt-6">
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Simpan
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>