@extends('layouts.app')

@section('addhead')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection

@section('content')
    <section class="banner-hero-little mb-2 bg-blue">
        <div class="banner-content-title">
            <h5 class="text-yellow">Statistique de vente</h5>
        </div>
    </section>

    @if(Auth::user()->roles_id == 2 )
        <div class="container mb-5 mt-5">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card shadow-sm">
                        <div class="card-header bg-blue text-white">
                            <h5 align="center">Produire une Statistique de vente de produits sur une durée</h5>
                            @if (session('message'))
                                <div class="alert alert-warning" role="alert">
                                    {{ session('message') }}
                                </div>
                            @endif

                            @if (session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('success') }}
                                </div>
                            @endif <br>
                        </div>
                        <div class="card-body">  
                            <form method="POST" action="{{route('get_stat_vente_prod')}}">
                                @csrf
                                <div class="row justify-content-center">

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Date de Début</label>
                                            <input id="ddebut" type="date" class="form-control @error('ddebut') is-invalid @enderror" name="ddebut" value="{{ old('ddebut') }}" required autocomplete="ddebut">

                                            @error('ddebut')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Date de Fin</label>
                                           <input id="dfin" type="date" class="form-control @error('dfin') is-invalid @enderror" name="dfin" value="{{ old('dfin') }}"  autocomplete="dfin" autofocus>

                                            @error('dfin')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row justify-content-center mb-0">
                                    <button type="submit" class="btn btn-primary bg-yellow text-white">Produire</button>
                                </div>
                            </form>  
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(isset($ventesProd))
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="card">
                        <div class="card-header">Statistique de vente du {{date('d/m/Y', strtotime($debut))}} au  {{date('d/m/Y', strtotime($fin))}}</div>

                        <div class="card-body">
                            <div>
                              <canvas id="myChart"></canvas>
                            </div>

                            <script>
                                var products = {!! $ventesProd !!};
                                const labelsp = [];
                                const datas = [];

                                $.each(products, function(index, product) {
                                  labelsp.push(product.nom+'_'+product.day);
                                  datas.push(product.nbrvente);
                                });

                                const ctx = document.getElementById('myChart');

                                new Chart(ctx, {
                                    type: 'bar',
                                    data: {
                                    labels: labelsp,
                                    datasets: [{
                                        label: 'Ventes',
                                        data: datas,
                                        borderWidth: 1
                                    }]
                                    },
                                    options: {
                                        scales: {
                                            y: {
                                                beginAtZero: true
                                            }
                                        }
                                    }
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
@endsection