{% set title, page_active, page_categorie = '', '', '' %}

{% extends 'base.html.twig' %}

{% block title %}Suivi frais étude{% endblock %}

{% block body%}

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Suivi global des frais d'étude</h1>
                </div><!-- /.col -->
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card-header">
                            <h3 class="card-title text-primary">Situation général</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-success elevation-1">0</span>
    
                                    <div class="info-box-content d-flex align-items-center">
                                        <span class="info-box-text">Payé(s)</span>
                                    </div>
                                <!-- /.info-box-content d-flex align-items-center -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-primary elevation-1">0</span>
    
                                    <div class="info-box-content d-flex align-items-center">
                                        <span class="info-box-text">Avance(s)</span>
                                    </div>
                                <!-- /.info-box-content d-flex align-items-center -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-secondary elevation-1">0</span>
    
                                    <div class="info-box-content d-flex align-items-center">
                                        <span class="info-box-text">Non payé(s)</span>
                                    </div>
                                <!-- /.info-box-content d-flex align-items-center -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-danger elevation-1">0</span>
    
                                    <div class="info-box-content d-flex align-items-center d-flex align-items-center">
                                        <span class="info-box-text">Retard(s)</span>
                                    </div>
                                <!-- /.info-box-content d-flex align-items-center -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs mt-2" id="custom-content-below-tab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-link active" id="custom-content-below-home-tab" data-toggle="pill" href="#custom-content-below-home" role="tab" aria-controls="custom-content-below-home" aria-selected="true">Technique</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="custom-content-below-profile-tab" data-toggle="pill" href="#custom-content-below-profile" role="tab" aria-controls="custom-content-below-profile" aria-selected="false">Général</a>
                        </li>
                    </ul>

                    <div class="tab-content" id="custom-tabs-two-tabContent">
                        <div class="tab-pane fade active show" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                            <!-- Main content -->
                            <div class="content pt-4">
                                <div class="card">    
                                    <!-- /.card-header -->
                                    <!-- form start -->
                                    <div class="card-body">
                                        <h3 class="card-title text-primary mb-2">Catégorie : Tertiaire</h3>
                                        <div class="table-responsive">
                                            <table class="table text-center table-sm">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" class="">N°</th>
                                                        <th scope="col" class="">Classe</th>
                                                        <th scope="col" class="">Nombre d'étudiant</th>
                                                        <th scope="col" class="text-success">Payé(s)</th>
                                                        <th scope="col" class="text-primary">Avance(s)</th>
                                                        <th scope="col" class="">Non payé(s)</th>
                                                        <th scope="col" class="text-danger">Retard(s)</th>
                                                        <th scope="col" class=""></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-bordered">
                                                    <tr>
                                                        <th>1</th>
                                                        <td>3ème année Téchnologie</td>
                                                        <td>0</td>
                                                        <td class="text-success">0</td>
                                                        <td class="text-primary">0</td>
                                                        <td>0</td>
                                                        <td class="text-danger">0</td>
                                                        <td><button class="btn btn-default btn-sm">voir</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                            
                                </div>
                                <div class="card">    
                                    <!-- /.card-header -->
                                    <!-- form start -->
                                    <div class="card-body">
                                        <h3 class="card-title text-primary mb-2">Catégorie : Géni civil</h3>
                                        <div class="table-responsive">
                                            <table class="table text-center table-sm">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" class="">N°</th>
                                                        <th scope="col" class="">Classe</th>
                                                        <th scope="col" class="">Nombre d'étudiant</th>
                                                        <th scope="col" class="text-success">Payé(s)</th>
                                                        <th scope="col" class="text-primary">Avance(s)</th>
                                                        <th scope="col" class="">Non payé(s)</th>
                                                        <th scope="col" class="text-danger">Retard(s)</th>
                                                        <th scope="col" class=""></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-bordered">
                                                    <tr>
                                                        <th>1</th>
                                                        <td>3ème année Téchnologie</td>
                                                        <td>0</td>
                                                        <td class="text-success">0</td>
                                                        <td class="text-primary">0</td>
                                                        <td>0</td>
                                                        <td class="text-danger">0</td>
                                                        <td><button class="btn btn-default btn-sm">voir</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                            
                                </div>
                            </div> 
                        </div>
                        <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                        
                            <div class="content pt-4"> 
                                <div class="card">    
                                    <!-- /.card-header -->
                                    <!-- form start -->
                                    <div class="card-body">
                                        <h3 class="card-title text-primary mb-2">Catégorie : Tertiaire</h3>
                                        <div class="table-responsive">
                                            <table class="table text-center table-sm">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" class="">N°</th>
                                                        <th scope="col" class="">Classe</th>
                                                        <th scope="col" class="">Nombre d'étudiant</th>
                                                        <th scope="col" class="text-success">Payé(s)</th>
                                                        <th scope="col" class="text-primary">Avance(s)</th>
                                                        <th scope="col" class="">Non payé(s)</th>
                                                        <th scope="col" class="text-danger">Retard(s)</th>
                                                        <th scope="col" class=""></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-bordered">
                                                    <tr>
                                                        <th>1</th>
                                                        <td>3ème année Téchnologie</td>
                                                        <td>0</td>
                                                        <td class="text-success">0</td>
                                                        <td class="text-primary">0</td>
                                                        <td>0</td>
                                                        <td class="text-danger">0</td>
                                                        <td><button class="btn btn-default btn-sm">voir</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                            
                                </div>     
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Header (Page header) -->

</div>

{% endblock %}