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

<title>{% block title %}Badge Setting Index{% endblock %}</title>
{% block style %}
<style>
    .modal-dialog {
        height: 150%; /* = 90% of the .modal-backdrop block = %90 of the screen */
    }
</style>
{% endblock %} {% block content %} {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
        <div class="text-center" id="successMsg">
            <h6 class="alert alert-success alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
        </div>
        <div class="col-sm-4"></div>
    </div>
</div>
{% endfor %} {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
        <div class="text-center" id="successMsg">
            <h6 class="alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
        </div>
        <div class="col-sm-4"></div>
    </div>
</div>
{% endfor %}

<div class="container mt-3">
    <h5 style="text-align: center;">Badge Setting Index</h5>

    <div style="text-align: right;">
        <a class="btn btn-primary" href="{{url_for('badge.PostAddBadgeSetting',conf_id=conf_id,conf_key=conf_key)}}" id="add_badge_id" data-toggle="modal" data-target="#add_badge"> Add badge </a>
    </div>
    <br />

    <!-- Modal -->
    <div class="modal fade" id="add_badge" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Badge Setting</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="badge_setting_form" id="badge_setting_form"></div>
                </div>
                <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" />
                <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" />

                <!-- <div class="modal-footer"> -->
                <!--  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
        <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
                <!-- </div> -->
            </div>
        </div>
    </div>

    <table class="table table-striped">
        <thead class="table-dark">
            <tr>
                <th scope="col">S.NO</th>
                <!--<th scope="col">Conf Id</th>-->
                <th scope="col">Badge Type</th>
                <th scope="col">Name Font Size</th>
                <th scope="col">Role Font Size</th>
                <th scope="col">Display.No Size</th>
                <th scope="col">Padding Top</th>
                <th scope="col">Qr Code Size</th>
                <th scope="col">Qr Code Margin Left</th>
                <th scope="col">Qr Code Margin Top</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        {% if adjest_data : %} {% for row in adjest_data : %}
        <tr>
            <td data-label="Role">{{loop.index}}</td>
            <!--<td data-label="Conf Id">{{row.conf_id or ''}}</td>-->
            <td data-label="Badge Type">{{row.badge_type or ''}}</td>
            <td data-label="Name Font Size">{{row.name_font_size or ''}}</td>
            <td data-label="Role Font Size">{{row.role_font_size or ''}}</td>
            <td data-label="Display.No Size">{{row.display_no_size or ''}}</td>
            <td data-label="Padding Top">{{row.padding_top or ''}}</td>
            <td data-label="Qr Code Size">{{row.qr_code_size or ''}}</td>
            <td data-label="Qr Code Margin Left">{{row.qr_code_margin_left or ''}}</td>
            <td data-label="Qr Code Margin Top">{{row.qr_code_margin_top or ''}}</td>

            <td data-label="">
                <button class="btn btn-primary edit_btn" id="edit_btn" type="button" onclick="badge_edit('{{row.bs_id or ''}}')">Edit</button>
            </td>
            <td data-label="">
                <a class="btn btn-danger" href="{{url_for('badge.DeleteBadge' , bs_id =row.bs_id,conf_id=conf_id,conf_key=conf_key)}}" onclick="return confirm('Do you want to delete this record?');"> Delete </a>
            </td>
        </tr>
        {% endfor %} {% else : %}
        <tr class="text-center">
            <td colspan="11" data-label="">Record does not exist.</td>
        </tr>
        {% endif %}
    </table>

    {% endblock %} {% block bottomscript %}
    <script type="text/javascript">
        var BaseUrl = document.location.origin;
        $(document).ready(function () {
            $("#add_badge_id").click(function () {
                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 + "/add_badge", // <-- get action of form

                    success: function (data) {
                        var data_1 = JSON.parse(data);
                        var status = data_1.status;
                        var msg = data_1.msg;
                        var html_data = data_1.html_data;
                        if (status == 1) {
                            $("#add_badge").show();
                            $("#badge_setting_form").html(html_data);
                        } else {
                            return false;
                        }
                    },
                });
            });
        });

        function badge_edit(bs_id) {
            var r = confirm("Do you want edit this record ?. ");
            if (r == true) {
                $("#add_badge").modal("show");

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

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

                        if (status == 1) {
                            $("#add_badge").show();
                            $("#badge_setting_form").html(html_data);
                            return true;
                        } else {
                            return false;
                        }
                    },
                });
            } else {
                $("#add_badge").modal("hide");
                return false;
            }
        }
    </script>

    {% endblock %}
</div>