<style>
    i {
        color: inherit !important;
    }
</style>
<!-- account setting page start -->
<section id="page-account-settings" class="kt-info-settings">
    <header class="kt-info-settings__hero">
        <div class="kt-info-settings__identity">
            <span class="kt-info-settings__icon" aria-hidden="true"><i class="ti ti-world-cog"></i></span>
            <div>
                <p class="kt-info-settings__eyebrow"><%= (typeof lang === 'undefined' || lang !== 'en') ? 'هوية واجهة المنصة' : 'Storefront identity' %></p>
                <h1><%= title %></h1>
                <p><%= (typeof lang === 'undefined' || lang !== 'en') ? 'أدر بيانات الموقع والنصوص التعريفية والأصول البصرية من وحدة إعداد واحدة.' : 'Manage site details, descriptive copy, and visual assets from one configuration workspace.' %></p>
            </div>
        </div>
        <span class="kt-info-settings__state"><i class="ti ti-shield-check"></i><%= (typeof lang === 'undefined' || lang !== 'en') ? 'إعدادات محمية' : 'Protected settings' %></span>
    </header>
    <div class="row">
        <!-- left menu section -->
        <div class="col-md-3 mb-2 mb-md-0">
            <ul class="nav nav-pills flex-column mt-md-0 mt-1">
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center py-75 active" id="account-pill-main"
                        data-bs-toggle="pill" href="#account-vertical-main" aria-expanded="true">
                        <i class="feather icon-globe font-medium-3"></i>
                        <span class="ms-1">
                            <%= i18n.__('infoSite.settingsWebsite') %>
                        </span>
                    </a>
                </li>
                <li class="nav-item" style="margin-top: 3px">
                    <a class="nav-link d-flex align-items-center py-75" id="account-pill-texts" data-bs-toggle="pill"
                        href="#account-vertical-texts" aria-expanded="false">
                        <i class="feather icon-edit font-medium-3"></i>
                        <span class="ms-1">
                            <%= i18n.__('infoSite.repeatedTexts') %>
                        </span>
                    </a>
                </li>
                <li class="nav-item" style="margin-top: 3px">
                    <a class="nav-link d-flex align-items-center py-75" id="account-pill-about" data-bs-toggle="pill"
                        href="#account-vertical-about" aria-expanded="false">
                        <i class="feather icon-file font-medium-3"></i>
                        <span class="ms-1">
                            <%= i18n.__('infoSite.aboutApp') %>
                        </span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- right content section -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="account-vertical-main"
                                aria-labelledby="account-pill-main" aria-expanded="true">
                                <form class="editInfoSiteSetting  form-horizontal needs-validation"
                                    action="/dashboard/infoSettings/edit" method="post" enctype="multipart/form-data"
                                    novalidate>

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

                                        <!-- <input type="hidden" name="_id" value="<%= infoSite.id %>"> -->

                                        <div class="row">
                                            <%languages.forEach((item)=>{%>
                                                    <%- include('../components/input.ejs', inputAttrs={ type: "text" ,
                                                        name:`name.${item.value}`, value:infoSite.name[item.value],
                                                        label:i18n.__('infoSite.siteSettingName'+item.key),
                                                        invalidMsg:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.name_'+
                                                        item.key)}), required:true,
                                                        placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.name_'+
                                                        item.key)}) , classes: ["form-control"], ids:[`info-site-name-${item.value}`],
                                                        oninput: "validateInput(this)" }) %>


                                                        <%})%>

                                                            <%- include('../components/input.ejs', inputAttrs={
                                                                type: "email" , name: "email" , value: infoSite.email,
                                                                label: i18n.__('common.email'), placeholder:
                                                                i18n.__('common.{{field}}Placeholder',{field:i18n.__('common.email')}),
                                                                Placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('common.email')}) ,
                                                                classes: ["form-control"], ids: ["info-site-email"],
                                                                oninput: "validateInput(this)" , required: true,
                                                                invalidMsg: i18n.__('common.{{field}}Placeholder',{field:i18n.__('common.email')}),
                                                                oninvalid: "this.setCustomValidity(i18n.__('common.emailMustBeValid'))"
                                                                , oninput: "validateInput(this)" }) %>



                                                                <%- include('../components/input.ejs', inputAttrs={
                                                                    type: "text" , name:'phone',
                                                                    oninput: "validateInput(this)" ,
                                                                    label:i18n.__('common.phone'),
                                                                    invalidMsg:i18n.__('common.phoneNoLess'),
                                                                    required:true, value:infoSite.phone,
                                                                    placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('common.phone')})
                                                                    , classes:["form-control"], ids:"", minlength:"10",
                                                                    maxlength:'10',
                                                                    oninput: "this.value = this.value.replace(/[^0-9]/g, ''); validateInput(this)"
                                                                    }) %>


                                                                    <%languages.forEach((item)=>{%>
                                                                            <%- include('../components/input.ejs',
                                                                                inputAttrs={ type: "text" ,
                                                                                name:`address.${item.value}`,
                                                                                value:infoSite.address[item.value],
                                                                                label:i18n.__('infoSite.address'+item.key),
                                                                                placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.address'+item.key)}),
                                                                                invalidMsg:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.address'+item.key)})
                                                                                , classes: ["form-control"],
                                                                                ids:[`info-site-address-${item.value}`],
                                                                                oninput: "validateInput(this)" }) %>

                                                                                <%})%>


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

                                                                                            <%- include('../components/input.ejs',
                                                                                                inputAttrs={
                                                                                                type: "color" ,
                                                                                                name:`mainColor`, label:
                                                                                                i18n.__('infoSite.mainColor'),
                                                                                                value:infoSite.mainColor,
                                                                                                placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.mainColor')})
                                                                                                , classes:
                                                                                                ["form-control"],
                                                                                                ids:["info-site-main-color"],
                                                                                                oninput: "validateInput(this)"
                                                                                                }) %>



                                                                                                <%- include('../components/input.ejs',
                                                                                                    inputAttrs={
                                                                                                    type: "color" ,
                                                                                                    name:`buttonsColor`,
                                                                                                    value:infoSite.buttonsColor,
                                                                                                    label:i18n.__('infoSite.colorLabel'),
                                                                                                    placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.colorLabel')})
                                                                                                    , classes:
                                                                                                    ["form-control"],
                                                                                                    ids:["info-site-buttons-color"],
                                                                                                    oninput: "validateInput(this)"
                                                                                                    }) %>


                                                                                                    <%- include('../components/input.ejs',
                                                                                                        inputAttrs={
                                                                                                        type: "color" ,
                                                                                                        name:`hoverColor`,
                                                                                                        value:infoSite.hoverColor,
                                                                                                        placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.colorLabel')})
                                                                                                        ,
                                                                                                        label:i18n.__('infoSite.colorLabelhover')
                                                                                                        , classes:
                                                                                                        ["form-control"],
                                                                                                        ids:["info-site-hover-color"],
                                                                                                        oninput: "validateInput(this)"
                                                                                                        }) %>


                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="col-12">
                                                                                        <div class="row">
                                                                                            <div
                                                                                                class="col-md-6 d-flex mt-5 flex-column align-items-center">
                                                                                                <span class="mb-4">
                                                                                                    <%= i18n.__('infoSite.siteLogo')
                                                                                                        %>
                                                                                                </span>

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

                                                                                            </div>

                                                                                            <div
                                                                                                class="col-md-6 d-flex mt-5 flex-column align-items-center">
                                                                                                <span class="mb-4">
                                                                                                    <%= i18n.__('infoSite.loaderImage')
                                                                                                        %>
                                                                                                </span>

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

                                                                                            </div>

                                                                                        </div>
                                                                                    </div>

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


                            <div role="tabpanel" class="tab-pane" id="account-vertical-texts"
                                aria-labelledby="account-pill-texts" aria-expanded="false">
                                <form class="editInfoSiteSetting" action="/dashboard/infoSettings/edit" method="post"
                                    enctype="multipart/form-data">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <!-- <input type="hidden" name="_id" value="<%= infoSite.id %>"> -->
                                    <div class="row">
                                        <%languages.forEach((item)=>{ %>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.details'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control"
                                                            name="description.<%=item.value%>"
                                                            oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.details'+item.key)}) %>"><%= infoSite.description[item.value] %></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.services'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control"
                                                            name="servicesText.<%=item.value%>"
                                                            oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.services'+item.key)}) %>"><%=infoSite.servicesText[item.value]%></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.howWork'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control"
                                                            name="howWorkText.<%=item.value%>"
                                                            oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.howWork'+item.key)}) %>"><%= infoSite.howWorkText[item.value] %></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.partners'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control"
                                                            name="partnersText.<%=item.value%>"
                                                            oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.partners'+item.key)}) %>"><%= infoSite.partnersText[item.value] %></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.contact'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control"
                                                            name="contactText.<%=item.value%>"
                                                            oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('infoSite.contact'+item.key)}) %>"><%= infoSite.contactText[item.value]%></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <%})%>


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

                            <div role="tabpanel" class="tab-pane" id="account-vertical-about"
                                aria-labelledby="account-pill-about" aria-expanded="false">
                                <form class="editInfoSiteSetting needs-validation" action="/dashboard/infoSettings/edit"
                                    method="post" enctype="multipart/form-data">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <!-- <input type="hidden" name="_id" value="<%= infoSite.id %>"> -->
                                    <div class="row">

                                        <div class="col-12 mb-3">
                                            <div class="row">
                                                <div class="col-md-6 d-flex mt-5 flex-column align-items-center">
                                                    <span class="mb-4">
                                                        <%= i18n.__('infoSite.initialAppImage') %>
                                                    </span>
                                                    <%- include('../components/image.ejs', { required:'',
                                                        url:infoSite.aboutImage_1 , id:'aboutImage1',
                                                        name:'aboutImage1', layout:1, accept:"image/*", invalidFeedback
                                                        : i18n.__('common.pleaseEnterImage') }) %>

                                                </div>

                                                <div class="col-md-6 d-flex mt-5 flex-column align-items-center">
                                                    <span class="mb-4">
                                                        <%= i18n.__('infoSite.secondaryAppImage') %>
                                                    </span>

                                                    <%- include('../components/image.ejs', { required:'',
                                                        url:infoSite.aboutImage_2 , id:'aboutImage2',
                                                        name:'aboutImage2', layout:1, accept:"image/*", invalidFeedback
                                                        : i18n.__('common.pleaseEnterImage') }) %>

                                                </div>

                                            </div>
                                        </div>


                                        <%languages.forEach((item)=>{ %>
                                            <div class="col-12 mt-2">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label for="account-name">
                                                            <%= i18n.__('infoSite.about'+item.key) %>
                                                        </label>
                                                        <textarea class="form-control" name="about.<%=item.value%>"
                                                            id="" oninput="validateInput(this)" cols="30" rows="10"
                                                            placeholder="<%= i18n.__('infoSite.about'+item.key) %>"><%= infoSite.about[item.value] %></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <%})%>


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

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- account setting page end -->
<script>

    // function validateInput(input) {

    //     const i18n = {
    //       common: {
    //         emptyField: "<%= i18n.__('common.emptyField') %>",
    //         minLength: "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
    //         invalidEmail: "<%= i18n.__('common.emailMustBeValid') %>"

    //       }
    //     };

    //     try {
    //       const trimmedValue = input.value.trim();
    //       const minLength = 2;
    //       const emptyMessage = i18n.common.emptyField;
    //       const minLengthMessage = i18n.common.minLength.replace('{{minLength}}', minLength);
    //       const invalidEmailMessage = i18n.common.invalidEmail;
    //       const feedback = input.nextElementSibling;

    //       console.log(input.type , "typeee" , trimmedValue , "trimmedValue")
    //   if (input.type === 'email' && !isValidEmail(trimmedValue)) {
    //         feedback.textContent = invalidEmailMessage;
    //         input.classList.add('is-invalid');
    //         input.style.border = '1px solid red';
    //         input.setCustomValidity('');
    //     } else if (trimmedValue.length < minLength) {
    //         feedback.textContent = minLengthMessage;
    //         input.classList.add('is-invalid');
    //         input.style.border = '1px solid red';
    //         input.setCustomValidity(minLengthMessage);
    //     } else {
    //         feedback.textContent = ''; // Clear feedback
    //         input.classList.remove('is-invalid');
    //         input.style.border = '';
    //         input.setCustomValidity('');
    //       }


    //       function isValidEmail(value) {
    //                 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    //                 return emailPattern.test(value);
    //             }

    //        input.reportValidity();
    //     } catch (error) {
    //       console.error("Validation error:", error);
    //     }

    //   }



    function validateInput(input) {
        const i18n = {
            common: {
                emptyField: "<%= i18n.__('common.emptyField') %>",
                minLength: "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
                invalidEmail: "<%= i18n.__('common.emailMustBeValid') %>",
                invalidPhone: "<%= i18n.__('common.phoneNoLess') %>",
                invalidStartPhone: "<%= i18n.__('common.invalidStartPhone') %>",
            }
        };

        try {
            const trimmedValue = input.value.trim();
            const minLength = 2;
            const emptyMessage = i18n.common.emptyField;
            const minLengthMessage = i18n.common.minLength.replace('{{minLength}}', minLength);

            const phoneMessage = i18n.common.invalidPhone;
            const invalidStartPhoneMessage = i18n.common.invalidStartPhone;
            const invalidEmailMessage = i18n.common.invalidEmail;
            const feedback = input.nextElementSibling;

            // ✅ لو الحقل فاضي يظهر "مطلوب"
            if (trimmedValue === '') {
                input.classList.add('is-invalid');
                input.style.border = '1px solid red';
                input.setCustomValidity(emptyMessage);
            }

            else if (input.type === 'email' && !isValidEmail(trimmedValue)) {
                feedback.textContent = invalidEmailMessage;
                input.classList.add('is-invalid');
                input.style.border = '1px solid red';
                input.setCustomValidity(invalidEmailMessage);
            }
            // ✅ لو موبايل
            else if (input.name === 'phone') {
                if (!hasValidPrefix(trimmedValue)) {
                    input.classList.add('is-invalid');
                    input.style.border = '1px solid red';
                    input.setCustomValidity(invalidStartPhoneMessage);
                } else if (!isValidPhone(trimmedValue)) {
                    input.classList.add('is-invalid');
                    input.style.border = '1px solid red';
                    input.setCustomValidity(phoneMessage);
                } else {
                    input.classList.remove('is-invalid');
                    input.style.border = '';
                    input.setCustomValidity('');
                }
            }
            // ✅ باقي الحقول
            else if (trimmedValue.length < minLength && !['phone', 'email'].includes(input.name)) {
                input.classList.add('is-invalid');
                input.style.border = '1px solid red';
                input.setCustomValidity(minLengthMessage);
            } else {
                input.classList.remove('is-invalid');
                input.style.border = '';
                input.setCustomValidity('');
            }

            // Helpers
            function isValidEmail(value) {
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailPattern.test(value);
            }

            function hasValidPrefix(value) {
                return value.startsWith("01") || value.startsWith("05");
            }

            input.reportValidity();

        } catch (error) {
            console.error("Validation error:", error);
        }
    }



    function isValidPhone(value) {
        const phonePattern = /^(01|05)\d{8}$/;
        return phonePattern.test(value);
    }



    $(document).ready(function () {
        $(document).on('submit', '.editInfoSiteSetting', function (e) {
            e.preventDefault();

            const objData = new FormData(this);
            let errorArray = [];

            // $.each($('#aboutImage1')[0].files, function(i, file) {
            // if (!/(jpg|jpeg|png)$/.test($('#aboutImage1')[0].files[0].type)) {

            //         Swal.fire({
            //             icon: 'error',
            //             title: "<%= i18n.__('common.invalidImageExtension') %>",
            //             showConfirmButton: false,
            //             timer: 1500,
            //         });

            //         return delete $('#aboutImage1')[0].files;
            //     }

            //     objData.append('aboutImage1', file[0]);
            // });

            // $.each($('#aboutImage2')[0].files, function(i, file) {
            //     if (!/(jpg|jpeg|png)$/.test($('#aboutImage2')[0].files[0].type)) {
            //         Swal.fire({
            //             icon: 'error',
            //             title: "<%= i18n.__('common.invalidImageExtension') %>",
            //             showConfirmButton: false,
            //             timer: 1500,
            //         });

            //         return delete $('#aboutImage2')[0].files;
            //     }
            //     objData.append('aboutImage2', file[0]);
            // });

            // $.each($('#logo')[0].files, function(i, file) {
            //     if (!/(jpg|jpeg|png)$/.test($('#logo')[0].files[0].type)) {
            //         Swal.fire({
            //             icon: 'error',
            //             title: "<%= i18n.__('common.invalidImageExtension') %>",
            //             showConfirmButton: false,
            //             timer: 1500,
            //         });

            //         return delete $('#logo')[0].files;
            //     }
            //     objData.append('logo', file[0]);
            // });
            // $.each($('#loader')[0].files, function(i, file) {
            //     if (!/(jpg|jpeg|png)$/.test($('#loader')[0].files[0].type)) {
            //         Swal.fire({
            //             icon: 'error',
            //             title: "<%= i18n.__('common.invalidImageExtension') %>",
            //             showConfirmButton: false,
            //             timer: 1500,
            //         });

            //         return delete $('#loader')[0].files;
            //     }
            //     objData.append('loader', file[0]);
            // });

            const confirm = "<%=i18n.__('common.add')%>";

            console.log('objData,', objData)

            ajaxUpload($(this), objData, "uploadWithImage", confirm);
        });
    })

</script>
