@extends('layouts.template')

@section('content')

    <!-- Header -->
    <div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
      <div class="container-fluid">
        <div class="header-body">
          <!-- Card stats -->
          <div class="row">
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0"> Nbr filles</h5>
                      <span class="h2 font-weight-bold mb-0">{{ $totalFs }}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                        <i class="fas fa-book-reader"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Nbr garcons</h5>
                      <span class="h2 font-weight-bold mb-0">{{ $totalMs }}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                        <i class="fas fa-book-reader"></i>
                      </div>
                    </div>
                  </div>
                
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">C.A estimé/mois</h5>
                      <span class="h2 font-weight-bold mb-0">{{ $sumss }}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
                        <i class="fas fa-briefcase"></i>
                      </div>
                    </div>
                  </div>
              
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">C.Affaires</h5>
                      <span class="h2 font-weight-bold mb-0">{{ $caffaire }}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-info text-white rounded-circle shadow">
                        <i class="fas fa-briefcase"></i>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
<style>
.containerx {
    height: 20px;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 35s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   0em }
    100% { top: -14em }
}

/* Make it look pretty */
.microsoft .marquee {
	margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before, .microsoft::before,
.microsoft:after,  .microsoft::after {
    left: 0;
    z-index: 1;
    content: '';
    position: absolute;
    pointer-events: none;
    width: 100%; height: 2em;
    background-image: linear-gradient(top, #FFF, rgba(255,255,255,0));
}

.microsoft:after, .microsoft::after {
    bottom: 0;
    transform: rotate(180deg);
}

.microsoft:before, .microsoft::before {
    top: 0;
}

/* Style the links */
.vanity {
    color: #333;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
    color: #1570A6;
    transition: color .5s;
    text-decoration: none;
}

.vanity a:hover, .microsoft a:hover {
    color: #F65314;
}

/* Style toggle button */
.toggle {
	display: block;
    margin: 2em auto;
}
</style>
          <div class="row mt-3">
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">M.Impayés</h5>
                      <span class="h2 font-weight-bold mb-0">
                            <div class="microsoft containerx">
                                <p class="marquee">
                                    Janvier <br/>
                                    Fevrier <br/>
                                    Mars <br/>
                                    Avril <br/>
                                    Mai <br/>
                                    Juin <br/>
                                    Juilette <br/>
                                    Aout <br/>
                                    Septembre <br/>
                                    October <br/>
                                    Novembre <br/>
                                    Decembre 
                                </p>
                            </div>
                      </span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                        <i class="fas fa-book-reader"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0"> CCC</h5>
                        <span class="h2 font-weight-bold mb-0">000</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                        <i class="fas fa-book-reader"></i>
                      </div>
                    </div>
                  </div>
                
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">M.mm</h5>
                      <span class="h2 font-weight-bold mb-0">000</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
                        <i class="fas fa-users"></i>
                      </div>
                    </div>
                  </div>
              
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Frais Scolaire</h5>
                      <span class="h2 font-weight-bold mb-0">{{ $totalfrais }}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-info text-white rounded-circle shadow">
                        <i class="fas fa-briefcase"></i>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-xl-12 mb-5 mb-xl-0">
            <div class="card shadow" style="border:2px #aa1da7 solid;border-radius:1rem;">
            <!-- Chart GOOGLE -->
                <div class="container-fluid p-5">
                    <div id="barchart_material" style="width: 100%; height: 500px;"></div>
                </div>
                    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
                    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
                
                
                    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                    <script type="text/javascript">
                    
                
                      google.charts.load('current', {'packages':['bar']});
                      google.charts.setOnLoadCallback(drawChart);
                
                      function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                            ['Mois', 'Somme', { role: 'style' }],
                
                            @php
                              foreach($products as $product) {
                                  echo "['".$product->mois."', ".$product->sum.", '#b87333'],";
                              }
                            @endphp
                        ]);
                        
                
                        var options = {
                          chart: {
                            title: 'Graphe | Chiffre Affaire',
                            subtitle: 'Chiffre d affaire par Mois: @php echo $products[0]->created_at @endphp',
                            backgroundColor: {
                            fill:'green'     
                            },

                          },
                          bars: 'horizontal'
                        };
                        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
                        chart.draw(data, google.charts.Bar.convertOptions(options));
                      }
                    </script>
              <!-- Chart GOOGLE END-->
              </div>
        </div>
        </div>
    </div>
    
    <div class="container-fluid mt-5">
        <div class="row">
            
            <div class="col-xl-4 mb-5 mb-xl-0" style="border:2px #aa1da7 solid;border-radius:1rem;">
                aaaa
            </div>
            
            <div class="col-xl-4 mb-5 mb-xl-0" style="border:2px #aa1da7 solid;border-radius:1rem;">
                bbbb
            </div>
            
            <div class="col-xl-4 mb-5 mb-xl-0" style="border:2px #aa1da7 solid;border-radius:1rem;">
                cccc
            </div>
        </div>
    </div>
    
    <div class="container-fluid">
      <div class="row mt-5">
        <div class="col-xl-8 mb-5 mb-xl-0">
          <div class="card shadow">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  
                  <div class="row align-items-center">
                    <div class="col-8">
                      <h3 class="mb-0">Historique de jour</h3>
                    </div>
                    <div class="col-4 text-right">
                      <a href="#" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal">Non payé</a>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <!-- Projects table -->
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Date Paiement</th>
                    <th scope="col">Parent</th>
                    <th scope="col">Enfants</th>
                    <th scope="col">Montant</th>
                  </tr>
                </thead>
                <tbody>
                @foreach($etats as $etat)    
                  <tr>
                    <th scope="row">
                      {{ $etat->created_at }}
                    </th>
                    <td>
                      {{ $etat->parente->nomP }} - {{ $etat->parente->nomM }}
                    </td>
                    <td>
                      {{ $etat->nbrEnfant }}
                    </td>
                    <td>
                      {{ $etat->somm }}
                    </td>
                  </tr>
                @endforeach
                </tbody>
                
              </table>
              
            </div>
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 class="mb-0"> </h3>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  
                  <div class="row align-items-center">
                    <div class="col-8">
                      <h3 class="mb-0">C.Affaire / Mois 
                                            {{  
                        $DateActua 
                      }}</h3>
                    </div>
                    <div class="col-4 text-right">
                      <a href="#" class="btn btn-sm btn-success">Etat général</a>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <!-- Projects table -->
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Mois</th>
                    <th scope="col">C.Affaire</th>
                    <th scope="col">%</th>
                  </tr>
                </thead>
                <tbody>
                    @foreach($totaMois as $totaMoi)
                  <tr @if ($DateActua == $totaMoi->mois) style="background: #d1f5d1" @endif>
                    <th scope="row">
                      {{ $totaMoi->mois }}
                    </th>
                    <td>
                      {{ $totaMoi->smm }}
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">
                            {{ number_format(($totaMoi->smm/$sumss)*100,2) }} %
                        </span>
                      </div>
                    </td>
                  </tr>
                    @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    
<!-- Modal no pay-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choisir le mois</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
            
            <div class="list-group">
                
                @foreach($listeMoi as $totaMoi)
                    <a href="{{ url('nonpay/'.$totaMoi->mois) }}" class="list-group-item list-group-item-action text-capitalize">
                        {{ $totaMoi->mois }}
                    </a>
                @endforeach
                
            </div>
            
            <div class="dropdown-menu">
                
            </div>
            

                    
      </div>
    </div>
  </div>
</div>
<!-- Modal no pay end -->
@endsection

@section('javascript')
<script src="assets/js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:'Dashboard'
        }
    });
</script>
@endsection