@model List<ResultProjectGalleryDto>
@using Microsoft.AspNetCore.Mvc.Rendering
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/AdminLayout/Index.cshtml";
    var apiBaseUrl = ViewData["ApiBaseUrl"] as string;
}

<h3>Projeye Ait Galeri Görselleri</h3>

<a href="/ProjectGallery/CreateProjectGallery/" class="btn btn-outline-primary">Yeni Ekle</a>

<form asp-action="Index" method="get">
    <div class="form-group mb-3">
        <label>Proje Seçiniz:</label>
        <select id="projectSelect" class="form-control">
            <option value="">-- Proje Seçin --</option>
            @foreach (SelectListItem project in ViewBag.ProjectList)
            {
                <option value="@project.Value">@project.Text</option>
            }
        </select>
    </div>
</form>

<!-- Image List -->
<div id="imageListContainer" style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;">
    <!-- Görseller JavaScript ile burada yüklenecek -->
</div>

<script>
    document.getElementById("projectSelect").addEventListener("change", function () {
        var projectId = this.value;
        if (projectId && '@apiBaseUrl') {
             fetch(`@apiBaseUrl/api/ProjectGallery/GetByProjectId/${projectId}`)
                .then(res => res.json())
                .then(data => {
                    let container = document.getElementById("imageListContainer");
                    container.innerHTML = ""; // Mevcut içeriği temizle

                    if (data.length === 0) {
                        container.innerHTML = "<p>Bu projeye ait galeri bulunamadı.</p>";
                        return;
                    }

                    // Görselleri liste olarak ekle
                    data.forEach(item => {
                        let imageElement = document.createElement("img");
                        imageElement.src = item.imageUrl;
                        imageElement.alt = "Project Image";
                        imageElement.style = "width: 100%; max-width: 300px; height: auto; object-fit: cover;";

                        container.appendChild(imageElement); // Görseli listeye ekle
                    });
                });
        }
    });
</script>