@extends('layout.app')
@vite(['resources/css/orders/orders.css','resources/css/insights/insights.css',
       'resources/css/dashboard/dashboard.css','resources/js/insights/chart.js'])
@section('content')
    @include('includes/sidebar')
    <div class="vh-100">
        <div class="container-fluid  d-flex justify-content-center align-items-center">
            <div class="content">
        @include('includes.insights')
                <div class="d-flex justify-content-between mb-3">
                    @include('includes.title', ['title' => 'Charte Graphique'])
                    <a href="{{route('orders.export')}}" class="btn excel-btn d-flex align-items-center"><img
                            src="{{asset('icons/excel-svgrepo-com.svg')}}" class="me-1" alt="excel">
                        <span class="orders-exp-text"> Exporter les commandes</span>
                    </a>
                </div>
                <div class="row">
                <div class="col-md-4 ">
                    <select name="provider" id="providers" class="form-select">
                        <option disabled>Choisir un prestataire</option>
                        <option value="all">Tous</option>
                        <option value="jumia">Jumia</option>
                        <option value="Animal Market">Animal Market</option>
                        <option value="Marjane Mall">Marjane Mall</option>
                    </select>
                </div>
                    <div class="col-md-4">
                        <select name="date" id="date" class="form-select">
                            <option value="">Sélectionner une année</option>
                            @php
                                $currentYear = date('Y');
                                $startYear = 2024;
                            @endphp
                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                <option value="{{ $year }}">{{ $year }}</option>
                            @endfor
                        </select>
                    </div>

                </div>
                    <div class="d-flex justify-content-center align-items-center mt-5">
                        <canvas id="myChart"></canvas>
                </div>

            </div>

        </div>

    </div>

    <script>
        const providerInsightsAjaxUrl = "{{route('insights.providers.ajax')}}";
        const providersInsightsAjaxUrl = "{{route('insights.all.providers.ajax')}}";
        const insightsIndex = "{{route('insights.index')}}";

    </script>
@endsection