{% extends 'base.html' %}
{% load static %}
{% load custom_tags %}

{% block title %}
<style>
#rso_table thead th,
#rso_table tbody td
{
    text-align: center;
}
</style>
<title>RSOs</title>
{% endblock %}

{% block sidebar_user %}
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
    <div class="image">
        <img src="{% static 'resources/img/user.png' %}" class="img-circle elevation-2" alt="User Image">
    </div>

    <div class="info">
        <a href="#" class="d-block">{{ request.user.first_name }} {{ request.user.last_name }}</a>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Regional Special Orders</h1>
            </div>
            <!-- <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard v1</li>
                </ol>
            </div> -->
        </div>
    </div>
</div>


<section class="content">
    <div class="container-fluid py-2">
        {% if request.user|user_group == "admin" %}
        <div class="col-md-12 mb-3">
            <a href="{% url 'new-rso' %}" class="btn btn-info"><i class="fa fa-plus"></i> Insert new RSO/SO</a>
        </div>
        {% endif %}

        <div class="col-md-12">
            <table class="table table-striped table-bordered" id="rso_table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>RSO/SO No.</th>
                        <th>Subject</th>
                        <th>Assigned Personnel</th>
                        <th>Scheduled Date(s)</th>
                        <th>Signatory</th>
                        <th>Remarks</th>
                        {% if request.user|user_group == "admin" %}
                        <th>Actions</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for rso in rsos %}
                    <tr>
                        <td>{{ rso.rso_date }}</td>
                        <td><a href="{{ rso.rso_scan_copy.url }}" target="__blank">{{ rso.rso_number }}</a></td>
                        <td>{{ rso.rso_subject }}</td>
                        <td>{{ rso | get_assigned_personnel }}</td>
                        <td>{{ rso.rso_scheduled_dates_from }} - {{ rso.rso_scheduled_dates_to }} </td>
                        <td>{{ rso.rso_signatory.last_name }}, {{ rso.rso_signatory.first_name }} {{ rso.rso_signatory.personnel.personnel_mi }}</td>
                        <td>{{ rso.rso_remarks | empty  }}</td>
                        {% if request.user|user_group == "admin" %}
                        <td>
                            <button class="btn btn-info btn-sm" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil-alt"></i></button>
                            <button class="btn btn-warning btn-sm" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></button>
                        </td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        var table = $('#rso_table').DataTable();


        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    })
</script>
{% endblock %}