@extends('layouts.app')

@section('style')

		<!-- Internal Chart-Morris css-->
        <link href="{{URL::asset('assets/plugins/morris.js/morris.css')}}" rel="stylesheet">

		<!-- Internal Nice-select css  -->
		<link href="{{URL::asset('assets/plugins/jquery-nice-select/css/nice-select.css')}}" rel="stylesheet"/>

		<!-- Internal News-Ticker css-->
		<link href="{{URL::asset('assets/plugins/flag-icon-css/css/flag-icon.min.css')}}" rel="stylesheet">

		<!-- Jquery-countdown css-->
		<link href="{{URL::asset('assets/plugins/jquery-countdown/countdown.css')}}" rel="stylesheet">

		<!-- Internal News-Ticker css-->
        <link href="{{URL::asset('assets/plugins/newsticker/jquery.jConveyorTicker.css')}}" rel="stylesheet" />

@endsection

@section('content')
                <div class="text-center">
                    <h3 class="content-title mb-2 mt-4 pb-2 titulo-principal">Te damos la bienvenida a Quiubole con el SAT</h3>
                    <p class="text-muted mb-0">Lleva el control de tus impuestos.</p>
                </div>
                <div class="row mt-3 mb-4 justify-space-between">
					<div class="col-md-3 text-center">
						<button class="btn btn-primary mt-2 mt-xl-0 font-700" style="width: 250px;">Emite tu primer factura</button>
					</div>
					<div class="col-md-3 text-center">
						<button class="btn btn-primary mt-2 mt-xl-0 font-700" style="width: 250px;">Inicia tu contabilidad</button>
					</div>
					<div class="col-md-3 text-center">
						<button class="btn btn-primary mt-2 mt-xl-0 font-700" style="width: 250px;">¿Cumples con tus impuestos?</button>
					</div>
					<div class="col-md-3 text-center">
						<button class="btn btn-primary mt-2 mt-xl-0 font-700" style="width: 250px;">Planes</button>
					</div>
                </div>
				<div class="row mt-3 mb-4">
					<div class="col-md-6" style="display: flex;flex-direction: column;">
						<div class=" btn-primary text-center py-3">
							<h4 class="mb-0">Ingresos - Principales clientes</h4>
						</div>
						<div class="card mg-b-md-20" style="height: 100%;">
							<div class="card-body">
								<div class="main-content-label mg-b-5">
									Periodo: Enero - Febrero 2021
								</div>
								<div class="text-center">
									<img src="{{URL::asset('assets/img/trimestral3_audiov.png')}}">
								</div>
								<!--<p class="mg-b-20">Basic Charts Of Xino Template.</p>-->
								<!--<div class="morris-donut-wrapper-demo" id="morrisDonut1"></div>-->
							</div>
						</div>
					</div>
					<div class="col-md-6" style="min-height: 100%">
						<div class=" btn-primary text-center py-3">
							<h4 class="mb-0">Ingresos vs Gastos</h4>
						</div>
						<div class="card mg-b-md-20">
							<div class="card-body">
								<div class="table-responsive">
									<table class="table text-md-nowrap" id="example1">
										<thead>
											<tr>
												<th class="wd-15p border-bottom-0">Facturados</th>
												<th class="wd-15p border-bottom-0">Pagados</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>$ 1,500.00</td>
												<td>$ 700.00</td>
											</tr>
											<tr>
												<td>$ 2,800.00</td>
												<td>$ 450.00</td>
											</tr>
											<tr>
												<td>$ 2,500.00</td>
												<td>$ 720.00</td>
											</tr>
											<tr>
												<td>$ 7,100.00</td>
												<td>$ 1,450.00</td>
											</tr>
											<tr>
												<td>$ 3,800.00</td>
												<td>$ 940.00</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="text-center">
									<img src="{{URL::asset('assets/img/trimestral3_audiov.png')}}">
								</div>
							</div>
						</div>
					</div>
                </div>
@endsection

@section('script')

		<!-- Datepicker js -->
        <script src="{{URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js')}}"></script>

		<!--Chart bundle min js -->
		<script src="{{URL::asset('assets/plugins/chart.js/Chart.bundle.min.js')}}"></script>
		<script src="{{URL::asset('assets/plugins/raphael/raphael.min.js')}}"></script>
		<script src="{{URL::asset('assets/plugins/peity/jquery.peity.min.js')}}"></script>

		<!-- JQuery sparkline js -->
		<script src="{{URL::asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"></script>

		<!-- Sampledata js -->
		<script src="{{URL::asset('assets/js/chart.flot.sampledata.js')}}"></script>

		<!-- Perfect-scrollbar js -->
		<script src="{{URL::asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js')}}"></script>
		<script src="{{URL::asset('assets/plugins/perfect-scrollbar/p-scroll.js')}}"></script>

		<!-- Internal  Flot js-->
		<script src="{{URL::asset('assets/plugins/jquery.flot/jquery.flot.js')}}"></script>
		<script src="{{URL::asset('assets/plugins/jquery.flot/jquery.flot.pie.js')}}"></script>
		<script src="{{URL::asset('assets/plugins/jquery.flot/jquery.flot.categories.js')}}"></script>
		<script src="{{URL::asset('assets/js/dashboard.sampledata.js')}}"></script>
		<script src="{{URL::asset('assets/js/chart.flot.sampledata.js')}}"></script>

		<!-- Internal Newsticker js-->
		<script src="{{URL::asset('assets/plugins/newsticker/jquery.jConveyorTicker.js')}}"></script>
        <script src="{{URL::asset('assets/js/newsticker.js')}}"></script>

		<!-- Internal Nice-select js-->
		<script src="{{URL::asset('assets/plugins/jquery-nice-select/js/jquery.nice-select.js')}}"></script>
        <script src="{{URL::asset('assets/plugins/jquery-nice-select/js/nice-select.js')}}"></script>

		<!-- index js -->
		<script src="{{URL::asset('assets/js/dashboard.js')}}"></script>
		

@endsection