@extends('master')
@section('title', 'Información Ruta SITP')
@section('content')

  <div class="contenido-titulo-contenedor">
    <span class="contenido-titulo-texto">INFORMACIÓN RUTA SITP</span>
  </div>

  <div class="detalle-container">
    <div class="detalle-titulo">
      Ruta: {{$ruta->codigo . ' ' . $ruta->ruta}}
    </div>
    <div class="detalle-contenido">
      {{$ruta->turno_operando == ''? 'Fuera de servicio' : 'Operando '.$ruta->turno_operando}}<br>
      Paradas: {{$ruta->paradas}}<br>
      @foreach($turnos as $turno)
      <div class="lista-dias-opera-container">
        <div>
          <img src="{{asset('images/ic_calendar.png')}}" class="lista-dias-opera-icono">
        </div>
        <div>
          <ul class="lista-dias-opera">
                        <li class="{{$diasOpera[1]}}">L</li>
            <li class="{{$diasOpera[2]}}">M</li>
            <li class="{{$diasOpera[3]}}">M</li>
            <li class="{{$diasOpera[4]}}">J</li>
            <li class="{{$diasOpera[5]}}">V</li>
            <li class="{{$diasOpera[6]}}">S</li>
            <li class="{{$diasOpera[7]}}">D</li>
            <li class="{{$diasOpera[8]}}">F</li>
          </ul>
        </div>
        <div>
          <img src="{{asset('images/ic_clock.png')}}" class="lista-dias-opera-icono">
        </div>
        <div>
          {{$turno->inicio_turno . ' - ' . $turno->fin_turno}}
        </div>
      </div>
      @endforeach
    </div>
  </div>

  <h4>Paradas de esta ruta.</h4>

  <div class="row">
    <div class="col-md-9 col-lg-10">
      <div class="lista">
        @foreach($paradas as $counter => $parada)
          <div class="lista-item">
            <div class="lista-item-circle" style="background-color: #0d3553">
              <div class="lista-item-circle-text">{{($counter + 1)}}</div>
            </div>
            <div class="lista-item-content">
              {{$parada->nombre}}<br>
              {{$parada->ubicacion}}<br>
            </div>
          </div>
        @endforeach
      </div>
    </div>
    <div class="col-md-3 col-lg-2">
      @include('ads.adrightcontent')
    </div>
  </div>
@endsection