@extends('layouts.app')

@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">   
@endpush

@section('content')


<div class="page-info">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ url('/suppliers'); }}">Listado de proveedores</a></li>
            <li class="breadcrumb-item active" aria-current="page">Estadisticas Proveedor</li>
        </ol>
    </nav>
    <div class="page-options">
        
    </div>
</div>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Estadisticas Proveedor</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="main-wrapper">
        <div class="row">
            <div class="col">

				@include('adminlte-templates::common.errors')

				<div class="card">
					<div class="card-body">
						<h2 class="card-title">{{ $supplier->company }}</h2>
						<h5 class="card-title">Generales</h5>
						<div class="row">
							@include('supplier_evaluations.table')
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-body">
						<h5 class="card-title">Graficas</h5>
						<div class="row">
							@include('suppliers.charts')
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('page_scripts')

	<script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    
	
    <script>
		const calidad_collect =  {{ $calidad_collect }}; 
		const logistica_collect =  {{ $logistica_collect }}; 
		const sgc_collect =  {{ $sgc_collect }}; 
		const fechas_collect =  {{ $fechas_collect }};



function timeConverter(fechas_collect){
	let labels = [];
	for (let index = 0; index < fechas_collect.length; index++) {
		labels.push(moment.unix(fechas_collect[index]).format("MM/YYYY"));	
	}
	
	return labels
}



		$(document).ready(function() {
    
			"use strict";

			let labels = timeConverter(fechas_collect);

			$('.select_tow').select2();

			var options = {
							series: [{
								name: "Calidad",
								data: calidad_collect
							},{
								name: "Logística",
								data: logistica_collect
							},{
								name: "SGC",
								data: sgc_collect
							}],
							chart: {
								height: 350,
								type: 'line',
								zoom: {
									enabled: false
								}
							},
							dataLabels: {
								enabled: false
							},
							stroke: {
								curve: 'straight'
							},
							title: {
								text: 'Product Trends by Month',
								align: 'left'
							},
							grid: {
								row: {
									colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
									opacity: 0.5
								},
							},
							xaxis: {
								categories: labels,
							}
						};


				var chart = new ApexCharts(document.querySelector("#chart"), options);
				chart.render();
			

		});

    </script>

@endpush