@extends('layouts.admin')

@section('title', 'Ganti Password Admin')

@section('content')
<div class="max-w-2xl mx-auto"> {{-- Menggunakan mx-auto agar posisi di tengah dan tidak terlalu lebar --}}
    
    <div class="bg-white p-8 rounded-2xl shadow-md border border-gray-200">
        <h3 class="text-xl font-bold text-gray-800 mb-6">Form Pengaturan Kata Sandi</h3>

        @if(session('success'))
            <div class="bg-green-100 text-green-700 p-4 rounded-xl mb-6 border border-green-200 shadow-sm">
                <i class="fa-solid fa-circle-check mr-2"></i> {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.profile.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div>
                <label for="current_password" class="block text-sm font-bold text-gray-700 mb-2">Password Saat Ini</label>
                <div class="relative">
                    {{-- Menambahkan border-2 dan h-12 agar input terlihat kokoh --}}
                    <input id="current_password" type="password" name="current_password" 
                           class="w-full h-12 px-4 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all"
                           placeholder="Masukkan password lama anda">
                    <button type="button" data-target="current_password" 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('current_password') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
            </div>

            <div>
                <label for="password_new" class="block text-sm font-bold text-gray-700 mb-2">Password Baru</label>
                <div class="relative">
                    <input id="password_new" type="password" name="password" 
                           class="w-full h-12 px-4 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all"
                           placeholder="Minimal 8 karakter unik">
                    <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>

            <div>
                <label for="password_confirm" class="block text-sm font-bold text-gray-700 mb-2">Konfirmasi Password Baru</label>
                <div class="relative">
                    <input id="password_confirm" type="password" name="password_confirmation" 
                           class="w-full h-12 px-4 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all"
                           placeholder="Ulangi password baru anda">
                    <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 class="pt-4">
                <button type="submit" class="w-full md:w-auto bg-red-600 text-white px-8 py-3 rounded-xl hover:bg-red-700 transition shadow-lg font-bold">
                    <i class="fa-solid fa-shield-halved mr-2"></i> Perbarui Kata Sandi
                </button>
            </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