@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    {{-- Header & Breadcrumb --}}
    <div class="flex flex-col gap-1">
        @include('admin.layout.breadcumb')
       
    </div>


    <div class="max-w-4xl">
        {{-- Form Action dinamis: Jika edit butuh parameter ID --}}
        <form action="{{ isset($user) ? route('dashboard.user.update', $user->id) : route('dashboard.user.store') }}" 
              method="POST" 
              class="space-y-6">
            
            @csrf
            {{-- Method PUT wajib untuk update data --}}
            @if(isset($user)) 
                @method('PUT') 
            @endif
            
            <div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-8">
                
                {{-- Bagian Informasi Utama --}}
                <div class="space-y-6">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-xl bg-sky-100 flex items-center justify-center text-sky-600 shadow-sm">
                            <i class="fas {{ isset($user) ? 'fa-user-edit' : 'fa-user-plus' }} text-sm"></i>
                        </div>
                        <h3 class="text-lg font-bold text-sky-950">Informasi Akun</h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Input Nama --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Nama Lengkap</label>
                            <div class="relative group">
                                <i class="fas fa-id-card absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs group-focus-within:text-sky-500 transition-colors"></i>
                                <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}" required
                                    class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium @error('name') border-red-300 @enderror"
                                    placeholder="Masukkan nama lengkap">
                            </div>
                            @error('name') <p class="text-[10px] text-red-500 font-bold ml-2 italic">{{ $message }}</p> @enderror
                        </div>

                        {{-- Input Email --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Alamat Email</label>
                            <div class="relative group">
                                <i class="fas fa-envelope absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs group-focus-within:text-sky-500 transition-colors"></i>
                                <input type="email" name="email" value="{{ old('email', $user->email ?? '') }}" required
                                    class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium @error('email') border-red-300 @enderror"
                                    placeholder="email@contoh.com">
                            </div>
                            @error('email') <p class="text-[10px] text-red-500 font-bold ml-2 italic">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Pilih Role --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Role / Hak Akses</label>
                            <div class="relative group">
                                <i class="fas fa-shield-alt absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs group-focus-within:text-sky-500 transition-colors"></i>
                                <select name="roles" required
                                    class="w-full pl-12 pr-10 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-bold text-sky-900 appearance-none cursor-pointer">
                                    <option value="" disabled {{ !isset($user) ? 'selected' : '' }}>Pilih Role</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}" 
                                            {{ (isset($user) && $user->hasRole($role->name)) ? 'selected' : '' }}
                                            class="font-bold uppercase">{{ strtoupper($role->name) }}</option>
                                    @endforeach
                                </select>
                                <div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-sky-300 text-xs">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Bagian Keamanan --}}
                <div class="space-y-6 pt-4 border-t border-sky-50">
                    <div class="flex flex-col gap-1">
                        <h3 class="text-sm font-bold text-sky-950">Keamanan Kata Sandi</h3>
                        @if(isset($user))
                        <p class="text-[10px] text-amber-500 font-bold uppercase tracking-wider italic">* Kosongkan password jika tidak ingin mengganti password lama</p>
                        @endif
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Password --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Password Baru</label>
                            <div class="relative group">
                                <i class="fas fa-lock absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs group-focus-within:text-sky-500 transition-colors"></i>
                                <input type="password" name="password" {{ isset($user) ? '' : 'required' }}
                                    class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium @error('password') border-red-300 @enderror"
                                    placeholder="{{ isset($user) ? 'Isi untuk ganti password' : 'Minimal 8 karakter' }}">
                            </div>
                            @error('password') <p class="text-[10px] text-red-500 font-bold ml-2 italic">{{ $message }}</p> @enderror
                        </div>

                        {{-- Konfirmasi Password --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Konfirmasi Password</label>
                            <div class="relative group">
                                <i class="fas fa-check-double absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs group-focus-within:text-sky-500 transition-colors"></i>
                                <input type="password" name="password_confirmation" {{ isset($user) ? '' : 'required' }}
                                    class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium"
                                    placeholder="Ulangi password baru">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tombol Action --}}
                <div class="flex items-center justify-end gap-4 pt-4 border-t border-sky-50">
                    <a href="{{ route('dashboard.user') }}" class="px-8 py-4 bg-slate-100 text-slate-500 rounded-2xl font-bold text-[10px] uppercase tracking-wider hover:bg-slate-200 transition">
                        Batal
                    </a>
                    <button type="submit" class="px-10 py-4 bg-sky-600 text-white rounded-2xl font-bold text-[10px] uppercase tracking-widest shadow-lg shadow-sky-100 hover:bg-sky-700 transition transform active:scale-95 flex items-center gap-3">
                        <i class="fas fa-save"></i> {{ isset($user) ? 'Simpan Perubahan' : 'Daftarkan User' }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    /* Styling select dropdown agar lebih rapi */
    select option {
        padding: 12px;
        font-weight: 600;
        color: #0c4a6e;
    }
</style>
@endsection