{% extends "base.html" %}
{% load static %}
{% load custom_filters %}
{% block accueil %}
{% include "header.html" %}
{% include "leftbar.html" %}
{% include "rightbar.html" %}
{% include "chat.html" %}
<section class="content home">
    <div class="block-header">
        <div class="row">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2>Tableau de bord
                <small class="text-muted">Bienvenue sur K-Prest :: CEGESS</small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">                
                          
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="card widget_2 p-3">
            <div class="row clearfix">
                <div class="col-lg-3 col-md-6">
                    <div class="card l-blue">
                        <div class="body">
                            <h4 class="m-t-0 m-b-0">{{consultants.count}}</h4>
                            <p class="m-b-0">Nombre de consultants</p>
                        </div>
                        <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                        data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                        data-offset="90" data-width="100%" data-height="40px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                        data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card l-parpl">
                        <div class="body">
                            <h4 class="m-t-0 m-b-0">{{clients.count}}</h4>
                            <p class="m-b-0 ">Nombre de clients</p>
                        </div>
                        <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                        data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                        data-offset="90" data-width="100%" data-height="42px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                        data-fill-Color="rgba(255, 255, 255, 0.3)"> 6,5,7,4,5,3,8,6,5 </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card l-seagreen">
                        <div class="body">
                            <h5 class="m-t-0 m-b-0">{{total_creances | format_number }} FCFA</h5>
                            <p class="m-b-0 ">Montant créance consultants</p>
                        </div>
                        <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                        data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                        data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                        data-fill-Color="rgba(255, 255, 255, 0.3)"> 8,7,7,5,5,4,8,7,5 </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card l-pink">
                        <div class="body">
                            <h5 class="m-t-0 m-b-0">{{solde | format_number}} FCFA</h5>
                            <p class="m-b-0">Solde Caisse Dépense</p>
                        </div>
                        <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                        data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                        data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                        data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="card project_list">
                    <div class="header">
                        <h2><strong>Factures</strong> Consultants</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>                                       
                                        <th>Code facture</th>
                                        <th>Nom du consultant</th>                                        
                                        <th>Téléphone</th>
                                        <th>Montant</th>
                                        <th>Statut</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for facture_consultant in facture_consultants %}
                                    <tr>
                                        <td>
                                            {{facture_consultant.code_facture}}
                                        </td>
                                        <td>
                                            {{facture_consultant.consultant.nom}}
                                        </td>
                                        <td>
                                            {{facture_consultant.consultant.telephone_mobile}}
                                        </td>                                        
                                        <td>
                                            {{facture_consultant.net_a_payer}}
                                        </td>
                                        <td>
                                            {% if facture_consultant.statut == "Payé" %}
                                            <button class="btn btn-sm btn-success">{{ facture_consultant.statut }}</button>
                                            {% elif facture_consultant.statut == "Partiel" %}
                                            <button class="btn btn-sm btn-info">{{ facture_consultant.statut }}</button>
                                            {% elif facture_consultant.statut == "Impayé" %}
                                            <button class="btn btn-sm btn-danger">{{ facture_consultant.statut }}</button>
                                            {% endif %}
                                        </td>
                                        <td style="text-align: center">
                                            <a href="{% url "details_facture_consultant" facture_consultant.id %}" class="btn btn-secondary btn-sm" title="Détails">
                                                <i class="zmdi zmdi-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="card project_list">
                    <div class="header">
                        <h2><strong>Factures</strong> Clients</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>                                       
                                        <th>Code facture</th>
                                        <th>Nom du client</th>                                        
                                        <th>Téléphone</th>
                                        <th>Montant</th>
                                        <th>Statut</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for facture in factures %}
                                    <tr>
                                        <td>
                                            {{facture.code_facture}}
                                        </td>
                                        <td>
                                            {{facture.client.nom}}
                                        </td>
                                        <td>
                                            {{facture.client.telephone_mobile}}
                                        </td>                                        
                                        <td>
                                            {{facture.net_a_payer}}
                                        </td>
                                        <td>
                                            {% if facture.statut == "Payé" %}
                                            <button class="btn btn-sm btn-success">{{ facture.statut }}</button>
                                            {% elif facture.statut == "Partiel" %}
                                            <button class="btn btn-sm btn-info">{{ facture.statut }}</button>
                                            {% elif facture.statut == "Impayé" %}
                                            <button class="btn btn-sm btn-danger">{{ facture.statut }}</button>
                                            {% endif %}
                                        </td>
                                        <td style="text-align: center">
                                            <a href="{% url "details_facture" facture.id %}" class="btn btn-secondary btn-sm" title="Détails">
                                                <i class="zmdi zmdi-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock  %}