@extends('layouts.dashboard')

@section('add-css')
<style>
	.nav-wrapper {
		background: #f8f9fa;
		padding: 10px;
		border-radius: 8px;
	}
	
	.nav-pills {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	
	.nav-pills .nav-item {
		margin-right: 5px;
	}
	
	.nav-pills .nav-link {
		border-radius: 4px;
		padding: 8px 16px;
		white-space: nowrap;
	}
	
	.nav-pills .nav-link.active {
		background-color: #007bff;
	}
	
	.nav-pills .nav-link:not(.active) {
		background-color: white;
		color: #495057;
		border: 1px solid #dee2e6;
	}
	
	.nav-pills .nav-link:not(.active):hover {
		background-color: #e9ecef;
	}
</style>
@endsection

@section('title')
	Reportes
@endsection

@section('content')

<div class="card shadow-sm border-0">
	<div class="card-body p-0">
		<div class="nav-wrapper">
			<ul class="nav nav-pills" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">
						<i class="fa fa-tachometer mr-2"></i>
						TABLERO
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
						<i class="fa fa-file-text mr-2"></i>
						INFORMES
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-cuit-claves-tab" data-toggle="pill" href="#pills-cuit-claves" role="tab" aria-controls="pills-cuit-claves" aria-selected="false">
						<i class="fa fa-key mr-2"></i>
						CUIT Y CLAVES
					</a>
				</li>
			</ul>
		</div>
	</div>

	<div class="tab-content p-3" id="pills-tabContent">
		<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
			<div class="nav-wrapper mb-3">
				<ul class="nav nav-pills" id="nav-tab" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
							<i class="fa fa-chart-bar mr-2"></i>
							ESTADO LIQUIDACIONES
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">
							<i class="fa fa-file-alt mr-2"></i>
							REPORTE
						</a>
					</li>
				</ul>
			</div>
			<div class="tab-content" id="nav-tabContent">
				<div class="m-3 tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
					<estado_liquidaciones></estado_liquidaciones>
				</div>
				<div class="m-3 tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
					<reportes_tablero_excel></reportes_tablero_excel>
				</div>
			</div>
		</div>


		<div class="tab-pane fade" id="pills-cuit-claves" role="tabpanel" aria-labelledby="pills-cuit-claves-tab">
			<div class="m-3">
				@include('reportes.informes.cuit_claves.index')
			</div>
		</div>

		<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
			<div class="nav-wrapper mb-3">
				<ul class="nav nav-pills" id="nav-tab2" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" id="nav-profile-tab2" data-toggle="tab" href="#nav-informe4" role="tab" aria-controls="nav-informe4" aria-selected="false">
							<i class="fa fa-calculator mr-2"></i>
							Liquidaciones IVA
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="nav-profile-tab1" data-toggle="tab" href="#nav-informe3" role="tab" aria-controls="nav-informe3" aria-selected="false">
							<i class="fa fa-file-invoice mr-2"></i>
							Liquidaciones IIBB
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="nav-profile-tab3" data-toggle="tab" href="#nav-informe5" role="tab" aria-controls="nav-informe5" aria-selected="false">
							<i class="fa fa-calendar-check mr-2"></i>
							Obligaciones Anuales
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-informe2" role="tab" aria-controls="nav-informe2" aria-selected="false">
							<i class="fa fa-id-card mr-2"></i>
							Estado CUITs
						</a>
					</li>
				</ul>
			</div>
			<div class="tab-content" id="nav-tabContent">
				<div class="m-3 tab-pane fade show active" id="nav-informe4" role="tabpanel" aria-labelledby="nav-profile-tab">
					<liquidaciones_reporte tipo="iva"></liquidaciones_reporte>
				</div>
				<div class="m-3 tab-pane fade" id="nav-informe3" role="tabpanel" aria-labelledby="nav-profile-tab">
					<liquidaciones_reporte tipo="iibb"></liquidaciones_reporte>
				</div>

				<div class="m-3 tab-pane fade" id="nav-informe5" role="tabpanel" aria-labelledby="nav-profile-tab">
					@include('reportes.informes.obligaciones_anuales.index')
				</div>
				<div class="m-3 tab-pane fade" id="nav-informe2" role="tabpanel" aria-labelledby="nav-profile-tab">
					@include('reportes.informes.control_cuits.index')
				</div>
			</div>
		</div>
	</div>
</div>


@endsection

@section('links')

@endsection


@section('add-js')

{{-- validador.js (form de proyección ganancias) estaba incluido acá por error:
     usa tooltipster —no cargado en esta página— y apunta a #FormProyecGanancias /
     #anio, que no existen en Reportes → tiraba "tooltipster is not a function". --}}

@endsection