@extends('layouts.dashboardUser')

@section('title', 'Ganti Kata Sandi')

@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-3xl mx-auto">
    <!-- Header -->
    <div class="bg-blue-900 text-white py-10 shadow-lg rounded-t-lg">
        <div class="text-center">
            <h2 class="text-2xl font-bold">Ganti Kata Sandi</h2>
            <p class="text-gray-300 text-lg">Pastikan kata sandi baru Anda aman dan mudah diingat.</p>
        </div>
    </div>

    <!-- Card Form -->
    <div class="bg-white shadow-xl rounded-b-lg p-8 border border-gray-200">
        <form action="{{ route('user.update-password') }}" method="POST" class="space-y-6">
            @csrf

            <div class="relative">
                <label class="text-blue-900 font-semibold text-lg">Kata Sandi Lama</label>
                <input type="password" id="current_password" name="current_password" class="password-input w-full p-4 border rounded-md focus:ring-2 focus:ring-blue-600 text-lg transition duration-300 hover:border-blue-500 pr-12" required>
                <button type="button" class="password-toggle absolute right-4 top-12 text-gray-600 hover:text-gray-800">
                    <svg class="eye-icon w-6 h-6 transition duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 4.5C6 4.5 2 12 2 12s4 7.5 10 7.5S22 12 22 12s-4-7.5-10-7.5z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>

            <div class="relative">
                <label class="text-blue-900 font-semibold text-lg">Kata Sandi Baru</label>
                <input type="password" id="new_password" name="new_password" class="password-input w-full p-4 border rounded-md focus:ring-2 focus:ring-blue-600 text-lg transition duration-300 hover:border-blue-500 pr-12" required>
                <button type="button" class="password-toggle absolute right-4 top-12 text-gray-600 hover:text-gray-800">
                    <svg class="eye-icon w-6 h-6 transition duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 4.5C6 4.5 2 12 2 12s4 7.5 10 7.5S22 12 22 12s-4-7.5-10-7.5z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>

            <div class="relative">
                <label class="text-blue-900 font-semibold text-lg">Konfirmasi Kata Sandi Baru</label>
                <input type="password" id="new_password_confirmation" name="new_password_confirmation" class="password-input w-full p-4 border rounded-md focus:ring-2 focus:ring-blue-600 text-lg transition duration-300 hover:border-blue-500 pr-12" required>
                <button type="button" class="password-toggle absolute right-4 top-12 text-gray-600 hover:text-gray-800">
                    <svg class="eye-icon w-6 h-6 transition duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 4.5C6 4.5 2 12 2 12s4 7.5 10 7.5S22 12 22 12s-4-7.5-10-7.5z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>

            <div class="mt-6 flex justify-start space-x-2">
                <a href="{{ route('laporan.create') }}" class="text-white bg-red-600 px-4 py-3 rounded-md hover:bg-red-500 transition">
                    Batal
                </a>
                <button type="submit" class="bg-blue-900 text-white px-6 py-3 rounded-md hover:bg-blue-700 transition duration-300 shadow-md text-lg">
                    Simpan 
                </button>
            </div>
            
        </form>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const toggleButtons = document.querySelectorAll(".password-toggle");

        toggleButtons.forEach(button => {
            button.addEventListener("click", function () {
                let input = this.previousElementSibling;
                let icon = this.querySelector(".eye-icon");

                if (input.type === "password") {
                    input.type = "text";
                    icon.innerHTML = `<path d="M2 12s4-7.5 10-7.5S22 12 22 12s-4 7.5-10 7.5S2 12 2 12z"></path>`;
                    

                    setTimeout(() => {
                        input.type = "password";
                        icon.innerHTML = `<path d="M12 4.5C6 4.5 2 12 2 12s4 7.5 10 7.5S22 12 22 12s-4-7.5-10-7.5z"></path><circle cx="12" cy="12" r="3"></circle>`;
                    }, 2000);
                } else {
                    input.type = "password";
                    icon.innerHTML = `<path d="M12 4.5C6 4.5 2 12 2 12s4 7.5 10 7.5S22 12 22 12s-4-7.5-10-7.5z"></path><circle cx="12" cy="12" r="3"></circle>`;
                }
            });
        });
    });
</script>
@endsection