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

<div class="max-w-4xl mx-auto">
    <!-- Header Profil Admin -->
    <div class="bg-blue-900 text-white py-10 shadow-lg rounded-t-lg">
        <div class="flex flex-col items-center">
            <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 -->
                <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('admin.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>

    <!-- Form 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 Admin</h3>

        <form action="{{ route('admin.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>
            </div>

            <div class="mt-6 flex justify-start space-x-4">
                <a href="{{ route('admin.laporan.grafik') }}" 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>

<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]);
            input.closest('form').submit();
        }
    }
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

@endsection