@extends("layout.pages.app")
@section("content")
    <h1>Diputadas/os en Orden Alfabético</h1>
    <h2>LXI Legislatura</h2>
    <!--
    <p>Esta sección está actualizada con la información disponible al sábado 4 de septiembre a las 13:00 horas, por lo que aún no refleja los posibles cambios que pudieran haberse dado posterior a esa fecha, en cuyo caso, una vez validada la información por parte de la Secretaría de Asuntos Parlamentarios, se actualizará a la brevedad.</p>-->

    <div style="width: 100%; margin: auto;">
{{--        <button onclick="location.href='gruposparlamentarios'">Grupos Parlamentarios</button>--}}
{{--        <button onclick="location.href='distritos'">Por Distrito</button>--}}
        <!--<button onclick="location.href='diputadasydiputadoslxi'">LXI Legislatura</button>-->
        <!--<button onclick="window.open('diputadasydiputadosprint')"><i class="fas fa-print"></i> Imprimir</button>-->
        <!--<button onclick="window.open('/documentos/directorio/202103_directorio.pdf')"><i class="fas fa-phone-volume"></i> Directorio</button>-->
        <!--<button onclick="location.href='municipios.php'">Municipios</button>-->
    </div>

    <div style="clear: both; height: 25px;"></div>
    <!-- FOTO -->
    @foreach($diputados as $item)
        <div style="font-family: 'Arimo', sans-serif;font-weight: 300;">

            <div style="text-align: center; width: 140px; float: left;">
                <div
                    style="background: linear-gradient( 90deg, rgb({{$item->partido->rgb}},1.00) 0%, rgb({{$item->partido->rgb2}},1.00) 100% ); height: 130px; width: 130px; border-radius: 50%; padding: 5px; float: left;">
                    <div style="background: rgba(255,255,255); border-radius: 50%; height: 130px; width: 130px;">
                        <div
                            style="background: url({{asset("storage/img/fotos/dip/lxi/")}}/{{$item->foto}}) no-repeat; background-size: 130px; width: 130px; height: 130px; float: left; border-radius:50%;"></div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <img src="{{asset("storage/img/partidos/")}}/{{$item->partido->emblema}}"
                     style="height: 45px; margin: 5px auto;">
            </div>
            <!-- FIN FOTO -->

            <!-- DATOS -->
            <div
                style="float: left; font-size: 1.2em; font-weight: 800; font-family: font-family: 'Arimo', sans-serif; color: rgba(57,57,59,1.00); text-align: left; padding: 2px; margin: 35px 25px;">
                {{$item->apaterno}}
                {{$item->amaterno}},
                {{$item->nombres}}
                <br>
                <span style="color: rgb(100,100,100); font-size: 0.8em; font-weight: 300;">
                @if($item->distrito->distrito == "plurinom")
                        Representación Proporcional
                    @else
                        Distrito {{$item->distrito->distrito}} - {{$item->distrito->municipio}}
                    @endif
            </span>
                <br>

                <span style="color: rgb(137,138,141); font-size: 0.8em; font-weight: 300;">
                    {{$item->partido->nombre}}
                    ({{$item->partido->siglas}})
                </span><br>
                @if($item->email)

                    <span style="color: rgb(137,138,141); font-size: 0.8em; font-style: italic; font-weight: 300;">
                    <i class="fas fa-envelope-open-text"></i>
                    {{$item->email}}
                </span><br>
                @endif
            <!-- FACEBOOK -->
                @if($item->facebook)
                    <a href="http://facebook.com/{{$item->facebook}}" target="_blank"
                       style="text-decoration: none; color: rgba(150,0,72,1.00); font-size: 0.8em; font-weight: 300;"><i
                            class="fab fa-facebook"></i> /{{$item->facebook}}</a><br>
                @endif

            <!-- TWITTER -->
                @if($item->twitter)
                    <a href="http://twitter.com/{{$item->twitter}}" target="_blank"
                       style="text-decoration: none; color: rgba(150,0,72,1.00); font-size: 0.8em; font-weight: 300;"><i
                            class="fab fa-twitter"></i> @ {{$item->twitter}}</a><br>
                @endif

            <!-- INSTAGRA, -->
                @if($item->instagram)
                    <a href="http://instagram.com/{{$item->instagram}}" target="_blank"
                       style="text-decoration: none; color: rgba(150,0,72,1.00); font-size: 0.8em; font-weight: 300;"><i
                            class="fab fa-instagram"></i> @ {{ $item->instagram }}</a><br>
            @endif

            <!--<button onclick="location.href='ficha'" style="font-size: 0.6em;">Ver ficha</button>-->

                <div style="height: 20px;"></div>
            </div>
            <div style="clear: both; height: 20px;"></div>
            <!-- FIN DATOS -->
        </div>
    @endforeach
@endsection