Untitled

<style>
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        }
    
        .popup img {
            max-width: 100%;
            height: auto;
        }
    </style>
    
    <script>
       const aracGorselleriListesi = document.querySelectorAll("#arac-kirala img");
aracGorselleriListesi.forEach((aracGorseli) => {
    aracGorseli.addEventListener("click", () => {
        const aracId = aracGorseli.getAttribute("data-arac-id");
        showPopup(aracId);
    });
});



        function showPopup(aracId) {
            fetch(`http://localhost:5116/${aracId}`)
                .then(response => response.json())
                .then(data => {
                    const popup = document.getElementById("popup");
                    popup.querySelector("#popup-id").textContent = data.Id;
                    popup.querySelector("#popup-marka").textContent = data.Marka;
                    popup.querySelector("#popup-model").textContent = data.Model;
                    popup.querySelector("#popup-yakit").textContent = data.YakitTuru;
                    popup.querySelector("#popup-beygir").textContent = data.Beygir;
                    popup.querySelector("#popup-koltuk").textContent = data.KoltukSayisi;
                    popup.style.display = "block";
                })
                .catch(error => console.error('Hata:', error));
        }
    
        const aracGorselleri = document.querySelectorAll("#arac-kirala img");
        aracGorselleri.forEach((aracGorseli, index) => {
            aracGorseli.addEventListener("click", () => {
                const aracId = index + 1; // Varsayılan olarak sırayla 1, 2, 3...
                showPopup(aracId);
            });
        });
    
        document.getElementById("popup-close").addEventListener("click", () => {
            document.getElementById("popup").style.display = "none";
        });
    </script>