@extends('layouts.app')
@section('content')
    @if (Auth::user()->role->name == 'Administrateur')
        <!--<div class="row mb-4">-->
        <!--    <div class="col-12">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h5 class="card-title mb-0">-->
        <!--                    <i data-feather="filter" class="feather-16 me-2"></i>-->
        <!--                    Filtrer par date-->
        <!--                </h5>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <form method="GET" action="{{ route('dashboard') }}" class="row g-3">-->
        <!--                    <div class="col-md-4">-->
        <!--                        <label for="date" class="form-label">Date</label>-->
        <!--                        <input type="date" class="form-control" id="date" name="date"-->
        <!--                               value="{{ request('date') ?? $date?->format('Y-m-d') }}">-->
        <!--                    </div>-->
        <!--                    <div class="col-md-4 d-flex align-items-end">-->
        <!--                        <button type="submit" class="btn btn-primary me-2">-->
        <!--                            <i data-feather="search" class="feather-16 me-1"></i> Filtrer-->
        <!--                        </button>-->
        <!--                        <a href="{{ route('dashboard') }}" class="btn btn-secondary">-->
        <!--                            <i data-feather="x-circle" class="feather-16 me-1"></i> Réinitialiser-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </form>-->

        <!--<form method="GET" class="flex gap-4 items-end">-->
        <!--    <div>-->
        <!--        <label class="form-label">Du</label>-->
        <!--        <input type="date" name="date_debut" value="{{ $dateDebut ?? '' }}" class="form-control">-->
        <!--    </div>-->
        <!--    <div>-->
        <!--        <label class="form-label">Au</label>-->
        <!--        <input type="date" name="date_fin" value="{{ $dateFin ?? '' }}" class="form-control">-->
        <!--    </div>-->
        <!--    <div>-->
        <!--        <button type="submit" class="btn btn-primary me-2"> <i data-feather="search" class="feather-16 me-1"></i> Filtrer</button>-->
        <!--        <a href="{{ route('dashboard') }}" class="btn btn-secondary">-->

        <!--             <i data-feather="x-circle" class="feather-16 me-1"></i> Réinitialiser-->
        <!--        </a>-->
        <!--    </div>-->
        <!--</form>-->


        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->


        @include('partials.dashboard-filter', ['filterId' => 'admin'])

        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das1">
                    <div class="dash-counts">
                        <h4>{{ count($fournisseurs) }}</h4>
                        <h5>Fournisseurs</h5>
                    </div>
                    <div class="dash-imgs">
                        <i data-feather="user-check"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das2">
                    <div class="dash-counts">
                        <h4>{{ count($products) }}</h4>
                        <h5>Total produits</h5>
                    </div>
                    <div class="dash-imgs">
                        <img src="{{ asset('assets/img/icons/file-text-icon-01.svg') }}" class="img-fluid" alt="icon">
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das3">
                    <div class="dash-counts">
                        <h4>{{ count($categories) }}</h4>
                        <h5>Catégories</h5>
                    </div>
                    <div class="dash-imgs">
                        <i data-feather="file"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash1 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash2.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_ventes, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Ventes du jour</h6>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            <div>
                                <span class="fw-semibold">{{ number_format($total_ventes_produits, 0, ' ', ' ') }}
                                    FCFA</span>
                                <small class="text-muted d-block">Produits</small>
                            </div>
                            @if ($servicesModuleEnabled ?? false)
                                <div>
                                    <span class="fw-semibold">{{ number_format($total_ventes_services, 0, ' ', ' ') }}
                                        FCFA</span>
                                    <small class="text-muted d-block">Services</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash2 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash3.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_ventes, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Total Ventes (Global)</h6>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            <div>
                                <span class="fw-semibold">{{ number_format($total_ventes_produits, 0, ' ', ' ') }}
                                    FCFA</span>
                                <small class="text-muted d-block">Produits</small>
                            </div>
                            @if ($servicesModuleEnabled ?? false)
                                <div>
                                    <span class="fw-semibold">{{ number_format($total_ventes_services, 0, ' ', ' ') }}
                                        FCFA</span>
                                    <small class="text-muted d-block">Services</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash2 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash3.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_gains, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Total Gains (Global)</h6>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            <div>
                                <span class="fw-semibold">{{ number_format($total_gains_produits, 0, ' ', ' ') }}
                                    FCFA</span>
                                <small class="text-muted d-block">Produits</small>
                            </div>
                            @if ($servicesModuleEnabled ?? false)
                                <div>
                                    <span class="fw-semibold">{{ number_format($total_gains_services, 0, ' ', ' ') }}
                                        FCFA</span>
                                    <small class="text-muted d-block">Services</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_achats, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Valeur du stock (prix de vente)</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($valeur_stock_achat, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Valeur du stock (prix d'achat)</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($marge_stock, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Marge potentielle sur stock</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash3 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash4.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($depense_journaliere, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Dépenses du jour</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash3 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash4.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_depenses, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Total des Dépenses</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes & Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesAchatsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesJourChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesMoisChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Marge bénéficiaire par jour (produits)</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="gainsJourChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-7 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h4 class="card-title">Les produits expirés</h4>
                    </div>
                    <div class="card-body">
                        @if (count($products_expires) > 0)
                            <div class="table-responsive product-list">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th class="no-sort">
                                                <label class="checkboxs">
                                                    <input type="checkbox" id="select-all">
                                                    <span class="checkmarks"></span>
                                                </label>
                                            </th>
                                            <th>Produit</th>
                                            <th>SKU</th>
                                            <th>Catégorie</th>
                                            <th>Marque</th>
                                            <th>Prix</th>
                                            <th>Quantité</th>
                                            <th>Créé par</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($products_expires as $product)
                                            <tr>
                                                <td>
                                                    <label class="checkboxs">
                                                        <input type="checkbox">
                                                        <span class="checkmarks"></span>
                                                    </label>
                                                </td>
                                                <td>
                                                    <div class="productimgname">
                                                        <a href="javascript:void(0);" class="product-img stock-img">
                                                            @if ($product->image)
                                                                <img src="{{ asset('images/products/' . $product->image) }}"
                                                                    alt="image-{{ $product->name }}">
                                                            @else
                                                                <img src="{{ asset('assets/img/default.jpg') }}"
                                                                    alt="image défaut">
                                                            @endif
                                                        </a>
                                                        <a
                                                            href="javascript:void(0);">{{ Str::limit($product->name, 15, '...') }}</a>
                                                    </div>
                                                </td>
                                                <td>{{ $product->sku }}</td>
                                                <td>{{ $product->category->name ?? '-' }}</td>
                                                <td>{{ $product->brand->name ?? '-' }}</td>
                                                <td>{{ number_format($product->price, 0, ' ') }} FCFA</td>
                                                <td>{{ $product->quantity }}</td>
                                                <td>{{ $product->user->nom . ' ' . $product->user->prenom }}</td>
                                                <td class="action-table-data">
                                                    <div class="edit-delete-action">
                                                        <a class="me-2 edit-icon p-2"
                                                            href="{{ route('inventory.products.details', $product->id) }}">
                                                            <i data-feather="eye" class="feather-eye"></i>
                                                        </a>
                                                        <a class="me-2 p-2"
                                                            href="{{ route('inventory.products.edit', $product->id) }}">
                                                            <i data-feather="edit" class="feather-edit"></i>
                                                        </a>
                                                        <a class="confirm-text p-2" href="javascript:void(0);"
                                                            onclick="event.preventDefault(); document.getElementById('delete-product-{{ $product->id }}').submit();">
                                                            <i data-feather="trash-2" class="feather-trash-2"></i>
                                                        </a>
                                                        <form id="delete-product-{{ $product->id }}"
                                                            action="{{ route('inventory.products.delete', $product->id) }}"
                                                            method="POST" class="d-none">
                                                            @csrf
                                                            @method('DELETE')
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center">Aucun produit trouvé.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-center text-danger">Pas de produit(s) expiré(s)</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-5 col-sm-12 col-12 d-flex">
                <div class="card flex-fill default-cover mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">Produits recents</h4>
                        <div class="view-all-link">
                            <a href="javascript:void(0);" class="view-all d-flex align-items-center">
                                Voir tous<span class="ps-2 d-flex align-items-center"><i data-feather="arrow-right"
                                        class="feather-16"></i></span>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive dataview">
                            <table class="table dashboard-recent-products">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nom produit</th>
                                        <th>Prix</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($products_recents as $index => $product)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="productimgname">
                                                <a href="{{ route('inventory.products.details', $product->id) }}"
                                                    class="product-img">
                                                    @if ($product->image)
                                                        <img src="{{ asset('images/products/' . $product->image) }}"
                                                            alt="image-{{ $product->name }}">
                                                    @else
                                                        <img src="{{ asset('assets/img/default.jpg') }}"
                                                            alt="image défaut">
                                                    @endif
                                                </a>
                                                <a
                                                    href="{{ route('inventory.products.details', $product->id) }}">{{ Str::limit($product->name, 15, '...') }}</a>
                                            </td>
                                            <td>{{ number_format($product->price, 0, ' ') }} FCFA</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (Auth::user()->role->name == 'Caissiere')
        <!--<div class="row mb-4">-->
        <!--    <div class="col-12">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h5 class="card-title mb-0">-->
        <!--                    <i data-feather="filter" class="feather-16 me-2"></i>-->
        <!--                    Filtrer par date-->
        <!--                </h5>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <form method="GET" action="{{ route('dashboard') }}" class="row g-3">-->
        <!--                    <div class="col-md-4">-->
        <!--                        <label for="date" class="form-label">Date</label>-->
        <!--                        <input type="date" class="form-control" id="date" name="date"-->
        <!--                               value="{{ request('date') ?? $date?->format('Y-m-d') }}">-->
        <!--                    </div>-->
        <!--                    <div class="col-md-4 d-flex align-items-end">-->
        <!--                        <button type="submit" class="btn btn-primary me-2">-->
        <!--                            <i data-feather="search" class="feather-16 me-1"></i> Filtrer-->
        <!--                        </button>-->
        <!--                        <a href="{{ route('dashboard') }}" class="btn btn-secondary">-->
        <!--                            <i data-feather="x-circle" class="feather-16 me-1"></i> Réinitialiser-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </form>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->

        @include('partials.dashboard-filter', ['filterId' => 'caissiere'])

        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes & Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesAchatsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesJourChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesMoisChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Marge bénéficiaire par jour (produits)</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="gainsJourChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (Auth::user()->role->name == 'Gestionnaire')
        <!--<div class="row mb-4">-->
        <!--    <div class="col-12">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h5 class="card-title mb-0">-->
        <!--                    <i data-feather="filter" class="feather-16 me-2"></i>-->
        <!--                    Filtrer par date-->
        <!--                </h5>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <form method="GET" action="{{ route('dashboard') }}" class="row g-3">-->
        <!--                    <div class="col-md-4">-->
        <!--                        <label for="date" class="form-label">Date</label>-->
        <!--                        <input type="date" class="form-control" id="date" name="date"-->
        <!--                               value="{{ request('date') ?? $date?->format('Y-m-d') }}">-->
        <!--                    </div>-->
        <!--                    <div class="col-md-4 d-flex align-items-end">-->
        <!--                        <button type="submit" class="btn btn-primary me-2">-->
        <!--                            <i data-feather="search" class="feather-16 me-1"></i> Filtrer-->
        <!--                        </button>-->
        <!--                        <a href="{{ route('dashboard') }}" class="btn btn-secondary">-->
        <!--                            <i data-feather="x-circle" class="feather-16 me-1"></i> Réinitialiser-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </form>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->

        @include('partials.dashboard-filter', ['filterId' => 'gestionnaire'])
        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count">
                    <div class="dash-counts">
                        <h4>{{ count($clients) }}</h4>
                        <h5>Clients</h5>
                    </div>
                    <div class="dash-imgs">
                        <i data-feather="user"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das1">
                    <div class="dash-counts">
                        <h4>{{ count($fournisseurs) }}</h4>
                        <h5>Fournisseurs</h5>
                    </div>
                    <div class="dash-imgs">
                        <i data-feather="user-check"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das2">
                    <div class="dash-counts">
                        <h4>{{ count($products) }}</h4>
                        <h5>Total produits</h5>
                    </div>
                    <div class="dash-imgs">
                        <img src="{{ asset('assets/img/icons/file-text-icon-01.svg') }}" class="img-fluid"
                            alt="icon">
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-count das3">
                    <div class="dash-counts">
                        <h4>{{ count($categories) }}</h4>
                        <h5>Catégories</h5>
                    </div>
                    <div class="dash-imgs">
                        <i data-feather="file"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash1 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash2.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_ventes, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Total Ventes (Global)</h6>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            <div>
                                <span class="fw-semibold">{{ number_format($total_ventes_produits, 0, ' ', ' ') }}
                                    FCFA</span>
                                <small class="text-muted d-block">Produits</small>
                            </div>
                            @if ($servicesModuleEnabled ?? false)
                                <div>
                                    <span class="fw-semibold">{{ number_format($total_ventes_services, 0, ' ', ' ') }}
                                        FCFA</span>
                                    <small class="text-muted d-block">Services</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash2 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash3.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_gains, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Total Gains (Global)</h6>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            <div>
                                <span class="fw-semibold">{{ number_format($total_gains_produits, 0, ' ', ' ') }}
                                    FCFA</span>
                                <small class="text-muted d-block">Produits</small>
                            </div>
                            @if ($servicesModuleEnabled ?? false)
                                <div>
                                    <span class="fw-semibold">{{ number_format($total_gains_services, 0, ' ', ' ') }}
                                        FCFA</span>
                                    <small class="text-muted d-block">Services</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_achats, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Valeur du stock (prix de vente)</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($valeur_stock_achat, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Valeur du stock (prix d'achat)</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash1.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($marge_stock, 0, ' ', ' ') }}</span> FCFA</h5>
                        <h6>Marge potentielle sur stock</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4 col-sm-6 col-12 d-flex">
                <div class="dash-widget dash3 w-100">
                    <div class="dash-widgetimg">
                        <span><img src="{{ asset('assets/img/icons/dash4.svg') }}" alt="img"></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5><span class="counters">{{ number_format($total_ravitaillements, 0, ' ', ' ') }}</span> FCFA
                        </h5>
                        <h6>Total ravitaillements</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes & Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesAchatsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Commandes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Commandes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesJourChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Ventes</h5>
                        <div class="graph-sets">
                            <ul class="mb-0">
                                <li><span>Ventes</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="ventesMoisChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Marge bénéficiaire par jour (produits)</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="gainsJourChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-7 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h4 class="card-title">Les produits expirés</h4>
                    </div>
                    <div class="card-body">
                        @if (count($products_expires) > 0)
                            <div class="table-responsive product-list">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th class="no-sort">
                                                <label class="checkboxs">
                                                    <input type="checkbox" id="select-all-gest">
                                                    <span class="checkmarks"></span>
                                                </label>
                                            </th>
                                            <th>Produit</th>
                                            <th>SKU</th>
                                            <th>Catégorie</th>
                                            <th>Marque</th>
                                            <th>Prix</th>
                                            <th>Quantité</th>
                                            <th>Créé par</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($products_expires as $product)
                                            <tr>
                                                <td>
                                                    <label class="checkboxs">
                                                        <input type="checkbox">
                                                        <span class="checkmarks"></span>
                                                    </label>
                                                </td>
                                                <td>
                                                    <div class="productimgname">
                                                        <a href="javascript:void(0);" class="product-img stock-img">
                                                            @if ($product->image)
                                                                <img src="{{ asset('images/products/' . $product->image) }}"
                                                                    alt="image-{{ $product->name }}">
                                                            @else
                                                                <img src="{{ asset('assets/img/default.jpg') }}"
                                                                    alt="image défaut">
                                                            @endif
                                                        </a>
                                                        <a
                                                            href="javascript:void(0);">{{ Str::limit($product->name, 15, '...') }}</a>
                                                    </div>
                                                </td>
                                                <td>{{ $product->sku }}</td>
                                                <td>{{ $product->category->name ?? '-' }}</td>
                                                <td>{{ $product->brand->name ?? '-' }}</td>
                                                <td>{{ number_format($product->price, 0, ' ') }} FCFA</td>
                                                <td>{{ $product->quantity }}</td>
                                                <td>{{ $product->user->nom . ' ' . $product->user->prenom }}</td>
                                                <td class="action-table-data">
                                                    <div class="edit-delete-action">
                                                        <a class="me-2 edit-icon p-2"
                                                            href="{{ route('inventory.products.details', $product->id) }}">
                                                            <i data-feather="eye" class="feather-eye"></i>
                                                        </a>
                                                        <a class="me-2 p-2"
                                                            href="{{ route('inventory.products.edit', $product->id) }}">
                                                            <i data-feather="edit" class="feather-edit"></i>
                                                        </a>
                                                        <a class="confirm-text p-2" href="javascript:void(0);"
                                                            onclick="event.preventDefault(); document.getElementById('delete-product-gest-{{ $product->id }}').submit();">
                                                            <i data-feather="trash-2" class="feather-trash-2"></i>
                                                        </a>
                                                        <form id="delete-product-gest-{{ $product->id }}"
                                                            action="{{ route('inventory.products.delete', $product->id) }}"
                                                            method="POST" class="d-none">
                                                            @csrf
                                                            @method('DELETE')
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center">Aucun produit trouvé.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-center text-danger">Pas de produit(s) expiré(s)</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-5 col-sm-12 col-12 d-flex">
                <div class="card flex-fill default-cover mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">Produits recents</h4>
                        <div class="view-all-link">
                            <a href="javascript:void(0);" class="view-all d-flex align-items-center">
                                Voir tous<span class="ps-2 d-flex align-items-center"><i data-feather="arrow-right"
                                        class="feather-16"></i></span>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive dataview">
                            <table class="table dashboard-recent-products">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nom produit</th>
                                        <th>Prix</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($products_recents as $index => $product)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="productimgname">
                                                <a href="{{ route('inventory.products.details', $product->id) }}"
                                                    class="product-img">
                                                    @if ($product->image)
                                                        <img src="{{ asset('images/products/' . $product->image) }}"
                                                            alt="image-{{ $product->name }}">
                                                    @else
                                                        <img src="{{ asset('assets/img/default.jpg') }}"
                                                            alt="image défaut">
                                                    @endif
                                                </a>
                                                <a
                                                    href="{{ route('inventory.products.details', $product->id) }}">{{ Str::limit($product->name, 15, '...') }}</a>
                                            </td>
                                            <td>{{ number_format($product->price, 0, ' ') }} FCFA</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let ventesParMois = @json($ventesParMois);
            let ventesParJour = @json($ventesParJour);
            new Chart(document.getElementById('ventesMoisChart'), {
                type: 'bar',
                data: {
                    labels: Object.keys(ventesParMois).map(mois => `Mois ${mois}`),
                    datasets: [{
                        label: 'Total Ventes',
                        data: Object.values(ventesParMois),
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            new Chart(document.getElementById('ventesJourChart'), {
                type: 'line',
                data: {
                    labels: Object.keys(ventesParJour),
                    datasets: [{
                        label: 'Total Ventes',
                        data: Object.values(ventesParJour),
                        backgroundColor: 'rgba(255, 99, 132, 0.6)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            let gainsParJour = @json($gainsParJour);
            let gainsJourEl = document.getElementById('gainsJourChart');
            if (gainsJourEl) {
                new Chart(gainsJourEl, {
                    type: 'line',
                    data: {
                        labels: Object.keys(gainsParJour),
                        datasets: [{
                            label: 'Marge bénéficiaire',
                            data: Object.values(gainsParJour),
                            backgroundColor: 'rgba(250, 186, 1, 0.2)',
                            borderColor: 'rgba(250, 186, 1, 1)',
                            borderWidth: 2,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let ventesParMois = @json($ventesParMois);
            let achatsParMois = @json($achatsParMois);
            let moisLabels = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov",
                "Déc"
            ];
            let ventesData = Array(12).fill(0);
            let achatsData = Array(12).fill(0);
            Object.keys(ventesParMois).forEach(mois => {
                ventesData[mois - 1] = ventesParMois[mois];
            });
            Object.keys(achatsParMois).forEach(mois => {
                achatsData[mois - 1] = achatsParMois[mois];
            });
            new Chart(document.getElementById('ventesAchatsChart'), {
                type: 'line',
                data: {
                    labels: moisLabels,
                    datasets: [{
                            label: 'Ventes',
                            data: ventesData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderWidth: 2,
                            fill: true
                        },
                        {
                            label: 'Achats',
                            data: achatsData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
    </script>
@endsection