{% extends "partials/dashboard-base.html" %}
{% load static %}
{% load humanize %}
{% block content %}
    <!-- Dashboard Section start -->
    <section class="dashboard-section body-collapse">
        <div class="overlay pt-120">
            <div class="container-fruid">
                <div class="row">
                    <div class="col-xl-12 col-lg-12">
                        <div class="section-content">
                            
                            <div class="transactions-area">
                                <div class="section-text">
                                    <h5>Transactions</h5>
                                    <p>Updated every several minutes</p>
                                </div>
                                <div class="top-area d-flex align-items-center justify-content-between">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="latest-tab" data-bs-toggle="tab" data-bs-target="#latest" type="button" role="tab" aria-controls="latest" aria-selected="true">Sent</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="upcoming-tab" data-bs-toggle="tab" data-bs-target="#upcoming" type="button" role="tab" aria-controls="upcoming" aria-selected="false">Received</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="sender-request-tab" data-bs-toggle="tab" data-bs-target="#sender-request" type="button" role="tab" aria-controls="upcoming" aria-selected="false">Sent Requests</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="reciever-request-tab" data-bs-toggle="tab" data-bs-target="#reciever-request" type="button" role="tab" aria-controls="upcoming" aria-selected="false">Received Requests</button>
                                        </li>
                                    </ul>
                                    <div class="view-all d-flex align-items-center">
                                        <a href="javascript:void(0)">View All</a>
                                        <img src="{% static 'assets1/images/icon/right-arrow.png' %}" alt="icon">
                                    </div>
                                </div>
                                <div class="tab-content mt-40">
                                    <div class="tab-pane fade show active" id="latest" role="tabpanel" aria-labelledby="latest-tab">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Name/ Business</th>
                                                        <th scope="col">Date</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Amount</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    
                                                    {% for s in sender_transaction %}
                                                        <tr data-bs-toggle="modal" data-bs-target="#transactionsMod">
                                                            <th scope="row">
                                                                <p>{{s.reciever.kyc.full_name|title}}</p>
                                                                <p class="mdr">{{s.transaction_type|title}}</p>
                                                            </th>
                                                            <td>
                                                                <p><small>{{s.date|date:"h:i"}}</small></p>
                                                                <p class="mdr">{{s.date|date:"d M, Y"}}</p>
                                                            </td>
                                                            <td>
                                                                {% if s.status == 'completed' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'pending' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'failed' %}
                                                                    <p class="danger">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <p>-${{s.amount|intcomma}}</p>
                                                            </td>
                                                            <td>
                                                                <a href="{% url 'core:transaction-detail' s.transaction_id %}" class=""><i class="fas fa-eye"></i></a>

                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Name/ Business</th>
                                                        <th scope="col">Date</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Amount</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    
                                                    {% for s in reciever_transaction %}
                                                        <tr data-bs-toggle="modal" data-bs-target="#transactionsMod">
                                                            <th scope="row">
                                                                <p>{{s.sender.kyc.full_name|title}}</p>
                                                                <p class="mdr">{{s.transaction_type|title}}</p>
                                                            </th>
                                                            <td>
                                                                <p><small>{{s.date|date:"h:i"}}</small></p>
                                                                <p class="mdr">{{s.date|date:"d M, Y"}}</p>
                                                            </td>
                                                            <td>
                                                                {% if s.status == 'completed' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'pending' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'failed' %}
                                                                    <p class="danger">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <p>+${{s.amount|intcomma}}</p>
                                                            </td>
                                                            <td>
                                                                <a href="{% url 'core:transaction-detail' s.transaction_id %}" class=""><i class="fas fa-eye"></i></a>
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="sender-request" role="tabpanel" aria-labelledby="sender-request-tab">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Name/ Business</th>
                                                        <th scope="col">Date</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Amount</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    
                                                    {% for s in request_sender_transaction %}
                                                        <tr data-bs-toggle="modal" data-bs-target="#transactionsMod">
                                                            <th scope="row">
                                                                <p>{{s.reciever.kyc.full_name|title}}</p>
                                                                <p class="mdr">{{s.transaction_type|title}}</p>
                                                            </th>
                                                            <td>
                                                                <p><small>{{s.date|date:"h:i"}}</small></p>
                                                                <p class="mdr">{{s.date|date:"d M, Y"}}</p>
                                                            </td>
                                                            <td>
                                                                {% if s.status == 'completed' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'pending' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'failed' %}
                                                                    <p class="danger">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_sent' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_settled' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <p>+${{s.amount|intcomma}}</p>
                                                            </td>
                                                            <td>
                                                                {% if s.status == "request_sent" %}
                                                                <a href="{% url 'core:transaction-detail' s.transaction_id %}" class="btn btn-primary"><i class="fas fa-eye"></i> View</a>
                                                                <a href="{% url 'core:delete-request' s.sender.account.account_number s.transaction_id %}" class=" btn btn-danger"> <i class="fas fa-x"></i> Delete</a>
                                                                {% endif %}

                                                                {% if s.status == "request_processing" %}
                                                                <a href="{% url 'core:transaction-detail' s.transaction_id %}" class="btn btn-primary"><i class="fas fa-eye"></i> View</a>
                                                                <a href="{% url 'core:delete-request' s.sender.account.account_number s.transaction_id %}" class=" btn btn-danger"> <i class="fas fa-x"></i> Delete</a>
                                                                {% endif %}

                                                                {% if s.status == "request_settled" %}
                                                                <a class="btn btn-success"><i class="fas fa-check-circle"></i> Settled</a>
                                                                {% endif %}

                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="reciever-request" role="tabpanel" aria-labelledby="reciever-request-tab">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Name/ Business</th>
                                                        <th scope="col">Date</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Amount</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    
                                                    {% for s in request_reciever_transaction %}
                                                        <tr data-bs-toggle="modal" data-bs-target="#transactionsMod">
                                                            <th scope="row">
                                                                <p>{{s.sender.kyc.full_name|title}}</p>
                                                                <p class="mdr">{{s.transaction_type|title}}</p>
                                                            </th>
                                                            <td>
                                                                <p><small>{{s.date|date:"h:i"}}</small></p>
                                                                <p class="mdr">{{s.date|date:"d M, Y"}}</p>
                                                            </td>
                                                            <td>
                                                                {% if s.status == 'completed' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'pending' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'failed' %}
                                                                    <p class="danger">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_sent' %}
                                                                <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_settled' %}
                                                                    <p class="text-success">{{s.status|title}}</p>
                                                                {% endif %}
                                                                {% if s.status == 'request_processing' %}
                                                                    <p class="inprogress">{{s.status|title}}</p>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <p>+${{s.amount|intcomma}}</p>
                                                            </td>
                                                            <td>
                                                                
                                                                {% if s.status == "request_sent" %}
                                                                    <a href="{% url 'core:settlement-confirmation' s.sender.account.account_number s.transaction_id %}" class="btn btn-primary"><i class="fas fa-check-circle"></i> Settle</a>
                                                                    <a href="{% url 'core:transaction-detail' s.transaction_id %}" class=" btn btn-danger"> <i class="fas fa-x"></i> Cancel</a>
                                                                {% endif %}

                                                                {% if s.status == "request_settled" %}
                                                                    <a href="" class="btn btn-success"><i class="fas fa-check-circle"></i> Settled</a>
                                                                {% endif %}
                                                                    
                                                            </td>
                                                        </tr>
                                                    {% empty %}
                                                    <li>No Received Requests</li>
                                                    {% endfor %}
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
    {% endblock content %}