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


<style>
    .custom-dropdown {
        display: flex;
        align-items: center;
        width: 100%;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        background-color: #1e1e2d;
        /* Adjust background color */
        color: #fff;
        cursor: pointer;
        position: relative;
    }

    .selected-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .selected-option img {
        margin-right: 10px;
        width: 25px;
        height: 18px;
    }

    .dropdown-list {
        display: none;
        position: absolute;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        background-color: #1e1e2d;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 10;
    }

    .dropdown-list li {
        padding: 10px;
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background 0.3s;
    }

    .dropdown-list li:hover {
        background-color: #333;
    }

    .dropdown-list img {
        margin-right: 10px;
        width: 20px;
        height: 15px;
    }
</style>

<!-- // Basic multiple Column Form section start -->
<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 id="editCountry" class="needs-validation" novalidate
                            action="/dashboard/countries/edit/<%=country._id %>" method="POST"
                            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:country.imageUrl || '' ,
                                            id:'image', name:'image' , layout :1 , invalidFeedback:
                                            i18n.__('common.pleaseEnterImage') }) %>

                                            <% languages.forEach((lang)=>{%>

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

                                                    <%})%>


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



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

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

<%- 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>
