<link rel="stylesheet" type="text/css" href="/admin/app-assets/css/plugins/forms/validation/form-validation.css">
<link rel="stylesheet" href="/admin/assets/libs/select2/select2.css" />

<!-- // Basic multiple Column Form section start -->
<section id="multiple-column-form" class="kt-info-editor">
    <%- include('../components/editorHero.ejs', { mode: 'create', icon: 'ti-route', listUrl: '/dashboard/howWorks', description: (typeof lang === 'undefined' || lang !== 'en') ? 'أضف خطوة واضحة بصورة وعنوان باللغتين.' : 'Add a clear journey step with an image and bilingual title.' }) %>
    <div class="row match-height">
        <div class="col-12">
            <div class="card">

                <div class="card-content">
                    <div class="card-body">
                        <form id="howWork" method="post" class="needs-validation" novalidate
                            action="/dashboard/howWorks/create" enctype="multipart/form-data">

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

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


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




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


                                            


                                                        <div class="pt-4 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.add') %>
                                                            </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 -->

<%- 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');

                if (!file) {
                    fileInput.addClass('is-invalid');
                    feedback.text("<%= i18n.__('common.pleaseEnterImage') %>").addClass('d-block');
                    e.preventDefault();
                }
            });
        </script>
