@extends('layouts.public')

@section('content')
<div class="container py-4">
  <h5 class="fw-bold mb-4 text-center text-md-start">
    Historial de estudios de {{ $paciente->nombre }} {{ $paciente->apPaterno }} {{ $paciente->apMaterno }}
  </h5>

  <div class="table-responsive">
    <table class="table table-striped align-middle text-sm">
      <thead class="table-light">
        <tr class="text-nowrap">
          <th>Fecha</th>
          <th>Estudios</th>
          <th>Archivos</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        @foreach($historial as $h)
        <tr>
          <td>{{ $h['fecha'] }}</td>
          <td style="white-space: normal;">{{ $h['estudios'] }}</td>
          <td class="text-center">{{ $h['archivos'] }}</td>
          <td class="text-end">
            <a href="{{ route('resultados.archivos', $h['idCita']) }}" class="btn btn-sm btn-outline-primary">
              Ver
            </a>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <div class="text-center mt-3">
    <a href="{{ route('resultados.index') }}" class="btn btn-secondary">Volver</a>
  </div>
</div>

<style>
  @media (max-width: 576px) {
    table {
      font-size: 0.9rem;
    }
    th, td {
      padding: 0.6rem;
    }
  }
</style>
@endsection