@include('header')

	<style>
		#editor, .ql-toolbar {
			background: #fff;
		}
		.ql-toolbar .dropdown {
			display: none;
		}
		.ql-toolbar .ql-link {
			display: none !important;
		}
	</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>
        <div class="botoneraUser" style="float:right;">
            <button class="btn bg-teal" onclick="window.location.href='../rooming/exportar/excel/{{$viajeId}}';" title="Exportar a Excel">
                <i class="fas fa-file-excel"></i> Exportar
            </button>
        </div>

		<div class="botoneraUser" style="float:left;margin-top:10px;width:100%;">
			<span>Ver/Ocultar columnas:</span>
			<select id="columnToggle" multiple>
				<option value="codigo" selected>Código</option>
				<option value="pasajero" selected>Pasajero</option>
				<option value="tipo_habitacion" selected>Tipo Habitación</option>
				<option value="info_extra" selected>Info Extra</option>
			</select>
		</div>

        <div>
            <p id="msg-anotaciones" style="font-style: italic;display: inline-block;margin-left:10px;margin-top:5px;"></p>
        </div>

        <div class="container-fluid" style="margin-bottom:25px;">
            <div class="row">
                <table class="table table-bordered tabla-circuitos" id="tablaUsers" style="border: 0px;">
                    <thead>
                        <th class="columnas-ocultas columna-codigo" style="vertical-align: middle;">Código</th>
                        <th class="columnas-ocultas columna-pasajero" style="vertical-align: middle;">Pasajero</th>
                        <th class="columnas-ocultas columna-tipo_habitacion" style="vertical-align: middle;">Tipo Habitación</th>
                        <th class="columnas-ocultas columna-info_extra" style="vertical-align: middle;">Info Extra</th>
                    </thead>
                    <tbody>
                        @foreach ($data_reserva as $data)
                            <tr>
                                <td class="columnas-ocultas columna-codigo" style="vertical-align: middle;">{{$data->reserva_id}}</td>
                                <td class="columnas-ocultas columna-pasajero" style="vertical-align: middle;">{{$data->apellido}}, {{$data->nombre}}</td>
                                <td class="columnas-ocultas columna-tipo_habitacion" style="vertical-align: middle;">{{$data->nombre_habitacion}}</td>
                                <td class="columnas-ocultas columna-info_extra" style="vertical-align: middle;">
                                    <textarea 
                                        id="editor-{{$data->id}}" 
                                        class="form-control" 
                                        style="border: none; box-shadow: none; padding: 0; width: 100%; min-height: 40px; resize: none; field-sizing: content;" 
                                        onchange="guardarInfoExtra({{$data->id}})"
                                    >{{$data->info_extra_rooming}}</textarea>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

		<div class="container-fluid">
			<div class="row">
				<div class="titulo">
					<h2>Anotaciones</h2>
				</div>
				<form id="textAreaForm" action="saveAnotacion/guardar/{{$viajeId}}" method="POST">
				@csrf
					<div class="white-area">
						<div id="editor">
							@php
								echo $anotaciones;
							@endphp
						</div>
					</div>
					<div class="boton" style="margin-top:15px;margin-bottom:50px;">
						<button type="button" onclick="saveText({{$viajeId}});" class="btn bg-teal">GUARDAR</button>
						<p id="msg-anotaciones" style="font-style: italic;display: inline-block;margin-left:10px;"></p>
					</div>
				</form>
			</div>
		</div>

	</section>

@include('footer')

<script> // Initialize Quill editor
	var quill = new Quill('#editor', {
		theme: 'snow'
	});
</script>
<script>
	function saveText(id) {
		var texto = $('#editor .ql-editor').html()
		var _token = $('meta[name="csrf-token"]').attr('content');
		
		$.ajax({
            url: "saveAnotacion/guardar/"+id,
			type: "POST",
			data: {texto:texto, _token:_token},
            success: function(response){
				if (response == 1) {
					$("#msg-anotaciones").fadeIn(300);
					$('#msg-anotaciones').text('Guardado!');
					ocultarMsg();
				} else {
					$("#msg-anotaciones").fadeIn(300);
					$('#msg-anotaciones').text('Error al intentar guardar.');
					ocultarMsg();
				}
			},
			error: function(error) {
				$("#msg-anotaciones").fadeIn(300);
				$('#msg-anotaciones').text('Error al intentar guardar.');
				ocultarMsg();
			}
        });
	}
</script>
<script>
	$(document).ready(function() {
		$('#columnToggle').on('change', function() {
			var selectedColumns = $('#columnToggle').val();
			$('.columnas-ocultas').hide()
			if (selectedColumns.length > 0) {
				selectedColumns.forEach(function (option) {
					$('.columna-'+option).show()
				})
			}
		});
	});
</script>
<script> //Guardar Info extra cuando cambia
    function guardarInfoExtra(id) {
        var texto = $('#editor-'+id).val();
        var _token = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: "guardar-info/"+id,
            type: "POST",
            data: {id:id, texto:texto, _token:_token},
            success: function(response){
                    $("#msg-anotaciones").fadeIn(300);
                    $('#msg-anotaciones').text('Guardado!');
                    ocultarMsg();
            },
            error: function(error) {
                $("#msg-anotaciones").fadeIn(300);
                $('#msg-anotaciones').text('Error al intentar guardar.');
                ocultarMsg();
            }
        });
    }

    function ocultarMsg() {
        $("#msg-anotaciones").delay(3000).fadeOut(800);
    }
</script>