{% extends 'super_admin_templates/base.html' %}

{% block content %}

<style>
    .custom-btn {
        font-size: 12px;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
    }

    .time-input-group {
        padding: 10px 0;
        margin: 0;
    }
</style>

<script>
    document.addEventListener("click", function (event) {
        if (event.target.matches(".btn-danger")) {
            // Handle Remove Button
            const profileRow = event.target.closest(".time-input-group");
            if (profileRow) {
                profileRow.remove();
            }
        }
    });

    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }

    // Function to add a new profile slot dynamically
    function addProfileSlot(containerId, day = "") {
        const container = document.getElementById(containerId);
        const index = container.children.length + 1;

        const existingPatternsOptions = `
        <option value="">Select Default Profile</option>
        {% for profile in existingPatternsList %}
        <option value="{{ profile.patternId }}">{{ profile.patternName }}</option>
        {% endfor %}
    `;
        const existingApplicablePatternsOptions = `
        <option value="">Select Applicable Profile</option>
        {% for profile in existingPatternsList %}
        <option value="{{ profile.patternId }}">{{ profile.patternName }}</option>
        {% endfor %}
    `;

        const profileRow = document.createElement("div");
        profileRow.classList.add("row", "time-input-group");
        profileRow.id = `${containerId}_row_${index}`;

        // Default Profile Dropdown
        const defaultProfileCol = document.createElement("div");
        defaultProfileCol.classList.add("col-md-4");
        const defaultProfileSelect = document.createElement("select");
        defaultProfileSelect.name = `defaultProfile${day}[]`;
        defaultProfileSelect.classList.add("form-control");
        defaultProfileSelect.required = true;
        defaultProfileSelect.innerHTML = existingPatternsOptions;
        defaultProfileCol.appendChild(defaultProfileSelect);

        // Applicable Profile Dropdown
        const applicableProfileCol = document.createElement("div");
        applicableProfileCol.classList.add("col-md-4");
        const applicableProfileSelect = document.createElement("select");
        applicableProfileSelect.name = `applicableProfile${day}[]`;
        applicableProfileSelect.classList.add("form-control");
        applicableProfileSelect.required = true;
        applicableProfileSelect.innerHTML = existingApplicablePatternsOptions;
        applicableProfileCol.appendChild(applicableProfileSelect);

        // Remove Button
        const removeCol = document.createElement("div");
        removeCol.classList.add("col-md-2");
        const removeButton = document.createElement("button");
        removeButton.type = "button";
        removeButton.classList.add("btn", "btn-danger");
        removeButton.textContent = "Remove";
        removeCol.appendChild(removeButton);

        profileRow.appendChild(defaultProfileCol);
        profileRow.appendChild(applicableProfileCol);
        profileRow.appendChild(removeCol);

        container.appendChild(profileRow);
    }

    // Function to toggle visibility for specific day inputs
    function toggleDayAndDropdown(day) {
        const addButton = document.getElementById(`addButton_${day}`);
        const dropdownContainer = document.getElementById(`add_and_dropdowns_${day}`);
        const defaultEnableCheckbox = document.querySelector(`#defaultEnableContainer_${day} input[type='checkbox']`);

        if (defaultEnableCheckbox.checked) {
            addButton.style.display = "none"; // Hide Add Button
            dropdownContainer.style.display = "none"; // Hide Dropdowns
        } else {
            addButton.style.display = "block"; // Show Add Button
            dropdownContainer.style.display = "block"; // Show Dropdowns
        }
    }

    function toggleDayInputs(day) {
        const dayCheckbox = document.getElementById(`checkbox_${day}`);
        const defaultEnableContainer = document.getElementById(`defaultEnableContainer_${day}`);
        const defaultEnableCheckbox = document.querySelector(`#defaultEnableContainer_${day} input[type='checkbox']`);
        const addButton = document.getElementById(`addButton_${day}`);
        const dropdownContainer = document.getElementById(`add_and_dropdowns_${day}`);

        if (dayCheckbox.checked) {
            defaultEnableContainer.style.display = "block";
            defaultEnableCheckbox.checked = true;
            toggleDayAndDropdown(day);
        } else {
            defaultEnableContainer.style.display = "none";
            defaultEnableCheckbox.checked = false;
            addButton.style.display = "none";
            dropdownContainer.style.display = "none";
        }
    }

</script>

<script>
$(document).off("click", ".generateOtpBtn").on("click", ".generateOtpBtn", function () {
    let index = $(this).attr("data-index");
    let mailType = "Profile Setup"; // Ensure correct mailType
    let button = $(this);
    let messageBox = $("#otpMessage" + index);

    console.log(`🔹 Generating OTP for mailType: ${mailType}`);

    $.ajax({
        type: "POST",
        url: "/api/super_admin/generateOtp",
        data: {
            action: "generate",
            mailType: mailType // Ensure correct key is sent
        },
        beforeSend: function () {
            button.prop("disabled", true).text("Generating...");
        },
        success: function (response) {
            if (response.responseStatus === 1) {
                $("#otpLogid" + index).val(response.otpCheckId);
                $(".otp-section[data-index='" + index + "']").fadeIn();
                button.hide();
                messageBox.removeClass("text-danger").addClass("text-success").text("OTP Sent!");
            } else {
                alert("Error: " + response.result);
                button.prop("disabled", false).text("Generate OTP");
            }
        },
        error: function (xhr) {
            console.error("OTP Generation Error:", xhr.responseText);
            alert("Error: " + xhr.status + " " + xhr.statusText);
            button.prop("disabled", false).text("Generate OTP");
        }
    });


    

    // Step 2: Verify OTP & Enable the Correct Submit Button
    $(document).off("click", ".verifyOtpBtn").on("click", ".verifyOtpBtn", function () {
        var index = $(this).attr("data-index"); // Identify the form by index
        var otpCode = $("#otpCode" + index).val();
        var otpCheckId = $("#otpLogid" + index).val();

        if (!otpCode.trim() || otpCode.length !== 6) {
            $("#otpMessage" + index).text("Enter a valid 6-digit OTP").addClass("text-danger");
            return;
        }

        $.ajax({
            type: "POST",
            url: "/api/super_admin/verifyOtp", // Update API route
            data: { action: "verify", otpCode: otpCode, otpCheckId: otpCheckId },
            success: function (response) {
                if (response.responseStatus === 1) {
                    $("#otpMessage" + index).removeClass("text-danger").addClass("text-success").text("OTP Verified!");
                    $("#updateBtn" + index).prop("disabled", false); // Enable the correct submit button
                    $(".verifyOtpBtn[data-index='" + index + "']").hide();
                    $(".resendOtpBtn[data-index='" + index + "']").hide();
                } else {
                    $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text(response.result);
                }
            },
            error: function () {
                $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text("Error verifying OTP.");
            }
        });
    });

    // Step 3: Click "Resend OTP"
    $(document).on("click", ".resendOtpBtn", function () {
        var index = $(this).attr("data-index");
        $(".generateOtpBtn[data-index='" + index + "']").show().prop("disabled", false).text("Generate OTP"); // Show button again for resend
        $(".generateOtpBtn[data-index='" + index + "']").click(); // Re-trigger OTP Generation
    });

});


</script>





<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Dynamic Profile Switch</h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Dynamic Profile Switch</li>
                </ol>
            </nav>
        </div>

        <!-- Start Tabs -->
        <div class="card custom-card">
            <div class="card-header">
                <h4 class="card-title">Dynamic Profile Switch</h4>
            </div>
            <div class="card-body">
                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link {% if redirectval == 'profileSwitch' %}active{% endif %}" data-bs-toggle="tab"
                            href="#profileSwitch">Dynamic Profile Switch</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if redirectval == 'overrideDates' %}active{% endif %}"
                            data-bs-toggle="tab" href="#overrideDates">Override Dates</a>
                    </li>
                </ul>
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                <ul class=flashes>
                    {% for message in messages %}
                    <h2><b>
                            <center style="color:green">{{ message }}</center>
                        </b></h2>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endwith %}

                <!-- Tab Content -->
                <div class="tab-content">
                    <div class="tab-pane fade {% if redirectval == 'profileSwitch' %}show active{% endif %}"
                        id="profileSwitch">
                        <form method="POST" action="{{ url_for('patterns_configuarations.dynamic_profile_switch') }}" id="dynamicprofile" name="dynamicprofile">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            {% for record in profile_switch_data_list %}
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="checkbox_{{ record.day }}"
                                    name="{{ record.day }}_is_enabled" value="True" {% if record.is_enabled %}checked{%
                                    endif %} onclick="toggleDayInputs('{{ record.day }}')">
                                <label class="form-check-label" for="checkbox_{{ record.day }}">{{ record.day }}</label>
                            </div>

                            <!-- Default Enable -->
                            <div id="defaultEnableContainer_{{ record.day }}"
                                style="margin-left: 25px; display: {% if record.is_enabled %}block{% else %}none{% endif %};">
                                <input type="checkbox" class="form-check-input" id="defaultEnable_{{ record.day }}"
                                    name="{{ record.day }}_defaultEnable" value="True" {% if record.defaultEnable
                                    %}checked{% endif %} onchange="toggleDayAndDropdown('{{ record.day }}')">
                                <label class="form-check-label" for="defaultEnable_{{ record.day }}">Default
                                    Enable</label>
                            </div>

                            <!-- Dropdown and Add Button -->
                            <div id="add_and_dropdowns_{{ record.day }}"
                                style="margin-left: 25px; padding: 10px; display: {% if record.is_enabled and not record.defaultEnable %}block{% else %}none{% endif %};">
                                <div id="profileContainer_{{ record.day }}">
                                    {% for profile in record.profileList %}
                                    <div class="row time-input-group">
                                        <div class="col-md-4">
                                            <label for="defaultProfile_{{ record.day }}">Default Profile</label>
                                            <select name="defaultProfile_{{ record.day }}[]" class="form-control" id="defaultprofiles" name="defaultprofiles">
                                                <option value="">Select Default Profile</option>
                                                {% for pattern in existingPatternsList %}
                                                <option value="{{ pattern.patternId }}" {% if
                                                    profile.defaultProfile==pattern.patternId %}selected{% endif %}>{{
                                                    pattern.patternName }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="applicableProfile_{{ record.day }}">Applicable Profile</label>
                                            <select name="applicableProfile_{{ record.day }}[]" class="form-control" id="applicableProfiles" name="applicableProfiles">
                                                <option value="">Select Applicable Profile</option>
                                                {% for pattern in existingPatternsList %}
                                                <option value="{{ pattern.patternId }}" {% if
                                                    profile.applicableProfile==pattern.patternId %}selected{% endif %}>
                                                    {{ pattern.patternName }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-4" style="margin-top: 20px">
                                            <button type="button" class="btn btn-danger"
                                                onclick="this.parentElement.parentElement.remove()">Remove</button>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                <button type="button" class="btn btn-primary custom-btn mt-2"
                                    id="addButton_{{ record.day }}"
                                    onclick="addProfileSlot('profileContainer_{{ record.day }}', '_{{ record.day }}')">+
                                    Add Profile</button>
                            </div>
                            {% endfor %}

                            <div class="form-group mt-3">
                                <button type="button" class="btn btn-warning generateOtpBtn" data-index="up">Generate OTP</button>
                                <input type="hidden" id="otpLogidup" name="otpLogid">
                            </div>

                            <div class="form-group mt-3 otp-section" data-index="up" style="display: none;">
                                <label for="otpCodeup">Enter OTP*</label>
                                <input type="text" class="form-control otp-input" id="otpCodeup" name="otpCode" placeholder="Enter OTP">
                                <button type="button" class="btn btn-primary verifyOtpBtn" data-index="up">Verify OTP</button>
                                <button type="button" class="btn btn-secondary resendOtpBtn" data-index="up">Resend OTP</button>
                                <div id="otpMessageup" class="text-danger mt-2"></div>
                            </div>

                            <!-- Submit Button -->
                            <div class="modal-footer justify-content-between">
                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtnup" disabled>Submit</button>
                            </div>

                            <!-- <button type="submit" class="btn btn-primary mt-4">Submit</button> -->
                        </form>
                    </div>
                    <div class="tab-pane fade {% if redirectval == 'overrideDates' %}show active{% endif %}"
                        id="overrideDates">
                        {% if 'add' in session.get('dynamicProfileSwitchPermissions', []) %}
                        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                            data-bs-target="#addTaskModal">Add Override Date</button>
                         {% endif %}

                        <div class="mt-3"></div>
                        <table class="table text-nowrap" style="padding-bottom: 200px;">
                            <thead class="table-primary">
                                <tr>
                                    <th>S.No</th>
                                    <th>Override Date</th>
                                    <th>Profile Switch</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for each_record in overridesProfileList %}
                                <tr>
                                    <td>{{ loop.index }}</td>
                                    <td>{{ each_record.overrideDate }}</td>
                                    <td>{{ each_record.formattedOverrideList }}</td>
                                    <td>
                                        {% if 'edit' in session.get('dynamicProfileSwitchPermissions', []) %}
                                        <button class="btn btn-sm btn-info" data-bs-toggle="modal"
                                            data-bs-target="#editOverrideModal{{ loop.index }}">Edit</button>
                                        {% endif %}

                                        <!-- <a href="javascript:void(0);"
                                            onclick="confirmDelete('{{ url_for('patterns_configuarations.delete_override_profile_date',overrideDate=each_record.overrideDate) }}')"><span
                                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                                    class="ri-delete-bin-line"></i></span></a>
                                        </a> -->
                                        {% if 'delete' in session.get('dynamicProfileSwitchPermissions', []) %}
                                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-danger-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#overrideDeleteModal{{loop.index }}">
                                            <i class="ri-delete-bin-line"></i>
                                        </a>
                                        {% endif %}
                        
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

                {% for each_record in overridesProfileList %}
                  <div class="modal fade" id="overrideDeleteModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="overrideDeleteModalLabel{{ loop.index }}" aria-hidden="true">
                      <div class="modal-dialog" role="document">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5 class="modal-title" id="overrideDeleteModalLabel{{ loop.index }}">OTP Verification</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                  <form method="POST" action="{{ url_for('patterns_configuarations.delete_override_profile_date',overrideDate=each_record.overrideDate) }}" enctype="multipart/form-data">
                                      
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                      <div class="form-group mt-3">
                                          <button type="button" class="btn btn-warning generateOtpBtn" data-index="deleteoverride{{ loop.index }}">Generate OTP</button>
                                          <input type="hidden" id="otpLogiddeleteoverride{{ loop.index }}" name="otpLogid">
                                      </div>

                                      <div class="form-group mt-3 otp-section" data-index="deleteoverride{{ loop.index }}" style="display: none;">
                                          <label for="otpCodedeleteoverride{{ loop.index }}">Enter OTP*</label>
                                          <input type="text" class="form-control otp-input" id="otpCodedeleteoverride{{ loop.index }}" name="otpCode" placeholder="Enter OTP">
                                          <button type="button" class="btn btn-primary verifyOtpBtn" data-index="deleteoverride{{ loop.index }}">Verify OTP</button>
                                          <button type="button" class="btn btn-secondary resendOtpBtn" data-index="deleteoverride{{ loop.index }}">Resend OTP</button>
                                          <div id="otpMessagedeleteoverride{{ loop.index }}" class="text-danger mt-2"></div>
                                      </div>

                                      <!-- Submit Button -->
                                      <div class="modal-footer justify-content-between">
                                           <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                          <button type="submit" class="btn btn-primary updateBtn" id="updateBtndeleteoverride{{ loop.index }}" disabled>Submit</button>
                                      </div>  
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>
                {% endfor %}


<div class="modal fade" id="addTaskModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Override Date</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('patterns_configuarations.add_override_profile_date') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="overrideDate" class="form-label">Override Date</label>
                        <input type="date" class="form-control" id="overrideDate" name="overrideDate" required>
                    </div>
                    <div id="profileContainer">
                        <!-- Dynamic rows will be appended here -->
                    </div>
                    <button type="button" class="btn btn-primary custom-btn mt-2" id="addButton"
                        onclick="addProfileSlot('profileContainer')">+ Add
                        Profile</button>

                    <div class="form-group mt-3">
                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="add">Generate OTP</button>
                        <input type="hidden" id="otpLogidadd" name="otpLogid">
                    </div>

                    <div class="form-group mt-3 otp-section" data-index="add" style="display: none;">
                        <label for="otpCodeadd">Enter OTP*</label>
                        <input type="text" class="form-control otp-input" id="otpCodeadd" name="otpCode" placeholder="Enter OTP">
                        <button type="button" class="btn btn-primary verifyOtpBtn" data-index="add">Verify OTP</button>
                        <button type="button" class="btn btn-secondary resendOtpBtn" data-index="add">Resend OTP</button>
                        <div id="otpMessageadd" class="text-danger mt-2"></div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtnadd" disabled>Save</button>
                </div>

                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div> -->
            </form>
        </div>
    </div>
</div>
{% for each_record in overridesProfileList %}
<div class="modal fade" id="editOverrideModal{{ loop.index }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Override Date and Timings for {{ each_record.overrideDate }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST"
                action="{{ url_for('patterns_configuarations.update_override_profile_date') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-body">
                    <!-- Hidden Field for Override Index -->
                    <input type="hidden" id="updateOverrideIndex{{ loop.index }}" name="overrideIndex"
                        value="{{ loop.index0 }}">

                    <!-- Override Date -->
                    <div class="mb-3">
                        <label for="updateOverrideDate{{ loop.index }}" class="form-label">Override Date</label>
                        <input type="date" class="form-control" id="updateOverrideDate{{ loop.index }}"
                            name="overrideDate" value="{{ each_record.overrideDate }}" readonly>
                    </div>

                    <!-- Timings -->
                    <div id="updateProfileContainer{{ loop.index }}">
                        {% for overrideList in each_record.overrideList %}

                        <div class="row time-input-group mb-2">
                            <div class="col-md-4">
                                <label for="defaultProfile">Default Profile</label>
                                <select name="defaultProfile[]" class="form-control">
                                    <option value="">Select Default Profile</option>
                                    {% for pattern in existingPatternsList %}
                                    <option value="{{ pattern.patternId }}" {% if
                                        overrideList.defaultProfile==pattern.patternId %}selected{% endif %}>{{
                                        pattern.patternName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="applicableProfile">Applicable Profile</label>
                                <select name="applicableProfile[]" class="form-control">
                                    <option value="">Select Default Profile</option>
                                    {% for pattern in existingPatternsList %}
                                    <option value="{{ pattern.patternId }}" {% if
                                        overrideList.applicableProfile==pattern.patternId %}selected{% endif %}>
                                        {{ pattern.patternName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2" style="margin-top: 20px">
                                <button type="button" class="btn btn-danger"
                                    onclick="this.parentElement.parentElement.remove()">Remove</button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <!-- Add More Timings Button -->
                    <button type="button" class="btn btn-secondary mt-2"
                        onclick="addProfileSlot('updateProfileContainer{{ loop.index }}')">+ Add Time</button>

                    <div class="form-group mt-3">
                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="update{{ loop.index }}">Generate OTP</button>
                        <input type="hidden" id="otpLogidupdate{{ loop.index }}" name="otpLogid">
                    </div>

                    <div class="form-group mt-3 otp-section" data-index="update{{ loop.index }}" style="display: none;">
                        <label for="otpCodeupdate{{ loop.index }}">Enter OTP*</label>
                        <input type="text" class="form-control otp-input" id="otpCodeupdate{{ loop.index }}" name="otpCode" placeholder="Enter OTP">
                        <button type="button" class="btn btn-primary verifyOtpBtn" data-index="update{{ loop.index }}">Verify OTP</button>
                        <button type="button" class="btn btn-secondary resendOtpBtn" data-index="update{{ loop.index }}">Resend OTP</button>
                        <div id="otpMessageupdate{{ loop.index }}" class="text-danger mt-2"></div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtnupdate{{ loop.index }}" disabled>Update</button>
                </div>
                    

                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div> -->
            </form>
        </div>
    </div>
</div>
{% endfor %}


<script type="text/javascript">
    $('input').on('invalid', function() {
        this.setCustomValidity('');
    });

    $(document).ready(function () {
    $('#dynamicprofile').validate({ // Now correctly targets the form
        errorElement: 'div',
        errorClass: 'error', 
        errorPlacement: function (error, element) {
            error.insertAfter(element); 
        },
        ignore: ":hidden", 
        rules: {
            'defaultprofiles': {
                required: true,
               
            },
            'applicableProfiles': {
                required: true
            }
        },
        messages: {
            'defaultprofiles': {
                required: 'Please select at least one existing profile.',
               
            },
            'applicableProfiles': {
                required: 'Please select a one applicable profile.'
            }
        },
        submitHandler: function(form) {
            // Only submit if OTP is verified and button enabled
            if ($('#updateBtnadd').prop('disabled')) {
                alert('Please verify OTP before submitting.');
                return false;
            }
            form.submit();
        }
    });
});
</script>
{% endblock %}