<link rel="stylesheet" href="/admin/assets/libs/select2/select2.css" />

<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">

                <div class="card-content">
                    <div class="card-body">
                        <form class="needs-validation" novalidate action="/dashboard/services/create" method="POST"
                            id="addService" 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' , imgClass: 'd-block uploadedAvatar medium-img rounded' ,
                                            invalidFeedback :i18n.__('common.uploadNewImage') }) %>


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



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



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


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


                                                            <div class="form-group">
                                                                <label for="departments">
                                                                    <%= i18n.__('departments.departments') %>
                                                                </label>

                                                                <select multiple
                                                                    class="form-control select2 select2-hidden-accessible"
                                                                    style="width: 100%;" tabindex="-1"
                                                                    aria-hidden="true" name="departments" required
                                                                    data-placeholder="<%= i18n.__('services.selectDepartments') %>">

                                                                    <% departments.forEach((item)=> { %>
                                                                        <option value="<%= item._id %>">
                                                                            <%= item.name?.[lang] %>
                                                                        </option>
                                                                        <% }) %>
                                                                </select>

                                                                <div class="invalid-feedback">
                                                                    <%= i18n.__('common.{{field}}Required', { field:
                                                                        i18n.__('departments.departments') }) %>
                                                                </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.add') %>
                                                                </button>
                                                                <a class="btn btn-label-dribbble waves-effect"
                                                                    href="<%=referer%>">
                                                                    <%= i18n.__('common.referer') %>
                                                                </a>
                                                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</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');

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

        </script>
