@extends('template.portal.layout')
@section('content-body')
    <div class="portlet light">
        <div class="portlet-title">
            <h3 class="titulo-default text-center">{{ $especialidad['nombre'] }}</h3>
        </div>
        <div class="portlet-body">
            <div class="img-default-container text-center" style="margin-bottom: 20px;">
                @if(!empty($banners) && count($banners) > 0)
                    <div id="myBanners" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            @for($i = 0; $i < count($banners); $i++)
                                @if($i == 0)
                                    <li data-target="#myBanners" data-slide-to="0" class="active"></li>
                                @else
                                    <li data-target="#myBanners" data-slide-to="{{ $i }}"></li>
                                @endif
                            @endfor
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            @foreach($banners as $banner)
                                @if($banner == $banners->first())
                                    <div class="item active">
                                        @else
                                            <div class="item">
                                                @endif
                                                <img src="{{asset($banner['url_image'])}}" alt="slide" class="carousel-img">
                                            </div>
                                            @endforeach
                                    </div>
                                    <a class="left carousel-control" href="#myBanners" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Anterior</span>
                                    </a>
                                    <a class="right carousel-control" href="#myBanners" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Siguiente</span>
                                    </a>
                        </div>
                    </div>
                @endif
            </div>
            <p class="parrafo-justificado">{!! $especialidad['descripcion_portal'] !!}


            @if($especialidad['video_url'])
                <div class="img-default-container text-center" style="margin-bottom: 20px; margin-top: 5%; max-height: 500px !important;">
                    <iframe src="" id="ytpreview" style="width: 70%; height: 300px; padding:10px 10px 10px 10px;background:#1a1a1a;border-radius:3px;-moz-box-shadow:3px 3px 3px black;-webkit-box-shadow:3px 3px 3px black;box-shadow:3px 3px 3px black;" frameborder="0"></iframe>
                </div>
            @endif

            @if($especialidad['filename'])
               <a class="btn btn-primary" href="{!! $especialidad['filename'] !!}" ><i class="icon-cloud-download"></i> Descargar Pdf </a>
            @endif

            @if($files)
                <table class="table table-hover nowrap dataTable dtr-inline" id="table-file">
                    <thead>
                    <tr>
                        <th> Listado de archivos </th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($files as $file)
                        <tr>
                            <td>
                                <a href="{{ $file["url_pdf"] }}">{{ $file["nombre"] }}</a>
                                <strong class="error label label-danger"></strong>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
    <script>
        var video = "{{ $especialidad['video_url'] }}";
        if(video != undefined && video != ""){
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = video.match(regExp);
            $('#ytpreview').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?vq=hd1080&cc_load_policy=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&color=white&autohide=0&disablekb=1');
        }
        $('#table-file').DataTable({
            "pageLength": 3,
            "language": {
                "lengthMenu": " _MENU_ records",
                "zeroRecords": "No se encontraron registros",
                "infoEmpty": "No hay registros disponibles",
                "search": "Buscar: ",
            },
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "aoColumns": [
                { "bSearchable": true },
            ],
            "bInfo": false,
            "bFilter": false,
            "bLengthChange": false,
            "ordering": false,
        });
    </script>
@endsection