@model CreateProjectDto
@{
    ViewData["Title"] = "CreateProject";
    Layout = "~/Views/AdminLayout/Index.cshtml";
}

<div class="content">
    <div class="container-fluid">
        <h4 class="page-title">Ana Sayfa Projelerimiz İşlemleri</h4>
        <div class="row">
            <div class="col-md-12">
                <form asp-action="CreateProject" method="post" enctype="multipart/form-data" id="sliderForm">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Yeni Proje Girişi</div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Sol sütun -->
                                <div class="col-md-6">
                                    <h5 class="mb-3 font-weight-bold text-primary">Anasayfa Projeler Kısmında Gösterilecek Alanlar:</h5>
                                    <div class="form-group">
                                        <label for="Date">Oturum Tarihi</label>
                                        <input type="date" class="form-control" asp-for="Date" id="Date">
                                        <span asp-validation-for="Date" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="Title">Başlık</label>
                                        <input type="text" class="form-control" asp-for="Title" id="Title">
                                        <span asp-validation-for="Title" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="Location">Lokasyon</label>
                                        <input type="text" class="form-control" asp-for="Location" id="Location">
                                        <span asp-validation-for="Location" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="ShortDescription">Kısa Açıklama</label>
                                        <textarea rows="2" class="form-control" asp-for="ShortDescription" id="ShortDescription"></textarea>
                                        <span asp-validation-for="ShortDescription" class="text-danger"></span>
                                    </div>

                                    <!-- Görsel CoverFile-->
                                    <div class="form-group">
                                        <label for="ImageFile">Kapak Görseli</label><br />
                                        <span class="badge badge-danger">Tema Bütünlüğü için Görsel Boyutu 775x524 olmalıdır.</span>
                                        <input type="file" class="form-control" name="CoverFile" id="CoverFile">
                                    </div>
                                </div>

                                <!-- Sağ sütun -->
                                <div class="col-md-6">
                                    <h5 class="mb-3 font-weight-bold text-warning">Projeler Detay Sayfasında Gösterilecek Alanlar:</h5>
                                    <div class="form-group">
                                        <label for="Slug">Sayfa Adı</label>
                                        <input type="text" class="form-control" asp-for="Slug" id="Slug">
                                        <span asp-validation-for="Slug" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="GoogleMapIFrame">Google Map IFrame</label>
                                        <input type="text" class="form-control" asp-for="GoogleMapIFrame" id="GoogleMapIFrame">
                                        <span asp-validation-for="GoogleMapIFrame" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="LongDescription">Uzun Açıklama</label>
                                        <textarea rows="2" class="form-control" asp-for="LongDescription" id="LongDescription"></textarea>
                                        <span asp-validation-for="LongDescription" class="text-danger"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="VideoUrl">Video Url</label>
                                        <input type="text" class="form-control" asp-for="VideoUrl" id="VideoUrl">
                                        <span asp-validation-for="VideoUrl" class="text-danger"></span>
                                    </div>
                                    <!-- Görsel FloorPlanFile-->
                                    <div class="form-group">
                                        <label for="FloorPlanUrl">Kat Planı</label>
                                        <input type="file" class="form-control" name="FloorPlanFile" id="FloorPlanFile">
                                        <span asp-validation-for="FloorPlanUrl" class="text-danger"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="Status">Proje Durumu</label>
                                        <select asp-for="Status" class="form-control" asp-items="@(ViewBag.StatusList as List<SelectListItem>)">
                                            <option value="">Durum Seçiniz</option>
                                        </select>
                                        <span asp-validation-for="Status" class="text-danger"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-action">
                            <div id="errorMessages" class="text-danger mb-3"></div>
                            <button class="btn btn-success">Kaydet</button>
                            <a href="/Project/Index/" class="btn btn-warning ml-2">Listeye Dön</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@* Formdaki alanlar boş geçilemesin *@
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("sliderForm");
        const errorDiv = document.getElementById("errorMessages");

        const fields = [
            { id: "Location", name: "Lokasyon" },
            { id: "Title", name: "Başlık" },
            { id: "ShortDescription", name: "Kısa Açıklama" },
            { id: "GoogleMapIFrame", name: "Google Map IFrame" },
            { id: "CoverFile", name: "Kapak Görseli" },
            { id: "LongDescription", name: "Uzun Açıklama" },
            { id: "Slug", name: "Dinamik Sayfa Adı" }
        ];

        // Her input için focus olduğunda çerçeveyi temizle
        fields.forEach(field => {
            const input = document.getElementById(field.id);
            input.addEventListener("focus", function () {
                input.style.border = "";
                errorDiv.innerHTML = ""; // Hataları da temizle
            });
        });

        // Form submit kontrolü
        form.addEventListener("submit", function (e) {
            let isValid = true;
            let messages = [];

            errorDiv.innerHTML = ""; // Önceki mesajları temizle

            fields.forEach(field => {
                const input = document.getElementById(field.id);

                if (input.type === "file") {
                    if (input.files.length === 0) {
                        isValid = false;
                        messages.push(`<li>${field.name} yüklenmelidir.</li>`);
                        input.style.border = "2px solid red";
                    }
                } else {
                    if (input.value.trim() === "") {
                        isValid = false;
                        messages.push(`<li>${field.name} alanı boş olamaz.</li>`);
                        input.style.border = "2px solid red";
                    }
                }
            });

            if (!isValid) {
                e.preventDefault();
                errorDiv.innerHTML = `<ul>${messages.join("")}</ul>`;
            }
        });
    });
</script>

<script>
    // Slug dönüştürücü fonksiyon
    function generateSlug(text) {
        const map = {
            ç: 'c', Ç: 'c',
            ğ: 'g', Ğ: 'g',
            ü: 'u', Ü: 'u',
            ş: 's', Ş: 's',
            ı: 'i', İ: 'i',
            ö: 'o', Ö: 'o'
        };

        return text
            .trim()
            .toLowerCase()
            .replace(/[çÇğĞüÜşŞıİöÖ]/g, letter => map[letter])
            .replace(/[^a-z0-9\s-]/g, '')           // harf, sayı, boşluk ve tire dışındakileri sil
            .replace(/\s+/g, '-')                   // boşlukları tireye çevir
            .replace(/-+/g, '-')                    // birden fazla tire varsa teke indir
            .replace(/^-+|-+$/g, '');               // baştaki ve sondaki tireleri sil
    }

    document.addEventListener("DOMContentLoaded", function () {
        const titleInput = document.getElementById("Title");
        const slugInput = document.getElementById("Slug");

        if (titleInput && slugInput) {
            titleInput.addEventListener("input", function () {
                const slug = generateSlug(titleInput.value);
                slugInput.value = slug;
            });
        }
    });
</script>


<style>
    .input-error {
        border: 2px solid red !important;
        box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
    }
</style>