{% load static %}
{% include 'web/include_comman/header.html' %}

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='subscription_active'%}
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                {% include 'web/include_comman/right_top.html' %}
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    {% comment %} <h1 class="h3 mb-2 text-gray-800">{{title}}</h1> {% endcomment %}
                    {% comment %} <div class="col-lg-6"> {% endcomment %}
                    <form method="GET" class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search ">
                        <div class="input-group mb-3">

                            <input type="text" name="search" value="{{search}}" class="form-control bg-light border-1 small" placeholder="Search for..."

                                aria-label="Search" aria-describedby="basic-addon2">

                            <div class="input-group-append">

                                <button class="btn btn-primary mr-2" type="submit">

                                    <i class="fas fa-search fa-sm"></i>

                                </button>

                            </div>
                            <a href="{% url 'web:subscription_view' %}" class="btn btn-info mr-2 btn-sm float-right" role="button">Refresh</a>

                        </div>

                    </form>
                {% comment %} </div> {% endcomment %}

                   

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary">Subscription List</h6>
                                </div>
                                <div class="col-lg-6">
                                    <a href="{% url 'web:add_subscription_view' %}?page={{page}}" class="btn btn-success btn-sm float-right" role="button">Add New</a>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                {% if subscriptions %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th class="th">S.No.</th>
                                            <th class="th">Subscription Type</th>
                                            <th style="width:100px;" class="th">Validity</th>
                                            <th class="th">Price</th>
                                            <th class="th">Discount</th>
                                            <th class="th">Per Month Price</th>
                                            <th style="width:150px;" class="th">Country</th>
                                            <th class="th" style="width:250px;">Description</th>
                                            {% if request.user.roles_id == 1 %}
                                            <th class="th">Status</th>
                                            {% endif %}
                                            <th class="th">Action</th>
                                            <th class="th">Add Other country</th>
                                        </tr>
                                    </thead>
                                   
                                    <tbody>
                                        {% for subscription in subscriptions %}
                                        <tr>
                                            <td class='tableflow' style="vertical-align: middle;">{{forloop.counter}}</td>
                                            <td class='tableflow' style="vertical-align: middle;">{{subscription.subscription_type|slice:20}}</td>
                                            <td class='tableflow' style="width:120px;vertical-align: middle;">{{subscription.days}} Months</td>
                                            <td class='tableflow' style="vertical-align: middle;">
                                                {{subscription.price|floatformat:2}}</td>
                                                <td class='tableflow' style="vertical-align: middle;">
                                                    {% if subscription.discount %}
                                                    {{subscription.discount|floatformat:2}}%
                                                    {% else %}
                                                    N/A
                                                    {% endif %}
                                                </td>
                                                    
                                                <td class='tableflow' style="vertical-align: middle;">{{subscription.per_month_price|floatformat:2}}</td>
                                               {% comment %} <form>
                                                <input type="number" id="price_id" name="price_amt" value="{{subscription.price|floatformat:2}}" />
                                                <input type="hidden" name="sub_id" value="{{subscription.id}}" />
                                                <input type="submit" id="sub_id" class="btn btn-success" value="Update" />
                                               </form>
                                            </td> {% endcomment %}
                                            <td class='tableflow' style="vertical-align: middle;">{{subscription.country.name}}</td>
                                            <td class='tableflow' style="width:250px;" title="{{subscription.description}}">
                                                {% if subscription.description %}
                                                {{subscription.description|slice:"50"|linebreaks}}
                                                {% else %}
                                                N/A
                                                {% endif %}
                                            </td>
                                            {% comment %} {% if subscription.subscription_status == 1 %}
                                            <td title="Subscription is activate"><img class="text-center" src="{% static 'Images/assets/checked.png' %}" width="40px"/></td>
                                            {% else %}
                                            <td title="Subscription is deactivate"><img class="text-center" src="{% static 'Images/assets/cancel.png' %}" width="40px"/></td>
                                            {% endif %}
                                            {% if subscription.subscription_status == 1 %}
                                            <td title="Deactivate subscription"><a href="{% url 'web:deactivate_subscription' subscription.id %}" class="btn-sm btn-danger btn-lg active px-3 py-2" onclick="conformBox3()" style="text-dacoration:none;"><i class="fas fa-fw fa-times"></i></a></td>
                                            {% else %}
                                            <td title="Activate subscription"><a href="{% url 'web:activate_subscription' subscription.id %}" class="btn-sm btn-success btn-lg active px-3 py-2" onclick="conformBox2()"><i class="fas fa-fw fa-check" ></i></a></td>
                                            {% endif %} {% endcomment %}
                                            {% if request.user.roles_id == 1 %}
                                                {% if subscription.subscription_status == 1 %}
                                                    <td class="tableflow" style="vertical-align: middle;" title="Active Subscription"><a href="{% url 'web:deactivate_subscription' subscription.id %}?page={{page}}" class="btn-secondary active btn-sm" onclick="conformBox3()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Deactivate</a></td>
                                                    {% else %}
                                                    <td class="tableflow" style="vertical-align: middle;" title="Inactive Subscription"><a href="{% url 'web:activate_subscription' subscription.id %}?page={{page}}" class="btn-success active btn-sm px-3" onclick="conformBox2()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Activate</a></td>
                                                {% endif %}
                                            {% endif %}
                                            
                                            <td style="vertical-align: middle;"> <a href="{% url 'web:edit_subscription_commission_view' subscription.id %}?page={{page}}" class="btn-sm btn-info btn-lg active">Edit</a> </td>
                                            <td style="vertical-align: middle;"><button type="button" id="add_count" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal{{subscription.id}}" data-whatever="@mdo">Add</button>
                                                {% comment %} <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> {% endcomment %}
                                                
                                                <div class="modal fade" id="exampleModal{{subscription.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                  <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                      <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel " style="color:black;" >Add Country</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                          <span aria-hidden="true">&times;</span>
                                                        </button>
                                                      </div>
                                                      <div class="modal-body">
                                                        <form method="POST" action="{% url 'web:add_other_country' subscription.id %}">
                                                            {% csrf_token %} 
                                                            <div class="form-group">
                                                            <label for="message-text" class="col-form-label">Country:</label>
                                                            <div class="country_scroll" >
                                                                {{ country_form.name }}
                                                            </div>
                                                          </div>
                                                       
                                                      </div>
                                                      <div class="modal-footer">
                                                        {% comment %} <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> {% endcomment %}
                                                        <input type="submit" name="submit" class="btn btn-primary btn-user btn-block" value="Save"/>
                                                      </div>
                                                    </form>
                                                    </div>
                                                  </div>
                                                </div>
                                            </td>  
                                        </tr>
                                        {% endfor %}
                                        
                                        {% comment %} {% url 'web:add_subscription_view' subscription.id %} {% endcomment %}
                                    </tbody>
                                </table>
                                <div class="pagination float-right">
                                    <span class="step-links">
                                        {% if subscriptions.has_previous %}
                                            <a href="?page=1&search={{search}}">&laquo; first</a>
                                            <a href="?page={{ subscriptions.previous_page_number }}&search={{search}}">previous</a>
                                        {% endif %}
                                
                                        <span class="current">
                                            Page {{ subscriptions.number }} of {{ subscriptions.paginator.num_pages }}.
                                        </span>
                                
                                        {% if subscriptions.has_next %}
                                            <a href="?page={{ subscriptions.next_page_number }}&search={{search}}">next</a>
                                            <a href="?page={{ subscriptions.paginator.num_pages }}&search={{search}}">last &raquo;</a>
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                            {% else %}
                            
                            {% endif %}
                        </div>
                    </div>
                    {% comment %} {% url 'web:delete_system_category_view' system_category.id %} {% endcomment %}
                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Confirm!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Click on Delete if you are ready to delete this field.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-danger" onclick='conformBox()'>Delete</button>
        </div>
      </div>
    </div>
  </div>
  
            <!-- End of Main Content -->
        <style>
            .th{
                font-size:14px;
                color:black;
            } 
            td{
                font-size:13px;
            }
            #add_count{
                height: 30px;
                width: 55px;
                font-size: 12px;
                font-weight:bold;
            }
            #exampleModalLabel{
                color:black;
            }
            #id_name{
                border: 1.6px solid gray !important;
                overflow-y: scroll;
                height: 200px;
                border-radius:10px; 
            }
            .country_scroll{
                width:100%;
            }
            #price_id{
                width:80px;
            }
            #sub_id{
                width:;
            }
            label{
                font-weight:bold;
                color:black;
                }
                a{
                    margin: 3px;
                }
        </style>


            {% include 'web/include_comman/footer.html' %}