@extends('layouts.dashboardnew')

@section('content')


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                 
                <div class="col-md-3 col-6">
                    <div class="fomr-group mb-3">
                        <a class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#agregar">Agregar servicios</a>
                    </div>
                </div>
                
                
                <table class="table table-striped table-bordered zero-configuration">
			        <thead>
					    <tr>
						    <th class="text-center">Nombre del servicio</th>
						    <th class="text-center">Acciones</th>
					    </tr>
				    </thead>

				    <tbody>
					    @foreach ($servicios as $ser)
					    <tr>
						    <td class="text-center">{{ $ser->nombre }}</td>
						    <td class="text-center">
						         
						        <a class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#editar" onclick="seleccionar('{{$ser->id}}','{{$ser->nombre}}')">
						        	<i class="fa-solid fa-pencil"></i>
						        </a>
                                    
                                <a class="btn btn-danger text-white" href="{{ route('servicios-eliminar', ['id' => $ser->id]) }}">
                                	<i class="fa-solid fa-circle-xmark"></i>
                                </a>

						    </td>
					    </tr>
					    @endforeach
				    </tbody>
			    </table>
                
            </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">Crear servicio</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('servicios-save')}}" method="post">
                    {{ csrf_field() }}
             

                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Nombre del servicio</label>
                            <input type="text" class="form-control" name="nombre" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">   
                           <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="editar" 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 servicio</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('servicios-editar')}}" method="post">
                    {{ csrf_field() }}
                    
                    <input type="hidden" name="id" class="id">

                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Nombre del servicio</label>
                            <input type="text" class="form-control nombre" name="nombre" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">   
                           <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.scripBotones')

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