@extends('layout.master')
@section('title', __('metatags.quote-result.title'))
@section('meta-title', __('metatags.quote-result.title'))
@section('description', __('metatags.quote-result.description'))
@section('image', asset('/images/thumbnail-'.App::getLocale().'.jpg') )

@section('content')
	@include('layout.nav_black')

	<header class="quotecalculator" data-id="inicio">
	  <div class="container">
		<div class="row text-left pt-5 mt-5">
			<div class="col-12 text-center mb-5">
				<h1 class="mb-0 d-none">¡Listo! Esta es tu inversión:</strong></h1>
					<h2 class="mb-0">¡Listo! Esta es tu inversión:</h2>
					<p class="display-1 text-success font-weight-bold mb-0">$18,000.00</p>
					<p class="font-weight-bold">Total annual cost-full tax</p>
			</div>
			<div class="col-md-6 mb-5 align-self-center">
				<div id="chart"></div>
			</div>
			<div class="col-12 col-sm-12 offset-sm-0 col-lg-4 px-md-0 mx-auto align-self-center">
				<table class="table table-border-bottom">
					<tbody>
						<tr>
						  <th scope="row">Salario bruto</th>
						  <td>$12,670.95</td>
						</tr>
						<tr>
						  <th scope="row">Salario neto mensual</th>
						  <td>$10,444.61</td>
						</tr>
						<tr>
						  <th scope="row">Impuestos empleado</th>
						  <td>$2,318.37</td>
						</tr>
						<tr>
						  <th scope="row">Prestaciones</th>
						  <td>$781.51</td>
						</tr>
						<tr>
						  <th scope="row">Impuestos patronales</th>
						  <td>$2,819.14</td>
						</tr>
						<tr>
						  <th scope="row">Comisiones</th>
						  <td>$1,636.36</td>
						</tr>
						<tr>
						  <th scope="row">Total annual cost-full tax</th>
						  <td>$18,000.00</td>
						</tr>
						<tr>
						  <th scope="row">Current exchange rate</th>
						  <td>$18.50</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="col-12 text-center mb-5">
				<a href="{{ route(App::getLocale().'.quote') }}" class="btn btn-white btn-medium border">Cambiar valores</a>
				<a href="" class="btn btn-yellow btn-medium">Iniciemos tu proceso</a>
			</div>
		</div> 
	</header>
@include('contact')
@endsection

@push('styles')
<style>
	.table.table-border-bottom th, 
	.table.table-border-bottom td{
		font-size: 1.6rem;
		border-top: transparent;
		border-bottom: 1px solid #585858!important;
	}

	.table.table-border-bottom tr:hover{
		background-color: #FCCD20;
	}
</style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
/*	var options = {
		chart: {
			type: 'donut'
		},
		series: [44, 55, 13, 33],
		labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
	}*/

	var options = {
		chart: {
		  type: 'donut',
		},
		series: [44, 55, 41, 17, 15],
		labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
		legend: {
		  show: false
		},

		plotOptions: {
		  pie: {
			dataLabels: {
			  name: {
				show: false
			  },
			  value: {
				show: false
			  }
			}
		  }
		}
	}


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

chart.render();
</script>
@endpush