@extends('layouts.public')

@section('title', 'Panel del Doctor')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="fw-bold text-primary m-0">Bienvenido Dr. {{ $doctor->nombre }}</h3>
    {{-- <a href="{{ route('resultados.doctor.interpretaciones',$doctor->idDoctor) }}"
    class="btn btn-warning">
    <i class="ti ti-stethoscope"></i>
    Interpretaciones
    </a> --}}
    <a href="{{ route('resultados.doctor.agenda', $doctor->idDoctor) }}" class="btn btn-outline-primary">
  <i class="ti ti-calendar"></i> Agenda
</a>

  </div>

  <div class="card shadow-sm">
    <div class="card-header">
      <h5 class="mb-3">Citas recientes Últimos 3 meses, si su paciente tiene mas tiempo usar el histórico</h5>
          <div class="row g-2">

              <div class="col-md-6">
                  <input
                      type="text"
                      id="buscar"
                      class="form-control"
                      placeholder="Buscar entre pacientes recientes...">
              </div>

              <div class="col-md-6">
                  <input
                      type="text"
                      id="buscarHistorico"
                      class="form-control"
                      placeholder="🔍 Buscar histórico del paciente">
              </div>

          </div>

      </div>
    <div class="table-responsive">
      <table class="table table-hover mb-0" id="tablaCitas">
        <thead class="bg-light">
          <tr>
            <th>Fecha</th>
            <th>Paciente</th>
            <th>Expediente</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>
        <tbody id="tbodyPacientes">
          @forelse ($pacientes as $paciente)
            <tr>
              <td>
                @if ($paciente->ultima_cita)
                    {{ \Carbon\Carbon::parse($paciente->ultima_cita)->format('d/m/Y H:i') }}
                @else
                    <span class="text-muted">Sin citas</span>
                @endif
              </td>

              <td>{{ $paciente->nombre }} {{ $paciente->apPaterno }} {{ $paciente->apMaterno }}</td>
              <td>{{ $paciente->expediente }}</td>

              <td class="text-center">
                <a href="{{ route('resultados.doctor.paciente.historial', [
                    'idPaciente' => $paciente->idPaciente,
                    'doctor' => $doctor->idDoctor
                ]) }}"
                class="btn btn-outline-primary btn-sm">
                    <i class="ti ti-folder"></i> Historial de Estudios
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="4" class="text-center text-muted py-3">Sin pacientes asignados</td>
            </tr>
          @endforelse
          </tbody>

      </table>
    </div>
  </div>
</div>

<script>
document.getElementById('buscar').addEventListener('keyup', e => {
  const val = e.target.value.toLowerCase()
  document.querySelectorAll('#tablaCitas tbody tr').forEach(tr => {
    tr.style.display = tr.textContent.toLowerCase().includes(val) ? '' : 'none'
  })
})
const buscarHistorico = document.getElementById('buscarHistorico');

let timeout = null;

buscarHistorico.addEventListener('keyup', function () {

    clearTimeout(timeout);

    const texto = this.value.trim();

    if (texto.length == 0) {
        location.reload();
        return;
    }

    timeout = setTimeout(async () => {

        const res = await fetch(
            `/resultados/doctor/{{ $doctor->idDoctor }}/buscar-historico?buscar=${encodeURIComponent(texto)}`
        );

        const pacientes = await res.json();

        const tbody = document.getElementById('tbodyPacientes');

        if (pacientes.length === 0) {

            tbody.innerHTML = `
                <tr>
                    <td colspan="4" class="text-center text-muted">
                        No se encontraron pacientes.
                    </td>
                </tr>
            `;

            return;
        }

        tbody.innerHTML = pacientes.map(p => `
            <tr>

                <td>${p.ultima_cita}</td>

                <td>${p.nombre}</td>

                <td>${p.expediente}</td>

                <td class="text-center">

                    <a href="${p.url}"
                        class="btn btn-outline-primary btn-sm">

                        <i class="ti ti-folder"></i>

                        Historial de Estudios

                    </a>

                </td>

            </tr>
        `).join('');

    },300);

});
</script>
@endsection