<div class="content-body">
    <!-- // Basic multiple Column Form section start -->
    <section id="multiple-column-form" class="kt-info-editor">
        <%- include('../components/editorHero.ejs', { mode: 'edit', icon: 'ti-slideshow', listUrl: '/dashboard/infoSliders', description: (typeof lang === 'undefined' || lang !== 'en') ? 'حدّث صورة الشريحة ونصوصها مع الحفاظ على وضوح المحتوى.' : 'Update the slide image and copy while keeping the content clear.' }) %>
        <div class="row match-height">
            <div class="col-12">
                <div class="card">

                    <div class="card-content">
                        <div class="card-body">

                            <form id="editSlider" method="post" class="needs-validation" novalidate
                                action="/dashboard/infoSliders/edit/<%=slider.sliderId%>"
                                enctype="multipart/form-data">

                                <%- include('../../components/input.ejs', inputAttrs={ type: "hidden" , name:"_csrf",
                                    value:csrfToken, classes: "" , ids:"" }) %>

                                    <%- include('../../components/input.ejs', inputAttrs={ type: "hidden" , name:"id",
                                        value:slider.sliderId, classes: "" , ids:"" }) %>

                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-12">

                                                    <%- include('../../components/image.ejs', { required:'',
                                                        url:slider.image , id:'image', name:'image',
                                                        invalidFeedback:i18n.__('common.pleaseEnterImage'), layout : 1
                                                        }) %>
                                                </div>

                                                <%- include('../../components/input.ejs', inputAttrs={ type: "text" ,
                                                    name:"titleAr", required:true, label:i18n.__('infoSite.titleAr'),
                                                    invalidMsg:i18n.__('common.{{field}}Required',{field:i18n.__('infoSite.titleAr')}),
                                                    placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.titleAr')}),
                                                    value:slider.title['ar'], classes:["form-control"], ids:"",
                                                    oninput: "validateInput(this)" }) %>

                                                    <%- include('../../components/input.ejs', inputAttrs={ type: "text"
                                                        , name:"titleEn", label:i18n.__('infoSite.titleEn'),
                                                        invalidMsg:i18n.__('common.{{field}}Required',{field:i18n.__('infoSite.titleEn')}),
                                                        placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.titleEn')}),
                                                        value:slider.title['en'], required:true,
                                                        classes:["form-control"], ids:"", oninput: "validateInput(this)"
                                                        }) %>



                                                            <div class="col-md-6 col-12">
                                                                <div class="form-group">
                                                                    <label for="first-name-column">
                                                                        <%= i18n.__('infoSite.descriptionAr') %>
                                                                    </label>
                                                                    <div class="controls">
                                                                        <textarea name="descriptionAr"
                                                                            class="form-control"
                                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.descriptionAr')}) %>"
                                                                            oninput="validateInput(this)" required
                                                                            cols="30"
                                                                            rows="10"> <%=slider.description['ar']%></textarea>
                                                                        <div class="invalid-feedback">
                                                                            <%= i18n.__('common.{{field}}Required',{field:i18n.__('infoSite.descriptionAr')})
                                                                                %> *
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-12">
                                                                <div class="form-group">
                                                                    <label for="first-name-column">
                                                                        <%= i18n.__('infoSite.descriptionEn') %>
                                                                    </label>
                                                                    <div class="controls">
                                                                        <textarea name="descriptionEn"
                                                                            class="form-control"
                                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.descriptionEn')}) %>"
                                                                            oninput="validateInput(this)" required
                                                                            cols="30"
                                                                            rows="10"> <%=slider.description['en']%></textarea>
                                                                        <div class="invalid-feedback">
                                                                            <%= i18n.__('common.{{field}}Required',{field:i18n.__('infoSite.descriptionEn')})
                                                                                %> *
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                            <div class="col-12 d-flex justify-content-center mt-3">
                                                                <button type="submit"
                                                                    class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit_button">
                                                                    <%= i18n.__('common.edit') %>
                                                                </button>
                                                                <a class="btn btn-label-dribbble waves-effect"
                                                                    href="<%=referer%>">
                                                                    <%= i18n.__('common.referer') %>
                                                                </a>
                                                            </div>

                                            </div>
                                        </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- // Basic Floating Label Form section end -->
</div>

<%- include('includes.ejs') %>
    <%- include('../../includes/imageJs.ejs') %>

        <script>
            $('form').on('submit', function (e) {
                const fileInput = $('input[type="file"]');
                const file = fileInput[0].files[0];
                const feedback = fileInput.closest('.image_groub').find('.invalid-feedback');
                const submitButton = $('.submit_button');

                const isResetClicked = fileInput.data('resetClicked');
                if (!file && isResetClicked) {
                    fileInput.addClass('is-invalid');
                    feedback.text("<%= i18n.__('common.pleaseEnterImage') %>").addClass('d-block');
                    submitButton.attr('disabled', true);
                    e.preventDefault();
                    return false;
                }

                submitButton.attr('disabled', false);
            });
        </script>
