@extends('layouts.app')

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

@section('content')
<div class="p-4 md:p-8 max-w-lg mx-auto">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Keamanan Akun</h2>
            <p class="text-sm text-gray-500">Ganti password untuk akses Admin.</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="text-gray-500 hover:text-primary transition">
            Kembali
        </a>
    </div>

    <div class="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
        <form action="{{ route('admin.profile.update') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Password Lama -->
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Password Saat Ini</label>
                <input type="password" name="current_password" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition bg-gray-50">
                @error('current_password')
                    <span class="text-xs text-red-500 mt-1">{{ $message }}</span>
                @enderror
            </div>

            <!-- Password Baru -->
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Password Baru</label>
                <input type="password" name="new_password" required minlength="6" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition bg-gray-50">
                <p class="text-[10px] text-gray-400 mt-1">Minimal 6 karakter.</p>
            </div>

            <!-- Konfirmasi Password Baru -->
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Konfirmasi Password Baru</label>
                <input type="password" name="new_password_confirmation" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition bg-gray-50">
            </div>

            <!-- Submit Button -->
            <button type="submit" class="w-full bg-primary hover:bg-secondary text-white font-bold py-3.5 rounded-xl shadow-lg shadow-green-200 hover:shadow-green-300 transform hover:-translate-y-0.5 transition-all duration-300 mt-4">
                Update Password
            </button>
        </form>
    </div>

</div>
@endsection