{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
<div class="row">
    <!-- Start col -->
    <div class="col-md-4">
        <div class="card m-b-30">
            <div class="card-body text-center">
                <div class="user-slider">
                    <div class="user-slider-item">
                        <img alt="avatar" class="rounded-circle mt-3 mb-4"
                             src="{{ business.logo_url|default_if_none:'https://mfuko.net/wp-content/uploads/2019/06/MFUUKO-logo-01-300x212.fw_-300x212.png' }}"
                             width="100">
                        <h5>{{ business }}</h5>
                        <p>{{ business.short_name }}</p>
                        <p>{{ business.address }}</p>
                        <p>{{ business.email }}</p>
                    </div>
                </div>
            </div>
            <div class="card-footer text-center">
                <div class="row">
                    <div class="col-6 border-right">
                        <p class="my-2">Active staffs: {{ staffs.count }}</p>
                    </div>
                    <div class="col-6">
                        <p class="my-2">Active users: {{ users.count }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End col -->
    <!-- Start col -->
    <div class="col-md-8">
        <div class="card m-b-30">
            <div class="card-body">
                <!-- Start row -->
                <div class="row">
                    <!-- Start col -->
                    <div class="col-md-12 col-lg-12 col-xl-12">
                        <div class="card m-b-30">
                            <div class="card-body">
                                <ul class="nav nav-tabs custom-tab-line mb-3" id="defaultTabLine" role="tablist">
                                    <li class="nav-item">
                                        <a aria-controls="profile-tab" aria-selected="true" class="nav-link active text-uppercase"
                                           data-bs-toggle="tab" href="#profile-tab" id="home-tab-line"
                                           role="tab"><i class="feather icon-home mr-2"></i>Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="branches-tab" aria-selected="false" class="nav-link text-uppercase" data-bs-toggle="tab"
                                           href="#branches-tab" id="profile-tab-line" role="tab"><i
                                                class="fa fa-sitemap mr-2"></i>Branches ({{ branches.count}})</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="contact-line" aria-selected="false" class="nav-link text-uppercase" data-bs-toggle="tab"
                                           href="#contact-line" id="contact-tab-line" role="tab"><i
                                                class="feather icon-phone mr-2"></i>Contacts ({{ contacts.count }})</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="defaultTabContentLine">
                                    <div aria-labelledby="home-tab-line" class="tab-pane fade show active" id="profile-tab"
                                         role="tabpanel">
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-borderless">
                                                    <tbody>
                                                    <tr> <td><strong class="text-capitalize">Name:</strong></td><td>{{ business }} - ({{ business.short_name }})</td></tr>
                                                    <tr> <td><strong class="text-capitalize">short name:</strong></td><td>{{ business.short_name }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">address:</strong></td><td>{{ business.address }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">contact:</strong></td><td>{{ business.contact }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">email:</strong></td><td>{{ business.email }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">Active clients:</strong></td><td>{{ clients.count }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">Active groups:</strong></td><td>{{ groups.count }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">Active branches:</strong></td><td>{{ branches.count }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">certificate:</strong></td><td>{{ business.certificate }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">certificate No:</strong></td><td>{{ business.certificate_no }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">launch date:</strong></td><td>{{ business.launch_date }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">website:</strong></td><td>{{ business.website }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">type:</strong></td><td>{{ business.type }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">status:</strong></td><td>{{ business.status }}</td></tr>
                                                    <tr> <td><strong class="text-capitalize">package:</strong></td><td>{{ business.package }} - ({{ business.package.limit }} clients )</td></tr>
                                                    <tr> <td><strong class="text-capitalize">date Joined:</strong></td><td>{{ business.date_created }}</td></tr>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div aria-labelledby="profile-tab-line" class="tab-pane fade" id="branches-tab"
                                         role="tabpanel">
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-borderless">
                                                    <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Address</th>
                                                        <th>Contact</th>
                                                        <th>Date Created</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for branch in branches%}
                                                    <tr>
                                                        <td>{{ branch.name }}</td>
                                                        <td>{{ branch.address }}</td>
                                                        <td>{{ branch.contact }}</td>
                                                        <td>{{ branch.date_created }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div aria-labelledby="contact-tab-line" class="tab-pane fade" id="contact-line"
                                         role="tabpanel">
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-borderless">
                                                    <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Address</th>
                                                        <th>Contact</th>
                                                        <th>Email</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for contact in contacts%}
                                                    <tr>
                                                        <td>{{ contact.biodata.name }}</td>
                                                        <td>{{ contact.biodata.location }}</td>
                                                        <td>{{ contact.biodata.contact }}</td>
                                                        <td>{{ contact.biodata.email }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End col -->
                </div>
                <!-- End row -->
            </div>
        </div>
    </div>
    <!-- End col -->
</div>

{% endblock %}