@extends('layouts.admin')

@section('title', 'Edit Profil')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

    {{-- ✅ Notifikasi (toast style) --}}
    @if (session('success'))
        <div id="toast-success"
            class="fixed top-5 right-5 z-50 flex items-center w-auto max-w-sm p-4 mb-4 text-green-800 bg-green-100 border border-green-300 rounded-xl shadow-lg dark:text-green-200 dark:bg-green-900 dark:border-green-700 animate-slide-in">
            <i class="fa-solid fa-circle-check mr-3 text-green-600 dark:text-green-400"></i>
            <span class="text-sm font-medium">{{ session('success') }}</span>
        </div>
        <script>
            setTimeout(() => {
                const toast = document.getElementById('toast-success');
                if (toast) toast.remove();
            }, 5000);
        </script>
    @endif

    <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 mt-6">
        <h2 class="text-2xl text-white font-bold mb-6 text-blue-700">✏️ Edit Profil</h2>

        <form action="{{ route('admin.profile.update') }}" method="POST">
            @csrf

            {{-- Nama --}}
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 font-medium mb-2">Nama</label>
                <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                    class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-400 dark:bg-gray-900 dark:text-gray-100">
                @error('name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Password --}}
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 font-medium mb-2">Password Baru (Opsional)</label>
                <div class="relative">
                    <input id="password" type="password" name="password"
                        class="w-full p-2 pr-10 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-400 dark:bg-gray-900 dark:text-gray-100"
                        autocomplete="new-password">
                    <button type="button" aria-label="Toggle password visibility"
                        class="absolute inset-y-0 right-2 flex items-center px-2 text-gray-600 dark:text-gray-300"
                        onclick="togglePassword('password', this)">
                        <i class="fa-solid fa-eye" data-state="hidden"></i>
                    </button>
                </div>
                @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Konfirmasi Password --}}
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 font-medium mb-2">Konfirmasi Password</label>
                <div class="relative">
                    <input id="password_confirmation" type="password" name="password_confirmation"
                        class="w-full p-2 pr-10 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-400 dark:bg-gray-900 dark:text-gray-100"
                        autocomplete="new-password">
                    <button type="button" aria-label="Toggle confirm password visibility"
                        class="absolute inset-y-0 right-2 flex items-center px-2 text-gray-600 dark:text-gray-300"
                        onclick="togglePassword('password_confirmation', this)">
                        <i class="fa-solid fa-eye" data-state="hidden"></i>
                    </button>
                </div>
            </div>

            <div class="flex justify-end">
                <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2 rounded-lg transition">
                    💾 Simpan Perubahan
                </button>
            </div>
        </form>
    </div>

    {{-- Script toggle mata password --}}
    <script>
        /**
         * togglePassword(fieldId, buttonElement)
         * - fieldId: id input password
         * - buttonElement: the <button> that was clicked
         */
        function togglePassword(fieldId, button) {
            const input = document.getElementById(fieldId);
            if (!input) return;

            const icon = button.querySelector('i');
            if (!icon) return;

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
                icon.setAttribute('data-state', 'visible');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
                icon.setAttribute('data-state', 'hidden');
            }
        }
    </script>
@endsection