<style>
    .revenue_btn button{
        background-color: #eaf1fe;color: #3577f1; 
    }
    .date_box input{
        display: flex;
        width: 100%;
        height: 32px;
    }
  
</style>
<%- include ("../partials/headerlinks.ejs") %>
<%- include ("../partials/header.ejs") %>
<%- include ("../partials/sidebar.ejs") %>
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Create Job</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="/dashboard">Dashboards</a></li>
                                    <li class="breadcrumb-item"><a href="/job/list">Job List</a></li>
                                    <li class="breadcrumb-item active">Job</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>       
                <div class="row">
                    <div class="col-lg-12">
                        <form id="createJob-form" autocomplete="off" class="needs-validation" novalidate method="post" enctype="multipart/form-data" action="/job/create-edit/<%= jobData?.id || 0 %>">
                            <div class="row">
                                <div class="clearfix"></div>
                                <div class="col-lg-8">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Genaral Information</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-2">
                                                <label class="form-label" for="title">Title<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="title" name="title" required="required" value="<%= jobData?.title || '' %>" placeholder="Enter job title">
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label" for="title">Description<span class="text-danger">*</span></label>
                                                <textarea class="form-control" id="description" name="description" required="required" placeholder="Enter job description" rows="5" required><%= jobData?.description || '' %></textarea>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>

                                            <div class="col-lg-12">
                                                <!-- <div class="card"> -->
                                                    <div class="row">
                                                        <div class="col-sm-12 mb-2">
                                                            <div class="animate_form field mb-1">
                                                                <label class="form-label" for="type">Other Details</label>
                                                                <textarea id="other_details" class="" name="other_details" type="text"><%= jobData?.other_details || "" %> </textarea>
                                                            </div>
                                                            <span class="text-danger font-weight-bold" id="name_error"></span>
                                                            <div class="invalid-feedback">This field is required.</div>
                                                        </div>
                                                    </div>
                                                <!-- </div> -->
                                            </div>  
                                            
                                            <!-- <div class="mb-2 choice-group">
                                                <label class="form-label" for="title">Location<span class="text-danger">*</span></label>
                                                <select class="form-select mb-3 choices-select" data-choices aria-label="Default select example" name="location" required>
                                                    <option value="">Select</option>
                                                    <% cityList.forEach(function(city){%>
                                                        <option <% if(jobData?.location == city.name){ %>selected="selected" <% }%> value="<%= city.name %>"><%= city.name %></option>
                                                    <% }) %>
                                                </select>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div> -->

                                            <div class="mb-2 choice-group">
                                                <label class="form-label" for="title">Location<span class="text-danger">*</span></label>
                                                <select class="form-select mb-3 choices-select" data-choices aria-label="Default select example" name="location" multiple required>
                                                    <option value="">Select</option>
                                                    <% cityList.forEach(function(city){%>
                                                        <option <% if(jobData?.location && jobData.location.includes(city.name)){ %>selected="selected" <% }%> value="<%= city.name %>"><%= city.name %></option>
                                                    <% }) %>
                                                </select>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>

                                            <div class="mb-2 choice-group">
                                                <label class="form-label" for="title">Category<span class="text-danger">*</span></label>
                                                <select class="form-select mb-3 choices-select" data-choices aria-label="Default select example" name="category_id" required>
                                                    <option value="">Select</option>
                                                    <% categoryList.forEach(function(category){%>
                                                        <option <% if(jobData?.category_id == category.id){ %>selected="selected" <% }%> value="<%= category.id %>"><%= category.name %></option>
                                                    <% }) %>
                                                </select>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>
                                            
                                            <div class="mb-2">
                                                <label class="form-label" for="title">Hr Number</label>
                                                <input type="number" class="form-control" id="hr_number" name="hr_number" value="<%= jobData?.hr_number || '' %>" placeholder="Enter Hr. number">
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>
                                            
                                            <div class="mb-2">
                                                <label class="form-label d-flex flex-row gap-2" for="title">
                                                    Whatsapp Number
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="sameNumber" <%= jobData?.whatsapp_number && jobData?.whatsapp_number == jobData?.hr_number && "checked" %> >
                                                        <label class="form-check-label" for="sameNumber">
                                                            Same as Hr. Number
                                                        </label>
                                                    </div>
                                                </label>
                                                <input type="number" class="form-control" id="whatsapp_number" name="whatsapp_number" value="<%= jobData?.whatsapp_number || '' %>" placeholder="Enter whatsapp number">
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>
                                            
                                            <div class="mb-2">
                                                <label class="form-label" for="title">Total Opening</label>
                                                <input type="number" class="form-control" id="total_opening" name="total_opening" value="<%= jobData?.total_opening || '' %>" placeholder="Enter total opening">
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label" for="title">Opening Data</label>
                                                <input type="date" class="form-control" id="opening_date" name="opening_date" value="<%= jobData?.opening_date ? moment(jobData?.opening_date).format('YYYY-MM-DD') : '' %>" placeholder="Enter opening date">                                                
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label" for="title">Closing Data</label>
                                                <input type="date" class="form-control" id="closing_date" name="closing_date" value="<%= jobData?.closing_date ? moment(jobData?.closing_date).format('YYYY-MM-DD') : '' %>" placeholder="Enter closing date">                                                
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label" for="title">Qualification</label>
                                                <input type="text" class="form-control" id="qualification" name="qualification" value="<%= jobData?.qualification || '' %>" placeholder="Enter qualification">                                                
                                            </div>
                                        </div>
                                    </div>
                                 <!-- Key-Description Fields -->
                                    <div class="card mt-4">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Additional Information</h5>
                                        </div>
                                        <div class="card-body">
                                            <div id="keyValueContainer">
                                                <% if(jobData?.other_information && Array.isArray(jobData.other_information) && jobData.other_information.length > 0) { 
                                                    jobData.other_information.forEach((section, sectionIndex) => { %>
                                                    <div class="card mb-3 key-value-section" data-section-index="<%= sectionIndex %>">
                                                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                        <div class="form-group flex-grow-1 me-2">
                                                            <input type="text" class="form-control section-title" 
                                                                name="other_information[<%= sectionIndex %>][title]" 
                                                                placeholder="Section Title" 
                                                                value="<%= section.title || '' %>" required>
                                                        </div>
                                                        <button type="button" class="btn btn-danger btn-sm remove-section">
                                                            <i class="ri-delete-bin-line"></i>
                                                        </button>
                                                        </div>
                                                        <div class="card-body">
                                                        <div class="key-value-pairs">
                                                            <% if(section.data && Array.isArray(section.data)) { 
                                                            section.data.forEach((pair, pairIndex) => { %>
                                                                <div class="row key-value-row mb-3" data-pair-index="<%= pairIndex %>">
                                                                <div class="col-md-5">
                                                                    <input type="text" class="form-control" 
                                                                        name="other_information[<%= sectionIndex %>][data][<%= pairIndex %>][key]" 
                                                                        placeholder="Key" 
                                                                        value="<%= pair.key || '' %>" required>
                                                                </div>
                                                                <div class="col-md-5">
                                                                    <input type="text" class="form-control" 
                                                                        name="other_information[<%= sectionIndex %>][data][<%= pairIndex %>][value]" 
                                                                        placeholder="Description" 
                                                                        value="<%= pair.value || '' %>" required>
                                                                </div>
                                                                <div class="col-md-2 d-flex align-items-center">
                                                                    <% if(pairIndex === 0) { %>
                                                                    <button type="button" class="btn btn-success btn-sm add-pair">
                                                                        <i class="ri-add-line"></i>
                                                                    </button>
                                                                    <% } else { %>
                                                                    <button type="button" class="btn btn-danger btn-sm remove-pair">
                                                                        <i class="ri-delete-bin-line"></i>
                                                                    </button>
                                                                    <% } %>
                                                                </div>
                                                                </div>
                                                            <% }); 
                                                            } %>
                                                        </div>
                                                        </div>
                                                    </div>
                                                    <% }); 
                                                } else { %>
                                                    <!-- Default empty section when no data exists -->
                                                    <div class="card mb-3 key-value-section" data-section-index="0">
                                                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                        <div class="form-group flex-grow-1 me-2">
                                                        <input type="text" class="form-control section-title" 
                                                                name="other_information[0][title]" 
                                                                placeholder="Section Title" required>
                                                        </div>
                                                        <button type="button" class="btn btn-danger btn-sm remove-section">
                                                        <i class="ri-delete-bin-line"></i>
                                                        </button>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="key-value-pairs">
                                                        <div class="row key-value-row mb-3" data-pair-index="0">
                                                            <div class="col-md-5">
                                                            <input type="text" class="form-control" 
                                                                    name="other_information[0][data][0][key]" 
                                                                    placeholder="Key" required>
                                                            </div>
                                                            <div class="col-md-5">
                                                            <input type="text" class="form-control" 
                                                                    name="other_information[0][data][0][value]" 
                                                                    placeholder="Description" required>
                                                            </div>
                                                            <div class="col-md-2 d-flex align-items-center">
                                                            <button type="button" class="btn btn-success btn-sm add-pair">
                                                                <i class="ri-add-line"></i>
                                                            </button>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    </div>
                                                    </div>
                                                <% } %>
                                                </div>
                                            <div class="text-center mt-3">
                                                <button type="button" class="btn btn-primary" id="addNewSection">
                                                    <i class="ri-add-line me-1"></i> Add New Section
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card -->
                                    
                                </div>
                               
                                
                                <!-- end col -->
                            
                                <div class="col-lg-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Publish</h5>
                                        </div>
                                       
                                        <div class="card-body">
                                            <div class="mb-2">
                                                <label for="status" class="form-label">Status</label>
                                                <select class="form-select mb-3" aria-label="Default select example" name="status">
                                                    <option <% if(jobData?.status=='y'){ %>selected="selected" <% }%> value="y">Active</option>
                                                    <option <% if(jobData?.status=='n'){ %>selected="selected" <% }%> value="n">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Company</h5>
                                        </div>
                                       
                                        <div class="card-body">
                                            <!-- <div class="mb-2">
                                                <label class="form-label" for="company">Company<span class="text-danger">*</span></label>
                                                <select class="form-select mb-3" aria-label="Default select example" name="company_id" required>
                                                    <option value="">Select</option>
                                                    <% companyData.forEach(function(company){%>
                                                        <option <% if(jobData?.company_id == company.value){ %>selected="selected" <% }%> value="<%= company.value %>"><%= company.label %></option>
                                                    <% }) %>
                                                </select>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div> -->
                                            <div class="mb-2 choice-group">
                                                <label class="form-label" for="title">Company<span class="text-danger">*</span></label>
                                                <select class="form-select mb-3 choices-select" data-choices aria-label="Default select example" name="company_id" required>
                                                    <option value="">Select</option>
                                                    <% companyData.forEach(function(company){%>
                                                        <option <% if(jobData?.company_id == company.value){ %>selected="selected" <% }%> value="<%= company.value %>"><%= company.label %></option>
                                                    <% }) %>
                                                </select>
                                                <div class="invalid-feedback">This field is required.</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Experience (In Year)</h5>
                                        </div>
                                       
                                        <div class="card-body">
                                            <div class="mb-2 d-flex flex-row gap-2">
                                                <div class="mb-2">
                                                    <label class="form-label" for="title">Min</label>
                                                    <input type="text" class="form-control" id="experience_min" name="experience_min" value="<%= jobData?.experience_min || '' %>" placeholder="Min experience">                                                
                                                </div>  
                                                <div class="mb-2">
                                                    <label class="form-label" for="title">Max</label>
                                                    <input type="text" class="form-control" id="experience_max" name="experience_max" value="<%= jobData?.experience_max || '' %>" placeholder="Max experience">                                                
                                                </div>  
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Salary (Per Month)</h5>
                                        </div>
                                       
                                        <div class="card-body">
                                            <div class="mb-2 d-flex flex-row gap-2">
                                                <div class="mb-2">
                                                    <label class="form-label" for="title">Low</label>
                                                    <input type="text" class="form-control" id="salary_low" name="salary_low" value="<%= jobData?.salary_low || '' %>" placeholder="Low Salary">                                                
                                                </div>  
                                                <div class="mb-2">
                                                    <label class="form-label" for="title">Heigh</label>
                                                    <input type="text" class="form-control" id="salary_high" name="salary_high" value="<%= jobData?.salary_high || '' %>" placeholder="High Salary">                                                
                                                </div>  
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Tags</h5>
                                        </div>
                                       
                                        <div class="card-body">
                                            <div class="mb-2 d-flex flex-row gap-1 flex-wrap" id="tagContainer">
                                                <% jobData?.tags?.split(",").forEach((tag) => { %>
                                                    <div class="d-flex flex-row gap-2 bg-primary text-white align-item-center py-2 px-3 rounded rounded-pill" id="tag-<%= tag %>">
                                                        <span><%= tag %></span>
                                                        <i class="ri-close-large-line cursor-pointer removeTag" id="removeTag" data-tag="<%= tag %>"></i>
                                                    </div>
                                                <% }) %>
                                            </div>
                                            <div class="mb-2">
                                                <div class="mb-2">
                                                    <input type="text" class="form-control" id="tagsInput" placeholder="Type tag">                                                
                                                    <p class="text-secondary mb-1" for="title">Just type and hit enter to select as a tag</p>
                                                    <input type="text" class="form-control" id="tags" name="tags" value="<%= jobData?.tags %>" placeholder="Type tag" hidden>                                                
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                                
                                
                                    <!-- end card -->
                                </div>
                                <div class="text-end mb-3">
                                    <button type="button" class="btn btn-secondary w-sm" onclick="history.back()">Back</button>
                                    <button type="submit" class="btn btn-success w-sm">Submit</button>
                                </div>
                                
                                <!-- end col -->
                            </div>
                            <!-- end row -->
                        </form>
                    </div>
                </div>
                        <!--end row-->
                <!-- End Page-content -->
            </div>
            <!-- container-fluid -->
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
<script>
    let editor;
    ClassicEditor
        .create(document.querySelector('#other_details'), {
            language: 'es', // Set language to Spanish
            uiColor: '#F7B42C', // Note: CKEditor 5 doesn’t have a direct UI color setting like CKEditor 4
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
        })
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error(error);
        });

    // Sanitize and submit the form
    function submitForm() {
        const content = editor.getData();
        const sanitizedContent = content.replace(/(<([^>]+)>)/gi, ''); // Remove HTML tags
        document.querySelector('#other_details').value = sanitizedContent; // Set sanitized content to the textarea
        // Add form submission logic if needed
    }
</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js"></script>
        <%- include ("../partials/footerlinks.ejs") %>
        <%- include ("../partials/footer.ejs") %>
            <script type="text/javascript">
                function preView() {
                var fileInput = document.getElementById('image');
                var filePath = fileInput.value;
                var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
                if (!allowedExtensions.exec(filePath)) {
                    fileInput.value = '';
                    return false;
                } else {
                    if (fileInput.files && fileInput.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function () {
                        var output = document.getElementById('preview');
                        output.src = reader.result;
                    };
                    reader.readAsDataURL(event.target.files[0]);
                    $("#icon-error").remove();
                    };
                }
                }
            </script>
            
            <script type="text/javascript">
                function preView2() {
                    var fileInput = document.getElementById('coverImage');
                    var filePath = fileInput.value;
                    var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
                    if (!allowedExtensions.exec(filePath)) {
                    fileInput.value = '';
                    return false;
                    } else {
                    if (fileInput.files && fileInput.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function () {
                        var output = document.getElementById('preview2');
                        output.src = reader.result;
                        };
                        reader.readAsDataURL(event.target.files[0]);
                        $("#icon-error").remove();
                    };
                    }
                }
            </script>
            <script type="text/javascript">
                function display1() {
                    var c = 0;
                    var element = document.activeElement;
                    while (c < 1) {
                        responsiveVoice.speak(element.value, "Hindi Female");
                        c++;
                    }
                }
                window.onload = function () {
                    document.getElementById("wel").focus();
                };
                function savetext() {
                    var cookieValue = document.activeElement.innerHTML;
                    responsiveVoice.speak(cookieValue, "Hindi Female");
                }

                function getval(cat) {
                    window.open('<%= adminbaseurl %>dashboard?filter=' + cat.value, "_self");
                }

            </script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    function toggleFields() {
        var productDuration = document.getElementById("productDuration").value;

        window.location.href = `?productDuration=${productDuration}`
    }   

    $("document").ready(function (){
        $("#sameNumber").change(function (){
            if($(this).is(':checked')){
                const hrNumber = $('#hr_number').val();
                $('#whatsapp_number').val(hrNumber);
            }
        })

        $("#hr_number").keyup(function (){
            if($("#sameNumber").is(':checked')){
                $('#whatsapp_number').val($(this).val());
            }
        })

        $("#tagsInput").keypress(function (event){
            if (event.which == 13){
                event.preventDefault();
                const value = $(this).val();
                $(this).val("");
                $("#tagContainer").append(`
                    <div class="d-flex flex-row gap-2 bg-primary text-white align-item-center py-2 px-3 rounded rounded-pill tagPill" id="tag-${value}">
                        <span>${value}</span>
                        <i class="ri-close-large-line cursor-pointer removeTag" id="removeTag" data-tag="${value}"></i>
                    </div>
                `)
                let existingTags = $("#tags").val();
                if (!existingTags){
                    existingTags = value;
                } else {
                    existingTags = existingTags + "," + value;
                }
                $("#tags").val(existingTags);
            }
        })

        $("#tagContainer").on("click", ".removeTag", function (){
            const tagToRemove = $(this).attr("data-tag");
            $(`#tag-${tagToRemove}`).remove();
            const element = $("#tags");
            let existingTags = $(element).val() || '';
            existingTags = existingTags.replace(`${tagToRemove},`, "");
            existingTags = existingTags.replace(`${tagToRemove}`, "");
            if (existingTags[existingTags.length - 1] == ","){
                existingTags = existingTags.slice(0, -1);
            }
            $(element).val(existingTags);
        })
    })



//     // Add new section
// $(document).on('click', '#addNewSection', function() {
//     const container = $('#keyValueContainer');
//     const sectionIndex = container.find('.key-value-section').length;
    
//     const newSection = `
//         <div class="card mb-3 key-value-section" data-section-index="${sectionIndex}">
//             <div class="card-header bg-light d-flex justify-content-between align-items-center">
//                 <div class="form-group flex-grow-1 me-2">
//                     <input type="text" class="form-control section-title" 
//                            name="other_information[${sectionIndex}][title]" 
//                            placeholder="Section Title" required>
//                 </div>
//                 <button type="button" class="btn btn-danger btn-sm remove-section">
//                     <i class="ri-delete-bin-line"></i>
//                 </button>
//             </div>
//             <div class="card-body">
//                 <div class="key-value-pairs">
//                     <div class="row key-value-row mb-3" data-pair-index="0">
//                         <div class="col-md-5">
//                             <input type="text" class="form-control" 
//                                    name="other_information[${sectionIndex}][data][0][key]" 
//                                    placeholder="Key" required>
//                         </div>
//                         <div class="col-md-5">
//                             <input type="text" class="form-control" 
//                                    name="other_information[${sectionIndex}][data][0][value]" 
//                                    placeholder="Description" required>
//                         </div>
//                         <div class="col-md-2 d-flex align-items-center">
//                             <button type="button" class="btn btn-success btn-sm add-pair">
//                                 <i class="ri-add-line"></i>
//                             </button>
//                         </div>
//                     </div>
//                 </div>
//             </div>
//         </div>
//     `;
    
//     container.append(newSection);
// });

// // Remove section
// $(document).on('click', '.remove-section', function() {
//     $(this).closest('.key-value-section').remove();
//     // Reindex sections
//     $('#keyValueContainer .key-value-section').each(function(index) {
//         $(this).attr('data-section-index', index);
//         $(this).find('[name^="other_information"]').each(function() {
//             const name = $(this).attr('name')
//                 .replace(/\[\d+\]/, `[${index}]`)
//                 .replace(/data\]\[\d+\]/, 'data][]');
//             $(this).attr('name', name);
//         });
//     });
// });

// // Add new key-value pair to a section
// $(document).on('click', '.add-pair', function() {
//     const section = $(this).closest('.key-value-section');
//     const sectionIndex = section.attr('data-section-index');
//     const pairsContainer = section.find('.key-value-pairs');
//     const pairIndex = pairsContainer.find('.key-value-row').length;
    
//     const newPair = `
//         <div class="row key-value-row mb-3" data-pair-index="${pairIndex}">
//             <div class="col-md-5">
//                 <input type="text" class="form-control" 
//                        name="other_information[${sectionIndex}][data][${pairIndex}][key]" 
//                        placeholder="Key" required>
//             </div>
//             <div class="col-md-5">
//                 <input type="text" class="form-control" 
//                        name="other_information[${sectionIndex}][data][${pairIndex}][value]" 
//                        placeholder="Description" required>
//             </div>
//             <div class="col-md-2 d-flex align-items-center">
//                 <button type="button" class="btn btn-danger btn-sm remove-pair">
//                     <i class="ri-delete-bin-line"></i>
//                 </button>
//             </div>
//         </div>
//     `;
    
//     pairsContainer.append(newPair);
// });

// // Remove key-value pair from a section
// $(document).on('click', '.remove-pair', function() {
//     const row = $(this).closest('.key-value-row');
//     const section = row.closest('.key-value-section');
//     row.remove();
    
//     // Reindex pairs in this section
//     section.find('.key-value-row').each(function(index) {
//         $(this).attr('data-pair-index', index);
//         $(this).find('[name*="[data]"]').each(function() {
//             const name = $(this).attr('name')
//                 .replace(/data\]\[\d+\]/, `data][${index}]`);
//             $(this).attr('name', name);
//         });
//     });
// });

// Add new section
$(document).on('click', '#addNewSection', function() {
    const container = $('#keyValueContainer');
    const sectionIndex = container.find('.key-value-section').length;
    
    const newSection = `
        <div class="card mb-3 key-value-section" data-section-index="${sectionIndex}">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <div class="form-group flex-grow-1 me-2">
                    <input type="text" class="form-control section-title" 
                           name="other_information[${sectionIndex}][title]" 
                           placeholder="Section Title" required>
                </div>
                <button type="button" class="btn btn-danger btn-sm remove-section">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </div>
            <div class="card-body">
                <div class="key-value-pairs">
                    <div class="row key-value-row mb-3" data-pair-index="0">
                        <div class="col-md-5">
                            <input type="text" class="form-control" 
                                   name="other_information[${sectionIndex}][data][0][key]" 
                                   placeholder="Key" required>
                        </div>
                        <div class="col-md-5">
                            <input type="text" class="form-control" 
                                   name="other_information[${sectionIndex}][data][0][value]" 
                                   placeholder="Description" required>
                        </div>
                        <div class="col-md-2 d-flex align-items-center">
                            <button type="button" class="btn btn-success btn-sm add-pair">
                                <i class="ri-add-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    container.append(newSection);
});

// Remove section
$(document).on('click', '.remove-section', function() {
    if ($('#keyValueContainer .key-value-section').length > 1) {
        $(this).closest('.key-value-section').remove();
        // Reindex sections
        $('#keyValueContainer .key-value-section').each(function(index) {
            $(this).attr('data-section-index', index);
            $(this).find('[name^="other_information"]').each(function() {
                const newName = $(this).attr('name')
                    .replace(/other_information\[\d+\]/, `other_information[${index}]`)
                    .replace(/data\]\[\d+\]/, `data][${$(this).closest('.key-value-row').data('pair-index')}]`);
                $(this).attr('name', newName);
            });
        });
    } else {
        alert("You must have at least one section.");
    }
});

// Add new key-value pair to a section
$(document).on('click', '.add-pair', function() {
    const section = $(this).closest('.key-value-section');
    const sectionIndex = section.data('section-index');
    const pairsContainer = section.find('.key-value-pairs');
    const pairIndex = pairsContainer.find('.key-value-row').length;
    
    const newPair = `
        <div class="row key-value-row mb-3" data-pair-index="${pairIndex}">
            <div class="col-md-5">
                <input type="text" class="form-control" 
                       name="other_information[${sectionIndex}][data][${pairIndex}][key]" 
                       placeholder="Key" required>
            </div>
            <div class="col-md-5">
                <input type="text" class="form-control" 
                       name="other_information[${sectionIndex}][data][${pairIndex}][value]" 
                       placeholder="Description" required>
            </div>
            <div class="col-md-2 d-flex align-items-center">
                <button type="button" class="btn btn-danger btn-sm remove-pair">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </div>
        </div>
    `;
    
    pairsContainer.append(newPair);
});

// Remove key-value pair from a section
$(document).on('click', '.remove-pair', function() {
    const row = $(this).closest('.key-value-row');
    const section = row.closest('.key-value-section');
    const pairsContainer = section.find('.key-value-pairs');
    
    if (pairsContainer.find('.key-value-row').length > 1) {
        row.remove();
        
        // Reindex pairs in this section
        section.find('.key-value-row').each(function(index) {
            $(this).attr('data-pair-index', index);
            $(this).find('[name*="[data]"]').each(function() {
                const newName = $(this).attr('name')
                    .replace(/data\]\[\d+\]/, `data][${index}]`);
                $(this).attr('name', newName);
            });
        });
    } 
});
</script>



<!-- <script>
    CKEDITOR.editorConfig = function (config) {
      // Customize CKEditor configuration options
      config.language = 'es'; // Set the language to Spanish
      config.uiColor = '#F7B42C'; // Set the UI color to a specific value
      config.height = 300; // Set the editor height to 300 pixels
      config.toolbarCanCollapse = true; // Enable toolbar collapsing
    };
   
    // Replace the textarea with CKEditor
    // var editor = CKEDITOR.replace('shortDescription');
  
    // Remove HTML tags from the editor content
    function removeHtmlTags() {
      var content = editor.getData(); // Get the content from the editor
      var sanitizedContent = content.replace(/(<([^>]+)>)/gi, ''); // Remove all HTML tags from the content
      editor.setData(sanitizedContent); // Set the sanitized content back to the editor
    }
  </script> -->

