@extends('layouts.app')
@section('content')
    @if(auth()->user()->role->name == 'Administrateur' || auth()->user()->managedMagasins->count() > 0)
        @if(session('active_store'))
            <div class="row">
                <div class="col-xl-3 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>Total des Commandes</h6>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 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 des Ventes</h6>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 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 class="col-xl-3 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</h6>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 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-3 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-3 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-3 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>
            <!-- Button trigger modal -->
            <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-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 récents</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>{{ $index + 1 }}</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>
        @else
            <div class="alert alert-info text-center">
                <p>Veuillez sélectionner un magasin dans le menu pour afficher les données.</p>
            </div>
        @endif
    @else
        <div class="alert alert-warning text-center">
            <p>Vous n'avez pas accès au tableau de bord. Veuillez contacter l'administrateur.</p>
        </div>
    @endif
   
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Données PHP converties en JSON
            let ventesParMois = @json($ventesParMois);
            let ventesParJour = @json($ventesParJour);
    
            // Graphique des ventes par mois
            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
                        }
                    }
                }
            });
    
            // Graphique des ventes par jour
            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
                        }
                    }
                }
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Récupération des données PHP
            let ventesParMois = @json($ventesParMois);
            let achatsParMois = @json($achatsParMois);

            // Labels des mois (ex: Janvier, Février, ...)
            let moisLabels = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"];

            // Normaliser les données (remplir les mois manquants avec 0)
            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];
            });

            // Création du graphique avec Chart.js
            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