@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
	#accordion-ingresos.accordion.accordion-bordered .card .card-header a:before{
		color: #00c88b !important;
	}
	.bootstrap-touchspin-up {
		background-color: #00c88b !important;
		border-color: #00c88b !important;
	}

	.bootstrap-touchspin-down {
		background-color: #67666a !important;
		border-color: #67666a !important;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice,
	.select2-selection__choice__remove {
		background-color: #00c88b !important;
		border: 1px solid #00c88b !important;
		font-family: 'Poppins';
		font-weight: 400;
		font-size: 13px;
		color: #fff !important;
		margin-bottom: 5px;
	}

	.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before{
		background: #00c88b !important;
		border-width: 0 !important;
		border: solid #00c88b !important;
		border-color: #00c88b !important;
	}
	.form-check-primary.form-check label input[type="checkbox"] + .input-helper:before, .form-check-primary.form-check label input[type="radio"] + .input-helper:before{
		border-color: #00c88b !important;
	}
	.daterangepicker .ranges li.active{
		background: #00c88b !important;
	}
	.daterangepicker td.in-range{
		background: #00c88c38;
	}
	.daterangepicker td.active, .daterangepicker td.active:hover{
		background: #00c88b;
	}
	.btnArrow{
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    #daterange{
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
</style>
@endsection

@section('content')
<div class="page-header">
	<h3 class="page-title text-uppercase">
		<span class="page-title-icon bg-gradient-primary_local text-white mr-2">
			<i class="mdi mdi-wrench menu-icon"></i>
		</span> gastos administrativos </h3>
	<nav aria-label="breadcrumb">
		<ul class="breadcrumb text-uppercase">
			<li class="breadcrumb-item active" aria-current="page">
				<span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
			</li>
		</ul>
	</nav>
</div>

<div class="row">
	<div class="col-12 grid-margin">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title text-uppercase">balance</h4>
				<div class="row">
					<div class="col-sm-4"></div>
					<div class="col-sm-4 text-center">
						<h1>TOTAL</h1>
						<h1 id="txtTotal" class="text-{{ ($total >= 0 ? 'success' : 'danger') }}">${{ number_format($total,2) }}</h1>
					</div>
					<div class="col-sm-4 text-right">
                        <div class="btn-group w-100">
                            <button class="btnArrow" data-tipo="anterior"> < </button>
                            <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{ $inicio_mes.' / '.$fin_mes }}" />
                            <button class="btnArrow" data-tipo="siguiente"> > </button>
						</div>
						<br />
						<br />
						<a id="btnDescargarPDF" class="btn btn-gradient-primary_local btn-xs" href="{!! url('/') !!}/ventas/corte/caja/nuevo/{{ $inicio_mes.' / '.$fin_mes }}">
						<i class="mdi mdi-file-pdf-box"></i> descargar</a>
                    </div>
				</div>
				<div class="row">
					<div class="card-col col-6">
						<div class="card-body">
						<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
							<i class="mdi mdi-arrow-up-bold text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
							<div class="wrapper text-center text-sm-left">
							<p class="card-text mb-0">Ingresos</p>
							<div class="fluid-container">
								<h3 id="cantidad_ingresos" class="mb-0 font-weight-medium">${{ number_format($cantidad_ingresos,2) }}</h3>
							</div>
							</div>
						</div>
						</div>
					</div>
					<div class="card-col col-6">
						<div class="card-body">
						<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
							<i class="mdi mdi-arrow-down-bold text-danger mr-0 mr-sm-4 icon-lg"></i>
							<div class="wrapper text-center text-sm-left">
							<p class="card-text mb-0">Egresos</p>
							<div class="fluid-container">
								<h3 id="cantidad_egresos" class="mb-0 font-weight-medium">${{ number_format($cantidad_egresos,2) }}</h3>
							</div>
							</div>
						</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<div class="accordion accordion-bordered" id="accordion-ingresos" role="tablist">
							<div class="card">
								<div class="card-header" role="tab" id="heading-ingresos">
									<h6 class="mb-0">
									<a data-toggle="collapse" href="#collapse-ingresos" aria-expanded="false" aria-controls="collapse-ingresos" class="collapsed"> Detalle de ingresos </a>
									</h6>
								</div>
								<div id="collapse-ingresos" class="collapse" role="tabpanel" aria-labelledby="heading-ingresos" data-parent="#accordion-ingresos" style="">
									<div class="card-body">
										<div class="row">
											<div class="col-12" id="list_ingresos">
												@if(count($ingresos) > 0)
												<ul>
														@foreach ($ingresos as $ingreso)
															@if($ingreso->concepto == "Cobro de membresía")
																<li>{{ $ingreso->concepto }}: ${{ number_format($ingreso->importe,2) }} <br /> Socio: {{ $ingreso->eliminado_por->name.' '.$ingreso->eliminado_por->a_paterno }}</li>
															@else
																<li>{{ $ingreso->concepto }}: ${{ number_format($ingreso->importe,2) }}</li>
															@endif
														@endforeach
												</ul>
												@else
												<h1>Sin ingresos</h1>
												@endif
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="accordion accordion-bordered" id="accordion-egresos" role="tablist">
							<div class="card">
								<div class="card-header" role="tab" id="heading-egresos">
									<h6 class="mb-0">
									<a data-toggle="collapse" href="#collapse-egresos" aria-expanded="false" aria-controls="collapse-egresos" class="collapsed"> Detalle de egresos </a>
									</h6>
								</div>
								<div id="collapse-egresos" class="collapse" role="tabpanel" aria-labelledby="heading-egresos" data-parent="#accordion-egresos" style="">
									<div class="card-body">
										<div class="row">
											<div class="col-12" id="list_egresos">
											@if(count($egresos) > 0)
											<ul>
                                                @foreach ($egresos as $egreso)
                                                @if($egreso->concepto == "Ingreso de membresía")
                                                <li>{{ $egreso->concepto }}: ${{ number_format($egreso->importe,2) }} <br /> Socio: {{ $egreso->eliminado_por->name.' '.$egreso->eliminado_por->a_paterno }}</li>
                                                @else
                                                <li>{{ $egreso->concepto }}: ${{ number_format($egreso->importe,2) }} @if($egreso->status == "inactivo") <br /> Eliminado por: {{ $egreso->eliminado_por->name.' '.$egreso->eliminado_por->a_paterno.' '.$egreso->eliminado_por->a_materno }} @endif</li>
                                                @endif
												@endforeach
											</ul>
											@else
											<h1>Sin egresos</h1>
											@endif
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="md-overlay"></div>
@endsection

@section('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>
<script>
	$(function() {
		var inicio = "{{ $inicio_mes}}";
		var fin = "{{ $fin_mes}}";
		$('#daterange').daterangepicker({
			"cancelButtonClasses": "btn btn-secondary",
			"applyButtonClasses" : "btn btn-primary_local",
			ranges: {
				'Hoy': [moment(), moment()],
				'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
				'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
				'Este mes': [moment().startOf('month'), moment().endOf('month')],
				'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			"alwaysShowCalendars": true,
			"startDate": inicio,
			"endDate": fin,
			"opens": "center",
			"locale": {
				"format": "DD-MMM-YYYY",
				"separator": " / ",
				"applyLabel": "Aplicar",
				"cancelLabel": "Cancelar",
				"fromLabel": "Desde",
				"toLabel": "Hasta",
				"customRangeLabel": "Personalizado",
				"weekLabel": "W",
				"daysOfWeek": [
					"Do",
					"Lu",
					"Ma",
					"Mie",
					"Jue",
					"Vie",
					"Sa"
				],
				"monthNames": [
					"Enero",
					"Febrero",
					"Marzo",
					"Abril",
					"Mayo",
					"Junio",
					"Julio",
					"Agosto",
					"Septiembre",
					"Octubre",
					"Noviembre",
					"Diciembre"
				],
				"firstDay": 1
			},
		});

	});
	$(".btnArrow").click(function(){
		$.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
			$('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);
			actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

	// $("#daterange").change(function(){
	function actualizarDatos(){
        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_balance/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);
            $("#txtTotal").text("$"+datos.total);
            $("#txtTotal").removeClass('text-danger').removeClass('text-success').addClass('text-'+datos.class);

			if(datos.ingresos.length == 0)
			{
				$("#list_ingresos").html('<h1>Sin ingresos</h1>');
			}else{
				$("#list_ingresos").html('<ul>');
				datos.ingresos.forEach(element => {
					$("#list_ingresos").append('<li>'+element.concepto+': $'+element.importe_custom+'</li>');
				});
				$("#list_ingresos").append('</ul>');
			}

			if(datos.egresos.length == 0)
			{
				$("#list_egresos").html('<h1>Sin egresos</h1>');
			}else{
				$("#list_egresos").html('<ul>');
				datos.egresos.forEach(element => {
					var html_eliminado = '';
					if(element.status == "inactivo"){
						html_eliminado = '<br /> Eliminado por: '+element.eliminado_por_nombre;
					}
					$("#list_egresos").append('<li>'+element.concepto+': $'+element.importe_custom+html_eliminado+'</li>');
				});
				$("#list_egresos").append('</ul>');
			}

			$("#cantidad_ingresos").text('$'+datos.cantidad_ingresos);
			$("#cantidad_egresos").text('$'+datos.cantidad_egresos);
			$("#btnDescargarPDF").attr('href',url_dinamica+'/ventas/corte/caja/nuevo/'+fecha_inicio+'/'+fecha_final);
        })
        .fail(function(error) {
            console.log('error',error);
        });
	}

	$('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });
</script>
@endsection