@include('header')
<link href="{{asset('css/lightslider.min.css')}}" rel="stylesheet">

<style type="text/css" >
    /* Some CSS */
.demo {
    width:100%;
}
#lightSlider {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
#lightSlider > li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
#lightSlider > li > img {
    display: block;
    height: auto;
    max-width: 100%;
}
</style>
@if ($sliders)
    @foreach ($sliders as $slider)
        @if ($slider->visible == 1)
            <div class="container text-center">
                <div class="demo text-center">
                    <ul id="lightSlider">
                        @foreach ($slider->imagenes as $imagen)
                            @if ($imagen->visible == 1)
                                <li   data-thumb="{{ ENV('RUTA_IMAGENES_FRONT_END') }}{{ $imagen->src }}">
                                    <div class="col-md-12 text-center">
                                        <img src="{{ ENV('RUTA_IMAGENES_FRONT_END') }}{{ $imagen->src }}" style="max-height: 280px" />
                                        <h3 class="text-center">{{ $imagen->texto }}</h3>
                                    </div>
                                </li>
                            @endif
                        @endforeach
                        <!-- 
                        <li   data-thumb="/img/tutorial_informe/tutorial_1.png">
                           <div class="col-md-12"><img src="/img/tutorial_informe/tutorial_1.png" /></div>
                        </li>
                        <li   data-thumb="/img/tutorial_informe/tutorial_2.png">
                           <div class="col-md-12"><img src="/img/tutorial_informe/tutorial_2.png" /></div>
                        </li>
                        <li   data-thumb="/img/tutorial_informe/tutorial_3.png">
                           <div class="col-md-12"><img src="/img/tutorial_informe/tutorial_3.png" /></div>
                        </li>
                        <li   data-thumb="/img/tutorial_informe/tutorial_4.png">
                           <div class="col-md-12"><img src="/img/tutorial_informe/tutorial_4.png" /></div>
                        </li>
                        <li   data-thumb="/img/tutorial_informe/tutorial_5.png">
                           <div class="col-md-12"><img src="/img/tutorial_informe/tutorial_5.png" /></div>
                        </li> 
                        -->
                    </ul>
                </div>
                
            </div>
        @else
            <div class="col-md-12 text-right">
                <br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br>
            </div>  
        @endif
    @endforeach
@else
    <div class="col-md-12 text-right">
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
    </div> 
@endif
<div class="col-md-12 text-right">
  <a href="/informes/buscador" id="btn_continuar_tutorial" class="btn btn-lg btn-info btn-fidelitas">Continuar</a>
</div>
<script type="text/javascript" src="{{ URL::asset('js/lightslider.min.js') }}"> </script>
<script type="text/javascript" src="{{ URL::asset('js/disclaimer.js') }}"> </script>
@include('footer')