@extends('layouts.app')

@section('title', 'Tambah Admin - INUFA')

@section('header')
<div class="flex space-x-8">
    <a href="{{ route('pengguna') }}" class="font-semibold border-b-2 border-white pb-1">Data Admin</a>
    <!-- <a href="{{ route('admin') }}" class="font-semibold">Data User</a> -->
</div>
@endsection

@section('content')
<div class="bg-white rounded shadow-md p-6 max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold mb-6">Tambah Admin Baru</h2>

    @if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        <ul class="list-disc list-inside">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    
    <form action="{{ route('pengguna.store') }}" method="POST" class="space-y-4">
        @csrf
        
        <!-- Nama -->
        <div class="grid grid-cols-3 items-center">
            <label for="nama" class="font-semibold">Nama:</label>
            <div class="col-span-2">
                <input type="text" id="nama" name="nama" value="{{ old('nama') }}" placeholder="Masukkan nama lengkap" class="w-full p-2 border border-gray-300 rounded @error('nama') border-red-500 @enderror" required>
                @error('nama')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Username -->
        <div class="grid grid-cols-3 items-center">
            <label for="username" class="font-semibold">Username:</label>
            <div class="col-span-2">
                <input type="text" id="username" name="username" value="{{ old('username') }}" placeholder="Masukkan username" class="w-full p-2 border border-gray-300 rounded @error('username') border-red-500 @enderror" required>
                @error('username')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        
        <!-- Email -->
        <div class="grid grid-cols-3 items-center">
            <label for="email" class="font-semibold">Email:</label>
            <div class="col-span-2">
                <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Masukkan email" class="w-full p-2 border border-gray-300 rounded @error('email') border-red-500 @enderror" required>
                @error('email')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        
        <!-- No. Telp -->
        <div class="grid grid-cols-3 items-center">
            <label for="no_telp" class="font-semibold">No. Telp:</label>
            <div class="col-span-2">
                <input type="text" id="no_telp" name="no_telp" value="{{ old('no_telp') }}" placeholder="Masukkan nomor telepon" class="w-full p-2 border border-gray-300 rounded @error('no_telp') border-red-500 @enderror" required>
                @error('no_telp')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        
        <!-- Alamat -->
        <div class="grid grid-cols-3 items-start">
            <label for="alamat" class="font-semibold pt-2">Alamat:</label>
            <div class="col-span-2">
                <textarea id="alamat" name="alamat" rows="3" placeholder="Masukkan alamat" class="w-full p-2 border border-gray-300 rounded @error('alamat') border-red-500 @enderror" required>{{ old('alamat') }}</textarea>
                @error('alamat')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Tipe Pengguna (Hidden) -->
        <input type="hidden" name="tipe_pengguna" value="admin">
        
        <!-- Password -->
        <div class="grid grid-cols-3 items-center">
            <label for="password" class="font-semibold">Password:</label>
            <div class="col-span-2">
                <input type="password" id="password" name="password" placeholder="Masukkan password" class="w-full p-2 border border-gray-300 rounded @error('password') border-red-500 @enderror" required>
                @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        
        <!-- Tombol -->
        <div class="flex justify-end space-x-4 pt-4">
            <a href="{{ route('pengguna') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                Batal
            </a>
            <button type="submit" class="px-4 py-2 bg-blue-800 text-white rounded hover:bg-blue-700">
                Simpan
            </button>
        </div>
    </form>
</div>
@endsection