@if (Auth()->user()->type_user != 2)
    @include('erros.404')
    @dd()
@else
    @extends('layouts.store.master')

    @section('title', 'Tableau de bord')

    @section('content')
        <div class="row">
            {{-- Revenus --}}
            @can('view_revenu_dashboard')
            <div class="col-xl-3 col-md-6 col-sm-12 mb-4">
                <div class="card">
                    <div class="card-body">
                        <span class="fw-semibold d-block mb-1">Revenus du jour</span>
                        <h3 class="card-title mb-2 text-success">
                            {{ number_format($revenus, 0, '.', ' ') }} GNF
                        </h3>
                    </div>
                </div>
            </div>
            @endcan

            {{-- Caisse --}}
            @can('view_caisse_dashboard')
            <div class="col-xl-3 col-md-6 col-sm-12 mb-4">
                <div class="card">
                    <div class="card-body">
                        <span class="fw-semibold d-block mb-1">Caisse du jour</span>
                        <h3 class="card-title mb-2 text-primary">
                            {{ number_format($caisses, 0, '.', ' ') }} GNF
                        </h3>
                    </div>
                </div>
            </div>
            @endcan

            {{-- Dépenses --}}
            @can('view_expense_dashboard')
            <div class="col-xl-3 col-md-6 col-sm-12 mb-4">
                <div class="card">
                    <div class="card-body">
                        <span class="fw-semibold d-block mb-1">Dépenses du jour</span>
                        <h3 class="card-title mb-2 text-danger">
                            {{ number_format($depenses, 0, '.', ' ') }} GNF
                        </h3>
                    </div>
                </div>
            </div>
            @endcan

            {{-- Profit --}}
            @can('view_profit_dashboard')
            <div class="col-xl-3 col-md-6 col-sm-12 mb-4">
                <div class="card">
                    <div class="card-body">
                        <span class="fw-semibold d-block mb-1">Profit du jour</span>
                        <h3 class="card-title mb-2 text-warning">
                            {{ number_format($profit, 0, '.', ' ') }} GNF
                        </h3>
                    </div>
                </div>
            </div>
            @endcan
        </div>

        <div class="row">
            <div class="col-xl-12 col-md-12 col-sm-12 mb-4">
                <div class="card mt-4">
                    <div class="card-header">
                        <h5>Ventes / Achats (7 derniers jours)</h5>
                    </div>
                    <div class="card-body">
                        <div id="venteAchatChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-md-12 col-sm-12 mb-4">
                <div class="card mt-4">
                    <div class="card-header">
                        <h5>Top produits</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            @foreach($topProducts as $product)
                                <li class="list-group-item d-flex justify-content-between">
                                    {{ $product->name }}
                                    <span class="badge bg-primary">{{ $product->total_qty }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-md-12 col-sm-12 mb-4">
                <div class="card mt-4">
                    <div class="card-header">
                        <h5>Stock faible</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Article</th>
                                    <th>Stock</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($lowStocks as $article)
                                    <tr class="text-danger">
                                        <td>{{ $article->name }}</td>
                                        <td>{{ $article->quantity }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center text-danger">Aucune alerte</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var options = {
                    chart: { type: 'line', height: 300 },
                    series: [
                        { name: 'Ventes', data: @json($ventesData) },
                        { name: 'Achats', data: @json($achatsData) }
                    ],
                    xaxis: { categories: @json($days) }
                };

                new ApexCharts(document.querySelector("#venteAchatChart"), options).render();
            });
        </script>
    @endsection
@endif