@extends('adminlte::page')

@section('title', 'Mis tickets')


@section('css')
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<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')
@include('popper::assets')
<a class="btn btn-primary btn -sm float-right" href="{{ route('new.ticket', $value) }}" @popper(Generar tickets )><i class="bi bi-plus-lg"></i><span> Crear tickets</span></a>
<h1 class="bi bi-life-preserver"> Mis tickets</h1>

@stop

@section('content')

@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>Descripción</th>
                    <th>Tipo</th>
                    <th>Dispositivo</th>
                    <th>Responsable soporte</th>
                    <th>Estado</th>
                    <th>Fecha</th>


                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tickets as $ticket)
                <tr>
                    <td>{{ $ticket->id}}</td>
                    <td>{{ $ticket->descriptionslow }} </td>
                    <td>{{ $ticket->tipoticket->name }} </td>
                    <td class="text-center">
                        @isset($ticket->dispositivoticket)
                        <a href="{{ route('dispositivo.show',  $ticket->dispositivoticket->dispositivo->serial) }}">
                            {{ $ticket->dispositivoticket->dispositivo->tipodispositivo->name }}
                            @if($ticket->dispositivoticket->dispositivo->placa) | {{ $ticket->dispositivoticket->dispositivo->placa }} @endif
                        </a>
                        @else
                        <span>N/A
                        </span>
                        @endisset

                    </td>
                    <td class="text-center">@if($ticket->operario)
                        {{ $ticket->operario->user->name }}
                        @else
                        Sin asignar
                        @endif
                    </td>
                    <td>@if($ticket->status == 'ACTIVO') <label class="badge badge-success">En proceso</label> @else <label class="badge badge-danger"> Finalizado @endif</label></td>
                    <td>{{ \Carbon\Carbon::parse($ticket->created_at)->format('d M Y') }}</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: 100px" @popper(Chat durante el ticket)><i class="bi bi-chat-dots"></i> <span> Chat</span></a>
                            <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>

@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