@extends('layouts.admins.fornecedor')

@section('content')

<style type="text/css">
<?php for($i = 0; $i<=100; $i++){
	echo '.boxe .line .bar i.porcent-'. $i . '{ width: '. $i .'%; }';
}
?>
</style>

<div class="content-wrapper">
	<div class="content v2 list-admin forn-page">
		<div class="box topo-fornecedor">
			<div class="left">
				<figure>
					<img src="img/site/fornecedor-parceiro.png" alt="Miolo">
				</figure>
				<div class="titulo-forn">
					<h3>Vinícola Miolo</h3>
					<img src="img/site/fornecedor-top-3.svg" alt="Miolo">
				</div>
				<div class="kpis-list">
					<div class="kpi">
						<span>Visualizações</span>
						<strong>274.598</strong>
					</div>
					<div class="kpi">
						<span>Garrafas vendidas</span>
						<strong>457</strong>
					</div>
					<div class="kpi">
						<span>Faturamento</span>
						<strong>R$ 53.728,82</strong>
					</div>
				</div>
			</div>
			<div class="right-btns">
				<a href="#" class="main-btn-style"><img src="img/plus_admin.png" alt="Adicionar"> Cadastrar produto</a>
				<a href="#" class="main-btn-style"><img src="img/plus_admin.png" alt="Adicionar"> Enviar amostra</a>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="box proxima-venda">
					<div class="flex-proxima">
						<div class="l-proxima">
							<div class="box-header with-border">
								<h3 class="box-title">Próxima venda na plataforma</h3>
							</div>
							<div class="kpis">
								<div class="kpi">
									<span>Data da venda</span>
									<strong>14/11/2020</strong>
								</div>
								<div class="kpi">
									<span>Qtde. disponível</span>
									<strong>248</strong>
								</div>
							</div>
						</div>
						<div class="r-proxima">
							<img src="img/site/vinho-parceiros.png" alt="Alcohuaz GRUS 2018">
							<strong class="title">Alcohuaz</strong>
							<span class="subtitle">GRUS 2018</span>
							<span class="price">R$ <strong>250</strong>,00</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box fraude-box aprovacao">
					<div class="flex-fraudes">
						<div class="l-fraudes">
							<div class="box-header with-border">
								<h3 class="box-title">Aprovação de amostras</h3>
							</div>
							<div class="kpis">
								<div class="kpi">
									<span>Enviadas</span>
									<span id="amostras-enviadas"><strong>25</strong></span>
								</div>
								<div class="kpi">
									<span>Aprovadas</span>
									<span id="amostras-aprovadas"><strong>20</strong></span>
								</div>
							</div>
						</div>
						<div class="r-fraudes">
							<span>% aprovação</span>
							<div id="semi-circle" style="width:170px; height:170px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="box box-de-tabela">
					<div class="box-header with-border">
						<h3 class="box-title">Idade e gênero</h3>
					</div>

					<div class="kpis-genero">
						<div class="kpi masculino">
							<span>Masculino</span>
							<strong><small>878</small> 28%</strong>
						</div>
						<div class="kpi feminino">
							<span>Feminino</span>
							<strong>72% <small>17.105</small></strong>
						</div>
					</div>

					<div id="age-gender"></div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box box-de-tabela">
					<div class="box-header with-border">
						<h3 class="box-title">Regiões mais vendidas</h3>
					</div>

					<div class="boxe">
						<div class="line first">
							<span class="size-1">Nome</span>
							<span class="size-2 invert">Garrafas</span>
							<span class="size-2 invert">Faturamento</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#1</strong> São Paulo</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-58"></i></div>154</span>
							<span class="size-2 invert">R$ 24.564,24</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#2</strong> Rio Grande do Sul</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-21"></i></div>126</span>
							<span class="size-2 invert">R$ 21.486,25</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#3</strong> Espírito Santo</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-12"></i></div>98</span>
							<span class="size-2 invert">R$ 12.457,89</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#4</strong> Rio de Janeiro</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-6"></i></div>64</span>
							<span class="size-2 invert">R$ 6.487,24</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#5</strong> Santa Catarina</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-3"></i></div>15</span>
							<span class="size-2 invert">R$ 1.547,25</span>
						</div>
					</div>

					<a href="#" class="btn-final">Ver produtos</a>
				</div>
			</div>
		</div>

		<div class="box tipos">
			<div class="item tinto">
				<img src="img/icones_svg/tipos/tinto.svg" alt="Vinho tinto">
				<h3>Vinho tinto</h3>
				<span><strong>245</strong> vendidos</span>
			</div>
			<div class="item branco">
				<img src="img/icones_svg/tipos/branco.svg" alt="Vinho branco">
				<h3>Vinho branco</h3>
				<span><strong>115</strong> vendidos</span>
			</div>
			<div class="item rose">
				<img src="img/icones_svg/tipos/rose.svg" alt="Vinho rosé">
				<h3>Vinho rosé</h3>
				<span><strong>68</strong> vendidos</span>
			</div>
			<div class="item espumante">
				<img src="img/icones_svg/tipos/espumante.svg" alt="Espumante">
				<h3>Espumante</h3>
				<span><strong>29</strong> vendidos</span>
			</div>
			<div class="item laranja">
				<img src="img/icones_svg/tipos/laranja.svg" alt="Vinho Laranja">
				<h3>Vinho Laranja</h3>
				<span><strong>0</strong> vendidos</span>
			</div>
			<div class="item licoroso">
				<img src="img/icones_svg/tipos/licoroso.svg" alt="Vinho licoroso">
				<h3>Vinho licoroso</h3>
				<span><strong>0</strong> vendidos</span>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="box box-de-tabela">
					<div class="box-header with-border">
						<h3 class="box-title">Produtos mais vendidos</h3>
					</div>

					<div class="boxe">
						<div class="line first">
							<span class="size-1">Nome</span>
							<span class="size-2 invert">Garrafas</span>
							<span class="size-2 invert">Faturamento</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#1</strong> Rocca Delle Macìe Rubizzo 2018</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-58"></i></div>154</span>
							<span class="size-2 invert">R$ 24.564,24</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#2</strong> Don Abel Merlot Reserva 2014</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-21"></i></div>126</span>
							<span class="size-2 invert">R$ 21.486,25</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#3</strong> Colomé Estate Malbec 2017</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-12"></i></div>98</span>
							<span class="size-2 invert">R$ 12.457,89</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#4</strong> Casa Valduga Identidade Terroir Arinarnoa</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-6"></i></div>64</span>
							<span class="size-2 invert">R$ 6.487,24</span>
						</div>
						<div class="line">
							<span class="size-1"><strong>#5</strong> Château Haut-Myles Cru Bourgeois 2015</span>
							<span class="size-2 invert"><div class="bar"><i class="porcent-3"></i></div>15</span>
							<span class="size-2 invert">R$ 1.547,25</span>
						</div>
					</div>

					<a href="#" class="btn-final">Ver produtos</a>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box box-de-tabela">
					<div class="box-header with-border">
						<h3 class="box-title">Amostras pendentes</h3>
					</div>

					<div class="boxe">
						<div class="line first">
							<span class="size-4">Nome</span>
							<span class="size-3">Status</span>
							<span class="size-5">Ação</span>
						</div>
						<div class="line">
							<span class="size-4">Le Casine Montepulciano D'Abruzzo 2017</span>
							<span class="size-3">Em avaliação</span>
							<span class="size-5"><a href="#">Acompanhar</a></span>
						</div>
						<div class="line">
							<span class="size-4">Abadal Lafou El Sender 2016</span>
							<span class="size-3">Em avaliação</span>
							<span class="size-5"><a href="#">Acompanhar</a></span>
						</div>
						<div class="line">
							<span class="size-4">Hiedler Grüner Veltliner Löss 2018</span>
							<span class="size-3">Enviando</span>
							<span class="size-5"><a href="#">Acompanhar</a></span>
						</div>
						<div class="line">
							<span class="size-4">Las Moras Cabernet Sauvignon Barrel Selection 2018 Premium</span>
							<span class="size-3">Aguardando envio</span>
							<span class="size-5"><a href="#">Acompanhar</a></span>
						</div>
						<div class="line">
							<span class="size-4">Vaglio Chango Red Blend 2017</span>
							<span class="size-3">Aguardando envio</span>
							<span class="size-5"><a href="#">Acompanhar</a></span>
						</div>
					</div>

					<a href="#" class="btn-final">Ver produtos</a>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="box graph-box">
					<div class="box-header with-border">
						<h3 class="box-title">Estoque e vendas</h3>
					</div>
					<div id="estoque-vendas"></div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="box graph-box">
					<div class="box-header with-border">
						<h3 class="box-title">Distribuição de vendas nos últimos 12 meses</h3>
					</div>
					<div id="vendas-ano"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(document).on('ready', function(){
		/** Gráfico aprovação de amostras */
		chartSemiCircle = Highcharts.chart('semi-circle', {
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: 0,
				plotShadow: false
			},
			title: {
				text: '75%',
				align: 'center',
				verticalAlign: 'middle',
				y: 36,
				style: {
					color: '#555',
					fontFamily: 'Montserrat',
					fonstSize: '14px',
					fontWeight: '600'
				}
			},
			tooltip: {
				enabled: false
			},
			plotOptions: {
				pie: {
					dataLabels: {
						enabled: false
					},
					colors: ['#8F97B1', '#DDDDDD'],
					startAngle: -90,
					endAngle: 90,
					center: ['50%', '75%'],
					size: '110%',
					borderWidth: 0,
					states: {
						hover: {
							enabled: false,
							brightness: 1,
							halo: null,
						},
						inactive: {
							opacity: 1
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: 'Browser share',
				innerSize: '50%',
				data: [
					['Aprovados', 75],
					['Não aprovados', 25]
				]
			}]
		});

		/** Gráfico estoque e vendas */
		Highcharts.chart('estoque-vendas', {
			title: '',
			chart: {
				type: 'column',
				height: 240
			},
			xAxis: {
				categories: [
					'Rocca Delle Macie Rubizzo 2018',
					'Don Abel Merlot Reserva 2014',
					'Colomé Estate Malbec 2017',
					'Casa Valduga Identidade Terroir Arinarnoa'
				],
				labels: {
					formatter: function() {
						return this.value.slice(0, 15) + '...';
					}
				}
			},
			yAxis: [{
				min: 0,
				title: {
					text: ''
				}
			}],
			legend: {
				shadow: false,
				align: 'left',
				verticalAlign: 'top',
				itemMarginBottom: 15,
				x: -15,
				margin: 30,
				itemStyle: {
					color: '#555'
				}
			},
			tooltip: {
				shared: true
			},
			plotOptions: {
				column: {
					grouping: false,
					shadow: false,
					borderWidth: 0,
					pointPlacement: 'on'
				}
			},
			series: [{
				name: 'Disponibilizados',
				color: 'rgba(233,234,239,1)',
				data: [145, 435, 324, 178],
				pointPadding: 0.2,
				pointPlacement: 0
			}, {
				name: 'Vendidos',
				color: 'rgba(143,151,177,1)',
				data: [121, 125, 314, 162],
				pointPadding: 0.3,
				pointPlacement: 0
			}]
		});

		/** Gráfico vendas ano */
		Highcharts.chart('vendas-ano', {
			title: '',
			chart: {
				zoomType: 'xy',
				height: 240
			},
			xAxis: {
				categories: [
					'Jul',
					'Ago',
					'Set',
					'Out',
					'Nov',
					'Dez',
					'Jan',
					'Fev',
					'Mar',
					'Abr',
					'Mai',
					'Jun',
				],
				crosshair: true
			},
			yAxis: [{
				min: 0,
				title: {
					text: ''
				}
			}, {
				min: 0,
				labels: {
					format: 'R$ {value}k',
				},
				title: {
					text: ''
				},
				opposite: true
			}],
			legend: {
				shadow: false,
				align: 'left',
				verticalAlign: 'top',
				itemMarginBottom: 15,
				x: -15,
				margin: 30,
				itemStyle: {
					color: '#555'
				}
			},
			tooltip: {
				shared: true
			},
			plotOptions: {
				column: {
					grouping: false,
					shadow: false,
					borderWidth: 0,
					pointPlacement: 'on'
				}
			},
			series: [{
				name: 'Garrafas vendidas',
				yAxis: 1,
				type: 'column',
				color: 'rgba(224,167,54,1)',
				data: [145, 35, 324, 142, 187, 56, 287, 24, 78, 188, 37],
				pointPadding: 0,
				pointPlacement: 0
			}, {
				name: 'Faturamento',
				color: 'rgba(143,151,177,1)',
				type: 'spline',
				data: [118.2, 148.6, 349.3, 118.1, 199, 59.7, 100.4, 50.3, 20.23, 68.87, 59.2],
				pointPadding: 0,
				pointPlacement: 0,
				tooltip: {
					valueSuffix: 'k',
					valuePrefix: 'R$ ',
				}
			}]
		});

		/** Idade e genero */
		var categories = [
			'18-20', '21-24', '25-29', '30-34', '35-39', '40-44',
			'45-49', '50-54', '55-59', '60-64', '65-69',
			'70-74', '75-79', '80+'
		];

		Highcharts.chart('age-gender', {
			chart: {
				type: 'bar',
				height: 230
			},
			title: {
				text: ''
			},
			accessibility: {
				point: {
					valueDescriptionFormat: '{index}. Idade {xDescription}, {value}%.'
				}
			},
			xAxis: [{
				categories: categories,
				reversed: false,
				labels: {
					step: 1
				},
				accessibility: {
					description: 'Idade (masculino)'
				}
			}, { 
				opposite: true,
				reversed: false,
				categories: categories,
				linkedTo: 0,
				labels: {
					step: 1
				},
				accessibility: {
					description: 'Idade (feminino)'
				}
			}],
			yAxis: {
				title: {
					text: null
				},
				labels: {
					formatter: function () {
						return Math.abs(this.value) + '%';
					}
				},
				accessibility: {
					description: 'Porcentagem',
					rangeDescription: 'Intervalo: 0 a 5%'
				}
			},

			plotOptions: {
				series: {
					stacking: 'normal'
				}
			},

			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + ', idade ' + this.point.category + '</b><br/>' +
						'Público: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1) + '%';
				}
			},

			legend: {
				enabled: false,
			},

			series: [{
				name: 'Masculino',
				color: 'rgba(224,88,63,1)',
				data: [
					-3.2,
					-2.9, -3.5, -4.4, -4.1,
					-3.4, -2.7, -2.3, -2.2,
					-1.6, -0.6, -0.3, -0.0,
					-0.0
				]
			}, {
				name: 'Feminino',
				color: 'rgba(143,151,177,1)',
				data: [
					3.1, 2.9, 3.4,
					4.3, 4.0, 3.5, 2.9, 2.5,
					2.7, 2.2, 1.1, 0.6, 0.2,
					0.0
				]
			}]
		});
	});
</script>

@endsection