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

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='magazine_info_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 %}
                    <div class="col-lg-6 mb-3">
                        <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">
                            <input type="text" class="form-control bg-light border-1 small" name="search" value="{{search}}" placeholder="Search for..."
                                aria-label="Search" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search fa-sm"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    </div>
                   
                   

                    <!-- 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">Magazine List</h6>
                                </div>
                                <div class="col-lg-6">
                                    {% if  request.user.roles_id == 3 or request.user.roles_id == 4  %}
                                    <a href="{% url 'web:add_magazine_info_view' %}" class="btn btn-success btn-sm float-right" role="button">Add New</a>
                                    {% comment %} <a href="{% url 'web:magazine_info_view' %}" class="btn btn-info mr-2 btn-sm float-right" role="button">Reset</a> {% endcomment %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                {% if magazine_infos %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>S.N.</th>
                                            <th>Magazine</th>
                                            <th>Cover Image</th>
                                            <th>Rent Price</th>
                                            <th>Buy Price</th>
                                            <th>Pages</th>
                                            <th>Reads</th>
                                            <th>Rating</th>
                                            {% comment %} <th>Commission</th> {% endcomment %}
                                            {% if request.user.roles_id == 1 %}
                                            <th>Status</th>
                                            <th>Approval Status</th>
                                            {% endif %}
                                            {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                            <th>Action</th>
                                            {% endif %}
                                        </tr>
                                    </thead>
                                   
                                    <tbody>
                                        {% for magazine_info in magazine_infos %}
                                        <tr style="{% if magazine_info.is_aproved == 0 %}background: #FFC4C4;{% endif %}">
                                            <td style="vertical-align: middle;">{{forloop.counter}}</td>
                                            <td style="vertical-align: middle;">{{magazine_info.name}}</td>
                                            <td>
                                                {% if magazine_info.cover_pic %}
                                                <img src="{{magazine_info.cover_pic.url}}" style="width:100px;border-radius: 30px;" class="imageflow">
                                                {% else %}
                                                
                                                {% endif %}
                                            </td>
                                            <td style="vertical-align: middle;">{{magazine_info.rent_price|floatformat:2}}</td>
                                            <td style="vertical-align: middle;"> {{magazine_info.buy_price|floatformat:2}}</td>
                                            
                                            <td style="vertical-align: middle;">
                                                {% for mp in magazine_pages %}
                                                {% if magazine_info.id == mp.magazine.id %}
                                                {{mp.page_number}}
                                                {% endif %}
                                                {% endfor %}
                                            </td>

                                            {% if magazine_info.reads == None %}
                                            <td style="vertical-align: middle;">0</td>
                                            {% else %}
                                            <td style="vertical-align: middle;">{{magazine_info.reads}}</td>
                                            {% endif %}
                                            {% if magazine_info.ratting == None %}
                                            <td style="vertical-align: middle;">0.0</td>
                                            {% else %}
                                            <td style="vertical-align: middle;">{{magazine_info.ratting}}</td>
                                            {% endif %}
                                            {% if request.user.roles_id == 1 %}
                                            {% if magazine_info.is_aproved == 0 %}
                                            <td style="vertical-align: middle;" title="Active Magazine"><a href="" class="btn-secondary active btn-sm disabled-a" style="text-decoration: none;font-size: 12px;font-weight: bold;">Deactivate</i></a></td>
                                            {% else %}
                                            {% if magazine_info.is_active == 1 %}
                                            <td style="vertical-align: middle;" title="Active Magazine"><a href="{% url 'web:deactivate_magazine_view' magazine_info.id %}" class="btn-secondary active btn-sm" onclick="conformBox3()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Deactivate</i></a></td>
                                            {% else %}
                                            <td style="vertical-align: middle;" title="Inactive Magazine"><a href="{% url 'web:activate_magazine_view' magazine_info.id %}" 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 %}

                                            {% if magazine_info.is_aproved == 0 %}
                                            <td style="vertical-align: middle;" title="Disapproved Magazine"><a id="ap1" class="btn-info active btn-sm disabled-a" style="text-decoration: none;font-size: 12px;margin-left: 12px;color:white;font-weight: bold;">Disapproved</i></a></td> <!-- style="text-dacoration:none; pointer-events: none;"-->
                                            
                                            {% elif magazine_info.is_aproved == 1 %}
                                            <td style="vertical-align: middle;" title="Aproved Magazine"><a id="aproved_btn1 ap1" class="btn-success active btn-sm disabled-a" style="text-decoration: none;margin-left: 18px;font-size: 12px;color:white;font-weight: bold;">Approved</button></td>
                                            {% else %}
                                            <td style="vertical-align: middle;" title="Approve or Disapprove This Magazine">
                                                <div class="dropdown">
                                                    <button type="button" id="but_css" class="dropdown-item" data-toggle="modal" data-target=".bd-example-modal-sm">Approve</button>
                                                    <br>
                                                <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-sm">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel " >Add Commission</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:activate_magazine_commission_view' magazine_info.id %}">
                                                                {% csrf_token %} 
                                                                <div class="form-group">
                                                                {% comment %} <label for="message-text" class="col-form-label">Add Commission</label> {% endcomment %}
                                                                <div class="country_scroll" >
                                                                    <p> Do you want to add commission in this magazine?</p>
                                                                </div>
                                                              </div>
                                                              <div class="form-check">
                                                                <input class="form-check-input" type="radio" value="button1" name="flexRadioDefault" id="flexRadioDefault1">
                                                                <label class="form-check-label" for="flexRadioDefault1">
                                                                  Yes
                                                                </label>
                                                              </div>
                                                              <div class="form-check">
                                                                <input class="form-check-input" type="radio" value="button2" name="flexRadioDefault" id="flexRadioDefault2" checked>
                                                                <label class="form-check-label" for="flexRadioDefault2">
                                                                  No
                                                                </label>
                                                              </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>
                                                        </div>
                                                        </form>
                                                        </div>
                                                    </div>

                                                </div>
                                                </div>
                                                <a class="dropdown-item" id="but_css1" href="{% url 'web:disaprove_magazine_view' magazine_info.id %}" onclick="conformBox3()" style="font-weight:bold;">Disapprove</a>
                                                    
                                                </div>
                                                    
                                                {% comment %} <span>
                                                <a href="{% url 'web:disaprove_magazine_view' magazine_info.id %}" class="btn-danger active btn-sm" onclick="conformBox33()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Disapprove</a><!-- style="text-dacoration:none; pointer-events: none;"-->
                                                <a href="{% url 'web:aprove_magazine_view' magazine_info.id %}" id="aproved_btn" class="btn-success active btn-sm" onclick="conformBox2()" style="text-decoration: none;font-size: 12px;font-weight: bold;top: 12px;+position: absolute;">Approve</a>
                                                </span> {% endcomment %}
                                            </td>
                                            {% endif %}
                                            {% endif %}
                                            {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                            <td style="vertical-align: middle;" >
                                                <!-- Pop Up Box for uploading File-->
                                                <button type="button" class="btn btn-sm btn-primary mb-1" data-toggle="modal" data-target="#exampleModal{{magazine_info.id}}" data-whatever="@mdo" style="text-decoration: none;font-size: 11px;font-weight: bold;width: 90px;">Upload Pages</button><!--<i class="fas fa-fw fa-upload text-primary" ></i>-->
                                                <div class="modal fade" id="exampleModal{{magazine_info.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">Upload Magazine Pages</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:UploadPDF' magazine_info.id %}" enctype="multipart/form-data"> 
                                                            {% csrf_token %}
                                                          <div class="form-group">
                                                            <input type="hidden" name="magaizneid" value="{{magazine_info.id}}" />
                                                            <label for="message-text" class="col-form-label float-left">Choose a File</label>
                                                            <input type="file" class="form-control" id="recipient-name filepdf" id="file" onchange='validate(this)' name="pages">
                                                            <div id='lbError' class='text-danger float-left mt-2'></div><br>
                                                            <input type="submit" class="btn btn-sm btn-primary float-right mt-3" value="Upload" id="submit1" disabled onsubmit='return validate()'>
                                                            <button type="button" class="btn btn-sm btn-secondary float-right mt-3 mr-1 mb-2" data-dismiss="modal">Close</button><br>
                                                        </div>
                                                        {% comment %} <hr class="mt-1"> {% endcomment %}
                                                        <span class="text-secondary">PDF size should be 10MB, you can use.</span>    
                                                        </form>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                               
                                                <span class="text-center" style="text-align: center;">
                                                    <a href="{% url 'web:edit_magazine_info_view' magazine_info.id %}" class="" role="button" aria-pressed="true"><i class="fas fa-fw fa-edit text-info" ></i></a>
                                                    <a href="{% url 'web:delete_magazine_info_view' magazine_info.id %}" id="action_btnn" class="" onclick="conformBox()" ><i class="fas fa-fw fa-trash text-danger" ></i></a>
                                                    
                                                <!-- End Pop Up Box-->
                                                </span>
                                            </td>
                                             {% endif %}
                                            
                                        </tr>
                                        {% endfor %}
                                        
                                      
                                    </tbody>
                                </table>
                                <div class="pagination float-right mt-3">
                                    <span class="step-links">
                                        {% if magazine_infos.has_previous %}
                                            <a href="?page=1">&laquo; first</a>
                                            <a href="?page={{ magazine_infos.previous_page_number }}">previous</a>
                                        {% endif %}
                                
                                        <span class="current">
                                            Page {{ magazine_infos.number }} of {{ magazine_infos.paginator.num_pages }}.
                                        </span>
                                
                                        {% if magazine_infos.has_next %}
                                            <a href="?page={{ magazine_infos.next_page_number }}">next</a>
                                            <a href="?page={{ magazine_infos.paginator.num_pages }}">last &raquo;</a>
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                            {% else %}
                            
                            {% endif %}
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->
                
                
            </div>
            <!-- End of Main Content -->
            <style>
                #but_css{
                    font-weight:bold;
                    font-size:12px;
                    background-color:grey;
                    padding: 3px;
                    width: 70%;
                    margin-top: -13px;
                    margin-left: 15px;
                    text-align:center;
                    color:white;
                }
                #but_css1{
                    font-weight:bold;
                    background-color:grey;
                    font-size:12px;
                    padding: 3px;
                    width: 70%;
                    text-align:center;
                    margin-left: 15px;
                    color:white;
                }
                .tableflow{
                    position:relative;
                    top:35px;
                    height: 70px;
                    vertical-align: center;
                }
                .imageflow{
                    height:120px;
                    width:20px;
                }
                #action_btn{
                    position: absolute;
                    top: 42px;
                }
                #aproved_btn{
                    {% comment %} position: absolute; {% endcomment %}
                    {% comment %} top: 49px; {% endcomment %}
                    {% comment %} left: 11px;
                    width: 104px; {% endcomment %}
                    {% comment %} text-align: center; {% endcomment %}
                }
                #aproved_btn1{
                    position: absolute;
                    left: 11px;
                    width: 104px;
                    text-align: center;
                }
                a.disabled-a{
                    pointer-events: none;
                    cursor: default;
                }
                a{
                    text-decoration:none;
                }
                {% comment %} .form-popup {
                    display: none;
                    position: fixed;
                    bottom: 0;
                    right: 15px;
                    border: 3px solid #f1f1f1;
                    z-index: 9;
                  } {% endcomment %}
            </style>
            {% include 'web/include_comman/footer.html' %}       
<script>
    function validate(el) {
        var maxfilesize = 10240 * 1024,  // 1 Mb
            filesize    = el.files[0].size,
            warningel   = document.getElementById( 'lbError' );
            console.log(maxfilesize)
            document.getElementById('submit1').disabled=true
        if ( filesize > maxfilesize )
        {
            
          warningel.innerHTML = "File too large: " + filesize + ". Maximum size: " + maxfilesize;
          var check1 = true
        console.log(check1,"condition")
        document.getElementById('submit1').disabled=true

        }
        else
        {
          warningel.innerHTML = '';
          document.getElementById('submit1').disabled=false
          
        }   
      }
</script>
{% comment %} <script>
    function openForm() {
      document.getElementById("myForm").style.display = "block";
    }
    
    function closeForm() {
      document.getElementById("myForm").style.display = "none";
    }
    </script>
     {% endcomment %}