@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/radioOnDemandPlayer.css')->withFullUrl() !!}
{!! HTML::style('//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css') !!}
{!! Minify::stylesheet('/css/dataTable.css')->withFullUrl() !!}
@stop

@section('title')
Radio ECCA a la carta
@stop
@section('description')
Escuche todos los programas de Radio ECCA dónde y cuando quiera. Todos los podcasts de audio de Radio ECCA disponibles.
@stop

@section('content')
{!! Breadcrumbs::render('radio-on-demand') !!}
<div id="loading" class="oculto">
   <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</div>
<div class="container">
   <div class="titulo_categoria">
      <span>Radio a la carta</span>
   </div>
   <div class="titulo col-md-12">
      Listado de programas disponibles
   </div>
   <table class="table" id="ivooxTable">
      <thead>
         <tr>
            <td>
               Título del podcast
            </td>
            <td>
               Tipo
            </td>
            <td>
               Al día
            </td>
         </tr>
      </thead>
      <tbody>
         @foreach ($ivooxes as $ivoox)
         <tr>
            <td data-order="{{ $ivoox['alias'] }}" class="ivoox-title">
               <a href="{{ route('radio-selected', ['id'=>$ivoox['alias']]) }}">
                  {{ $ivoox['name'] }}
               </a>
            </td>
            @if($ivoox['typeImage']=='img/ivoox_magis.jpg')
               <td>      
                   Magis Radio <img width="15" src="{{ asset($ivoox['typeImage']) }}">
               </td>
            @endif
            @if($ivoox['typeImage']=='img/ivoox_ecca.jpg')
               <td>      
                  Radio ECCA <img width="15" src="{{ asset($ivoox['typeImage']) }}"> 
               </td>
            @endif
            @if($ivoox['active'])
            <td style="width: 9%" data-order="activo">      
                  <span style="color:#6fce00" class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 
               </td>
            @else
               <td style="width: 9%" data-order="inactivo">      
                  <span style="color:#d21e00" class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 
               </td>
            @endif
         </tr>
         @endforeach
      </tbody>
   </table>
   <div class="spacer"></div>
<!--   <div class="titulo col-md-12">
      Leyenda
   </div>
   <div class="leyenda">
      <div class="col-md-3 col-sm-6"><img width="15" src='{{ asset("img/ivoox_ecca.jpg") }}'> Programación Radio ECCA</div>
      <div class="col-md-3 col-sm-6"><img width="15" src='{{  asset("img/ivoox_magis.jpg") }}'> Programación Magis Radio</div>
   </div>   -->
</div>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl()  !!} 
{!! HTML::script('https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js') !!}
<script>
   $(document).ready(function () {
      $('#ivooxTable').dataTable({
         "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Spanish.json"
         },
         "order": [[2, "asc"], [ 1, 'desc' ]],
         "pageLength": 15
      });
   });
</script> 
@stop