@extends('layouts.appadmin')

@section('content')
<div class="content-wrapper">
    <!-- En-tête de la page -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Tableau de Bord</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal -->
    <section class="content">
        <div class="container-fluid">

            <div class="row">
                @php
                    $boxes = [
                        ['bg-info', 'total ', number_format($total_vente, 2) . ' DH', 'ion-bag'],
                        ['bg-success', 'avances', number_format($total_avance, 2) . ' DH', 'ion-stats-bars'],
        
                        ['bg-danger', 'credit', number_format($total_rest, 2) . ' DH', 'ion-pie-graph'],
                          ['bg-warning', 'Factures à crédit', $ventes1->count(), 'ion-person-add'],
                    ];
                @endphp

                @foreach ($boxes as [$color, $title, $value, $icon])
                    <div class="col-lg-3 col-6 mb-3">
                        <div class="small-box {{ $color }}">
                            <div class="inner">
                                <h3>{{ $value }}</h3>
                                <p>{{ $title }}</p>
                            </div>
                            <div class="icon">
                                <i class="ion {{ $icon }}"></i>
                            </div>
                            <a href="#" class="small-box-footer">
                                Plus d'infos <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section>
</div>
@endsection