@extends('layouts/horizontalLayout')

@section('title', 'Crm')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
@vite(['resources/assets/js/dashboards-crm.js'])
@endsection

@section('content')
<div class="container-fluid">

  <div class="row">

    <!-- Total Profit 1-->
    <div class="col-xl-4 col-md-6 col-sm-6 col-12 mb-4">
  <div class="card">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between">
        <div class="content-left">
          <!-- Titre -->
          <h3 class="text-uppercase">Montant contracté</h3>

          <!-- Montant affiché avec formatage -->
          <div class="d-flex flex-column flex-md-row align-items-center my-2">
            <h5 class="mb-0 me-md-2"></h5>
            <p class="text-danger mb-0">{{ number_format($statistiques->montant_du, 0, ',', ' ') }} FCFA</p>
          </div>

          <!-- Description -->
          <p class="mb-0">
            <h6>Il s'agit des prêts consolidés (prêt d'étude et Laboratoire)</h6>
          </p>
        </div>

        <!-- Avatar icône -->
        <div class="avatar mt-3 mt-md-0">
          <span class="avatar-initial rounded bg-label-success">
            <i class="ti ti-user-check ti-sm"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
    <!-- Total Profit 1-->
    <div class="col-xl-4 col-md-6 col-sm-6 col-12 mb-4">
  <div class="card">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between">
        <!-- Contenu principal -->
        <div class="content-left">
          <!-- Titre -->
          <h5 class="text-uppercase">Montant restant à rembourser</h5>

          <!-- Montant restant -->
          <div class="d-flex flex-column flex-md-row align-items-center my-2">
            <h3 class="mb-0 me-md-2"></h3>
            <p class="text-warning mb-0">{{ number_format($statistiques->montant_restant, 0, ',', ' ') }} FCFA</p>
          </div>

          <!-- Description -->
          <p class="mb-0">
            <h6>Il s'agit du montant restant à rembourser pour solder</h6>
          </p>
        </div>

        <!-- Avatar icône -->
        <div class="avatar mt-3 mt-md-0">
          <span class="avatar-initial rounded bg-label-success">
            <i class="ti ti-user-check ti-sm"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
    <!-- Total Profit 1-->
    <div class="col-xl-4 col-md-6 col-sm-6 col-12 mb-4">
  <div class="card">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between">
        <!-- Contenu à gauche -->
        <div class="content-left">
          <h5 class="text-uppercase">Montant soldé</h5>

          <!-- Montant soldé -->
          <div class="d-flex flex-column flex-md-row align-items-center my-2">
            <h3 class="mb-0 me-md-2"></h3>
            <p class="text-success mb-0">{{ number_format($statistiques->montant_du - $statistiques->montant_restant, 0, ',', ' ') }} FCFA</p>
          </div>

          <!-- Description -->
          <p class="mb-0">
            <h6>Il s'agit de la somme de vos différents remboursements</h6>
          </p>
        </div>

        <!-- Avatar icône -->
        <div class="avatar mt-3 mt-md-0">
          <span class="avatar-initial rounded bg-label-success">
            <i class="ti ti-user-check ti-sm"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="col-xl-4 col-md-6 col-sm-12 mb-4">
  <div class="card mb-4">
    <div class="card-body">
      <!-- Titre -->
      <h5 class="card-title text-uppercase text-center">Historique des Dettes</h5>

      <!-- Liste des dettes -->
      <ul class="list-group mb-4 mt-3">
        @foreach($dettes as $dette)
        <li class="list-group-item">
          <!-- Année académique -->
          <div class="d-flex justify-content-between align-items-center">
            <span><strong>Année académique :</strong></span>
            <span>{{ $dette->annee_academique }}</span>
          </div>

          <!-- Montant prêt et taux d'intérêt -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Montant prêt :</strong></span>
            <span>{{ number_format($dette->montant_pret, 2) }} FCFA</span>
          </div>
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Taux d'intérêt :</strong></span>
            <span>{{ $dette->taux }}%</span>
          </div>

          <!-- Montant à rembourser et statut -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Montant à rembourser :</strong></span>
            <span>{{ number_format($dette->montant_dette, 2) }} FCFA</span>
          </div>
        </li>
        @endforeach
      </ul>

      <!-- Résumé total des dettes -->
      <h6 class="text-uppercase text-center">Résumé des Dettes</h6>
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Montant prêt total :</strong>
          <span>{{ number_format($totalmontant_pret, 2) }} FCFA</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Intérêt FONER :</strong>
          <span>{{ number_format($totalMontantDette - $totalmontant_pret, 2) }} FCFA</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Montant total à rembourser :</strong>
          <span>{{ number_format($totalMontantDette, 2) }} FCFA</span>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="col-xl-4 col-md-6 col-sm-12 mb-4">
  <!-- Mon écheancier -->
  <div class="card mb-4">
    <div class="card-body">
      <!-- Titre -->
      <h5 class="card-title text-uppercase text-center">Mon écheancier</h5>
      <!-- Liste des engagements -->
      <ul class="list-group mb-4 mt-3">
        @foreach($engagements as $engagement)
        <li class="list-group-item">
          <!-- Date de l'engagement -->
          <div class="d-flex justify-content-between align-items-center">
            <span><strong>Date de l'engagement :</strong></span>
            <span>{{ \Carbon\Carbon::parse($engagement->date_debut)->format('d/m/y') }}</span>
          </div>

          <!-- Paiement mensuel -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Paiement mensuel :</strong></span>
            <span>{{ number_format($engagement->mensualite, 2) }} FCFA</span>
          </div>

          <!-- Date de fin de paiement -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Date de fin de paiement :</strong></span>
            <span>{{ \Carbon\Carbon::parse($engagement->date_fin)->format('d/m/y') }}</span>
          </div>
        </li>
      </ul>
      <!-- Résumé total des dettes -->
      <h6 class="text-uppercase text-center">Moyen de paiement</h6>
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Moyen de paiement préféré :</strong>
          <span>{{ $engagement->libelle }}</span>
        </li> @endforeach
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Intérêt FONER :</strong>
          <span>{{ number_format($totalMontantDette - $totalmontant_pret, 2) }} FCFA</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <strong>Montant total à rembourser :</strong>
          <span>{{ number_format($totalMontantDette, 2) }} FCFA</span>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="col-xl-4 col-md-6 col-sm-12 mb-4">
  <!-- Récapitulatif des Remboursements -->
  <div class="card mb-4">
    <div class="card-body">
      <!-- Titre -->
      <h5 class="card-title text-uppercase text-center">Récapitulatif des Remboursements</h5>

      <!-- Liste des remboursements -->
      <ul class="list-group mb-4 mt-3">
        <li class="list-group-item">
          <!-- Nombre de remboursements -->
          <div class="d-flex justify-content-between align-items-center">
            <span><strong>Nombre de remboursements :</strong></span>
            <span>{{ $remboursements->nombre_remboursements }}</span>
          </div>

          <!-- Somme totale des remboursements -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Somme totale des remboursements :</strong></span>
            <span>{{ number_format($remboursements->somme_remboursements, 2) }} FCFA</span>
          </div>

          <!-- Montant restant à solder -->
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span><strong>Montant restant à solder :</strong></span>
            <span>{{ number_format($remboursements->montant_restant, 2) }} FCFA</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
</div>
@endsection