@extends('layouts.auth')

@section('content')

<div class="col-12 mt-5">
    <div class="form-group">
        
       <h3 class="text-center m-3" style="color: {{$informacion->color}};">{{ $informacion->titulo }}</h3>
       <h3 class="text-center m-3" style="color: {{$informacion->color}};">{{ $informacion->subtitulo }}</h3>
       <h3 class="text-center m-3">{!! $informacion->contenido_modal !!}</h3>
       
       <h3 class="text-center m-3">
           <img class="rounded-circle" src="{{ asset('fondo/'.$informacion->user->avatar) }}" style="width: 150px; height: 150px;">
       </h3>
       <h3 class="text-center m-2" style="color: {{$informacion->color}};">{{$informacion->user->display_name}}</h3>
       
       <h3 class="text-center m-2" style="color: {{$informacion->color}};"> Contactame: </h3>
    </div>
</div>


<div class="d-flex justify-content-center">
    <div class="col-6 mt-3">
        <div class="form-group">
            <div class="row">
                
        @if($informacion->facebook != null)
        <div class="col-3">
            <a href="{{$informacion->facebook}}" target="_black">
            <div class="form-group text-center">
                <i class="fa fa-facebook" style="font-size: 40px;"></i> 
                <p>Facebook</p>
            </div>
            </a>
        </div>
        @endif
        
        
        @if($informacion->instagram != null)
        <div class="col-3">
            <a href="{{$informacion->instagram}}" target="_black">
                <div class="form-group text-center">
                    <i class="fa fa-instagram" style="font-size: 40px;"></i> 
                    <p>Instagram</p>
                </div>
            </a>    
        </div>
        @endif
        
        
        @if($informacion->whatsap != null)
        <div class="col-3">
            <a href="{{$informacion->whatsap}}" target="_black">
                <div class="form-group text-center">
                    <i class="fa fa-whatsapp" style="font-size: 40px;"></i> 
                    <p>Whatsapp</p>
                </div>
            </a>    
        </div>
        @endif
        
        
        @if($informacion->tiktok != null)
        <div class="col-3">
            <a href="{{$informacion->tiktok}}" target="_black">
                <div class="form-group text-center">
                    <i class="fa fa-youtube" style="font-size: 40px;"></i> 
                    <p>Youtube</p>
                </div>
            </a>    
        </div>
        @endif
        
        
        @if($informacion->twitter != null)
        <div class="col-3">
            <a href="{{$informacion->twitter}}" target="_black">
                <div class="form-group text-center">
                    <i class="fa fa-twitter" style="font-size: 40px;"></i> 
                   <p>Twitter</p>
                </div>
            </a>
        </div>
        @endif
        
        <div class="col-3">
            <a href="{{route('autenticacion.new-register').'?ref='.$informacion->iduser}}" target="_black">
                 <div class="form-group text-center">
                     <i class="fa fa-user-plus" style="font-size: 40px;"></i> 
                     <p>Unete a Mi equipo</p>
                 </div>
            </a>
        </div>
           
           </div>
        </div>
    </div>
</div>

@endsection

@push('script')
<script type="text/javascript">

   $("#main-wrapper").css('background-image', 'url("{{ asset('presentacion/'.$informacion->fondo) }}")');
   $('#main-wrapper').css('background-size', '100% 100%');
   $('#main-wrapper').css('height', 'auto');
   $('#main-wrapper').css('min-height', '100%'); 
</script>
@endpush