@extends('adminlte::page')

@section('title', 'Soporte técnico')


@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')
    <a class= "btn btn-primary btn -sm float-right" href="{{ route('new.ticket', $value) }}"><i class="bi bi-plus-lg"></i><span @popper(Añadir nuevos dispositivos )> Crear Ticket</span></a>
    <h1  class="bi bi-clipboard2">Listado de tickets</h1>

@stop

@section('content')
@include('popper::assets')
@include('alerts.alert')
    <div class="card card-outline card-primary">
        <div class="card-body">
            <table class="table table-striped" id="tabdispositivos">
                <thead>
                    <tr>
                        <th>Nro.</th>
                        <th>Fecha</th>
                        <th>Tiempo</th>
                        <th>Funcionario</th>
                        <th>Descripción</th>
                        <th>Responsable</th>
                        <th>Estado</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                     @foreach ($tickets as $ticket)
                    <tr>
                        <td>{{ $ticket->id }}</td>
                        <td>{{ \Carbon\Carbon::parse($ticket->created_at)->format('d M Y') }}</td>
                        <td>{{ \Carbon\Carbon::parse($ticket->created_at)->diffForHumans() }}</td>
                        <td>{{ $ticket->user->name }}</td>
                        <td>{{ $ticket->descriptionslow }}</td>
                        <td>@if($ticket->operario)
                            {{ $ticket->operario->user->name }}
                            @else
                            <span class="text-secondary">Sin asignar</span>
                            @endif
                        </td>

                        <td class="text-center">@if($ticket->status == 'ACTIVO') <span class= "badge badge-success">Activo</span> @else <span class= "badge badge-danger"> Finalizado @endif</td>


                        <td class="text-center">
                            <div class="btn-group" role="group" aria-label="Basic example">
                            <a class="btn btn-primary" href="{{ route('mis_tickets.show', $ticket->id) }}" style="width: 130px"><i class="bi bi-chat-dots"></i> <span @popper(Chat durante el ticket)> Chat</span></a>
                            @if($ticket->status == 'ACTIVO')
                            <a class="btn btn-success" href="{{ route('soporte.ticket', $ticket->id) }}"   style="width: 130px"><i class="bi bi-pencil-square"></i> <span @popper(Resolver o asignar ticket )> Resolver</span></a>
                            @else
                            <a class="btn not-active bg-secondary" href="#" disabled style="width: 130px"><i class="bi bi-pencil-square"></i> <span @popper(Ticket finalizado, puede visualizar el informe)> Resolver</span></a>
                            @endif
                            @include('popper::assets')


                            <a class="btn btn-warning" href="{{ route('soporte.informe', $ticket->id) }}" style="width: 130px"><i class="bi bi-journal-text"></i> <span @popper(Ver informe del ticket )> Informe</span></a>

                            </div>
                        </td>

                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Button trigger modal -->
@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({
            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