@extends('layouts.admin')

@section('title', isset($user) ? 'Edit User' : 'Tambah User Baru')

@section('content')
<div class="max-w-2xl mx-auto">
    {{-- Penghapusan judul ganda agar konsisten dengan instruksi sebelumnya --}}
    
    <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
        <h3 class="text-xl font-bold text-gray-800 mb-6">{{ isset($user) ? 'Form Perubahan Data User' : 'Form Registrasi User Baru' }}</h3>
        
        <form action="{{ isset($user) ? route('admin.users.update', $user) : route('admin.users.store') }}" method="POST" class="space-y-6">
            @csrf
            @if(isset($user))
                @method('PUT')
            @endif

            <div class="grid grid-cols-1 gap-6">
                {{-- Field Nama --}}
                <div>
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $user->name ?? '') }}" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all placeholder-gray-400"
                           placeholder="Masukkan nama lengkap...">
                    @error('name') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
                </div>

                {{-- Field Email --}}
                <div>
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Alamat Email</label>
                    <input type="email" name="email" id="email" value="{{ old('email', $user->email ?? '') }}" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all placeholder-gray-400"
                           placeholder="contoh: admin@fadbacklink.com">
                    @error('email') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
                </div>
                
                {{-- Field Role --}}
                <div>
                    <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">Hak Akses (Role)</label>
                    <div class="relative">
                        <select name="role" id="role" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 appearance-none bg-white transition-all cursor-pointer">
                            <option value="advertiser" @selected(old('role', $user->role ?? '') == 'advertiser')>Advertiser (User Biasa)</option>
                            <option value="publisher" @selected(old('role', $user->role ?? '') == 'publisher')>Publisher</option>
                            <option value="super_admin" @selected(old('role', $user->role ?? '') == 'super_admin')>Super Admin</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
                            <i class="fa-solid fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-4 border-t border-gray-100">
                <h3 class="text-md font-bold text-gray-800 mb-1">{{ isset($user) ? 'Reset Password' : 'Pengamanan Akun' }}</h3>
                <p class="text-xs text-gray-500 mb-4">{{ isset($user) ? 'Kosongkan jika tidak ingin mengubah password.' : 'Minimal 8 karakter unik.' }}</p>

                <div class="space-y-4">
                    {{-- Password --}}
                    <div>
                        <label for="password_new" class="block text-sm font-semibold text-gray-700 mb-2">Password</label>
                        <div class="relative">
                            <input id="password_new" type="password" name="password" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none pr-12 transition-all"
                                   placeholder="••••••••">
                            <button type="button" data-target="password_new" class="toggle-password absolute inset-y-0 right-0 px-4 flex items-center text-gray-400 hover:text-red-600 transition-colors">
                                <i class="fa-solid fa-eye-slash text-sm"></i>
                            </button>
                        </div>
                        @error('password') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
                    </div>

                    {{-- Konfirmasi Password --}}
                    <div>
                        <label for="password_confirm" class="block text-sm font-semibold text-gray-700 mb-2">Konfirmasi Password Baru</label>
                        <div class="relative">
                            <input id="password_confirm" type="password" name="password_confirmation" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none pr-12 transition-all"
                                   placeholder="••••••••">
                            <button type="button" data-target="password_confirm" class="toggle-password absolute inset-y-0 right-0 px-4 flex items-center text-gray-400 hover:text-red-600 transition-colors">
                                <i class="fa-solid fa-eye-slash text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-4 pt-4">
                <button type="submit" class="bg-red-600 text-white px-8 py-3 rounded-xl hover:bg-red-700 transition shadow-md font-bold flex-1 md:flex-none">
                    <i class="fa-solid fa-save mr-2"></i> {{ isset($user) ? 'Simpan Perubahan' : 'Daftarkan User' }}
                </button>
                <a href="{{ route('admin.users.index') }}" class="px-8 py-3 rounded-xl border border-gray-300 text-gray-600 font-semibold hover:bg-gray-50 transition text-center flex-1 md:flex-none">
                    Batal
                </a>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.toggle-password').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetInput = document.getElementById(targetId);
                const icon = this.querySelector('i');

                const type = targetInput.getAttribute('type') === 'password' ? 'text' : 'password';
                targetInput.setAttribute('type', type);

                if (type === 'text') {
                    icon.classList.replace('fa-eye-slash', 'fa-eye');
                } else {
                    icon.classList.replace('fa-eye', 'fa-eye-slash');
                }
            });
        });
    });
</script>
@endsection