@extends('layouts.dashboardAdmin')

@section('content')
@if(session()->has('success'))
    <div id="success-popup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-50">
        <div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 text-center animate-fade-in">
            <div class="flex justify-center">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-12 h-12 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
            </div>
            <h2 class="text-xl font-semibold text-gray-800 mt-4">Berhasil!</h2>
            <p class="text-gray-600 mt-2">{{ session('success') }}</p>
            <button onclick="closeSuccessPopup()" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Tutup</button>
        </div>
    </div>

    <script>
        setTimeout(() => {
            closeSuccessPopup();
        }, 3000);

        function closeSuccessPopup() {
            let popup = document.getElementById("success-popup");
            if (popup) {
                popup.classList.add("opacity-0", "transition-opacity", "duration-500");
                setTimeout(() => popup.remove(), 5000);
            }
        }
    </script>
@endif

@if($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6 max-w-2xl mx-auto">
        <ul class="list-disc ml-6">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md border border-gray-200">
    <h2 class="text-2xl font-bold text-blue-900 mb-6 text-center">Ganti Kata Sandi</h2>

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

        <!-- Sandi Lama -->
        <div class="mb-4">
            <label for="current_password" class="block text-blue-900 font-medium mb-1">Kata Sandi Lama</label>
            <div class="relative">
                <input type="password" name="current_password" id="current_password"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                <button type="button" id="toggleCurrentPassword" class="absolute right-3 top-3 text-gray-500">
                    <i class="fas fa-eye"></i> <!-- Ikon mata -->
                </button>
            </div>
        </div>

        <!-- Sandi Baru -->
        <div class="mb-4">
            <label for="password" class="block text-blue-900 font-medium mb-1">Kata Sandi Baru</label>
            <div class="relative">
                <input type="password" name="password" id="password"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                <button type="button" id="toggleNewPassword" class="absolute right-3 top-3 text-gray-500">
                    <i class="fas fa-eye"></i> <!-- Ikon mata -->
                </button>
            </div>
        </div>

        <!-- Konfirmasi Sandi Baru -->
        <div class="mb-6">
            <label for="password_confirmation" class="block text-blue-900 font-medium mb-1">Konfirmasi Kata Sandi Baru</label>
            <div class="relative">
                <input type="password" name="password_confirmation" id="password_confirmation"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                <button type="button" id="toggleConfirmPassword" class="absolute right-3 top-3 text-gray-500">
                    <i class="fas fa-eye"></i> <!-- Ikon mata -->
                </button>
            </div>
        </div>

        <!-- Tombol -->
        <div class="flex justify-between items-center">
            <a href="{{ route('admin.laporan.grafik') }}" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">Batal</a>
            <button type="submit" class="bg-blue-900 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition shadow-lg">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>
<script>
    // Fungsi untuk toggle password visibility dengan timer
    function togglePasswordVisibility(inputId, buttonId) {
        const passwordField = document.getElementById(inputId);
        const button = document.getElementById(buttonId);
        const icon = button.querySelector('i');
        const type = passwordField.type === 'password' ? 'text' : 'password';
        
        passwordField.type = type;
        icon.classList.toggle('fa-eye-slash');

        // Timer untuk menyembunyikan password setelah 3 detik
        if (passwordField.type === 'text') {
            setTimeout(function() {
                passwordField.type = 'password';
                icon.classList.remove('fa-eye-slash');
            }, 3000); // Timer 3 detik
        }
    }

    // Event listeners untuk masing-masing input password
    document.getElementById('toggleCurrentPassword').addEventListener('click', function() {
        togglePasswordVisibility('current_password', 'toggleCurrentPassword');
    });

    document.getElementById('toggleNewPassword').addEventListener('click', function() {
        togglePasswordVisibility('password', 'toggleNewPassword');
    });

    document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
        togglePasswordVisibility('password_confirmation', 'toggleConfirmPassword');
    });
</script>


@endsection