{% extends 'base.html' %}
{% load i18n %}
{% block title %}
    {% trans "View Vendor" %}
{% endblock title %}
{% block customCSS %}{% endblock %}
{% 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-md-4 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-md-4 col-sm-auto mb-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 class="col-md-4 col-sm-auto mb-sm-2">
                        <div class="table-responsive overflow-auto" style="max-height:250px;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">{% trans "Make" %}</th>
                                        <th scope="col">{% trans "Total Cars Purchased" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for make in vendor_makes %}
                                        <tr>
                                            <td class="align-middle">{{ make.id_car_make__name }}</td>
                                            <td class="align-middle ">{{ make.make_count }}</td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="2" class="text-center text-muted">{% trans "There is no Purchase from this vendor yet" %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </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 %}