@include('header')

	<style>
		.inputCheck {
			transform: scale(1.2);
			position: inherit !important;
			opacity: 1 !important;
			cursor: pointer;
		}
	</style>
	
	<section class="content">
		<div class="botoneraUser" style="float:left;">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>

		@if (isset($cant_excursiones) && $cant_excursiones > 0)
			<div class="botoneraUser" style="float:right;">
				<button class="btn bg-teal" onclick="window.location.href='../excursiones/exportar/excel/{{$viajeId}}';" title="Exportar a Excel">
					<i class="fas fa-file-excel"></i> Exportar
				</button>
			</div>

			<div class="botoneraUser" style="width: 100%;margin-bottom:0;margin-top:10px;">
				<p style="margin-bottom:10px;font-weight:bold">Cantidad de Excursiones: {{$cant_excursiones ?? '0'}}</p>
				<button class="btn btn-default dropdown-toggle" type="button" class="dropdown-item" data-toggle="modal" data-target="#modalNewExcursion" style="margin-bottom:20px;">
					<i class="fas fa-plus"></i> Nueva Excursión
				</button>
			</div>
		@endif

        <div class="container-fluid" style="margin-bottom:150px;">
            <div class="row">
                @if (isset($cant_excursiones) && $cant_excursiones > 0)
                    <table class="table table-bordered tabla-circuitos" id="tablaUsers" style="border: 0px;">
                        <thead>
                            <th style="vertical-align: middle;">Pasajero</th>
                            <th style="vertical-align: middle;">Info Extra</th>
                            @foreach ($excursiones as $excursion)
                                <th class="text-nowrap" style="text-align: center;vertical-align: middle;">
									@if ($excursion->id_moneda == 1) @php $moneda = '$'; @endphp @endif
									@if ($excursion->id_moneda == 5) @php $moneda = 'US$'; @endphp @endif
									@if ($excursion->id_moneda == 8) @php $moneda = '€'; @endphp @endif
									@if ($excursion->id_moneda == 13) @php $moneda = 'R$'; @endphp @endif
                                    {{$excursion->nombre}}<br>({{$moneda}} {{number_format($excursion->costo, 2, ',', '.')}})
                                    <i class="fa fa-edit" title="Editar" data-toggle="modal" data-target="#modalEditExcursion" onclick="loadDataEdit({{$excursion->id}},'{{$excursion->nombre}}','{{$excursion->costo}}','{{$excursion->id_moneda}}');"></i>
                                </th>
                            @endforeach
                            <th style="vertical-align: middle;">Tarifa</th>
                            <th style="vertical-align: middle;">Entregado</th>
                            <th style="vertical-align: middle;">Saldo</th>
                            <th></th>
                        </thead>
                        <tbody>
							@php
								/* $total_tarifa = 0; */
								$total_entregado = 0;
								$total_saldo = 0;
							@endphp
                            @foreach($dataTabla as $data)
                                <tr>
                                    <td style="vertical-align: middle;">{{$data['apellido'] ?? ''}}, {{$data['nombre']}} <span id="loading-{{$data['id_pasajero']}}" style="display:none;"><img src="{{asset('images/cargando.gif')}}" alt="loading" style="width: 15px;margin-left:5px;margin-top:-5px;"></span></td>
                                    <td id="infoExtra{{$data['id_reserva_info']}}" style="vertical-align: middle;">
										{{$data['infoExtra']}}
										<p id="campo-infoExtra-{{$data['id_reserva_info']}}" style="display: none;">{{$data['infoExtra'] ?? ''}}</p>
										<p id="campo-editoresInfoExtra-{{$data['id_reserva_info']}}" style="display: none;">{{$data['editoresInfoExtra'] ?? ''}}</p>
										<button class="btn btn-default dropdown-toggle" type="button" title="Editar Info Extra" class="dropdown-item" data-toggle="modal" data-target="#modalEditarInfoExtra" onclick="editarInfoExtra({{$data['id_reserva_info']}});" style="padding: 0; border: none; margin-left:2px;">
											<i class="fas fa-edit"></i>
										</button>
									</td>
                                    @php $hace_excursion = 0; @endphp
                                    @foreach ($excursiones as $excursion)
                                        <td style="text-align: center;vertical-align: middle;">
                                            @php $checked = ""; @endphp
                                            @foreach ($data['reserva_excursiones'] as $exc)
                                                @if ($exc->id == $excursion->id)
                                                    @php $checked = "checked"; $hace_excursion = 1; @endphp
                                                @endif
                                            @endforeach
                                            <input type="checkbox" {{$checked ?? ''}} class="inputCheck" value="1" id="checkbox-{{$excursion->id}}-{{$data['id_pasajero']}}" onchange="changeCheckBox({{$excursion->id}},{{$data['id_pasajero']}},'{{$excursion->costo}}','{{$data['entregado']}}');">
										</td>
                                    @endforeach
                                    <td class="text-nowrap" style="text-align: right;vertical-align: middle;">
										<span id="texto-tarifa-{{$data['id_pasajero']}}">
											@if ($hace_excursion)
												{{-- ${{number_format($data['tarifa'], 2, ',', '.')}} --}}
												{{$data['tarifa_texto'] ?? ''}}
												{{-- @php $total_tarifa = $total_tarifa + $data['tarifa']; @endphp --}}
											@else
												-
											@endif
										</span>
										<input type="text" id="tarifa-{{$data['id_pasajero']}}" value="{{$data['tarifa']}}" style="display:none;">
                                    </td>
                                    <td class="text-nowrap" style="text-align: right;vertical-align: middle;">
										<span id="texto-entregado-{{$data['id_pasajero']}}">
											@if ($hace_excursion || $data['entregado'] > 0)
												${{number_format($data['entregado'], 2, ',', '.')}}
												@if (count(explode(" + ", $data['entregado_texto'])) > 1)
													({{$data['entregado_texto'] ?? ''}})
												@endif
												@php $total_entregado = $total_entregado + $data['entregado']; @endphp
											@else
												-
											@endif
										</span>    
                                    </td>
                                    <td class="text-nowrap" style="text-align: right;vertical-align: middle;">
										<span id="texto-saldo-{{$data['id_pasajero']}}">
											@if ($hace_excursion || $data['entregado'] > 0)
												-
												{{-- ${{number_format($data['saldo'], 2, ',', '.')}} --}}
												@php $total_saldo = $total_saldo + $data['saldo']; @endphp
											@else
												-
											@endif
										</span>
                                    </td>
                                    <td style="vertical-align: middle;">
										<input type="text" id="saldo-{{$data['id_pasajero']}}" value="{{$data['saldo']}}" style="display:none">
										<div id="button-detalles-{{$data['id_pasajero']}}" @if (!($hace_excursion || $data['entregado'] > 0)) style="display:none;" @endif>
											<button class="btn btn-default dropdown-toggle" type="button" class="dropdown-item" data-toggle="modal" data-target="#modalDetalles" title="Detalles" onclick="loadDataPasajero({{$data['id_pasajero']}},{{$viajeId}},{{$data['entregado']}},'{{$data['apellido'] ?? ''}}','{{$data['nombre']}}');">
												<i class="fas fa-file-alt"></i>
											</button>
										</div>
									</td>
                                </tr>
                            @endforeach
                        </tbody>
						<tfoot>
							<tr>
								<th colspan="{{$cant_excursiones + 2}}" class="tdNoDisplay" rowspan="1" style="background-color: #e9e9e9; border: 1px solid #e9e9e9 !important;"></th>
								<th class="text-nowrap" style="font-weight: bold" rowspan="1" colspan="1">TOTAL TARIFA<br><span class="totalACobrar">{{$total_tarifa_texto ?? ''}}</span></th>
								<th class="text-nowrap" style="font-weight: bold" rowspan="1" colspan="1">
									TOTAL ENTREGADO<br>
									<span class="totalCobrado">
										${{number_format($total_entregado, 2, ',', '.')}}
										@if (count(explode(" + ", $total_entregado_texto)) > 1)
											({{$total_entregado_texto ?? ''}})
										@endif
									</span></th>
								<th class="text-nowrap" style="font-weight: bold" rowspan="1" colspan="1">TOTAL SALDO<br><span class="saldoTotal">{{-- ${{number_format($total_saldo, 2, ',', '.')}} --}}-</span></th>
								<th class="tdNoDisplay" rowspan="1" colspan="1" style="background-color: #e9e9e9; border: 1px solid #e9e9e9 !important;"></th>
							</tr>
						</tfoot>
                    </table>
                @else
                    <div style="text-align: center;display: inline-block;width: 100%;margin-top: 25px;">
                        <p style="font-size: 20px;color:#4e4e4e;font-style:italic;">Por el momento no hay excursiones agregadas a este viaje!</p>
                        <button class="btn btn-default dropdown-toggle" type="button" class="dropdown-item" data-toggle="modal" data-target="#modalNewExcursion">
                            <i class="fas fa-plus"></i> Nueva Excursión
                        </button>
                    </div>
                @endif
            </div>
        </div>

	</section>

    <!-- Modal Nueva Excursion -->
	<div id="modalNewExcursion" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 450px !important;">	
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="new-excursion" method="POST">
				@csrf
					<div class="modal-header" style="padding: 5px;"></div>
					<div class="swal-title" style="padding-top: 20px;margin-bottom:0;">Nueva Excursión</div>
					<div class="mt-4 px-12">
						<div>
							<div class="swal-text" style="margin:2px;padding:0;">Nombre</div>
							<div class="">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="nombre" class="form-control" style="border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);padding-left: 10px;" autocomplete="off" required>
								</div>
							</div>
						</div>
						<div class="flex gap-4 mt-4">
							<div class="w-1/2">
								<div class="swal-text" style="margin:2px;padding:0;">Moneda</div>
								<div class="">
									<div class="form-group" style="margin-bottom:0px;">
										<select name="moneda" class="form-control">
											<option value="1">$</option>
											<option value="5">US$</option>
											<option value="8">€</option>
											<option value="13">R$</option>
										</select>
									</div>
								</div>
							</div>
							<div class="w-full">
								<div class="swal-text" style="margin:2px;padding:0;">Costo</div>
								<div class="">
									<div class="form-group" style="margin-bottom:0px;">
										<input type="number" step="any" min="0" name="costo" class="form-control" style="border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);" autocomplete="off" required>
										{{-- <input type="text" class="montoCostoExc form-control" placeholder="Monto" id="monto" name="monto" required> --}}
									</div>
								</div>
							</div>
						</div>
					</div>

                    <input type="text" name="id_viaje" value="{{$viajeId}}" style="display: none;">

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submit" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>

				</form>
			</div>	
		</div>
	</div>
    <!-- Modal Editar Excursion -->
	<div id="modalEditExcursion" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 450px !important;">	
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="edit-delete-excursion" method="POST">
				@csrf
					<div class="modal-header" style="padding: 5px;"></div>
					<div class="swal-title" style="padding-top: 20px;margin-bottom:0;">Editar Excursión</div>
					<div class="mt-4 px-12">
						<div>
							<div class="swal-text" style="margin:2px;padding:0;">Nombre</div>
							<div class="">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="nombre" id="nombre_edit" class="form-control" style="border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);padding-left: 10px;" autocomplete="off" required>
								</div>
							</div>
						</div>
						<div class="flex gap-4 mt-4">
							<div class="w-1/2">
								<div class="swal-text" style="margin:2px;padding:0;">Moneda</div>
								<div class="">
									<div class="form-group" style="margin-bottom:0px;">
										<select name="moneda" id="moneda_edit" class="form-control">
											<option value="1">$</option>
											<option value="5">US$</option>
											<option value="8">€</option>
											<option value="13">R$</option>
										</select>
									</div>
								</div>
							</div>
							<div class="w-full">
								<div class="swal-text" style="margin:2px;padding:0;">Costo</div>
								<div class="">
									<div class="form-group" style="margin-bottom:0px;">
										<input type="number" step="any" min="0" name="costo" id="costo_edit" class="form-control" style="border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);" autocomplete="off" required>
									</div>
								</div>
							</div>
						</div>
					</div>

                    <input type="text" name="id_excursion" id="id_excursion_edit" style="display: none;">

					<div class="swal-footer">
						<div class="swal-button-container">
							<button type="submit" name="submit_button" value="delete" class="swal-button swal-button--confirm" style="background-color: #f45555;">Borrar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submit" name="submit_button" value="edit" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>

				</form>
			</div>	
		</div>
	</div>
    <!-- Modal Detalles -->
	<div id="modalDetalles" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 450px !important;">	
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="add-cuota-excursion" method="POST">
				@csrf
					<div class="modal-header" style="padding: 5px;"></div>
					<div class="swal-title" style="padding-top: 20px;margin-bottom:0;text-align:left;font-size:18px;font-weight:500;color:#4e4e4e;" id="nombre-pasajero"></div>
					<div class="swal-title" style="padding-top: 20px;margin-bottom:0;text-align:left;font-size:18px;font-weight:500;color:#4e4e4e;">DETALLE CUOTAS</div>
					<div style="padding: 15px;text-align:center;">
						<span id="loading-detalles" style="display:none;"><img src="{{asset('images/cargando.gif')}}" alt="loading" style="width: 25px;"></span>
						<p style="text-align:center" id="mensaje-no-cuotas">Todavía no hay cuotas entregadas.</p>
						<table id="tableCuotas" class="table table-bordered" style="margin: 0;">
							<thead>
								<th>Fecha Entrega</th>
								<th>Monto</th>
								<th>Medio de Pago</th>
								<th>Recibo</th>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
					<div class="swal-title" style="padding-top: 0px;margin-bottom:0;text-align:left;">
						<h2 style="font-size:18px;font-weight:500;color:#4e4e4e;">AGREGAR CUOTA</h2>
						<p class="" style="font-style: italic;color: rgb(255, 76, 76);font-size: 14px;font-weight: 100;margin: 10px 0px 0px;text-align: left;display: none;" id="msgSaldoAFavor">El pasajero posee saldo a favor $<span id="cantSaldoAFavor">0,00</span>.</p>
					</div>
					<div style="padding:15px;">
						<div style="margin-bottom:15px;">
							<div class="input-group" style="margin-bottom:0;">
								<div class="form-line">
									<span class="input-group-addon" style="width:unset">$</span>
									<input type="text" class="montoCuota form-control" placeholder="Monto" id="monto" name="monto" required>
								</div>
							</div>
						</div>
						<div style="margin-bottom:15px;display: none;" id="div_tipo_cambio">
							<div class="input-group" style="margin-bottom:0;">
								<div class="form-line">
									<span class="input-group-addon" style="width:unset">Tipo Cambio ($)</span>
									<input type="text" class="form-control" id="tipo_cambio" name="monto_cambio" required>
								</div>
							</div>
						</div>
                        <div style="margin-bottom:15px;">
							<div class="form-line">
								<select name="medio_pago" id="medio_pago" class="form-control" required onchange="changeMoneda()">
									<option hidden="hidden" disabled="disabled" selected="selected">Elija medio de pago</option>
									<option value="1">Efectivo</option>
									<option value="2">Tarjeta Credito</option>
									<option value="3">Cuenta Provincia</option>
									<option value="14">Cuenta Credicoop</option>
									<option value="5">Dolares</option>
									<option value="8">Euros</option>
									<option value="13">Reales</option>
									<option value="9">Tarjeta Debito</option>
									<option value="11">Pago a Terceros</option>
									<option value="12">Cobro en Ruta</option>
								</select>
							</div>
						</div>
                        <div style="margin-bottom:15px;">
							<div class="form-line">
								<select name="oficina" id="oficina" class="form-control">
									<option hidden="hidden" disabled="disabled" selected="selected">Elija oficina</option>
									<option value="1">Bahía Blanca</option>
									<option value="2">Pigüé</option>
									<option value="3">Coronel Suárez</option>
								</select>
							</div>
						</div>
                        <div style="margin-bottom:15px;">
							<div class="form-line">
								<select name="verRecibo" id="verRecibo" class="form-control">
									<option value="1">Mostrar Recibo</option>
									<option value="0">No Mostrar Recibo</option>
								</select>
							</div>
						</div>
					</div>

                    <input type="text" name="id_viaje" id="id_viaje_detalle" style="display: none;">
                    <input type="text" name="id_pasajero" id="id_pasajero_detalle" style="display: none;">
                    <input type="text" name="nombre_pasajero" id="nombre_pasajero_detalle" style="display: none;">

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submit" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>

				</form>
			</div>	
		</div>
	</div>
	<!-- Modal Editar Info Extra -->
	<div id="modalEditarInfoExtra" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 450px !important;">	
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="borrar-reserva-cancelada" method="POST">
				@csrf
					<div class="modal-header" style="padding: 5px;">
						{{-- <button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Busqueda Avanzada <span style="font-style: italic; font-size:15px; font-weight: 100; color: rgb(87, 87, 87)">(Todos los registros)</span></h4> --}}
					</div>
					<div class="swal-icon swal-icon--warning" style="width: 50px;height: 50px;margin: 10px auto;">
						<span class="swal-icon--warning__body" style="height: 20px;width: 4px;">
							<span class="swal-icon--warning__dot" style="width: 4px;height: 4px;margin-left: -2px;"></span>
						</span>
					</div>
					<div class="swal-title" style="padding-top: 0px;margin-bottom:0;">Editar Info Extra</div>
					<div class="form-group" style="padding:10px 25px;">
						<textarea name="textoInfoExtra" id="textoInfoExtra" class="form-control" style="border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);padding:10px;min-height:200px;"></textarea>
					</div>
					<div style="padding:0px 25px;" id="div_editores_info">
						<h5>Editores:</h5>
						<div id="textoEditoresInfoExtra"></div>
					</div>
					<input type="text" id="idInfoExtra" name="idInfoExtra" style="display:none;">

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" id="botonCerrarInfoExtra" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="button" onclick="saveInfoExtra();" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>
				</form>
			</div>	
		</div>
	</div>

@include('footer')

<script>
    function loadDataEdit(id,nombre,costo,id_moneda) {
        $('#id_excursion_edit').val(id);
        $('#nombre_edit').val(nombre);
        $('#costo_edit').val(costo);
		$('#moneda_edit').val(id_moneda).trigger('change');
    }
</script>
<script>
	function changeMoneda() {
		let tipo = $('#medio_pago').val()
		if (tipo == "5" || tipo == "8" || tipo == "13") {
			$('#div_tipo_cambio').show()
			$('#tipo_cambio').attr('required', true)
		} else {
			$('#div_tipo_cambio').hide()
			$('#tipo_cambio').attr('required', false)
		}
	}
</script>
<script>
	function changeCheckBox(id_excursion,id_pasajero,costo,entregado) {
		const button_detalles = document.getElementById("button-detalles-"+id_pasajero);
		const loading = document.getElementById("loading-"+id_pasajero);
		loading.style.display = "inline";

		const cb = document.querySelector('#checkbox-'+id_excursion+'-'+id_pasajero);
		const texto_tarifa = document.getElementById('texto-tarifa-'+id_pasajero);
		const tarifa = document.getElementById('tarifa-'+id_pasajero);
		const texto_entregado = document.getElementById('texto-entregado-'+id_pasajero);
		const texto_saldo = document.getElementById('texto-saldo-'+id_pasajero);
		let new_tarifa;
		let new_saldo;
		let tipo = 0;

		if (cb.checked) {
			new_tarifa = parseFloat(tarifa.value) + parseFloat(costo);
			tipo = 1;
		} else {
			new_tarifa = parseFloat(tarifa.value) - parseFloat(costo);
		}
		tarifa.value = new_tarifa;

		new_saldo = new_tarifa - parseFloat(entregado);

		$.ajax({
            url: "changeExcursion",
			type: "POST",
			data: {"_token": "{{csrf_token()}}",tipo:tipo,id_excursion:id_excursion,id_pasajero:id_pasajero},
            success: function(){
				texto_tarifa.innerHTML = (new_tarifa == 0) ? '-' : '$'+formatMoney(new_tarifa);
				texto_entregado.innerHTML = (new_tarifa == 0 && entregado == 0) ? '-' : '$'+formatMoney(entregado);
				texto_saldo.innerHTML = (new_tarifa == 0 && entregado == 0) ? '-' : '$'+formatMoney(new_saldo);
				if (new_tarifa == 0 && entregado == 0) {
					button_detalles.style.display = "none";
				} else {
					button_detalles.style.display = "block";
				}
				loading.style.display = "none";
				$('#saldo-'+id_pasajero).val((new_tarifa == 0) ? '0' : new_tarifa);
			},
			error: function(error) {
				alert('Error al intentar guardar.');
			}
        });
	}
</script>
<script>
	function formatMoney (number) {
        let val = parseFloat(number).toFixed(2);
        let formattedStr = new Intl.NumberFormat("es-AR", {
            minimumFractionDigits: 2
        });
        return formattedStr.format(val);
    }
</script>
<script>
	$(document).ready(function() {
		var view = new pasajero_View();
		$('.montoCuota').mask("#.##0,00", {reverse: true});
		$('.montoCostoExc').mask("#.##0,00", {reverse: true});
	});
</script>
<script>
	function loadDataPasajero(id_pasajero,id_viaje,entregado,apellido,nombre) {
		$('#div_tipo_cambio').hide()
		$('#tipo_cambio').attr('required', false)
		
		$('#id_viaje_detalle').val(id_viaje);
		$('#id_pasajero_detalle').val(id_pasajero);
		$('#nombre_pasajero_detalle').val(apellido+', '+nombre);

		$('#mensaje-no-cuotas').hide();
		$('#tableCuotas').hide();
		$('#tableCuotas').find("tr:gt(0)").remove();
		$('#nombre-pasajero').text(apellido+', '+nombre);
		$('#loading-detalles').show();

		$('#idPasajero').val(id_pasajero);
		$('#monto').val('');
		$("#medio_pago option[value='10']").remove();
		$('select[name=medio_pago]').val(1).selectpicker('refresh');
		$('select[name=oficina]').val(1).selectpicker('refresh');
		$('select[name=verRecibo]').val(1).selectpicker('refresh');

		$('#msgSaldoAFavor').hide();
		$('#cantSaldoAFavor').text('0,00');

		let saldo = $('#saldo-'+id_pasajero).val();
		
		$.ajax({
			url: "getData/"+id_pasajero+"/"+id_viaje+"/"+saldo,
			success: function(response){
				if (entregado > 0) {
					$('#loading-detalles').hide();
					$('#tableCuotas').show();
					var cont_rows = 1;
					response['cuotas'].forEach(function(data) {
						console.log(data)
						var table = document.getElementById('tableCuotas');
						var newRow = table.insertRow(cont_rows);
						var cel1 = newRow.insertCell(0);
						var cel2 = newRow.insertCell(1);
						var cel3 = newRow.insertCell(2);
						var cel4 = newRow.insertCell(3);
						let timestamp = (data['timestamp'].split(' ')[0]).split('-');
						cel1.innerHTML = timestamp[2]+'/'+timestamp[1]+'/'+timestamp[0];
						let monto_cambio = ''
						if (data['tipo_transaccion_id'] == "5" || data['tipo_transaccion_id'] == "8" || data['tipo_transaccion_id'] == "13") {
							monto_cambio = ' (Cambio: $'+data['monto_cambio']+')'
						}
						cel2.innerHTML = '$'+formatMoney(data['cuota'])+monto_cambio;
						cel3.innerHTML = data['medio_pago'];
						cel4.innerHTML = '<a href="../recibo/0/'+data['id_caja']+'" target="_blank"><i class="fas fa-print"></i></a>';
						cont_rows++;
					})
				} else {
					$('#loading-detalles').hide();
					$('#mensaje-no-cuotas').show();
				}

				if (response['saldo_a_favor'] > 0) {
					$('#msgSaldoAFavor').show();
					$('#cantSaldoAFavor').text(formatMoney(response['saldo_a_favor']));
					$('#medio_pago').append($('<option>', {
						value: '10',
						text: 'Saldo a Favor'
					}));
					$('#monto').val(formatMoney(response['saldo_a_favor']));
					$('select[name=medio_pago]').val(10).selectpicker('refresh');
				}
			}
		});

	}
</script>
<script>
	function editarInfoExtra(id) {
		$('#idInfoExtra').val('');
		$('#textoInfoExtra').val('');
		$('#textoEditoresInfoExtra').text('');

		let infoExtra = $('#campo-infoExtra-'+id).text();
		let editoresInfoExtra = $('#campo-editoresInfoExtra-'+id).text();
		
		$('#idInfoExtra').val(id);
		$('#textoInfoExtra').val(infoExtra);
		$('#textoEditoresInfoExtra').text(editoresInfoExtra);

		if (editoresInfoExtra == "") {
			$('#div_editores_info').hide()
		} else {
			$('#div_editores_info').show()
		}
	}
</script>
<script>
	function saveInfoExtra() {
		let id = $('#idInfoExtra').val();
		let infoExtra = $('#textoInfoExtra').val();
		let editoresInfoExtra = $('#campo-editoresInfoExtra-'+id).text() + ', {{Auth::user()->name}} ({{date("d/m/Y")}})';
		$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
		$.ajax({
            url: "../excursiones/saveInfoExtra/guardar",
			type: "POST",
			data: {id:id, infoExtra:infoExtra, editoresInfoExtra:editoresInfoExtra},
            success: function(response){
				$('#infoExtra'+id).html(infoExtra+
										'<p id="campo-infoExtra-'+id+'" style="display: none;">'+infoExtra+'</p>'+
										'<p id="campo-editoresInfoExtra-'+id+'" style="display: none;">'+editoresInfoExtra+'</p>'+
										'<button class="btn btn-default dropdown-toggle" type="button" title="Editar Info Extra" class="dropdown-item" data-toggle="modal" data-target="#modalEditarInfoExtra" onclick="editarInfoExtra('+id+');" style="padding: 0; border: none; margin-left:2px;">'+
											'<i class="fas fa-edit"></i>'+
										'</button>');
				$('#botonCerrarInfoExtra').click();
			},
			error: function(error) {
				alert('Error al intentar guardar.');
			}
        });
	}
</script>
@if (!empty($idRecibo))
	<script>
		$(document).ready(function(){
			window.open('../recibo/0/{{$idRecibo}}');
			var myNewURL = "sistema/excursiones/{{$viajeId}}";//the new URL
			window.history.pushState({}, document.title, "/" + myNewURL );
		});
	</script>
@endif