@extends('layouts.horizontalLayout')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3 class="mb-4 text-center text-success">Détails de mes remboursements</h3>

      <!-- Itération sur les remboursements pour les afficher individuellement dans des cartes -->
      @foreach ($remboursements as $remboursement)
      <div class="card mb-3 border-success" style="background-color: #e6ffe6;">
        <div class="card-body">
          <h5 class="card-title text-success">Remboursement N°{{ $remboursement->id }}</h5>
          <p class="card-text">
            <strong>Date du remboursement :</strong> <span class="text-success">{{ \Carbon\Carbon::parse($remboursement->date_remboursement)->format('d/m/y') }}</span><br>
            <strong>Montant remboursé :</strong> <span class="text-success">{{ number_format($remboursement->montant_rembourser, 0, ',', ' ') }} FCFA</span><br>
            <strong>Moyen de paiement :</strong> <span class="text-success">{{ $remboursement->moyenpaiement->libelle }}</span><br> <!-- Remplacer par le nom du mode de paiement si nécessaire -->
            <strong>Employeur :</strong> <span class="text-success">{{ $remboursement->employeur->libelle_employeur }}</span><br> <!-- Remplacer par le nom de l'employeur si nécessaire -->
            <a href="{{ route('remboursementsRedevable.preview', [$remboursement->id]) }}" target="_blank" class="btn btn-default btn-lg">
              <i class="fa fa-download fa-lg"></i>
            </a>

          </p>
        </div>
      </div>
      @endforeach

      <!-- Total des remboursements -->
      <div class="alert alert-success mt-4">
        <h4 class="text-center">Total des remboursements : <span class="font-weight-bold">{{ number_format($totalRemboursements, 0, ',', ' ') }} FCFA</span></h4>
      </div>
    </div>
  </div>
</div>

<style>
  .card {
    transition: transform 0.2s, box-shadow 0.2s;
    /* Effet de zoom et d'ombre au survol */
  }

  .card:hover {
    transform: scale(1.05);
    /* Zoomer légèrement au survol */
    box-shadow: 0 4px 20px rgba(0, 128, 0, 0.3);
    /* Ombre douce */
  }
</style>
@endsection