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

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='delivery'%}
        <!-- 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">
                    <div class="row">
                        <div class='col-lg-4'>
                            <form method="GET" method='POST' class="d-none d-sm-inline-block mb-3 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" class="form-control bg-light border-1 small" value="{{search}}" placeholder="Search for..."
                                        aria-label="Search" aria-describedby="basic-addon2">
        
                                    <div class="input-group-append mr-2">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                    <a href="{% url 'web:Delivery_View' %}" class="btn btn-info mr-2 btn-sm float-right" role="button">Refresh</a>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-2">
                        </div>
                        <div class="col-lg-6 float-right">
                            <form class="form-inline form-sm" >
                                <div class="form-group mb-2" method="GET">
                                  <input type="date" class="form-control input-sm" name="date_one" value="{{date_first}}" max="{{todays_date}}">
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                  <input type="date" class="form-control input-sm" name="date_two" value="{{date_second}}" max="{{todays_date}}">
                                </div>
                                <button type="submit" class="btn btn-info btn-sm mb-2">Search</button>
                              </form>
                            {% comment %} <a href="{% url 'web:export_users_csv' %}" class="btn btn-primary">Download Report</a> {% endcomment %}
                        </div>
                    </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">Delivery List</h6>
                                </div>
                                <div class="col-lg-6 float-right">
                                    {% comment %} <a href="{{request.META.HTTP_REFERER}}" class='btn btn-sm btn-info float-right' >Back</a> {% endcomment %}
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                {% if delivery_data %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr style="background-color:#EDEEF7;font-size: 13px;color: black;">
                                            <th>S.No.</th>
                                            <th>Magazine Name</th>
                                            <th>Users</th>
                                            <th>Location</th>
                                            <th>Order Date</th>
                                            <th>Price</th>
                                            <th>Image</th>
                                            <th>Comment</th>
                                            <th>Status</th>
                                            {% if request.user.is_authenticated %}
                                            {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                            <th>Action</th>
                                            {% endif %}
                                            {% endif %}
                                        </tr>
                                    </thead>
                                   
                                    <tbody >
                                        {% for dd in delivery_data %}
                                        <tr style="font-size: 14px;">
                                            <td style="vertical-align: middle;">{{forloop.counter}}</td>
                                            <td style="vertical-align: middle;">{{dd.magazineInfos.name}}</td>
                                            <td style="vertical-align: middle;">{{dd.users}}</td>
                                            <td style="vertical-align: middle;width:119px;">
                                                {% if dd.delivery_location %}
                                                <span title="{{dd.delivery_location}}" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">{{dd.delivery_location|slice:":5"}}...</span>

                                                  <!-- Modal -->
                                                  <div class="modal fade" id="exampleModal{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                      <div class="modal-content ">
                                                        <div class="modal-header bg-transparent">
                                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                          </button>
                                                        </div>
                                                        <div class="modal-body">
                                                         <h6>{{dd.delivery_location}}</h6>
                                                        </div>
                                                       
                                                      </div>
                                                    </div>
                                                  </div>
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </td>
                                            <td style="vertical-align: middle;width:119px;">
                                                {{dd.create_on}}
                                            </td>
                                            <td style="vertical-align: middle;">
                                                {% if dd.is_offered == 1 %}
                                                {{dd.offer_price|floatformat:2}}
                                                {% else %}
                                                {{dd.hard_copy_price|floatformat:2}}
                                                {% endif %}
                                            </td>
                                            <td style="vertical-align: middle;">{% if dd.image %}
                                                <img src="{{dd.image.url}}" style="width: 80px;height: 80px;" data-toggle="modal" data-target="#image-popup{{forloop.counter}}"/>
                                                <div class="modal fade bd-example-modal-lg" id="image-popup{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg">
                                                    <div class="modal-content bg-transparent text-dark" style="border:none;">
                                                        <div class="modal-header bg-transparent text-dark">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <img src="{{dd.image.url}}" style="width: 100%;height: 100%;"/ >
                                                    </div>
                                                    </div>
                                                </div>
                                                {% else %}
                                                No Image
                                                {% endif %}</td>
                                            <td style="vertical-align: middle;"> {% if dd.description %}
                                                {{dd.description}}
                                                {% else %}
                                                -
                                                {% endif %}</td>
                                            <td style="vertical-align: middle;">
                                                {% if dd.is_delivered == '1' %}
                                                <span class="text-success"><b>Delivered</b></span>
                                                {% elif dd.is_delivered == '0' %}
                                                <span class="text-secondary"><b>Rejected</b></span>
                                                {% elif dd.is_delivered == '2' %}
                                                <span class="text-info"><b>In-Progress</b></span>
                                                {% else %}
                                                <span class="text-warning"><b>Pending</b></span>
                                                {% endif %}
                                            </td>
                                            {% if request.user.is_authenticated %}
                                            {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                            <td style="vertical-align: middle;">
                                                {% if dd.is_delivered == '1' %}
                                                    <a href="javascript:void(0)" class="btn-sm btn-success btn-sm active px-1 py-1" style="text-decoration:none;pointer:none;cursor: default;" >Delivered</a>
                                                {% elif dd.is_delivered == '0' %}
                                                    <a href="javascript:void(0)" class="btn-sm btn-secondary btn-sm active px-1 py-1" style="text-decoration:none;pointer:none;cursor: default;" >Rejected</a>
                                                
                                                {% else %}
                                                <button type="button" class="btn btn-info btn-sm mt-2 py-0 px-3" data-toggle="modal" 
                                                    data-target="#exampleModalCenter{{forloop.counter}}"style="">
                                                    Action</button>

                                            <!--Pop Up For Approval Disapproval Form -->
                                                <div class="modal fade" id="exampleModalCenter{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header text-center bg-dark" style="color: white;height: 34px;padding-top: 4px;">
                                                        <h5 class="modal-title" id="exampleModalLongTitle" 
                                                        style="font-size: 15px;font-weight: bold;text-align: left;padding-left: 130px;">Delivery Request</h5>
                                                        </div>
                                                        <div class="modal-body float-left" style="background-color:#F4F4F4;overflow:scroll;">
                                                            <form method="POST" enctype="multipart/form-data">
                                                                {% csrf_token %}
                                                                <div class="form-group row">
                                                                    <div class="col-sm-6">
                                                                        <label style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                                                                        Magazine Name</label><br>
                                                                        <div style=
                                                                        "border: 1px solid #5a5c69;padding-left: 5px;width: 100%;border-radius: 4px;color:#5a5c69;">
                                                                        {{dd.magazineInfos.name}}</div>
                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <label 
                                                                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                                                                    User
                                                                        </label><br>
                                                                        <div style=
                                                                        "border: 1px solid #5a5c69;padding-left: 5px;width: 100%;border-radius: 4px;color:#5a5c69;">
                                                                        {{dd.users}}</div>
                                                                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                                                                    </div>
                                                                    <div class="col-sm-6 mt-3">
                                                                        <label 
                                                                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                                                                        Delivery Location
                                                                        </label><br>
                                                                        <div style=
                                                                        "border: 1px solid #5a5c69;padding-left: 5px;width: 100%;border-radius: 4px;color:#5a5c69;">
                                                                        {{dd.delivery_location}}</div>
                                                                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                                                                    </div>
                                                                    <div class="col-sm-6 mt-3">
                                                                        <label 
                                                                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                                                                        Price
                                                                        </label><br>
                                                                        <div style=
                                                                        "border: 1px solid #5a5c69;padding-left: 5px;width: 100%;border-radius: 4px;color:#5a5c69;">
                                                                        {% if dd.is_offered == 1 %}
                                                                        {{dd.offer_price}}
                                                                        {% else %}
                                                                        {{dd.hard_copy_price}}
                                                                        {% endif %}    
                                                                    </div>
                                                                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                                                                    </div>
                                                                    
                                                                    <input type='hidden' value="{{dd.id}}" name="request_id">
                                                                    <div class="col-sm-6 mt-3">
                                                                        <label for="status">Status</label><span class="text-danger"> *</span><br>
                                                                        <select name="status" id="status" required>
                                                                            <option value="">Choose</option>
                                                                            <option value="1">Delivered</option>
                                                                            <option value="2">Inprogress</option>
                                                                            <option value="0">Rejected</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-sm-6 mt-3">
                                                                        <label for="images">Image</label><span class="text-danger"> *</span><br>
                                                                        <input type="file" name="admin_image" accept="image/*" required>
                                                                    </div>
                                                                    <div class="col-sm-12 mt-3">
                                                                        <label for="cars">Comment</label><span class="text-danger"> *</span><br>
                                                                        <textarea id="txt" name="comment" rows="4" cols="50" placeholder="Write something." maxlength="250" required></textarea>
                                                                    </div>
                                                                    <span class="float-right text-primary">(250 Charecters Only)</span>
                                                                </div>   
                                                        </div>
                                                                <div class="modal-footer text-center" style="background-color: #F4F4F4;height: 47px">
                                                                <button type="button" class="btn btn-sm btn-light  border-dark border-2 text-dark" data-dismiss="modal" 
                                                                style="font-weight: bold;width: 128px;padding: 1px;left: 105px;position: absolute;">Cancel</button>
                                                                <input type="submit" class="btn btn-sm btn-dark"
                                                                style="font-weight: bold;width: 128px;padding: 1px;left: 255px;position: absolute;" value="Submit">
                                                                </div>
                                                    </div>
                                                            </form>
                                                    </div>
                                                </div>
                                                <!-- End Pop Up -->
                                            
                                            {% endif %}  
                                            </td>
                                            {% endif %}
                                            {% endif %}
                                        </tr>
                                        {% endfor %}
                                        
                                        {% comment %} {% url 'web:add_subscription_view' subscription.id %} {% endcomment %}
                                    </tbody>
                                </table>
                                <div class="pagination float-right">
                                    <span class="step-links">
                                        {% if delivery_data.has_previous %}
                                            <a href="?page=1&search={{search}}&date_one={{date_first}}&date_two={{date_second}}">&laquo; first</a>
                                            <a href="?page={{ delivery_data.previous_page_number }}&search={{search}}&date_one={{date_first}}&date_two={{date_second}}">previous</a>
                                        {% endif %}
                                
                                        <span class="current">
                                            Page {{ delivery_data.number }} of {{ delivery_data.paginator.num_pages }}.
                                        </span>
                                
                                        {% if delivery_data.has_next %}
                                        {% comment %} <input type="text" name="search" class="form-control bg-light border-1 small" value="{{search}}"> {% endcomment %}
                                            <a href="?page={{ delivery_data.next_page_number }}&search={{search}}&date_one={{date_first}}&date_two={{date_second}}" type="submit">next</a>
                                            <a href="?page={{ delivery_data.paginator.num_pages }}&search={{search}}&date_one={{date_first}}&date_two={{date_second}}">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>
            <!-- End of Main Content -->
            <style>
                #but_id1{
                    font-size:12px;
                    font-weight:bold;
                }
                #but_id2{
                    font-size:13px;
                    font-weight:bold;
                    
                }
                #active_id{
                    color:green;
                    border:none;
                    font-weight:bold;
                }
                #inactive_id{
                    color:grey;
                    border:none;
                    font-weight:bold;
                }
                a{
                    margin: 3px;
                }
            </style>


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

            <script>
                function conformBoxemail(){
                   
                    if (!confirm("Are you sure? you want to delevered this magazine.")){
                        event.preventDefault();
                        return false;
            
                    }
                   
                }
            </script>




        {% comment %} ///////////////////////////////// {% endcomment %}