{% extends 'layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->
    {% include "cdn_through_html/datatable_cdn_css.html" %}

{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-sm-6">
                <h3>Manage Subscriptions</h3>
            </div>
            <div class="col-sm-6 text-md-end">
                <a class="btn btn-primary mb-2" href="{% url 'manage_subscriptions:subscription_add' %}">Add Subscriptions</a>
            </div>
        </div>
        
    
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <div id="style-3_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <table id="style-3" class="table style-3 dt-table-hover dataTable no-footer" role="grid"
                                    aria-describedby="style-3_info">
                                                <thead>
                                                    <tr role="row">
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Record Id </th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Title </th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Interval </th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Interval Count </th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Amount </th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Customer Type</th>
                                                        <th class="checkbox-column sorting_asc" tabindex="0"
                                                            aria-controls="style-3" aria-sort="ascending"
                                                            style="width: 69.2656px;"> Free for Admin </th>
                                                        <th class="sorting" tabindex="7" aria-controls="style-3"
                                                            style="width: 79.7969px;">Active</th>
                                                        <th class="dt-no-sorting sorting" tabindex="8"
                                                            aria-controls="style-3"
                                                            style="width: 100.625px;">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for data_obj in subscription_obj %}
                                                    <tr role="row">
                                                        <td class="checkbox-column text-center sorting_1"> {{data_obj.id}}</td>
                                                        <td>{{data_obj.title}}</td>
                                                        <td>{{data_obj.interval | capfirst}}</td>
                                                        <td>{{data_obj.interval_count }}</td>
                                                        <td>{{data_obj.amount}}</td>
                                                        <td>
                                                            {% if data_obj.principal_types.all %}
                                                                    {% for data in data_obj.principal_types.all %}
                                                                                <span class="badge badge-primary">{{ data.name }}</span>
                                                                    {% endfor %}
                                                            {% else %}
                                                                <span class="badge badge-danger">No user type</span>
                                                            {% endif %}
                                                        </td>
                                                        
                                                        <td class="text-center">
                                                            <span class="shadow-none badge {% if data_obj.is_free %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.is_free}}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <ul class="table-controls">
                                                                <li><a href="{% url 'manage_subscriptions:subscription_edit' data_obj.id %}" class="bs-tooltip"
                                                                    data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                                    data-original-title="Edit" data-bs-original-title="Edit"
                                                                    aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
                                                                        width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round"
                                                                        class="feather feather-edit-2 p-1 br-8 mb-1">
                                                                        <path
                                                                            d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
                                                                        </path>
                                                                    </svg></a>
                                                                </li>
                                                                <li>
                                                                    <a href="{% url 'manage_subscriptions:subscription_detail' data_obj.id %}">
                                                                        <span class="material-symbols-outlined">
                                                                            visibility
                                                                            </span>
                                                                    </a>
                                                                </li>
                                                                <li><a href="{% url 'manage_subscriptions:subscription_delete' data_obj.id %}" class="bs-tooltip"
                                                                        data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                                        data-original-title="Edit" data-bs-original-title="Delete"
                                                                        aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
                                                                        width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round"
                                                                        class="feather feather-trash p-1 br-8 mb-1">
                                                                        <polyline points="3 6 5 6 21 6"></polyline>
                                                                        <path
                                                                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                                                        </path>
                                                                    </svg>
                                                                    </a>
                                                                </li>
                                                                
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                   
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            {% endblock content %}
            
            {% block javascript %}
                <!-- include required js cdn link through html here -->
                {% include "cdn_through_html/datatable_cdn_js.html" %}
                
                <script>
                    c3 = $('#style-3').DataTable({
                        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                            "<'table-responsive'tr>" +
                            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                        "oLanguage": {
                            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                            "sInfo": "Showing page _PAGE_ of _PAGES_",
                            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                            "sSearchPlaceholder": "Search...",
                            "sLengthMenu": "Results :  _MENU_",
                        },
                        "order": [[ 0, "desc" ]],
                        "stripeClasses": [],
                        "lengthMenu": [5, 10, 20, 50],
                        "pageLength": 10
                    });
            
                    multiCheck(c3);
            
                </script>
            {% endblock %}