@include('includes.header')
@php
if(isset($_POST['fraistotaux'])) {
  $fraistotaux = $_POST['fraistotaux'];
}
elseif(isset($frais[0]->fraiscommuns)) {
  $fraistotaux = $frais[0]->fraiscommuns;
} else {
  $fraistotaux = 0;
}
@endphp
<div class="container page__heading-container">
  <div class="page__heading d-flex align-items-end">
    <div class="flex">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">{{ $categorie }}</li>
          <li class="breadcrumb-item active"
          aria-current="page">Frais communs</li>
        </ol>
      </nav>
      <h1 class="m-0">Tableau des frais communs</h1>
    </div>
    @include('includes.toast', ['msg' => $msg])
  </div>
</div>
<div class="container page__container">
  <div class="card card-form">
    <div class="row no-gutters">
      <div class="col-lg-3 card-body">
        <p><strong class="headings-color">Répartition des frais communs</strong></p>
        <p class="text-muted">Les quotes-parts sont très importantes afin d’établir un calcul équitable, car elles représentent l’intégralité des composantes de la propriété de chacune des personnes.<br><br>
         Dans un condo, tout copropriétaire est tenu d’acquitter sa quote-part de charges communes de copropriété, également appelées les « frais communs ». Ces charges, payables en règle générale mensuellement, servent à faire face à l’ensemble des dépenses et frais liés à la copropriété et à l’immeuble.<br><br>Les paiements des charges communes doivent être réglées à l'ordre du Syndicat des copropriétaires.</p>
       </div>
       <div class="col-lg-9 card-form__body">
        <div class="table-responsive border-bottom" data-toggle="lists" data-lists-values="[&quot;js-lists-values-employee-name&quot;]">
         <br> 
         <table class="mb-0 thead-border-top-0" id="board">
          <thead>
            <tr>
              <th>Unités</th>
              <th>Frais menusuels</th>
              <th>Frais annuels</th>
              <th>Quote-parts</th>
            </tr>
          </thead>
          <tbody class="list" id="staff">
            @php $quotepart = 0; $fraiscommuns = 0; @endphp
            @foreach($registreprivatif as $registre)
            <tr>
              <td>
                <div class="media align-items-center">
                  <div class="media-body">
                    <span class="js-lists-values-employee-name"><div class="badge badge-dark">#{{ $registre->unite_id }}</div></span>
                  </div>
                </div>
              </td>
              <td>{{ number_format($registre->quotepart * $fraistotaux/100 / 12, 2, '.', ' ') }}$</td>
              <td>{{ number_format($registre->quotepart * $fraistotaux/100, 2, '.', ' ') }}$</td>
              <td>@if (isset($registre->quotepart)) {{ $registre->quotepart }}% @else <i>N/A</i> @endif</td>
            </tr>
            @php $quotepart += $registre->quotepart; $fraiscommuns += $registre->quotepart * $fraistotaux/100; @endphp
            @endforeach
          </tbody>
          <tfooter>
            <tr>
              <th style="width: 18px;">
                Total
              </th>
               <th>{{ number_format($fraiscommuns / 12, 0, '.', ' ') }}$</th>
              <th>{{ number_format($fraiscommuns, 0, '.', ' ') }}$</th>
              <th>@if((int)$quotepart != 100) <div style="color:red">{{ $quotepart }}% <i class="fas fa-exclamation-triangle"></i></div> @else {{ $quotepart }}% @endif</th>
              <th></th>
              <th></th>
            </tr>
          </tfooter>
        </table>
      </div>
      @if((int)$quotepart !== 100)
      <br>
      <div class="alert alert-soft-danger d-flex align-items-center" role="alert">
        <i class="material-icons mr-3">error_outline</i>
        <div class="text-body"><strong>Attention !</strong> La répartition des quote-parts entre les copropriétaires doit arriver à 100% afin d'être équitable. Dans les circonstances, le budget n'est pas balancé.</div>
      </div>
      @endif
      <div class="card py-2 px-3 my-4">
        <div class=" d-flex justify-content-between align-items-center">

          <div class="flex d-flex align-items-center text-body text-underline-0">
            <i class="fas fa-comment-dollar" style="margin-right:15px;font-size:2em"></i>
            <span class="flex d-flex flex-column">
              <strong>Simulateur de frais communs</strong>
              <small class="text-muted text-uppercase">Entrez une somme totale à simuler</small>
            </span>
          </div>
          <form action="/quoteparts/simulation" method="post">
            @csrf
            <div style="display:flex">
              <div class="input-group mb-2 mr-sm-2">
                <input type="numeric" step="0.01" min="0" class="form-control" name="fraistotaux" value="{{ $fraistotaux }}">
                <div class="input-group-append">
                  <span class="input-group-text">$</span>
                </div>&nbsp;&nbsp;
                <button type="submit" class="btn btn-primary">OK</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

</div>
<!-- // END Header Layout Content -->
</div>
<!-- // END Header Layout -->
@include('includes.footer')
<script>
  $(document).ready(function(){
    $('#board').dataTable( {
      "paging": false,
      "language": {
        "search": ""
      },
    } );

    $('.dataTables_filter input').addClass('form-control datasearch');
    $('.datasearch').css('border', '1px solid #DBE5EE');
    $('.datasearch').css('padding', '0.375rem 0.875rem');
    $('.datasearch').css('background-color', '#FAFBFE');
    $('.datasearch').css('width', '700px');
    $('.dataTables_filter').css('margin-right', '20px');
    $('.dataTables_filter input').addClass('form-control datafilter');
    $('.dataTables_filter input').attr("placeholder", "Recherche");
    $('select[name="DataTables_Table_0_length"').css('border', '1px solid #DBE5EE');
    $('select[name="DataTables_Table_0_length"').css('background-color', '#FAFBFE');
    $('.dataTables_length').css('margin-left', '20px');
    $('.dataTables_info').css('margin-left', '20px');
    $('.dataTables_info').css('padding-bottom', '10px');
  });
</script>
</body>

</html>