@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>

    @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>