@extends('adminlte::page')

@section('title', 'Encuesta satisfacción')


@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap4.min.css">
@stop

@section('content_header')
    <h1  class="bi bi-clipboard2">Encuesta satisfacción</h1>
@stop

@section('content')

 @include('alerts.alert')
 @include('popper::assets')
    <div class="card card-outline card-info">

     
            <ul class="list-group">
                @foreach ($tecnicos as $tecnico)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                       {{ $tecnico->name }}
                       <strong @popper({{ $tecnico->calificacion }})>   <span  class="badge badge-primary badge-pill">{{ $tecnico->rating }}</span></strong>
                     
                    </li>
                @endforeach
            </ul>



    </div>

        <div class="card card-outline card-primary">
        <div class="card-body">

            <table class="table table-striped" id="tabdispositivos">
                <thead>
                    <tr>

                        <th class="text-center">Ticket</th>
                        <th class="text-center">Responsable</th>
                        <th class="text-center">Observación</th>
                        <th class="text-center">Calificación</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($calificaciones as $calificacion)
                    <tr>

                        <td>{{ $calificacion->ticket_id}}</td>
                        <td>{{ $calificacion->tecnico->name}}</td>
                        <td>{{ $calificacion->observacion}}</td>
                        <td>{{ $calificacion->calificacion}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>
@stop




@section('js')



    <script> console.log('Hi!'); </script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap4.min.js"></script>
    <script>
        $('#tabdispositivos').DataTable({
            "order": [[ 1, "desc" ]],
            responsive: true,
            autowidth:false,

            "language": {
            "lengthMenu": "Mostrar  _MENU_ registos por página",
            "zeroRecords": "Nada encontrado - disculpa",
            "info": "Mostrando la página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(Filtrado de  _MAX_ registros totales )",
            "search": "Buscar",
            'paginate':{
                'next': 'Siguiente',
                'previous': 'Anterior'
            }
        }
        });
    </script>
@stop