@extends('layouts.app')

@section('htmlheader_title')
  Home
@endsection


@section('main-content')

<div>
    
         <h1 class="text-center titulo">Servicios</h1>


        <div class="box box-default">
            <!-- Default panel contents -->
            <div class="box-header with-border">
             <a href="{{ route('servicio.create') }}" class="btn btn-primary btn-add pull-right waves-effect waves-light"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
            </div>

            <div class="box-body">
              
              <div class="table-responsive">
    <table class="table table-hover table-striped" id="servicios">
            <thead>
                <tr>
                  <th class="text-center">#</th>
                  <th class="text-center">Nombre</th>
                  <th class="text-center">Descripción</th>
                  <th class="text-center">Operaciones</th>  

                </tr>
            </thead>
            <tbody>
                @foreach($servicios as $servicio)
                <tr>
                    <td>{{ $servicio->id }}</td>
                    <td>{{ $servicio->nombre }}</td>
                    <td>{{ $servicio->descripcion }}</td>
                    <td class="text-center">
                        <a class="btn btn-default" href="{{ route('servicio.edit',['id' => $servicio->id] )}}" ><span class="glyphicon glyphicon-edit" aria-hidden="true"></a> 
                        <a class="btn btn-danger" href="{{ route('/servicio/destroy',['id' => $servicio->id] )}}" ><span class="glyphicon glyphicon-trash" aria-hidden="true"></a>
                    </td>

                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="text-center">
        </div>
        </div>
            </div>

 
        </div>
	
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script>
  $(document).ready(function(){
    $('#servicios').DataTable( {
        "language": {
    "decimal":        "",
    "emptyTable":     "Datos no dispobibles en la tabla",
    "info":           "<p>Servicios   <span class='badge'>_TOTAL_</span> ",
    "infoEmpty":      "Servicios 0 de 0 de 0 entradas",
    "infoFiltered":   "(filtrado desde _MAX_ entradas)</p>",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Ver _MENU_",
    "loadingRecords": "Cargando...",
    "processing":     "Procesando...",
    "search":         "Buscar:",
    "zeroRecords":    "Ningún resultado disponible",
    "paginate": {
        "first":      "Primero",
        "last":       "Ultimo",
        "next":       "Siguiente",
        "previous":   "Anterior"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}
    } );
  });

</script>
@endsection