<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Edit Profil Admin</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<body class="bg-gradient-to-br from-blue-400 via-white to-blue-200 min-h-screen py-10">

    <div class="max-w-xl mx-auto bg-white p-8 rounded-2xl shadow-xl border border-gray-200">
        <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Edit Profil Admin</h2>

        <form action="{{ route('admin.updateProfil') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Profile Picture -->
            <div class="text-center">
                <label class="block text-sm font-medium text-gray-700 mb-1">Profil</label>
                <div class="flex justify-center mb-4">
                    <img src="{{ asset('assets/admin/admin.jpg') }}" alt="Admin"
                        class="w-28 h-28 rounded-full object-cover border border-blue-300 shadow">
                </div>
            </div>

            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Nama</label>
                <input type="text" name="name" id="name" value="{{ old('name', Auth::user()->name) }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
            </div>

            <!-- Email -->
            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
                <input type="email" name="email" id="email" value="{{ old('email', Auth::user()->email) }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
            </div>

          <!-- Password Baru -->
<div class="relative mb-4">
    <label for="password" class="block text-gray-700 font-semibold mb-1">Password Baru</label>

    <input type="password" id="password" name="password" placeholder="Kosongkan jika tidak ingin mengganti"
        class="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">

    <!-- Tombol Toggle Mata -->
    <button type="button" onclick="togglePassword('password')"
        class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
        <svg id="eyeIcon-password" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
    </button>
</div>

<!-- Konfirmasi Password -->
<div class="relative mb-4">
    <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1">Konfirmasi Password</label>

    <input type="password" id="password_confirmation" name="password_confirmation"
        class="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">

    <!-- Tombol Toggle Mata -->
    <button type="button" onclick="togglePassword('password_confirmation')"
        class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
        <svg id="eyeIcon-password_confirmation" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
    </button>
</div>

<!-- Script Toggle -->
<script>
    function togglePassword(id) {
        const input = document.getElementById(id);
        const icon = document.getElementById('eyeIcon-' + id);

        if (input.type === 'password') {
            input.type = 'text';
            icon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.955 9.955 0 013.276-4.419m3.085-1.676A9.958 9.958 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.957 9.957 0 01-4.217 5.168M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 3l18 18"/>
            `;
        } else {
            input.type = 'password';
            icon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            `;
        }
    }
</script>

            <!-- Buttons -->
            <div class="flex flex-col sm:flex-row justify-between gap-4 mt-6">
                <a href="{{ url('/dashboard') }}"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-full text-center shadow transition duration-200">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Kembali
                </a>
                <button type="submit"
                    class="bg-blue-600 hover:bg-green-700 text-white px-6 py-3 rounded-full text-center shadow transition duration-200">
                    <i class="fa-solid fa-save mr-2"></i>Simpan Perubahan
                </button>
            </div>
        </form>
    </div>

</body>

</html>
