@extends('layout')

@section('content')
<div class="container home-1">
    <div class="row align-items-center justify-content-center">
        <div class="col-md-5">
            <h1 class="mb-4 text-center text-sm-left" style="color: #006D4E">Profesionaliza tu labor como asesor SOC</h1>
            <p style="color: #4f4f4f;">Universidad SOC surge en el 2014, tras encontrar la necesidad de profesionalizar el servicio impartido por los asesores SOC.</p>
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="{{ url('images/Grupo_246.svg') }}" alt="">
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-4 more-sales">
            <h3 style="color: #4ED176">Vende más ¡Certificándote!</h3>
            <a href="{{url('/certificaciones')}}" target="_blank" class="btn btn-success d-block" style="background: #079DEF!important; color: #fff; border-color: #fff!important">Quiero certificarme</a>
        </div>
        <div class="col-12">
            <p class="text-center mb-4 mt-4" style="color: #006D4E!important; font-size: 20px!important;"><i><strong>“La única manera de crecer es desarrollando gente”</strong> </i></p>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="button-group filter-button-group">
                <button data-filter="webinars" id="f-w">Webinars</button>
                <button data-filter="cursos" id="f-c">Cursos</button>
                <button data-filter="certificaciones" id="f-cer">Certificaciones</button>
                <button data-filter="promocion" class="b-f">Promoción y Capacitación</button>
                <button data-filter="semana" class="b-f">Semana Empresarial</button>
                <button data-filter="aula" class="b-f">Aula Soc</button>
            </div>
            <div class="button-group filter-button-group webinar-group d-none">
                <button data-filter="webinar-hipotecario">Hipotecario</button>
                <button data-filter="webinar-empresarial">Empresarial</button>
                <button data-filter="webinar-seguros">Seguros</button>
            </div>
            <div class="button-group filter-button-group cursos-group d-none">
                <button data-filter="cursos-hipotecario">Hipotecario</button>
                <button data-filter="cursos-empresarial">Empresarial</button>
                <button data-filter="cursos-seguros">Seguros</button>
            </div>
            <div class="button-group filter-button-group certificaciones-group d-none">
                <button data-filter="certificaciones-hipotecario">Hipotecario</button>
                <button data-filter="certificaciones-empresarial">Empresarial</button>
                <button data-filter="certificaciones-seguros">Seguros</button>
            </div>
        </div>
    </div>
    
    @if(!empty($events))
    
    <div class="row events">
        @foreach($events as $key => $event)
        @php
            $date = !empty($event['date_start']) ? strtotime($event['date_start']) : '';
            $date_2 = !empty($event['date_end']) ? strtotime($event['date_end']) : '';
            $time = !empty($event['schedule_from']) ? strtotime($event['schedule_from']) : '';
            $time_2 = !empty($event['schedule_to']) ? strtotime($event['schedule_to']) : '';
        @endphp
        
            <div class="col-md-4 mb-4 grid-item {{ 't-'.(1 + intval($key/6)).' '.strtolower((@$types[$event['type']] == 'Webinar' ? 'webinars' : @$types[$event['type']]).' '.(isset($types[$event['type']]) && !empty($types[$event['type']]) ? $types[$event['type']].'-'.$event['category'] : '')) }}" {{ (intval($key/6) > 0) ? 'style=display:none;' : '' }}>
                <div class="content mb-0 h-100" id="o-{{ $key+1 }}">
                    <div class="d-flex flex-column justify-content-between h-100">
                        <a href="" data-id="{{ $key+1 }}" class="view-more"><img src="{{ url('images/vuesax-twotone-more.svg') }}"></a>
                        <div class="mb-3">
                            <p><span>{{ $event['type'].' '.$event['category'] }}</span></p>
                            <h4>{{ $event['name'] }}</h4>
                            <div class="info-event d-flex flex-column">
                                @if(!empty($date))
                                
                                <p>
                                    <img src="{{url('images/vuesax-twotone-note-text.svg')}}" alt="">
                                    {{ date('d',$date).' de '.$meses[date('n',$date) - 1].
                                       (!empty($date_2) && date('Y-m-d',$date) !== date('Y-m-d',$date_2)  ? ' al '.date('d',$date_2).' de '.$meses[date('n',$date_2) - 1] : '') }}
                                </p>
                                @endif
                                @if(!empty($time))
                                
                                <p>
                                    <img src="{{url('images/vuesax-twotone-clock.svg')}}" alt="">
                                    {{ date('H:i',$time).(!empty($time_2) ? ' - '.date('H:i',$time_2) : '') }} Hrs
                                </p>
                                @endif
                                
                            </div>
                            <div class="speakers d-flex align-items-start flex-grow-1">
                                <img src="{{ url('images/vuesax-twotone-user.svg') }}" alt="">
                                <div>
                                    @php $speakers = @unserialize($event['speakers']);
                                          $appointments = @unserialize($event['appointment']);
                                    @endphp
                                    @if(!empty($speakers) && count($speakers) > 0)
                                    @for($i = 0; $i < count($speakers); $i++)
                                    <p><strong>{{ @$speakers[$i] }}</strong> {{ @$appointments[$i] }}</p>
                                    @endfor 
                                    @else
                                    <p><strong>Corporativo</strong></p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if(!empty($event['id_institution']))
                            @if(!empty($institutions[$event['id_institution']]['image']))
                        <img class="bank" src="{{ URL::asset('images/institutions/'.$institutions[$event['id_institution']]['image']) }}" title="{{ $institutions[$event['id_institution']]['name'] }}" alt="{{ $institutions[$event['id_institution']]['name'] }}" />
                            @else
                        <span>{{ $institutions[$event['id_institution']]['name'] }}</span>
                            @endif
                        @endif
                    
                    </div>
                </div>
                <div class="content-back d-none h-100" id="b-{{ $key+1 }}">
                    <a href="" data-id="{{ $key+1 }}" class="close-grid"><img src="{{ url('images/vuesax-twotone-close-circle.svg') }}"></a>
                    @if(!empty($event['description']))
                    <p class="mb-4"><b>{{ $event['description'] }}</b></p>
                    @endif
                    
                </div>
            </div>
        @endforeach
        
            </div>
    @endif
    
    @if(count($events) > 6)
    <div class="row justify-content-center">
        <p class="text-center paginacion">
            @for($i = 1; $i <= intval(count($events) / 6) + 1;$i++)
            <a href data-filter="t-{{ $i }}" class="cursor-pointer ml-1 mr-1 {{ $i == 1 ? 'active' : '' }}">{{ $i }}</a>
            @endfor
        </p>
    </div>
    @endif
    
</div>

@endsection