{% set title, page_active, page_categorie = 'Frais d\'étude situation par moi', '', '' %}

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

{% block title %}Hello AppController!{% 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-12">
                        <h1 class="m-0 text-dark">Frais d'études |<span class="h5"> Bobo</span></h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-primary">Bobo</h3>
                        <p class="mb-0">3ème Année Commerce</p>
                        <p class="mb-0">LPJ000012</p>
                    </div>
                </div>

                <div class="p-0">
                    <ul class="nav nav-pills mr-auto p-2">
                        <li class="nav-item"><a class="nav-link" href="#tab_1" data-toggle="tab">Situation par mois</a></li>
                        <li class="nav-item"><a class="nav-link active" href="#tab_2" data-toggle="tab">Liste des paiements</a></li>
                    </ul>
                </div><!-- /.card-header -->
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane" id="tab_1">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3 col-sm-6 col-12">
                                            <div class="info-box bg-success mb-0">
                                            <span class="info-box-icon" type="button" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-check"></i></span>
    
                                            <div class="info-box-content">
                                                <span class="info-box-text" >Novembre</span>
                                                <div class="progress">
                                                <div class="progress-bar" style="width: 100%"></div>
                                                </div>
                                            </div>
                                            <!-- /.info-box-content -->
                                            </div>
                                            <!-- /.info-box -->
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-12">
                                            <div class="info-box bg-danger mb-0">
                                                <span class="info-box-icon" type="button" data-toggle="modal" data-target="#exampleModal">AV</span>
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-xl">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body text-dark">
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-sm text-default">
                                                                        <thead>
                                                                            <tr>
                                                                            <th scope="col">Date</th>
                                                                            <th scope="col">N° Piece</th>
                                                                            <th scope="col">Description</th>
                                                                            <th scope="col">Montant</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr>
                                                                            <th>10-08-2020</th>
                                                                            <td>2</td>
                                                                            <td>FE: (Avance décembre)- Bobo 3G2</td>
                                                                            <td>3000Ar</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">Décembre</span>
                                                    <button type="button" class="btn btn-sm btn-default float-right">
                                                        Réglé
                                                    </button>
                                                    <span class="info-box-number">RP : 50 000 Ar</span>
                                                </div>
                                                <!-- /.info-box-content -->
                                            </div>
                                            <!-- /.info-box -->
                                        </div>
                                        <!-- /.col -->
                                        <div class="col-md-3 col-sm-6 col-12">
                                            <div class="info-box bg-danger mb-0">
                                                <span class="info-box-icon" type="button" data-toggle="modal" data-target="#exampleModal">AV</span>
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-xl">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body text-dark">
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-sm text-default">
                                                                        <thead>
                                                                            <tr>
                                                                            <th scope="col">Date</th>
                                                                            <th scope="col">N° Piece</th>
                                                                            <th scope="col">Description</th>
                                                                            <th scope="col">Montant</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr>
                                                                            <th>10-08-2020</th>
                                                                            <td>2</td>
                                                                            <td>FE: (Avance décembre)- Bobo 3G2</td>
                                                                            <td>3000Ar</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">Janvier</span>
                                                    <button type="button" class="btn btn-sm btn-default float-right">
                                                        Réglé
                                                    </button>
                                                    <span class="info-box-number">RP : 50 000 Ar</span>
                                                </div>
                                                <!-- /.info-box-content -->
                                            </div>
                                            <!-- /.info-box -->
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane active" id="tab_2">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="text-primary ">Liste des opération</h5>
                                    <div class="table-responsive">
                                        <table class="table table-sm text-default">
                                            <thead>
                                                <tr>
                                                <th scope="col">Date</th>
                                                <th scope="col">N° Piece</th>
                                                <th scope="col">Description</th>
                                                <th scope="col">Montant</th>
                                                </tr>
                                            </thead>
                                            <tbody class="table-bordered">
                                                <tr>
                                                <th>10-08-2020</th>
                                                <td>2</td>
                                                <td>FE: (Avance décembre)- Bobo 3G2</td>
                                                <td>3000Ar</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div><!-- /.card-body -->
            

            </div>
        </div>

    </div>

{% endblock %}

{% block javascripts %}


{% endblock %}