@extends('layouts.dashboardUser')

@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(), 500);
            }
        }
    </script>

    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }
    </style>
@endif
<!-- Wrapper utama dengan max-width yang sama untuk bagian biru dan form -->
<div class="max-w-4xl mx-auto">
    <!-- Header Biru dengan Profile -->
    <div class="bg-blue-900 text-white py-10 shadow-lg rounded-t-lg">
        <div class="flex flex-col items-center">
            <!-- Foto Profil -->
            <div class="relative w-32 h-32 mb-4">
                <img id="profile-preview" 
                     src="{{ Auth::user()->profile_picture ? asset('storage/' . Auth::user()->profile_picture) : '/images/default-avatar.png' }}" 
                     class="w-32 h-32 rounded-full border-4 border-white object-cover shadow-lg">
                
                <!-- Tombol Edit Foto -->
                <label for="profile_picture" class="absolute bottom-2 right-2 bg-gray-700 text-white p-2 rounded-full cursor-pointer hover:bg-gray-800 transition">
                    <i class="fas fa-camera"></i>
                </label>

                <!-- Form Upload -->
                <form action="{{ route('user.updateProfilePicture') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input id="profile_picture" type="file" name="profile_picture" class="hidden" accept="image/*" onchange="previewAndSubmit()">
                </form>
            </div>

            <h2 class="text-2xl font-bold">{{ Auth::user()->name }}</h2>
            <p class="text-gray-300">{{ Auth::user()->email }}</p>
        </div>
    </div>

    <!-- Card Edit Profil -->
    <div class="bg-white shadow-xl rounded-b-lg p-8 border border-gray-200">
        <h3 class="text-xl font-semibold text-blue-900 mb-6 text-center">Edit Profil</h3>

        <!-- Form Edit Profil -->
        <form action="{{ route('user.profile.update') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Nama -->
                <div>
                    <label class="block text-blue-900 font-medium mb-1">Nama Lengkap</label>
                    <div class="relative">
                        <input type="text" name="name" value="{{ Auth::user()->name }}" 
                               class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                        <i class="fas fa-user absolute right-3 top-4 text-gray-400"></i>
                    </div>
                </div>

             <!-- Email -->
<div>
    <label class="block text-blue-900 font-medium mb-1">Email</label>
    <div class="relative">
        <input type="email" name="email" value="{{ Auth::user()->email }}" 
               class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
        <i class="fas fa-envelope absolute right-3 top-4 text-gray-400"></i>
    </div>
</div>

                <!-- Nomor Telepon -->
                <div>
                    <label class="block text-blue-900 font-medium mb-1">Nomor Telepon</label>
                    <div class="relative">
                        <input type="text" name="phone" value="{{ Auth::user()->phone }}" 
                               class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                        <i class="fas fa-phone absolute right-3 top-4 text-gray-400"></i>
                    </div>
                </div>

                <!-- Kota -->
                <div>
                    <label class="block text-blue-900 font-medium mb-1">Kota</label>
                    <div class="relative">
                        <input type="text" name="city" value="{{ Auth::user()->city }}" 
                               class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 transition shadow-sm">
                        <i class="fas fa-map-marker-alt absolute right-3 top-4 text-gray-400"></i>
                    </div>
                </div>
            </div>
            <div class="mt-6 flex justify-start space-x-4">
                <a href="{{ route('laporan.create') }}" class="w-full sm:w-auto text-white bg-red-600 px-4 py-3 rounded-md hover:bg-red-500 transition text-center">
                    Batal
                </a>
                <button type="submit" class="bg-blue-900 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg">
                    Simpan
                </button>
            </div>
            
        </form>
    </div>
</div>

<!-- JavaScript untuk Preview Foto -->
<script>
    function previewAndSubmit() {
        const input = document.getElementById('profile_picture');
        const preview = document.getElementById('profile-preview');

        if (input.files && input.files[0]) {
            let reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);

            // Auto-submit form setelah gambar dipilih
            input.closest('form').submit();
        }
    }
</script>

<!-- Tambahkan Font Awesome untuk Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection