@extends('layouts.dashboardnew')

@section('content')

<div class="container-fluid paso-uno">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <div class="col-md-4">
                        <div class="form-group">
                            <a type="button" class="btn btn-info btn-block text-white" onclick="toggle()">Agregar Nuevas Redes Sociales</a>
                        </div>
                    </div>
                    
                    
                    
            <table class="table table-striped table-bordered zero-configuration">
				<thead>
					<tr>
						<th class="text-center">#</th>
						<th class="text-center">nombre</th>
						<th class="text-center">Link</th>
						<th class="text-center">Tipo</th>
						<th class="text-center">Imagen</th>
						<th class="text-center">Acciónes</th>
					</tr>
				</thead>

				<tbody>
					@foreach ($redes as $red)
					<tr>
						<td class="text-center">{{ $red->id }}</td>
						<td class="text-center">{{ $red->nombre }}</td>
						<td class="text-center">{{ $red->link }}</td>
						<td class="text-center">
						    @if($red->tipo == '1')
						    Glyphicon
						    @else
						    Imagen
						    @endif
						</td>
						<td class="text-center">
						    @if($red->tipo == '1')
						    <i class="{{$red->imagen}}" style="color: #{{$red->color}}; width:40px; heigth:40px;"></i>
						    @else
						    <img src="{{asset('redes/'.$red->imagen)}}" style="width:40px; heigth:40px;">
						    @endif
						</td>
						<td class="text-center">
						    
						    <a class="btn btn-info text-white" data-toggle="modal" data-target="#redsocial" onclick="seleccionar('{{$red->id}}','{{$red->link}}','{{$red->color}}','{{$red->imagen}}','{{$red->tipo}}','{{$red->nombre}}')">Editar</a>
						    
						    <a href="{{route('setting-eliminar-red', $red->id)}}" class="btn btn-danger">Eliminar</a>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table> 
                    
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid paso-dos" style="display:none;">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <form class="" action="{{route('setting-save-red')}}" method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                
                     <div class="col-sm-12">
                         <div class="form-group">
                           <label for="">Cantidad de nuevas redes sociales</label>
                          <input type="number" class="form-control" name="cantidad" id="cantidad" required onkeyup="confiredes()">
                         </div> 
                     </div>
                     
                
                     <div id="valor">
  
                     </div>
                
                     <div class="col-sm-12">
                         <div class="form-group">
                           <button class="btn btn-info btn-block text-white" type="submit">Aceptar</button>
                         </div>
                     </div>   
                     
                    </form>
            
                </div>
            </div>
        </div>
    </div>
</div>




<div class="modal fade" id="redsocial" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Actualizar Redes Sociales</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('setting-editar-red')}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }} 
            
            <input type="hidden" name="id" id="id">

        
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Nombre</label>
                    <input type="text" class="form-control" name="nombre" id="nombre" required>
                </div>
            </div>
            
            
            <div class="col-md-6">
                <div class="form-group">
                    <label>Link</label>
                    <input type="text" class="form-control" name="link" id="link" required>
                </div>
            </div>


            <div class="col-md-6">
                <div class="form-group">
                    <label>Color</label>
                    <input type="text" class="form-control" name="color" id="color" required>
                </div>
            </div>


            <div class="col-md-6">
                <div class="form-group">
                    <label>Icono</label>
                    <input type="text" class="form-control" name="icono1" id="icono" required>
                </div>
            </div>
               
               
            <div class="col-md-6">
                <div class="form-group">
                    <label>Imagen</label>
                    <input type="file" name="imagen1">
                </div>
            </div>
        </div>
        
            
            <div class="col-md-12">
                <div class="form-group">   
                  <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>
            </div>
            
            
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div> 


@endsection

@include('usuario.componentes.scritpTable')      


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

  function toggle() {
    $('.paso-uno').toggle('slow')
    $('.paso-dos').toggle('slow')
  }
  
  
    function confiredes() {
        
      $('#valor').empty()
      let cantidad = $('#cantidad').val()
      
      for (var i = 0; i < cantidad; i++) {
        $('#valor').append(
        
        '<div class="row">'+    
          '<div class="col-sm-3">' +
            '<div class="form-group">'+
              '<label for="">Nombre (*) </label>' +
              '<input type="text" class="form-control" name="nombre' + (i + 1) + '">'+
              '</div>'+
          '</div>'+

          '<div class="col-sm-3">' +
             '<div class="form-group">'+
                '<label for="">Link (*) </label>' +
                '<input type="text" class="form-control" name="link' + (i + 1) + '">'+
              '</div>'+
          '</div>'+
          
          '<div class="col-sm-2">' +
             '<div class="form-group">'+
               '<label for="">Icono (*) </label>' +
               '<input type="text" class="form-control" name="icono' + (i + 1) + '">'+
             '</div>'+  
          '</div>'+
          
          '<div class="col-sm-2 ">' +
             '<div class="form-group">'+
                '<label for="">Imagen (Opcional) </label>' +
                '<input type="file" name="imagen' + (i + 1) + '">'+
             '</div>'+    
          '</div>'+
          
          '<div class="col-sm-2">' +
              '<div class="form-group">'+
                  '<label for="">Color (Opcional) </label>' +
                  '<input type="text" class="form-control" name="color' + (i + 1) + '">'+
              '</div>'+
          '</div>'+
        '</div>'  
        )
      }
  }
  
  
    function seleccionar(id, link, color, imagen, tipo, nombre){
      
       if(tipo == 1){
         $('#icono').val(imagen); 
       }
       
        $('#id').val(id);
        $('#nombre').val(nombre);
        $('#link').val(link);
        $('#color').val(color);
        
    }  
</script>
@endpush