@extends('emails.layout')

@section('css')
    <style>
        h2 {

            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-style: normal;
            font-size: 36px;
            letter-spacing: 1px;
            color: #000;
        }

        .titulo-elemento {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            color: #000;
            line-height: 20px;
        }

        .descripcion {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            color: #545454;
            line-height: 16px;
        }

        a {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            color: #1E22AA
        }

        .profile-pic {
            max-width: 33px;
            box-sizing: border-box;
            vertical-align: middle;
            border-style: none;
            max-width: 33px;
            border-radius: 50%;
        }

        .text-center {
            text-align: center;
        }

        .col-3 {
            line-height: 24px;
            font-size: 16px;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            font-weight: normal;
            width: 25%;
            margin: 0;
        }

        .col-9 {
            line-height: 24px;
            font-size: 16px;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            font-weight: normal;
            width: 75%;
            margin: 0;
        }

        .img-fluid {
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            width: 100%;
            max-width: 100%;
            border: 0 none;
        }

        .mt-3 {
            margin-top: 1.5rem;
        }

        .mb-3 {
            margin-bottom: 1.5rem;
        }
    </style>
@endsection

@section('content')
    <div data-slot-container=""
         style="color: rgb(34, 34, 34); font-family: nunito, arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"
         class="ui-sortable">

        <div class="text-center">
            <img class="  " width="82" height="82"
                 {{--src="http://iae.lyncros.com/imgs/icon.png"--}}
                 src="{{ asset('imgs/icon.png') }}"
            >
        </div>

        @foreach ($slot as $itemG)
            <div class="text-center mt-3 mb-3">
                <table style="margin-left: 10rem; margin-right: 10rem;">
                    <tr>
                        <td align="right"><img width="30" height="30"
                                               {{--src="http://iae.lyncros.com/imgs/group_24px.png"--}}
                                               src="{{ asset('imgs/group_24px.png') }}"
                            /></td>
                        <td>{{ $itemG['grupo']->titulo }}</td>
                    </tr>
                </table>
            </div>


            @if (count($itemG['nuevos_usuarios']) > 0)
                <div class="card mb-3">
                    <div class="card-body">
                        <table>
                            <tr>
                                <td class="col-3" align="left">
                                    <table>
                                        <tr>

                                            <td colspan="2"
                                                style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; font-size: 16px; margin: 0;"
                                                align="left">
                                                <table class="mx-auto"
                                                       align="center"
                                                       border="0"
                                                       cellpadding="0"
                                                       cellspacing="0"
                                                       style="font-family: 'Roboto', sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0px; border-collapse: collapse; margin: 0 auto;">
                                                    <tbody>
                                                    <tr>
                                                        <td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; font-size: 16px; margin: 0;"
                                                            align="left">
                                                            <img class="img-fluid rounded-circle profile-pic "
                                                                 src="{{  $itemG['nuevos_usuarios'][0]->foto ? $itemG['nuevos_usuarios'][0]->foto : asset('imgs/avatar.png') }}"
                                                                 style="height: 33px; line-height: 100%; outline: none; text-decoration: none; width: 33px; max-width: 33px; box-sizing: border-box; vertical-align: middle; border-radius: 50%; border: 0 none;">
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>

                                            </td>

                                        </tr>
                                        <tr>
                                            @for ($i = 1; $i < count($itemG['nuevos_usuarios']) && $i<3; $i++)
                                                <td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; font-size: 16px; margin: 0;"
                                                    align="left">
                                                    <table class="mx-auto"
                                                           align="center"
                                                           border="0"
                                                           cellpadding="0"
                                                           cellspacing="0"
                                                           style="font-family: 'Roboto', sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0px; border-collapse: collapse; margin: 0 auto;">
                                                        <tbody>
                                                        <tr>
                                                            <td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; font-size: 16px; margin: 0;"
                                                                align="left">
                                                                <img class="img-fluid rounded-circle profile-pic "
                                                                     src="{{  $itemG['nuevos_usuarios'][$i]->foto ? $itemG['nuevos_usuarios'][$i]->foto : asset('imgs/avatar.png') }}"
                                                                     style="height: 33px; line-height: 100%; outline: none; text-decoration: none; width: 33px; max-width: 33px; box-sizing: border-box; vertical-align: middle; border-radius: 50%; border: 0 none;">
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                </td>
                                            @endfor
                                        </tr>
                                    </table>
                                </td>
                                <td class="col-9" align="left" align="left"
                                    valign="top">
                                    <h5 class="titulo-elemento"
                                        style="margin-top: 0; margin-bottom: 0; font-weight: 400; color: #000; vertical-align: baseline; font-size: 16px; line-height: 20px; font-family: ''Roboto'', sans-serif; font-style: normal;"
                                        align="left">
                                        {{ count($itemG['nuevos_usuarios']) }}
                                        @if (count($itemG['nuevos_usuarios']) <= 1)
                                            nuevo usuario agregado.
                                        @else
                                            nuevos usuarios
                                            agregados.
                                        @endif
                                    </h5>
                                    <div class="descripcion"
                                         style="font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 13px; color: #545454; line-height: 16px;">
                                        @foreach ($itemG['nuevos_usuarios'] as $nuevosUsuario)
                                            @if($loop->iteration == 5)
                                                y
                                            @elseif(!$loop->first)
                                                ,
                                            @endif
                                            {{ $nuevosUsuario->nombre }} {{ $nuevosUsuario->apellido }}

                                            @break($loop->iteration == 5)
                                        @endforeach
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            @endif

            @if ($itemG['mensajes_no_leidos'] > 0)
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <table>
                                <tr>
                                    <td class="col-3" align="left">
                                        <img class="mx-auto img-fluid" width="500" height="500"
                                             src="{{ asset('imgs/rectangle-chat-2-2.png') }}"
                                                {{--src="http://iae.lyncros.com/imgs/rectangle-chat-2-2.png"--}}
                                        />
                                    </td>
                                    <td class="col-9" align="left"
                                        valign="top"
                                        style="line-height: 24px; font-size: 16px; min-height: 1px; padding-right: 15px; padding-left: 15px; font-weight: normal; width: 75%; margin: 0;">

                                        <h5 class="titulo-elemento"
                                            style="margin-top: 0; margin-bottom: 0; font-weight: 400; color: #000; vertical-align: baseline; font-size: 16px; line-height: 20px; font-family: ''Roboto'', sans-serif; font-style: normal;"
                                            align="left">
                                            Hay {{ $itemG['mensajes_no_leidos'] }}
                                            @if ($itemG['mensajes_no_leidos'] <= 1)
                                                nuevo mensaje
                                            @else
                                                nuevos mensajes
                                            @endif
                                            en el grupo que no has
                                            leído.
                                        </h5>
                                        <a href="{{ $itemG['chat_url'] }}"
                                           style="font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 13px; color: #1E22AA;">Ir
                                            al chat</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

            @foreach ($itemG['novedades'] as $articulo)
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <table>
                                <tr>
                                    <td class="col-3" align="left">
                                        <img class="mx-auto img-fluid" width="500" height="500"
                                             src="{{ $articulo->imagen }}"/>
                                    </td>
                                    <td class="col-9" align="left">
                                        <h5 class="titulo-elemento">{{ $articulo->titulo }}</h5>
                                        <p class="descripcion">
                                            {!! str_limit(strip_tags($articulo->descripcion),$words = 10, $end='...') !!}
                                            <a href="{{ $articulo->link }}">Leer más</a>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        @endforeach

    </div>
@endsection