@extends('template.portal.layout')
@section('content-body')
    <div class="portlet light">
        <div class="portlet-body">
            @if(!empty($mision) && count($mision) > 0 && !empty($vision) && count($vision) > 0)
                <div class="row">
                    <div class="col-xs-12 col-sm-6 text-center">
                        <img src="{{ asset($mision['urlimagen']) }}" alt="misionvision" style="max-width: 600px; width: 100%; height: 300px; object-fit: cover;">
                        <hr class="visible-xs-block">
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="titulo-default">{{ $mision['titulo'] }}</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <h6 style="font-weight:500">{!! $mision['descripcion'] !!}</h6>
                            </div>
                        </div>
                        @if($mision['video_url'])
                            <div class="row">
                                <div class="col-xs-12">
                                    <a target="_blank" href="{!! $mision['video_url'] !!}" style="font-weight:500; font-family: DINCondensed !important; font-size: 20px;">Ver video</a>
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="titulo-default">{{ $vision['titulo'] }}</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <h6 style="font-weight:500">{!! $vision['descripcion'] !!}</h6>
                            </div>
                        </div>

                        @if($vision['video_url'])
                            <div class="row">
                                <div class="col-xs-12">
                                    <a target="_blank" href="{!! $vision['video_url'] !!}" style="font-weight:500; font-family: DINCondensed !important; font-size: 20px;">Ver video</a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if(!empty($principio) && count($principio) > 0)
                    <hr>
                    <div class="row">
                        <div class="col-xs-12">
                            <h2 class="titulo-default">Principios</h2>
                            <br>
                        </div>
                    </div>
                @for($i = 0; $i < count($principio); $i++)
                    <div class="row">
                        <div class="col-xs-5 col-sm-2 text-left">
                            <img src="{{ asset($principio[$i]['urlimagen']) }}" alt="principio" style="max-width: 132px; width: 100%; height: 132px; object-fit: cover;">
                        </div>
                        <div class="col-xs-7 col-sm-10">
                            <div class="row">
                                <div class="col-xs-12">
                                    <h4 class="titulo-default">{{ $principio[$i]['titulo'] }}</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <h6 style="font-weight:500">{{ $principio[$i]['descripcion'] }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                @endfor
            @endif
        </div>
    </div>
@endsection