{% extends "conferenceapp/layout.html" %} {% block style %} {% endblock %} {% block content %}
    <form id="addon_form" action="{{url_for('addons.PostAddonForm',conf_id=conf_id,conf_key=conf_key)}}" method="POST">
        <div class="container">
             <div class="alert alert-success text-center successMessage alert-dismissible" id="successMessage" style="display: none;">
            <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
            <span id="successMsg"></span>
        </div>
            <h2 class="fs-title text-center mt-2">Addon Form</h2>

        <input type="hidden" name="html_data" id="html_data" value="{{html_data}}" />
        <input type="hidden" name="addon_id" id="addon_id" value="{{addon_id}}"  />
        <input type="hidden" name="conference_id" id="conference_id" value="{{conf_id}}"  />
        <!-- <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}"  /> -->
       <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Addon Type:<span style="color: red;">*</span></label>
                                <i class="fas fa-hand-pointer" id="addon_type_hint" data-toggle="modal" data-target="#myModal" title ="Hints of Addon Type" style="line-height: 1; color: rgb(30, 48, 80);"></i>

                            </div>
                            <div class="modal fade" id="myModal">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Hints Of Addon Types</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        
                                        <div class="modal-body">
                                            <div class="copy-message text-center" style="color: green;"></div>
                                            <span style="color:blue;">(If you want to copy the text, then click on the text)</span><br/>
                                            <p>
                                                <span style="color:red;">For Example:</span><br/>
                                                <label class="clickable-label">Choose the Registration Type</label>
                                                <span style="color:red;">(Maximum use this addon type)</span><br/>
                                                <label class="clickable-label">WETLAB</label><br/>
                                                <label class="clickable-label">DRYLAB</label><br/>
                                                <label class="clickable-label">T-shirt Size</label><br/>
                                                <label class="clickable-label">Date planning</label><br/>
                                                <label class="clickable-label">Choose the Pre conference workshop</label><br/>
                                            </p>
                                        </div>
                                        
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" id="addon_type_id" name="addon_type_id">
                                    <option value="" id="select">Select Addon Type</option>
                                    {% if data %} {% for row in data %}
                                    <option value="{{row.addon_type_id}}" {% if row.addon_type_id == 1  %} selected {% endif %} > {{row.addon_type}} </option>
                                    {% endfor %} {% endif %}
                                </select> 
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Addon Name:</label>
                                <i class="fas fa-hand-pointer" id="addonsmodel" data-toggle="modal" data-target="#addons_model" title ="Hints of Addons Name" style="line-height: 1; color: rgb(30, 48, 80);"></i>
                            </div>
                            <div class="modal fade" id="addons_model">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Hints Of Addons Names</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        
                                        <div class="modal-body">
                                            <div class="copy-message text-center" style="color: green;"></div>
                                            <span style="color:blue;">(If you want to copy the text, then click on the text)</span>
                                            <p>
                                                <span style="color:red;">For Example:</span><br/>
                                                <label class="clickable-label">Early Bird</label><br/>
                                                <label class="clickable-label">Super Early Bird</label><br/>
                                                <label class="clickable-label">Regular</label><br/>
                                                <label class="clickable-label">Spot</label><br/>
                                                <label class="clickable-label">Standard</label><br/>
                                            </p>
                                        </div>
                                        
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="addon_name" id="addon_name" placeholder="Enter Addon Name" />
                            </div>
                        </div>
                    </div>
                    
                </div><br/>

                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Reg Type:<span style="color:red;">*</span> </label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" name="reg_type" id="reg_type" class="form-control" placeholder="Enter Reg Type"  />
                                <input type="checkbox" class="form-input reg_type_checkbox" name="reg_type_checkbox"  id="reg_type_checkbox" value="1">
                                <label for="reg_type_checkbox">set same as display name</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Display Name:</label>
                                <i class="fas fa-hand-pointer" id="displaynamemodel" data-toggle="modal" data-target="#displayname_model" title ="Hints of Addons Name" style="line-height: 1; color: rgb(30, 48, 80);"></i>
                            </div>
                            <div class="modal fade" id="displayname_model">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Hints Of Display Names</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        
                                        <div class="modal-body">
                                            <div class="copy-message text-center" style="color: green;"></div>
                                            <span style="color:blue;">(If you want to copy the text, then click on the text)</span>
                                            <p>
                                                <span style="color:red;">For Example:</span><br/>
                                                <label class="clickable-label">Early Bird</label><br/>
                                                <label class="clickable-label">Super Early Bird</label><br/>
                                                <label class="clickable-label">Regular</label><br/>
                                                <label class="clickable-label">Spot</label><br/>
                                                <label class="clickable-label">Standard</label><br/>
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-8">
                                <input class="form-control" type="text" name="display_name" id="display_name" placeholder="Enter Display Name" style="color:black;"/>
                                <input type="checkbox" class="form-input display_name_checkbox" name="display_name_checkbox"  id="display_name_checkbox" value="1">
                                <label for="display_name_checkbox">set same as reg addon type</label>
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>User Type:<span style="color: red; font-size: 14px;">* (Displaying for mail purpuse.)</span></label>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" id="user_type_id" name="user_type_id" multiple>
                                    <option value="" id="select">Select User Type</option>
                                    {% if user_type %} {% for row in user_type %}
                                    <option value="{{row.user_type_id}}"> {{row.user_type}} {% if row.is_mandatory_mc_no_state == 0 %} {% else %} <span style="color:red;">- MC No and MC State *</span>  {% endif %}</option>
                                    {% endfor %} {% endif %}
                                </select>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label >Addon Reg Type:</label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="addon_reg_type" id="addon_reg_type" name="addon_reg_type" placeholder="Enter Addon Reg Type"  style="color:black;"/>
                                
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Amount:</label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="amount" id="amount" name="amount" placeholder="Enter Amount" />
                            </div>
                        </div>
                    </div>                    
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Order By:</label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" id="order_by" name="order_by" placeholder="Enter Order By" />
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Description:</label>
                                    <i class="fas fa-hand-pointer" id="descriptionmodel" data-toggle="modal" data-target="#description_model" title ="Hints of Addons Name" style="line-height: 1; color: rgb(30, 48, 80);"></i>
                            </div>
                            <div class="modal fade" id="description_model">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Hints Of Description</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        
                                        <div class="modal-body">
                                            <p>
                                                <span style="color:red;">This field for option only.</span><br/>
                                                Addon Type Name Overview.
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="description" name="description" id="description" placeholder="Enter Description" />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Head Count:</label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="head_count" id="head_count" placeholder="Enter head count" />
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Member types:</label>
                                <i class="fas fa-hand-pointer" id="show_member_type_hint" data-toggle="modal" data-target="#Member_Type_Modal" title ="Hints of Mmeber Type" style="line-height: 1; color: rgb(30, 48, 80);"></i>
                   
                                <div class="modal fade" id="Member_Type_Modal">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Hints Of Mmeber Types</h4>
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="copy-message text-center" style="color: green;"></div>
                                                <span style="color:blue;">(If you want to copy the text, then click on the text)</span>
                                            <p >
                                                <span style="color:red;">For Example:</span><br/>

                                                    <label class="clickable-label">Member</label>&nbsp;&nbsp;<span style="color:red;">(1)</span><br/>
                                                    <label class="clickable-label">Non member</label>&nbsp;&nbsp;<span style="color:red;">(2)</span><br/>
                                                    <label class="clickable-label">Associate Member</label>&nbsp;&nbsp;<span style="color:red;">(6)</span>
                                            </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            </div>  
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <select id="show_member_types" name="show_member_types" multiple>
                                    <option value="" id="select">Select Member Type</option>
                                    {% if m_member_type_data %} {% for row in m_member_type_data %}
                                    <option value="{{row.member_type_id}}"> {{row.member_type}} </option>
                                    {% endfor %} {% endif %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Start By:</label>
                            </div>
                            <div class="col-md-8">
                                <input type="datetime-local" name="start_by" id="start_by" class="form-control" placeholder="Enter start by" />
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>End By:</label>
                            </div>
                            <div class="col-md-8">
                                <input type="datetime-local" name="end_by" id="end_by" class="form-control" placeholder="Enter end by" />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Conference Id:</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" name="conference_id" id="conference_id" class="form-control" name ="conference_id"disabled value="{{conf_id}}" />
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Is Mandatory:</label>  
                            </div>
                            <div class="col-md-8">

                                <input type="radio" class="form-input is_mandatory" name="is_mandatory" id="is_mandatory_yes" value="1" /> <label for="is_mandatory_yes" class="text-dark">Yes</label>

                                <input type="radio" class="form-input is_mandatory" name="is_mandatory" id="is_mandatory_no" value="0" checked /> <label for="is_mandatory_no" class="text-dark">No</label>
                          
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Is Visible:</label>
                            </div>
                            <div class="col-md-8">
                                <input type="radio" class="form-input is_visible" name="is_visible" id="is_visible_yes" value="1" checked /> <label for="is_visible_yes" class="text-dark">Yes</label>

                                <input type="radio" class="form-input is_visible" name="is_visible" id="is_visible_no" value="0"  /> <label for="is_visible_no" class="text-dark">No</label>
                            </div>
                        </div>
                    </div>
                </div><br/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Is Custom Addon:</label>
                            </div>
                            <div class="col-md-8">
                                <input type="radio" class="form-input is_custom_addon" name="is_custom_addon" id="is_custom_addon_yes" value="1" /> <label for="is_custom_addon_yes" class="text-dark">Yes</label>

                                <input type="radio" class="form-input is_custom_addon" name="is_custom_addon" id="is_custom_addon_no" value="0"  checked /> <label for="is_custom_addon_no" class="text-dark">No</label>
                            </div>
                        </div>
                    </div>
                </div><br/>


                <div class="row">
                    <div class="col-md-12 text-center" >
                        <input type="button" class="btn btn sm btn-info" value="Back" onClick="javascript:history.go(-1)" />
                        <input type="submit" name="save" id="save_btn" class="btn btn-success" value="Save">
                        <!-- <button type="button" class="btn btn-success save_btn" id="save_btn" value="Save">Save</button> -->   
                        <input type="button" class="btn btn-success update_btn" id="update_btn" value="Update" />
                    </div> 
                </div>
            </div>
        </div>    
    </div>
            
        </form><br/>
        <div id="Addon_Table" class="mobile-responsive">
            <table class="table table-bordered">
                <thead style="background-color: #072645;border-color: #dee2e6;color: #FFF;">
                    <tr>
                        <th scope="col">SNo</th>
                        <th scope="col">Addon Type Id</th>
                        <th scope="col">Addon Id</th>
                        <th scope="col">Category</th>
                        <th scope="col">Reg Type</th>
                        <th scope="col">Display Name</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Start By / End By</th>
                        <th scope="col">Order By</th>
                        <th scope="col">Modify</th>
                    </tr>
                </thead>
                <tbody id="Addon_Content"></tbody>
            </table>
        </div>
{% endblock %}
{% block bottomscript %}
<script type="text/javascript">
    var BaseUrl = document.location.origin;
    $(document).on("click", "#addon_type_hint", function (e) {
            $("#myModal").show();
        });
    $(document).on("click", "#addonsmodel", function (e){
        $("#addons_model").show();
    })
    $(document).on("click", "#show_member_type_hint", function (e){
        $("#Member_Type_Modal").show();
    });
    $(document).on("click", "#descriptionmodel", function (e) {
            $("#description_model").show();
        });
    $(document).on("click", "#displaynamemodel", function (e) {
            $("#displayname_model").show();
        });
        $(document).ready(function () {

        // checkbox display name set as same value in addon_reg_type

            $("#display_name_checkbox").on('change', function() {
              if ($(this).is(':checked')) {
                var display_name = $("#display_name").val();

                $("#addon_reg_type").val(display_name);
              } else {

              }
            });
        // end

    // copy to clipboard function start

      $(".clickable-label").click(function() {
        
        var textToCopy = $(this).text();

        // Create a temporary input element to copy the text to the clipboard
        var input = $("<input>");
        $("body").append(input);
        input.val(textToCopy).select();

        // Copy the text to the clipboard
        document.execCommand("copy");

        // Remove the temporary input element
        input.remove();

        // Display a message below the label
        $(".copy-message").text("Copied !").show();

        // Hide the message after a few seconds (optional)
        setTimeout(function() {
          $(".copy-message").hide();
        }, 4000); // 2000 milliseconds = 2 seconds
      });

    // end 
            

        // checkbox regtype set as same value in display name

            $("#reg_type_checkbox").on('change', function() {
              if ($(this).is(':checked')) {
                var reg_type = $("#reg_type").val();

                $("#display_name").val(reg_type);
              } else {

              }
            });
        // end    


          // Load  selectize plugin 
            $('#show_member_types').selectize({
                plugins: ['remove_button'],
                delimiter: ',',
                persist: false,
                create: false,
                items:show_member_types // for set selected multiple values 
            });

        // end

        // selectize for user type id
            var select = $('#user_type_id').selectize({
              maxItems: 1
            });
            var selectize = select[0].selectize;
        // end
        
        // selectize for member types

         var select_m_type = $('#show_member_types').selectize({
              maxItems: 10
            });
            var selectize_m_type = select_m_type[0].selectize;
        // end

        $(document).on("click", "#save_btn", function (e) {
        validate_addon_form();
            if (!$("#addon_form").valid()) {
                return false;

            }

        });
        var table_data = $("#html_data").val();
            $("#Addon_Content").html(table_data);
            $("#update_btn").hide();
    });

    $(document).on("click", ".edit_btn", function (e) {
            e.preventDefault();

            if(confirm("Are you sure you want to edit this?"))
            {
                $("#collapseOne").show("slow");
                var addon_id = $(this).val();

                $.ajax({
                    type: "GET",
                    url: BaseUrl + "/addon_edit",
                    data: { 'addon_id': addon_id },
                    success: function (reposnse) {
                        var data_1 = JSON.parse(reposnse);
                        var status = data_1.status;
                        var msg = data_1.msg;
                        var edit_data = data_1.edited_data;

                        if (data_1.status == 1) {
                            $("#addon_id").val(edit_data.addon_id);
                            $("#addon_type_id").val(edit_data.addon_type_id);
                            $("#addon_name").val(edit_data.addon_name);
                            $("#display_name").val(edit_data.display_name);
                            $("#amount").val(edit_data.amount);
                            $("#order_by").val(edit_data.order_by);
                            $("#conference_id").val(edit_data.conference_id);
                            $("#description").val(edit_data.description);
                            $("#head_count").val(edit_data.head_count);
                            $("#start_by").val(edit_data.start_by);
                            $("#end_by").val(edit_data.end_by);
                            $("#reg_type").val(edit_data.reg_type);
                            $("#addon_reg_type").val(edit_data.addon_reg_type);
                            

                            var $select   = $("#user_type_id").selectize();
                            var selectize = $select[0].selectize;
                            if (status == 1)
                            {
                            var user_type_id = edit_data.user_type_id;
                            selectize.setValue(user_type_id); 
                            }

                            var $select_m = $("#show_member_types").selectize();
                            var selectize_m = $select_m[0].selectize;
                            var ids = edit_data.show_member_types;

                            if(ids === null)
                            {
                               selectize_m.clear();
                                   
                            }
                            else
                            {
                                var result = ids.split(",").map(x=>+x);
                                selectize_m.setValue(result); 
                            }
                            

                            var is_mandatory = edit_data.is_mandatory;

                            if (is_mandatory == "1") {
                                $("input:radio[id=is_mandatory_yes]").prop("checked", true);
                                $("#is_mandatory_yes").val('1');
                            } else {
                                $("input:radio[id=is_mandatory_no]").prop("checked", true);
                                $("#is_mandatory_no").val('0');
                            }

                            var is_visible = edit_data.is_visible;
                            
                            if (is_visible == "1") {
                                $("input:radio[id=is_visible_yes]").prop("checked", true);
                                $("#is_visible_yes").val('1');
                            } else {
                                $("input:radio[id=is_visible_no]").prop("checked", true);
                                $("#is_visible_no").val('0');
                            }

                            var is_custom_addon = edit_data.is_custom_addon;

                            if (is_custom_addon== "1") {
                                $("input:radio[id=is_custom_addon_yes]").prop("checked", true);
                                $("#is_custom_addon_yes").val('1');
                            } else {
                                $("input:radio[id=is_custom_addon_no]").prop("checked", true);
                                $("#is_custom_addon_no").val('0');
                            }
                            
                            $("#save_btn").hide();
                            $(".update_btn").show();
                            $("html, body").animate({ scrollTop: "0px" }, 300);
                        } else {
                            return false;
                        }
                    },
                });
            };
        });
    $(document).on("click", ".update_btn", function (e) {
            e.preventDefault();
            var addon_type_id     = $("#addon_type_id").val();
            var addon_id          = $("#addon_id").val();
            var addon_name        = $("#addon_name").val();
            var display_name      = $("#display_name").val();
            var amount            = $("#amount").val();
            var order_by          = $("#order_by").val();
            var user_type_id      = $("#user_type_id").val();
            var conference_id     = $("#conference_id").val();
            var description       = $("#description").val();
            var head_count        = $("#head_count").val();
            var start_by          = $("#start_by").val();
            var end_by            = $("#end_by").val();
            var reg_type          = $("#reg_type").val();
            var addon_reg_type    = $("#addon_reg_type").val();
            var show_member_types = $("#show_member_types").val();
            var is_mandatory      = $('input[name="is_mandatory"]:checked').val();
            var is_custom_addon   = $('input[name="is_custom_addon"]:checked').val();
            var is_visible        = $('input[name="is_visible"]:checked').val();

            
            $.ajax({
                type: "POST", // <-- get method of form
                url: BaseUrl + "/update_addon_1", // <-- get action of form
                data: {
                    'addon_id'          : addon_id,
                    'addon_type_id'     : addon_type_id,
                    'addon_name'        : addon_name,
                    'display_name'      : display_name,
                    'amount'            : amount,
                    'order_by'          : order_by,
                    'user_type_id'      : user_type_id,
                    'conference_id'     : conference_id,
                    'description'       : description,
                    'head_count'        : head_count,
                    'start_by'          : start_by,
                    'end_by'            : end_by,
                    'show_member_types' : show_member_types,
                    'is_mandatory'      : is_mandatory,
                    'is_custom_addon'   : is_custom_addon,
                    'is_visible'        : is_visible,
                    'reg_type'          : reg_type,
                    'addon_reg_type'    : addon_reg_type
                },
                success: function (reposnse) {
                    var data_1 = JSON.parse(reposnse);
                    var status = data_1.status;
                    var msg = data_1.msg;
                    if (data_1.status== 1) {
                        $("#Addon_Content").html(data_1.html_data);

                        $("#save_btn").show();
                        $("#update_btn").hide();
                        alert("Updated Sucessfully..")
                        // $("#successMessage").show();
                        // $("#successMsg").html(data_1.msg);
                        $("#user_type_id")[0].selectize.clear();
                        $("#show_member_types")[0].selectize.clear();
                        $('.is_mandatory').removeAttr('checked');
                        $('.is_custom_addon').removeAttr('checked');
                        $('.is_visible').removeAttr('checked');


                        clear();

                    } else {
                        return false;
                    }
                    
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {},
            });
        });
    $(document).on("click",".delete_btn",function(e)
          {
            e.preventDefault();
            if(confirm("Are you sure you want to delete this?"))
            {
              var addon_id = $(this).val();
               var conference_id  = $("#conference_id").val();

               $.ajax({
                    type: 'GET', // <-- get method of form
                    url: BaseUrl+"/delete_addon",
                        data: { 'addon_id': addon_id,'conference_id':conference_id},
                    success: function(response){
                       var data_1    = JSON.parse(response);
                       var msg       = data_1.msg;
                
                       var deleted_data = data_1.deleted_data;                       
                       if (data_1.status==1)
                       {
 
                            $("#addon_id").val(0);
                            $("#Addon_Content").empty();
                            $("#Addon_Content").html(data_1.deleted_data);
                            // $("#successMessage").show();
                            // $("#successMsg").html(data_1.msg);
                            alert("Deleted Sucessfully..")
                            clear();
                            $("#user_type_id")[0].selectize.clear();
                            $("#show_member_types")[0].selectize.clear();
                            $('.is_mandatory').removeAttr('checked');
                            $('.is_custom_addon').removeAttr('checked');
                            $('.is_visible').removeAttr('checked');

                        }  
                       else
                       {
                          alert(msg);
                          return false;
                       }   
                         
                      },
                  });
             }
            else{
                return false;
               }
          });
        function clear(){
            $("#addon_type_id").val('');
            $("#addon_name").val('');
            $("#display_name").val('');
            $("#amount").val('');
            $("#order_by").val('');
            $("#user_type_id").val('');
            $("#description").val('');
            $("#head_count").val('');
            $("#start_by").val('');
            $("#end_by").val('');
            $("#reg_type").val('');
            $("#addon_reg_type").val('');
            $("#show_member_types").val('');
            $("#is_mandatory_no").prop("checked", true);
            $("#is_custom_addon_no").prop("checked", true);
            $("#is_visible_yes").prop("checked", true);
            

        }
        function validate_addon_form()

         {
            
             errorclass : 'error',
         
             $("#addon_form").validate({

                rules: {
                    addon_type_id: {
                        required: true,
                    },
                  
                    reg_type: {
                        required: true,
                    },

            },

            messages: {
                addon_type_id: {
                    required: "Please Select Addon Type ",
                },
                reg_type: {
                    required: "Please Enter Reg Type ",
                },
            },
                 highlight: function(element) {
                     $(element).parent().addClass('error')
                 },
             
                 unhighlight: function(element) {
                     $(element).parent().removeClass('error')
                 },
         
                 submitHandler: function(form) {
                     form.submit();
                 }
            })
         };

function copy() {
  let copyText = document.getElementById("copyClipboard");
  let copySuccess = document.getElementById("copied-success");
  copyText.select();
  copyText.setSelectionRange(0, 99999); 
  navigator.clipboard.writeText(copyText.value);
  
 copySuccess.style.opacity = "1";
 setTimeout(function(){ copySuccess.style.opacity = "0" }, 500);
}
</script>
{% endblock %}