@extends('layouts.app')

@section('style_person')
<style type="text/css">
.pmd-floating-action { bottom: 0; position: fixed;  margin-bottom: 13px;  right: 0;  }
.pmd-floating-action-btn { display:block; position: relative; transition: all .2s ease-out; font-weight: bold;}
.pmd-floating-action-btn:before { bottom: 10%; content: attr(data-title); opacity: 0; position: absolute; right: 100%; transition: all .2s ease-out .5s;  white-space: nowrap; background-color:#dc3522; padding:6px 12px; border-radius:2px; color:#FFF; font-size:12px; margin-right:5px; display:inline-block; box-shadow: 0px 2px 3px -2px rgba(0, 0, 0, 0.18), 0px 2px 2px -7px rgba(0, 0, 0, 0.15);}
.pmd-floating-action-btn:last-child:before { font-size: 14px; bottom: 25%;}
.pmd-floating-action-btn:active, .pmd-floating-action-btn:focus, .pmd-floating-action-btn:hover {box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);}
.pmd-floating-action-btn:not(:last-child){ opacity: 0; -ms-transform: translateY(20px) scale(0.3); transform: translateY(20px) scale(0.3); margin-bottom:15px; margin-left:0px; position:absolute; bottom:0;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(1) { transition-delay: 50ms;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(2) { transition-delay: 100ms;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(3) { transition-delay: 150ms;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(4) { transition-delay: 200ms;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(5) { transition-delay: 250ms;}
.pmd-floating-action-btn:not(:last-child):nth-last-child(6) { transition-delay: 300ms;}
.pmd-floating-action:hover .pmd-floating-action-btn, .menu--floating--open .pmd-floating-action-btn { opacity: 1; -ms-transform: none; transform: none; position:relative; bottom:0;color: #FFF}
.pmd-floating-action:hover .pmd-floating-action-btn:before, .menu--floating--open .pmd-floating-action-btn:before { opacity: 1;}
.pmd-floating-hidden{ display:none;}
.pmd-floating-action-btn.btn:hover{ overflow:visible;}

.temaArchivoLink{
    font-size: 15px;
    border-radius: 11px 11px 11px 11px;
    -moz-border-radius: 11px 11px 11px 11px;
    -webkit-border-radius: 11px 11px 11px 11px;
    border: 1px solid #999;
    color: #1f1d1f;
    background: #f7f7f7; 
    padding: 7px 10px;
    margin-right: 5px;
}
.temaArchivoLink:hover{
    background: #202124;
    text-decoration: none;
    color: #FFF;
}

</style>
@endsection

@section('content')

<!-- Horizontal Layout -->
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header" style="padding-bottom: 0">                
                                
                <ol class="breadcrumb" style="margin-bottom: 0px;padding: 0">                       
                    <li>
                        <a href="{{ url('/') }}/sesion">
                            <i class="material-icons">assignment</i> Sesi&oacute;n
                        </a>
                    </li>
                    <li><strong style="font-size: 20px;">Sesi&oacute;n {{ $sesionCabecera->nombreSesion }} {{ $sesionCabecera->correlativo }}</strong> (Vista Previa)</li>
                </ol>                
                <div style="margin: 10px 0">Fecha Citaci&oacute;n: <strong>{{date('d-m-Y', strtotime($sesionCabecera->fechaCitacion))}}</strong></div>
            </div>

            <div class="body" style="padding-top: 10px">

<a href="{{ url('/') }}/agenda/listar/{{ $sesionCabecera->sesioncabId }}" class="btn bg-fia btn-circle-lg waves-effect waves-circle btn-float" style="margin-right: 70px">
    <i class="material-icons">reply</i>
</a>

@foreach ($sesionDetalles as $sesionDetalle)
    
    
    @foreach ($sesionDetalle->temas as $tema)        
        @if ($tema->agendaId != $agendaId)
            <div><a name="acc{{$tema->agendaId}}" style="color: #FFF"></a></div>
            <div style="text-align: center;padding-bottom: 37px;font-size: 26px;font-weight: bold; color: #DC3522;">{{ $sesionDetalle->nombreAgenda }}</div>
                    
        @endif       
        <div class="row clearfix pasar-lista" style="padding: 0                
                ;margin-bottom: 40px
                ;box-shadow: 0 1px 5px rgba(0,0,0,.3)                
                ;-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3)
                ;-ms-box-shadow: 0 1px 5px rgba(0,0,0,.3)">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 {{ $sesionDetalle->color }}" style="margin: 0;
                ;box-shadow: 0 1px 5px rgba(0,0,0,.3)
                ;-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3)
                ;-ms-box-shadow: 0 1px 5px rgba(0,0,0,.3)
                ;height: 40px;padding-top: 5px">  
                <div class="media-body" style="padding: 0;margin: 0;">            
                    <div style=";font-size: 20px;text-align: left;">   
                        
                        <strong>{{ $tema->orden }}</strong> - {{ $sesionDetalle->nombreAgenda }}
                    </div>
                </div>                
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin: 0">
                <p>
                                </p>
                <p>
                @if($tema->numeroArchivo > 0)
                    @foreach($tema->archivos as $archivo)
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left: 0">        
                                                <a href="{{ url('/tema/descargar').'/'.$archivo->nombreSistema }}" class="temaArchivoLink" title="{{ $archivo->nombreOriginal }}"><img src="{{ url('/') }}/img/icono/{{$archivo->extension}}.png"> {{ $nombreCorto }}</a>        
                    </div>
                    @endforeach

                @endif
                </p>
            </div>
        </div>               
    @endforeach    
@endforeach

            </div>
        </div>
    </div>
</div>
<div class="menu pmd-floating-action" role="navigation">
    @foreach ($sesionMenus as $sesionMenu)
        <a href="{{ url('/') }}/agenda/vistaprevia/{{ $sesionCabecera->sesioncabId }}#acc{{$sesionMenu->agendaId}}" class="pmd-floating-action-btn btn btn-sm {{$sesionMenu->color}} btn-circle-lg waves-effect waves-circle waves-float btn-float" data-title="{{$sesionMenu->nombreAgenda}}">
            <i class="material-icons" style="text-align: center;">{{ substr($sesionMenu->nombreAgenda, 0, 1) }}</i>
        </a>        
    @endforeach
    <a href="javascript:void(0);" class="pmd-floating-action-btn btn btn-primary btn-circle-lg waves-effect waves-circle waves-float btn-float" data-title="Agenda" style="bottom: 2px;margin-right: 1px">
        <i class="material-icons">dialpad</i>
    </a>
</div>
@endsection