{% extends 'root/base.html' %}
{% load static %}

{% block title %} Majjaka eProcure - Purchaser Cockpit {% endblock %}
{% block maincontent %}

<div class="container-fluid">

    <div class="mep-form_wrapper">
        <div class="d-flex justify-content-between mb-3">
            <h3>Shopping Assist</h3>
        </div>

        <!--Search form goes here-->
        <div class="card card-shadow-1  mb-3">
            <div class="card-body">
                <form method="POST" action="{% url 'eProc_Doc_Search_and_Display:sc_completion_doc_search' %}">
                    {% csrf_token %}
    
                    <div class="row">
                        <div class="col-md">
                            <label>Shopping Cart Name: </label>
                            <input type="text" class="form-control check_for_search" name="description">
                        </div>
                        <div class="col-md">
                            <label>Shopping Cart Number:</label>
                            <input type="text" class="form-control check_number_search" name="doc_number" id="doc_number">
                        </div>
    
                        <div class="col-md">
                            <label>Created By:</label>
                            <input type="text" class="form-control check_for_search" name="changed_by">
                        </div>
    
                        <div class="col-md">
                            <label>Select Time Frame:</label>
                            <select name="created_at" class="multiple_select form-control" multiple data-selected-text-format="count" data-actions-box="true">
                                <option value="Today" selected>Today</option>
                                <option value="7">Last 7 days</option>
                                <option value="30">Last 30 days</option>
                                <option value="90">Last 90 days</option>
                            </select>
                        </div>
                    </div>
    
                    <br/>

                    <div class="elements-space-between">
                        <div>
                            <button class="btn btn-outline-primary" type="reset" value="Reset"><i class="fas fa-sync-alt"></i> &nbsp;reset</button>
                            <button class="btn btn-primary" type="submit" title="Please click to get the search details!" id="search_button_id"><i class="fas fa-search"></i> &nbsp;search </button>
                        </div>
                        <div>
                            <span class="badge help-text-badge help-text-star-search"></span>
                        </div>
                    </div>
    
                    
                </form>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-3 mb-3">
            {% if count > 0  %}
                <h6 class="text-muted">Total number of results found: {{ count }}</h6>
            {% else %}
                <h6 class="text-muted">No results found.</h6>
            {% endif %}
        </div>

<!--        {% if count > 0 %}-->
        <table class="table_sort_filter_pagination sc_completion_table">
            <thead>
                <tr>
                    <td>
                        <div class="row h6 text-muted p-2" >
                            <div class="col">Cart Name</div>
                            <div class="col">SC Number</div>
                            <div class="col">Total Value</div>
                            <div class="col">Created On</div>
                            <div class="col">Created By</div>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                {% for hdr,encrypted_guid in sc_header_details %}
                {{hdr.first_name}}
                <tr>
                    <td class="pb-2">
                        <div class="card sc_completion_card_list">
                            <div class="card-body">
                                <div class="row h6">
                                    <div class="col"><a href="{% url 'eProc_Doc_Details:doc_details' sc_completion_flag doc_type encrypted_guid 'display' 'sc_completion'  %}" target="_blank">{{ hdr.description }}</a></div>
                                    <div class="col"><a href="{% url 'eProc_Doc_Details:doc_details' sc_completion_flag doc_type encrypted_guid 'display' 'sc_completion'  %}" target="_blank">{{ hdr.doc_number }}</a></div>
                                    <div class="col">{{hdr.total_value}} {{ hdr.currency }}</div>
                                    <div class="col">{{hdr.created_at}}</div>
                                    <div class="col">{{hdr.created_by}}</div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
<!--        {% endif %}   -->
      
    </div>

    
</div>

<script src="{% static 'scripts/sc_completion_search.js' %}"></script>

{% endblock %}