{% extends 'badge/badge_layout.html' %}

<title>{% block title %}Empty Records{% endblock %}</title>

{% block content %}
<div class="container" style="max-width: 2000px !important;">
<div class="form-group row mt-3">
    <div class="col-lg-6 col-md-6 col-sm-12 ">
        <h5>Empty Records</h5>
        <div class="card" style="border-color: #d9afad !important;">
            <div class="card-body">
                <!-- flash message start -->
                {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
                <div class="alert alert-success text-align-center successMessage alert-dismissible">
                    <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
                    <h6>{{ mesg|safe }}</h6>
                </div>
                {% endfor %} {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
                <div class="alert alert-danger text-align-center successMessage" id="successMessage">
                    <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
                    <h6>{{ mesg|safe }}</h6>
                </div>
                {% endfor %}

                <!-- flash message end -->

                <form method="POST" action="{{url_for('badge.PostEmptyRecords',conf_id=conf_id,conf_key=conf_key,del_table_name=del_table_name)}}" id="">
                    <div class="text-center alert alert-success mt-2" id="rollmax_value" style="display: none;">
                        <h5 style="margin-top: 5px;"></h5>
                    </div>
                    <div class="row text-center mt-2">
                        <div class="col-lg-4 col-md-4 col-sm-12">
                            <h4 style="font-size:21px">Delegate Role :</h4>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-12">
                            <input type="hidden" name="del_table_name" id="del_table_name" value="{{del_table_name}}" />
                            <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" />
                            <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" />
                            <input type="hidden" name="bs_id" id="bs_id" value="{{bs_id}}" />


                            <input type="hidden" name="role_min_value" id="role_min_value" value="0" />
                            <input type="hidden" name="role_max_value" id="role_max_value" value="0" />


                            <select class="form-control" id="role" name="role" required>
                                <option value="" id="select" disabled selected>--SELECT--</option>
                                {% if b_role %} {% for row in b_role %}
                                <option value="{{row.b_role}}"> {{row.b_role}} </option>
                                {% endfor %} {% endif %}
                            </select>
                        </div>
                        
                    </div>
                    <div class="role_show" style="display: none;">
                        <hr/>
                        <div style="background-color: #c1c0c029 !important;padding: 5px;border-radius: 10px;">
                            <div class="row role_show_1 mt-2 text-center" >
                                <div class="col-lg-8 col-md-8 col-sm-12">
                                    <h5><strong> Enter the number do you want to insert records</strong> </h5>
                                </div>
                                <div class="col-lg-4 col-md-3 col-sm-12">
                                    <input type="text" class="form-control" name="no_of_recodrds" id="no_of_recodrds" placeholder="Enter no. of records">
                                </div>
                                <div class=" col-lg-12 col-md-12 col-sm-12 text-center"><h4>(OR)</h4><br/> </div>
                                
                            </div>  


                            <div class="row mt-2 text-center" >
                                <hr/>
                                
                                
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <h5>Del. No From</h5>
                                    <input type="text" name="del_no_from" id="del_no_from" class="form-control" required />
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <h5>Del. No To</h5>
                                    <input type="text" name="del_no_to" id="del_no_to" class="form-control" required />
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <h5>Name</h5>
                                    <input type="text" name="full_name" id="full_name" class="form-control" />
                                </div>
                            </div>
                            <div class="row" >
                                <div class="col-lg-5 col-md-5 col-sm-12"></div>
                                <div class="col-lg-2 col-md-2 col-sm-12">
                                    <label for="save"></label><br />
                                    <input type="submit" class="btn btn-success text-center" id="save_btn" value="Save" />
                                </div>
                                <div class="col-lg-5 col-md-5 mt-4 text-right col-sm-12">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <h5>Image for badge printing delegate number</h5>
    <div class="card" style="border-color: #d9afad !important;">
        <div class="card-body">

            <form id="img_upload_form">
                <div class="row">
                    {% if bs_id > 0 : %}
                     <div class="col-lg-12 col-md-12 col-sm-12 text-right mb-3">
                        <input type="hidden" name="remove_path_name" id="remove_path_name" value="">
                        <input type="hidden" name="bucket" id="bucket" value="">
                            <button type="button" class="btn btn-danger" style="display:none;" id="remove_image">Remove image</button>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 mt-2">
                        <h5 style="font-size: 21px;">Upload your File:</h5>
                    </div>

                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="file" class="form-control" autocomplete="off" accept="image/*" id="files" name="files" onchange="upload_image()" />
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12  mt-4 mb-4">

                        {% if image_url: %} 
                            {% set display_block = "block" %} 
                            {% set src = image_url %} 
                        {% else %} 
                            {% set display_block = "none" %} 
                            {% set src = '' %}
                         {% endif %}
                        <img src="{{src}}" alt=""  id="show_image" width="100%" height="150" style="display: {{display_block}}; width: 100%; height: 100%;" />
                        <input type="hidden" name="image_name" value="" id="image_name" >
                    </div>
                    {% else : %}
                      <div class="col-lg-12 col-md-12 col-sm-12  text-center text-danger">
                          <h4 class="mt-3 mb-3" >Badge print template does not exists.</h4>
                      </div>
                    {% endif %}

                     
                </div>
            </form>
        </div>
    </div>
</div>
</div>
</div>


{% endblock %} {% block bottomscript %}

<script type="text/javascript">
    var BaseUrl = document.location.origin;
    
     var imageUrl   = $('#show_image').attr('src');

    if(imageUrl){
         $("#remove_image").show();
    }
    else{
        $("#remove_image").hide();
    }
    // upload_image start------------------------------------------------------------
    function upload_image() {
        var fd        = new FormData();
        var file      = $("#files")[0].files[0];
        var conf_id   = $("#conf_id").val();
        var conf_key  = $("#conf_key").val();
        var bs_id     = $("#bs_id").val();
        var file_name = $("#files").val().split("\\").pop();

        fd.append("file", file);
        fd.append("file_name", file_name);
        fd.append("bs_id" , bs_id);

        $.ajax({
            type: "POST",
            url: BaseUrl + "/" + conf_id + "/" + conf_key + "/badge_printing_del_list_image_upload",
            data: fd,
            contentType: false,
            processData: false,
            cache: false,
            dataType: "json",
        })
            .done(function (data, textStatus, jqXHR) {
                var msg = data.msg;
                var file_path = data.file_path + "?timestamp=" + $.now();
                var file_name = data.file_name
                $("#show_image").attr("src", file_path);
                $("#show_image").show();
                 $("#image_name").val(file_path);
                 $("#remove_image").show();
                status = data.status;
                if (status == 1) {

                    alert(msg);
                    return true;
                } else {
                     // $("#file_path").val(file_path);
                    return false;
                }
            })
            .fail(function (data) {
                
                alert("error!");
            });
    }

    // upload_image end------------------------------------------------------------
    
    // remove image amazon and database start 

         $( "#remove_image" ).click(function() {
            var imageUrl   = $('#show_image').attr('src');
            var imageParts = imageUrl.split('/');
            var image_name  = imageParts[imageParts.length - 1];

            var conf_id   = $("#conf_id").val();
            var conf_key  = $("#conf_key").val();


                $.ajax({
                    type: "GET", // <-- get method of form
                    url: BaseUrl + "/" + conf_id + "/" + conf_key + "/remove_image_aws", // <-- get action of form
                    data: { "conf_id": conf_id, "conf_key": conf_key, "image_name": image_name},
                    success: function (data) {
                        var data_1 = JSON.parse(data);
                        var status = data_1.status;
                        var msg = data_1.msg;
                      


                        if (status == 1) 
                        {
                           $("#show_image").removeAttr("src");
                           $("#show_image").hide();

                           $("#files").val("");
                           $("#remove_image").hide();
                            alert(msg);
                            return true;
                        } 
                        else
                        {
                            alert(msg);
                            return false;
                                
                        }
                        
                         
                    },
                });
                 
});
           



// remove image amazon and database end 



    $(document).ready(function () {
        $(".role_show").hide();
        $("#role").change(function () {
            var role = $("select[name=role]").val(); // Here we can get the value of selected item
            var conf_id = $("#conf_id").val();
            var conf_key = $("#conf_key").val();
            var del_table_name = $("#del_table_name").val();
            if (del_table_name.length < 3) {
                alert("Delegate table not exists.");
                return false;
            } else {
                $.ajax({
                    type: "GET", // <-- get method of form
                    url: BaseUrl + "/" + conf_id + "/" + conf_key + "/get_delgate_numbers_by_role", // <-- get action of form
                    data: { conf_id: conf_id, conf_key: conf_key, role: role, del_table_name: del_table_name },
                    success: function (data) {
                        var data_1 = JSON.parse(data);
                        var status = data_1.status;
                        var msg = data_1.msg;
                        var role_max_value = data_1.role_max_value;
                        var role_min_value = data_1.role_min_value;
                        if (role_min_value == 0 && role_max_value == 0)
                        {
                            $(".role_show_1").hide();

                        }
                        else
                        {
                            $(".role_show_1").show();
                        }


                        if (status == 1) 
                        {
                            $(".role_show").show();
                            $("#rollmax_value").show();

                            $("#role_min_value").val(role_min_value);
                            $("#role_max_value").val(role_max_value);

                            if (role_min_value == 0 && role_max_value == 0) 
                            {
                                $("#rollmax_value").html("<span id='span_text' style ='color:#00166b;font-size:20px;' > Record(s) not exists for <b>" + role + "</b> </span>");

                                $("#no_of_recodrds").val('');
                                $("#del_no_from").val('');
                                $("#del_no_to").val('');
                            } 
                            else
                             {
                                $("#rollmax_value").html(
                                    "<span id='span_text' style ='color:#00166b;font-size:20px;' >" +
                                        role +
                                        " : minimum delegate number is <b>" +
                                        role_min_value +
                                        "</b> and  maximum  delegate number is <b>" +
                                        role_max_value +
                                        "</b> </span>"
                                );


                                // onchange event for update no of card option
                                var exist_min_no   = $("#role_min_value").val();
                                var exist_max_no   = $("#role_max_value").val();
                                var no_of_recodrds = $("#no_of_recodrds").val();

                                if(exist_max_no.length >0)
                                {
                                   var exist_max_no =  parseInt(exist_max_no,10);
                                }
                                if(no_of_recodrds.length >0)
                                {
                                   var no_of_recodrds =  parseInt(no_of_recodrds,10);

                                   var new_min_no  = exist_max_no+1;
                                   var new_max_no  = exist_max_no+no_of_recodrds;

                                   $("#del_no_from").val(new_min_no);
                                   $("#del_no_to").val(new_max_no);
                                }
                                // end
                            }
                        }
                         else 
                         {
                            alert(msg);
                            $(".role_show").hide();
                            return false;
                        }
                    },
                });
            }
        });
        // });

        // enter number start -- focusout
        $(document).on("keyup" , "#no_of_recodrds",function(e)
         {
            e.preventDefault();
            var no_of_recodrds = $(this).val();
            

            var exist_min_no = $("#role_min_value").val();
            var exist_max_no = $("#role_max_value").val();

            if(exist_max_no.length >0)
            {
               var exist_max_no =  parseInt(exist_max_no,10);
            }
            if(no_of_recodrds.length >0)
            {
               var no_of_recodrds =  parseInt(no_of_recodrds,10);
            }
            else
            {
                $("#del_no_from").val('');
                $("#del_no_to").val('');
                return false;
            }
            // alert(jQuery.type(exist_max_no));

            var new_min_no  = exist_max_no+1;
            var new_max_no  = exist_max_no+no_of_recodrds;

            $("#del_no_from").val(new_min_no);
            $("#del_no_to").val(new_max_no);

        });

        // end
    });
</script>

{% endblock %}