@extends('layouts.menu')

@section('title', 'Tickets')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Tickets</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive mt-2">
                <table id="tabla_listado_tickets" class="table table-striped compact" style="width:100%">
                    <thead class="table-dark">
                    <tr>
                        <td>Asunto</td>
                        <td>Fecha Registro</td>
                        <td>Hora Registro</td>
                        <td>Vehiculo</td>
                        <td>Odometro</td>
                        <td>Evidencia</td>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($listado as $key => $item)
                        <tr>
                            <td>{{$item->asunto}}</td>
                            <td>{{$item->fecha_registro}}</td>
                            <td>{{$item->hora_registro}}</td>
                            <td>{{$item->vehiculo}}</td>
                            <td>{{$item->odometro}}</td>
                            <td>
                                <div class="row">
                                    @foreach($item->evidencias as $image)
                                        <div class="col-md-2">
                                            <a href="{{'storage/'.$image->image}}" target="_blank"
                                               class="btn btn-primary me-1 ms-1">
                                                <i class="fa-solid fa-image"></i>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>


    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            CrearTabla('tabla_listado_tickets');
        });
    </script>


@stop