{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Order Management</title>

    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- Styles -->
    <link href="{% static 'css/lib/calendar2/pignose.calendar.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/chartist/chartist.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/themify-icons.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/owl.carousel.min.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/owl.theme.default.min.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/weather-icons.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/menubar/sidebar.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/helper.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>

<body>

    {% include "sidebar/sidebar.html" %}  
    <!-- /# sidebar -->


    <div class="header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="float-left">
                        <div class="hamburger sidebar-toggle">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                        </div>
                    </div>
                    <div class="float-right">
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-bell"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">Recent Notifications</span>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">5 members joined today </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mariam</div>
                                                        <div class="notification-text">likes a photo of you</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Tasnim</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-email"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">2 New Messages</span>
                                        <a href="email.html">
                                            <i class="ti-pencil-alt pull-right"></i>
                                        </a>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/1.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <span class="user-avatar">John
                                    <i class="ti-angle-down f-s-10"></i>
                                </span>
                                <div class="drop-down dropdown-profile dropdown-menu dropdown-menu-right">
                                   <!--  <div class="dropdown-content-heading">
                                        <span class="text-left">Upgrade Now</span>
                                    </div> -->
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-user"></i>
                                                    <span>Profile</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-email"></i>
                                                    <span>Inbox</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-settings"></i>
                                                    <span>Setting</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-lock"></i>
                                                    <span>Lock Screen</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-power-off"></i>
                                                    <span>Logout</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-r-0 title-margin-right">
                        <div class="page-header">
                            <div class="page-title">
                                {% if messages %}
                                    <div>
                                        {% for message in messages %}
                                            <p style="color: red;" {% if message.tags %} class="{{ message.tags }}"{% endif %}>
                                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}Important: {% endif %}
                                            {{ message }}
                                            </p>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                    <div class="col-lg-4 p-l-0 title-margin-left">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                                    <li class="breadcrumb-item active">Order Management</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->
                <div id="main-content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">

                                <!--Table-->
                                    <table class="table table-striped w-auto">

                                      <!--Table head-->
                                      <thead>
                                        <tr>
                                          <th>Order No.</th>
                                          <th>Hospital</th>
                                          <th>Medicine Details</th>
                                          <th>Mobile</th>
                                          <th>Qty</th>
                                          <th>Priority</th>
                                          <th>Order Date</th>
                                          <th>Doc Status</th>
                                          <th>RMSD Status</th>
                                          <th>CMSD Status</th>
                                          <th>Status</th>
                                          <th>Action</th>
                                        </tr>
                                      </thead>
                                      <!--Table head-->

                                      <!--Table body-->
                                      <tbody>

                                        {% if all_data %}
                                            {% for data in all_data %}
                                            <tr class="table-info">
                                                <th scope="row"> {{data.id}} </th>
                                                <td> {{data.med_hospital_name}} </td>
                                                <td> {{data.mobile}} </td>
                                                <td> {{data.medicine}} </td>
                                                <td> {{data.qty}} </td>
                                                <td> {{data.priority}} </td>
                                                <td> {{data.date}} </td>

                                                {% if data.doc_status == 2 %}
                                                <td style="color: rgb(46, 126, 14);">Approved</td>
                                                {% elif data.doc_status == 1 %}
                                                    <td style="color: rgb(174, 131, 50);">Not Approved</td>
                                                {% elif data.doc_status == 3 %}
                                                <td style="color: rgb(165, 155, 42);">Hold</td>          
                                                {% else %}
                                                    <td style="color: rgb(176, 74, 73);">Reject</td>
                                                {% endif %}

                                                {% if data.rmsd_status == 2 %}
                                                <td style="color: rgb(46, 126, 14);">Approved</td>
                                                {% elif data.rmsd_status == 1 %}
                                                    <td style="color: rgb(174, 131, 50);">Not Approved</td>
                                                {% elif data.rmsd_status == 3 %}
                                                <td style="color: rgb(165, 155, 42);">Hold</td>          
                                                {% else %}
                                                    <td style="color: rgb(176, 74, 73);">Reject</td>
                                                {% endif %}

                                                {% if data.cmsd_status == 2 %}
                                                <td style="color: rgb(46, 126, 14);">Approved</td>
                                                {% elif data.cmsd_status == 1 %}
                                                    <td style="color: rgb(174, 131, 50);">Not Approved</td>
                                                {% elif data.cmsd_status == 3 %}
                                                <td style="color: rgb(165, 155, 42);">Hold</td>          
                                                {% else %}
                                                    <td style="color: rgb(176, 74, 73);">Reject</td>
                                                {% endif %}

                                                {% if data.doc_status == 2 and data.rmsd_status == 2 and data.cmsd_status == 2%}
                                                    <td style="color: rgb(46, 126, 14);">Approved</td>
                                                {% else %}    
                                                <td style="color: rgb(176, 74, 73);">Pending</td>
                                                {% endif %}

                                                <td><a href="#" onclick="viewOrder('{{data.id}}')"><i class="ti-eye"></i></a></td>
                                            </tr>    
                                            {% endfor %}
                                        {% else %}
                                        There are no records in the system
                                        {% endif %} 

                                      </tbody>
                                      <!--Table body-->


                                    </table>
                                    <!--Table-->

                                
                            </div>
                            <!-- /# card -->
                        </div>
                        <!-- /# column -->
                    </div>
                    <!-- /# row -->

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="footer">
                                <p>2022 © Admin. - <a href="#">projectX.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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">
        <form action="med_order_manage_db" method="POST">
            {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Order Management</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="row">

            <div class="col-6">
                <div class="form-group">
                    <label>User</label>
                    <input type="text" name="login_user" class="form-control" value="{{ request.session.u_role }}" placeholder="login_user">
                </div>
            </div>

            <div class="col-6">
                <div class="form-group">
                    <label>Select One</label>
                    <select name="order_type" class="form-control" aria-label="Default select example">
                      <option value="2" selected>Approve</option>
                      <option value="4">Reject</option>
                      <option value="3">Hold</option>
                    </select>
                </div>
            </div>

        </div>

        <!-- <button type="button" class="btn btn-primary" style="width: 160px;">Approve</button> <br><br>
        <button type="button" class="btn btn-danger" style="width: 160px;">Reject</button> <br><br>
        <button type="button" class="btn btn-success" style="width: 160px;">Hold</button> <br><br> -->

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
      <input type="hidden" name="order_id" id="order_id" class="form-control" >
      </form>
    </div>
  </div>
</div>
<!-- Modal End -->





    
    <!-- jquery vendor -->
    <script src="{% static 'js/lib/jquery.min.js' %}"></script>
    <script src="{% static 'js/lib/jquery.nanoscroller.min.js' %}"></script>
    <!-- nano scroller -->
    <script src="{% static 'js/lib/menubar/sidebar.js' %}"></script>
    <script src="{% static 'js/lib/preloader/pace.min.js' %}"></script>
    <!-- sidebar -->

    <script src="{% static 'js/lib/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
    <!-- bootstrap -->

    <script src="{% static 'js/lib/calendar-2/moment.latest.min.js' %}"></script>
    <script src="{% static 'js/lib/calendar-2/pignose.calendar.min.js' %}"></script>
    <script src="{% static 'js/lib/calendar-2/pignose.init.js' %}"></script>


    <script src="{% static 'js/lib/weather/jquery.simpleWeather.min.js' %}"></script>
    <script src="{% static 'js/lib/weather/weather-init.js' %}"></script>
    <script src="{% static 'js/lib/circle-progress/circle-progress.min.js' %}"></script>
    <script src="{% static 'js/lib/circle-progress/circle-progress-init.js' %}"></script>
    <script src="{% static 'js/lib/chartist/chartist.min.js' %}"></script>
    <script src="{% static 'js/lib/sparklinechart/jquery.sparkline.min.js' %}"></script>
    <script src="{% static 'js/lib/sparklinechart/sparkline.init.js' %}"></script>
    <script src="{% static 'js/lib/owl-carousel/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/lib/owl-carousel/owl.carousel-init.js' %}"></script>
    <!-- scripit init-->
    <script src="{% static 'js/dashboard2.js' %}"></script>

    <script>
        function viewOrder(val){
            console.log(val)
            $('#order_id').val(val);
            $('#exampleModal').modal('show');
            
        }
    </script>

</body>

</html>