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

<div class="content-body">
    <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/subDepartments/edit/<%= subDepartment._id %>" method="POST"
                                id="editSubDepartment" 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: '' , url:
                                                subDepartment.imageUrl || '', id: 'image' ,
                                                name: 'image' , imgClass: 'd-block uploadedAvatar medium-img rounded',
                                                invalidFeedback: i18n.__('common.pleaseEnterImage'), layout: 1 }) %>


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

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

                                                            <div class="form-group">
                                                                <label for="departments">
                                                                    <%= i18n.__('departments.departments') %>
                                                                </label>
                                                            
                                                                <select 
                                                                    class="form-control select2 select2-hidden-accessible"
                                                                    style="width: 100%;"
                                                                    name="department"
                                                                    id="department"
                                                                    disabled
                                                                    required
                                                                    data-placeholder="<%= i18n.__('departments.selectDepartments') %>">
                                                                    
                                                                    <% departments.forEach((item) => { %>                                                                    
                                                                        <option value="<%= item._id %>" <%= String(subDepartment.department._id) === String(item._id) ? 'selected' : '' %>>
                                                                            <%= item.name?.[lang] %>
                                                                        </option>
                                                                    <% }) %>
                                                                </select>
                                                                <input type="hidden" name="department" value="<%= subDepartment.department?._id || subDepartment.department %>" />
                                                            
                                                                <div class="invalid-feedback">
                                                                    <%= i18n.__('common.{{field}}Required', { field: i18n.__('departments.departments') }) %>
                                                                </div>
                                                            </div>
                                                            
                                                            

                                                                <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.edit') %>
                                                                    </button>
                                                                    <a class="btn btn-label-dribbble waves-effect"
                                                                        href="<%=referer%>">
                                                                        <%= i18n.__('common.referer') %>
                                                                    </a>
                                                                </div>
                                        </div>


                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

    </section>
</div>


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

        <script>
            $(document).ready(function () {
                const $dept = $('#department');
                if ($dept.length) {
                    $dept.prop('disabled', true);
                    // ensure select2 reflects disabled state + blocks interaction
                    $dept.trigger('change');
                    setTimeout(() => {
                        const $select2 = $dept.next('.select2');
                        $select2.find('.select2-selection').attr('aria-disabled', 'true').css('pointer-events', 'none');
                    }, 0);
                }
            });

            $('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>
