{% extends 'base.html' %}
{% load i18n %}
{% block title %}
    {% trans "View Vendor" %}
{% endblock title %}
{% block content %}
    <!-- Vendor Details -->
    <div class="row mt-4">
        <div class="card shadow rounded">
            <p class="card-header mb-0 fs-5">{% trans "Vendor Details" %}</p>
            <div class="card-body">
                <div class="row justify-content-start">
                <div class="col-6 col-sm-auto mb-sm-2">
                                <div class="avatar avatar-5xl">
                                                {% if vendor.logo%}<img class="rounded-circle" src="{{ vendor.logo.url }}" alt="" />{% endif %}
                                </div>
                        <div class="card-footer d-flex">
                        {% if perms.django_ledger.change_vendormodel %}
                            <a class="btn btn-sm btn-phoenix-primary me-3"
                            href="{% url 'vendor_update' request.dealer.slug vendor.slug %}">
                             <i class="fa fa-pencil me-1"></i>
                                {% trans "Edit" %}
                               
                            </a>
                        {% endif %}
                        {% if perms.django_ledger.delete_vendormodel %}
                            <button class="btn btn-phoenix-danger btn-sm delete-btn"
                                    data-url="{% url 'vendor_delete' request.dealer.slug vendor.slug %}"
                                    data-message="{{ _("Are you sure you want to delete this vendor") }}?"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal">
                                    <i class="fas fa-trash me-1"></i>
                                {{ _("Delete") }}
                                
                            </button>
                        {% endif %}
                        </div>
                </div>
                
                <div class="col-6 col-sm-auto mb-sm-2">        
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                                          <strong>{% trans "Name" %}:</strong> {{ vendor.get_local_name }} </li>
                    <li class="list-group-item">
                        <strong>{% trans "Contact Person" %}:</strong> {{ vendor.contact_person }}
                    </li>
                    <li class="list-group-item">
                        <strong>{% trans "Phone Number" %}:</strong> {{ vendor.phone_number }}
                    </li>
                    <li class="list-group-item">
                        <strong>{% trans "Email" %}:</strong> {{ vendor.email }}
                    </li>
                    <li class="list-group-item">
                        <strong>{% trans "Address" %}:</strong> {{ vendor.address }}
                    </li>
                </ul>
                </div>
            </div>
            </div>
            
        </div>
         <div class="table-responsive px-1 scrollbar mt-3">
                <table class= "table align-items-center table-flush table-hover">
                    <thead>
                        <tr class="bg-body-highlight">
                            <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Bill") |capfirst }}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Bill Status") |capfirst }}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Bill Amount Paid") |capfirst }}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Bill Amount Due") |capfirst }}</th>       
                           
                        </tr>
                    </thead>
                    <tbody class="list">
                   
                           {% for bill in vendor_bills%}
                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                
                                    <td class="align-middle product white-space-nowrap ps-1">
                                        <a class="text-body-highlight" href="{% url 'bill-detail' request.dealer.slug request.dealer.entity.slug bill.pk%}">{{ bill.bill_number }}</a>
                                    </td>
                                    
                                    <td class="align-middle product white-space-nowrap">{{ bill.bill_status }}</td> 
                                    <td class="align-middle product white-space-nowrap">{{ bill.amount_paid}}</td>
                                    <td class="align-middle product white-space-nowrap">{{ bill.amount_due}}</td>
                                   
                                </tr>
                            {% empty %}
                            <tr>
                                    <td colspan="6" class="text-center text-muted">{% trans "No Bills Found For the Vendor: {vendor.get_local_name}" %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
            </div>
             <div class="d-flex justify-content-end mt-3">
                    <div class="d-flex">
                        {% if is_paginated %}
                            {% include 'partials/pagination.html' %}
                        {% endif %}
                    </div>
             </div>
    </div>

    {% include 'modal/delete_modal.html' %}
{% endblock %}