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

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

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

    <div class="w-full max-w-md 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</h2>

        <form action="{{ route('users.updateProfile') }}" method="POST" class="space-y-5">
            @csrf
            @method('PUT')

            <!-- Nama -->
            <div>
                <label class="block text-gray-700 font-semibold mb-1">Nama</label>
                <input type="text" name="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"
                    required>
            </div>

            <!-- Email -->
            <div>
                <label class="block text-gray-700 font-semibold mb-1">Email</label>
                <input type="email" name="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"
                    required>
            </div>

            <!-- Password -->
            <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()"
                    class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
                    <svg id="eyeIcon" 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>
                function togglePassword() {
                    const password = document.getElementById('password');
                    const icon = document.getElementById('eyeIcon');

                    if (password.type === 'password') {
                        password.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 {
                        password.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>

            <!-- Tombol Aksi -->
            <div class="flex justify-between items-center mt-6">
                <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full shadow-md transition duration-200">
                    Simpan Perubahan
                </button>
                <a href="{{ route('users.profile') }}"
                    class="text-gray-600 hover:text-gray-800 hover:underline transition duration-200">
                    Batal
                </a>
            </div>
        </form>
    </div>

</body>

</html>