@if($diagnosticsCount == 0)
<div class="row">
    <div class="col-md-12">
        <p class="text-center display-6 fw-bold text-warning">El protocolo se habilitará cuando lo inicies. </p>
    </div>
</div>
@else
<section class="content pb-3">
    <div class="container-fluid h-100">
        <div class="row">
            <div class="col-md-6">
                @if ($ticket->statusTicket !== 'Cerrado')
                @unless ($ticket->statusTicket === 'Revisión')
                @if ($hasDiagnostics)
                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-ellipsis-v"></i> </button>
                    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
                        <li>
                            <a href="{{ route('ticket.validateAnswers', $ticket->id) }}" class="dropdown-item btn btn-outline-primary btn-md" title="Editar respuestas">Editar respuestas</a>
                        </li>
                        <li>
                            <a class="dropdown-item btn btn-outline-secondary me-md-2" href="{{route ('ticket.index')}}" tabindex="12" data-bs-toggle="tooltip" data-bs-placement="top" title="Cancelar">Cancelar</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <form action="{{ route('diagnostic.destroy', $diagnostic->id) }}" class="delete-alert" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="dropdown-item btn btn-outline-danger btn-md" title="Eliminar respuestas">Eliminar respuestas</button>
                            </form>
                        </li>
                    </ul>
                </div>
                @endif
                @endunless
                @endif
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Verificación de falla.
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{ $diagnostic->verificacionFalla }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Origen de la falla.
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->origenFalla}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Diagnostico de la falla.
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->diagnosticoFalla}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Solucion aplicada.
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->seSoluciona}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Horas trabajadas
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->horas}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Consumibles
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->consumibles}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Licencias instaladas.
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>{{$diagnostic->licencias}}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Imagenes.
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex flex-wrap">
                                    @foreach ($img as $image)
                                    <div class="m-2">
                                        <a href="{{ Storage::url($image->ruta) }}" download>
                                            <img src="{{ Storage::url($image->ruta) }}" class="rounded" width="200px" height="200px" alt="Imagen del ticket">
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 overflow-auto">
                <div class="card card-row ">
                    <div class="card-header card-info card-outline">
                        <h3 class="card-title">
                            Repuestos necesarios.
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12 overflow-auto">
                            <table id="Instalados" class="table table-hover table-ligth table-bordered mt-4 display" style="width:100%" data-page-length="25" data-order="[[ 1, &quot;dec&quot; ]]">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Cantidad</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($detailsRepair as $details)
                                    <tr>
                                        <td>{{ $details-> codigo}}</td>
                                        <td>{{ $details-> cantidad}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif