@include('header')

    <style>
        .mb-5px {
            margin-bottom: 5px;
        }
    </style>

    <section class="content">
        <div class="botoneraUser" style="float:left;width:100%;">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>

        <div class="botoneraUser" style="float:left;width:100%;margin-top:15px;">
            <button class="btn bg-default botonTipo" id="botonAll" style="margin-bottom:4px;border: 1px solid #999;background:#c1c1c1;" onclick="viajeViewInd();">Todos</button>
            @foreach ($categoria_viaje_ind as $cat)
                <button class="btn bg-default botonTipo" id="boton{{$cat->id}}" style="margin-bottom:4px;border: 1px solid #999;" onclick="viajeViewInd('{{$cat->id}}');">{{$cat->nombre}}</button>
            @endforeach
            <p id="loadingFiltro" style="display: none;font-style: italic;color: #575757;">Cargando...</p>
        </div>

		<div class="container-fluid">
            <div class="row">
                <div class="viajesTableContainer"></div>
            </div>
        </div>
    </section>

	<!-- Modal Foto Portada -->
	<div id="modalFotoPortada" 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="viajes-individuales/save_foto_portada" method="POST" enctype="multipart/form-data">
				@csrf
					<div class="modal-header" style="padding: 5px;">
						<h4 class="modal-title" style="padding: 15px 15px 0px 15px;">Foto Portada - <span id="viajeFotoPortada"></span></h4>
					</div>

                    <div style="padding: 10px 20px;">
                        <input type="file" id="new_img" name="new_img" onchange="previewFile(this);" accept="image/webp">
                        <img src="{{asset('images/no-image.png')}}" id="previewImg" alt="previewImg" width="300" style="display: none;margin-top:10px;">
                    </div>

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

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" id="botonCerrarFotoPortada" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submir"  class="swal-button swal-button--confirm">Guardar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>
				</form>
			</div>	
		</div>
	</div>

    @include('footer')

    <script>
        $(document).ready(function() {
            var view = new viajeInd_View();
        });
    </script>
    <script>
        function viajeViewInd (tipo) {
            loadingFiltro(1);
            var view = new viajeInd_View(tipo);
            $('.botonTipo').css( "background", "#fff" );
            if (tipo === undefined) {
                $('#botonAll').css( "background", "#c1c1c1" );
            } else {
                $('#boton'+tipo).css( "background", "#c1c1c1" );
            }
        }
    </script>
    <script>
        function loadingFiltro (status) {
            if (status == 1) {
                $('#loadingFiltro').css( "display", "inline-block" );
            } else {
                $('#loadingFiltro').css( "display", "none" );
            }
        }
    </script>
    <script>
        function loadDataFotoPortada(id, viaje, portada) {
            $("#new_img").val('');
            $("#previewImg").hide();
            if (portada != '' && portada != null && portada != 'null') {
                $("#previewImg").show();
                $("#previewImg").attr("src", '../'+portada);
            }
            $('#viajeId').val(id)
            $('#viajeFotoPortada').text(viaje)
        }

        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];
    
            if(file){
                var reader = new FileReader();
    
                reader.onload = function(){
                    $("#previewImg").show();
                    $("#previewImg").attr("src", reader.result);
                }
    
                reader.readAsDataURL(file);
            }
        }
    </script>