@extends('layouts.dashboardnew')

@section('content')

<div class="row paso-uno">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                
                <div class="col-md-3">
                    <div class="form-group mb-3">
                        <a type="button" class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#agregar">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">Imagen</th>
                        <th class="text-center">Acciones</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">
                            <img src="{{ $red->imagen }}" style="width:40px;">
                        </td>
                        
                        <td class="text-center">
                            
                            <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#redsocial" onclick="seleccionar('{{$red->id}}','{{$red->link}}','{{$red->imagen}}','{{$red->nombre}}')">
                                <i class="fa fa-edit"></i>
                            </a>
                            
                            <a href="{{route('setting-eliminar-red', $red->id)}}" class="btn btn-danger">
                                <i class="fa-solid fa-circle-xmark"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

                 </div>
            </div>
        </div>
    </div>
</div> 



<div id="agregar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Agregar red social</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('setting-save-red')}}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                     
                    <input type="hidden" name="id" class="id">
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                          <label class="form-label">Nombre</label>
                          <input type="text" class="form-control" name="nombre" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                          <label class="form-label">Link</label>
                          <input type="url" class="form-control" name="link" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                           <label class="form-label">Imagen </label>
                          <input class="form-control" type="file" name="imagen" required>
                        </div>   
                    </div>
            
              
                    <div class="col-md-12 mb-3">
                        <div class="form-group"> 
                           <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
                
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>



<div id="redsocial" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Editar red social</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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" class="id">
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                          <label class="form-label">Nombre</label>
                          <input type="text" class="form-control nombre" name="nombre" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                          <label class="form-label">Link</label>
                          <input type="url" class="form-control link" name="link" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                           <label for="">Imagen </label>
                           <input class="form-control" type="file" name="imagen">
                        </div>   
                    </div>
            
              
                    <div class="col-md-12 mb-3">
                        <div class="form-group"> 
                           <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
                
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


@endsection

@include('usuario.componentes.scritpTable')      


@push('script')
<script type="text/javascript">
  
function seleccionar(id, link, imagen, nombre){
       
    $('.id').val(id);
    $('.nombre').val(nombre);
    $('.link').val(link);
        
}

</script>
@endpush