@extends('layouts.dashboardUser')

@section('title', 'Input Laporan')

@section('content')
<section class="text-center py-10 bg-gradient-to-r from-blue-100 to-blue-200 rounded-lg mx-4">
    <h2 class="text-4xl font-extrabold text-blue-900 animate-fade-in">
        Selamat Datang, {{ Auth::check() ? Auth::user()->name : 'Pengguna' }}!
    </h2>
    <p class="text-lg mt-2 text-gray-700">Isi laporan kerja Anda untuk hari ini.</p>
</section>

@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


<section class=" flex justify-center items-center min-h-screen py-10">
    <div class="bg-white p-10 rounded-2xl w-full max-w-3xl">
        
        <form action="{{ route('laporan.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="relative">
                    <label class="block font-semibold mb-2 text-left text-blue-900">Lokasi</label>
                    <input type="text" name="lokasi" id="lokasi" onkeyup="filterLokasi()" placeholder="Masukkan lokasi kerja" 
                        class="w-full p-3 border border-blue-900 rounded-lg bg-gray-50 shadow-sm">
                    
                    <!-- Daftar rekomendasi lokasi -->
                    <div id="lokasi-suggestions" class="absolute bg-white border border-gray-300 rounded-lg mt-1 w-full hidden shadow-lg z-10"></div>
                </div>
                
                <div>
                    <label class="block font-semibold mb-2 text-left text-blue-900">Tanggal</label>
                    <input type="date" name="tanggal" required class="w-full p-3 border border-blue-900 rounded-lg bg-gray-50 shadow-sm">
                </div>
            </div>

            <div>
                <label class="block font-semibold mb-2 text-left text-blue-900">Hasil Kerja</label>
                <textarea name="hasil_kerja" rows="3" required class="w-full p-3 border border-blue-900 rounded-lg bg-gray-50 shadow-sm"></textarea>
            </div>

            <div>
                <label class="block font-semibold mb-2 text-left text-blue-900">Catatan</label>
                <textarea name="catatan" rows="2" class="w-full p-3 border border-blue-900 rounded-lg bg-gray-50 shadow-sm"></textarea>
            </div>
            <div>
                <label class="block font-semibold mb-2 text-left text-blue-900">Upload Foto Dokumentasi</label>
                <div class="border border-blue-900 rounded-lg p-3 bg-gray-50 shadow-sm flex items-center justify-center cursor-pointer hover:bg-blue-100 transition duration-300">
                    <input type="file" name="foto[]" accept="image/*" multiple onchange="previewImages(event)" class="hidden" id="upload-file">
                    <label for="upload-file" class="cursor-pointer flex items-center space-x-2 text-blue-700 font-semibold">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5V19a2 2 0 002 2h14a2 2 0 002-2v-2.5M16 12l-4-4m0 0l-4 4m4-4v12" />
                        </svg> 
                        <span>Upload Foto</span>
                    </label>
                </div>
                <div id="image-preview" class="grid grid-cols-3 gap-2 mt-2"></div>
            </div>

            <button type="submit" class="w-full mt-6 bg-blue-900 text-white py-3 rounded-lg text-lg font-semibold hover:shadow-lg transition-all transform hover:scale-105">
                Kirim Laporan
            </button>
        </form>
    </div>
</section>
<script>
    async function filterLokasi() {
        let input = document.getElementById("lokasi").value;
        let suggestions = document.getElementById("lokasi-suggestions");

        if (input.length < 1) {
            suggestions.classList.add("hidden");
            return;
        }

        const response = await fetch(`/autocomplete-lokasi?query=${input}`);
        const lokasiList = await response.json();

        // Clear sebelumnya
        suggestions.innerHTML = "";

        if (lokasiList.length) {
            suggestions.classList.remove("hidden");
            lokasiList.forEach(lokasi => {
                let div = document.createElement("div");
                div.classList.add("p-2", "hover:bg-gray-100", "cursor-pointer", "border-b");
                div.textContent = lokasi;
                div.onclick = function() {
                    document.getElementById("lokasi").value = lokasi;
                    suggestions.classList.add("hidden");
                };
                suggestions.appendChild(div);
            });
        } else {
            suggestions.classList.add("hidden");
        }
    }

    // Menutup autocomplete saat klik di luar
    document.addEventListener("click", function(event) {
        let suggestions = document.getElementById("lokasi-suggestions");
        let lokasiInput = document.getElementById("lokasi");
        if (!lokasiInput.contains(event.target)) {
            suggestions.classList.add("hidden");
        }
    });
</script>

<script>
    let selectedFiles = []; // Menyimpan file yang dipilih

    function previewImages(event) {
        const files = Array.from(event.target.files);
        const previewContainer = document.getElementById("image-preview");

        // Tambahkan file ke array hanya jika belum ada
        files.forEach(file => {
            if (!selectedFiles.some(f => f.name === file.name)) {
                selectedFiles.push(file);
            }
        });

        renderPreview(); // Render ulang tampilan
    }

    function renderPreview() {
        const previewContainer = document.getElementById("image-preview");
        previewContainer.innerHTML = "";

        selectedFiles.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement("div");
                div.classList.add("relative", "inline-block", "m-2");

                const img = document.createElement("img");
                img.src = e.target.result;
                img.classList.add("w-32", "h-32", "object-cover", "rounded-lg", "shadow-md");

                const btnRemove = document.createElement("button");
                btnRemove.innerHTML = "✖";
                btnRemove.classList.add("absolute", "top-1", "right-1", "bg-blue-100", "text-white", "p-1", "rounded-full", "text-xs", "opacity-80", "hover:opacity-100");
                btnRemove.onclick = function() {
                    removeImage(index);
                };

                div.appendChild(img);
                div.appendChild(btnRemove);
                previewContainer.appendChild(div);
            };
            reader.readAsDataURL(file);
        });

        // Update input file agar hanya file yang tersisa yang dikirim ke server
        updateFileInput();
    }

    function removeImage(index) {
        selectedFiles.splice(index, 1); // Hapus dari array
        renderPreview(); // Render ulang tampilan
    }

    function updateFileInput() {
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        document.getElementById("upload-file").files = dataTransfer.files;
    }
</script>


@endsection