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

<div class="content">
    <div class="container-fluid">
        <h4 class="page-title">Ana Sayfa Ekibimiz İşlemleri</h4>
        <div class="row">
            <div class="col-md-12">
                <form asp-action="CreateTeam" method="post" enctype="multipart/form-data" id="sliderForm">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Yeni Ekip Üye Girişi</div>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="NameSurname" class="col-md-2 col-form-label">Adı Soyadı</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" asp-for="NameSurname" id="NameSurname">
                                    <span asp-validation-for="NameSurname" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="Title" class="col-md-2 col-form-label">Ünvanı</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" asp-for="Title" id="Title">
                                    <span asp-validation-for="Title" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="Facebook" class="col-md-2 col-form-label">Facebook</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" asp-for="Facebook" id="Facebook">
                                    <span asp-validation-for="Facebook" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="Instagram" class="col-md-2 col-form-label">Instagram</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" asp-for="Instagram" id="Instagram">
                                    <span asp-validation-for="Instagram" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="Linkedin" class="col-md-2 col-form-label">Linkedin</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" asp-for="Linkedin" id="Linkedin">
                                    <span asp-validation-for="Linkedin" class="text-danger"></span>
                                </div>
                            </div>
                            <!-- Görsel -->
                            <div class="form-group row">
                                <label for="ImageFile" class="col-md-2 col-form-label">Görsel</label>
                                <div class="col-md-10">
                                    <input type="file" class="form-control" asp-for="ImageFile" id="ImageFile">
                                    <span asp-validation-for="ImageFile" class="text-danger"></span>
                                    <span class="badge badge-danger">Tema Bütünlüğü için Görsel Boyutu 290x284 olmaldır.</span>
                                </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="/Team/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: "NameSurname", name: "Adı Soyadı" },
            { id: "Title", name: "Ünvan" },
            { id: "ImageFile", name: "Görsel" }
        ];

        // 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 (isteğe bağlı)
            });
        });

        // 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.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>

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