@extends('layouts.horizontal', ['title' => 'Historial del Paciente'])

@section('content')
<div class="container-fluid">
@include('layouts.partials.page-title', [
  'subtitle' => '<a href="' . route('historial.index', $paciente->idPaciente) . '" class="text-decoration-none text-primary">Historial</a>',
  'title' => 'Paciente: ' . ($paciente->nombre . ' ' . $paciente->apPaterno . ' ' . $paciente->apMaterno)
])
@if($paciente->notificacion == 1)
<div class="card border-warning shadow-sm mb-3">
    <div class="card-body d-flex justify-content-between align-items-center">

        <div class="d-flex align-items-center">
            <i class="ti ti-bell-ringing text-warning fs-3 me-3"></i>
            <div>
                <h6 class="mb-1">Notificación pendiente</h6>
                <small class="text-muted">
                    Este paciente tiene resultados listos para enviar por WhatsApp.
                </small>
            </div>
        </div>

        <form action="{{ route('pacientes.notificar',$paciente->idPaciente) }}" method="POST">
            @csrf
            <button class="btn btn-success">
                <i class="ti ti-brand-whatsapp"></i>
                Notificar paciente
            </button>
        </form>

    </div>
</div>
@endif
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<div class="col-12">
        @if (session('ok'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('ok') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif
  <div data-table class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="card-title m-0">Historial Médico</h4>
      <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalNuevoEstudio">
        <i class="ti ti-plus"></i> Nuevo Estudio
        </button>
    </div>

    <div class="card-header border-light justify-content-between d-flex">
      <div class="d-flex gap-2">
        <div class="app-search">
          <input data-table-search type="search" class="form-control" placeholder="Buscar historial...">
          <i data-lucide="search" class="app-search-icon text-muted"></i>
        </div>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-custom table-hover w-100 mb-0" id="tabla-historial">
        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
          <tr class="text-uppercase fs-xxs">
            <th>Fecha</th>
            <th>Estudios</th>
            <th>No. Archivos</th>
            <th>Archivos</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>
</div>
{{-- MODAL PARA NUEVO ESTUDIO --}}
<div class="modal fade" id="modalNuevoEstudio" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Nuevo Estudio</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="formNuevoEstudio">
        @csrf
        <input type="hidden" name="idPaciente" value="{{ $paciente->idPaciente }}">

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Fecha del estudio</label>
            <input type="date" name="fecha" class="form-control" value="{{ date('Y-m-d') }}" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Seleccionar estudios</label>
            <select id="select-estudios" name="estudios[]" multiple></select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <i class="ti ti-plus"></i> Crear Estudio
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{{-- MODAL EDITAR ESTUDIO --}}
<div class="modal fade" id="modalEditEstudio" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Editar Estudio</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <form id="formEditEstudio">
        @csrf @method('PUT')
        <input type="hidden" name="idCita" id="edit-id-cita">
        <input type="hidden" name="idPaciente" value="{{ $paciente->idPaciente }}">

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Fecha del estudio</label>
            <input type="date" name="fecha" id="edit-fecha" class="form-control" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Seleccionar estudios</label>
            <select id="edit-estudios" name="estudio[]" multiple></select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <i class="ti ti-check"></i> Guardar Cambios
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

@vite(['resources/js/pages/custom-table.js'])

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const baseArchivos = "{{ url('historial/detalle') }}"
  const modalEdit = document.getElementById('modalEditEstudio')
  const formEdit = document.getElementById('formEditEstudio')
  const selectEdit = new SlimSelect({
    select: '#edit-estudios',
    placeholder: 'Seleccionar estudios...',
    searchHighlight: true
  })

  fetch(`{{ route('historial.data', $paciente->idPaciente) }}`)
    .then(r => r.json())
    .then(rows => {
      const tbody = document.querySelector('#tabla-historial tbody')
      if (!rows.length) {
        tbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted">Sin registros</td></tr>`
        return
      }

      // Renderizar tabla
      tbody.innerHTML = rows.map(r => `
              <tr>
                <td>${r.fecha}</td>
                <td>${r.estudios}</td> 
                <td class="text-center">${r.no_archivos}</td>
                <td class="text-center">
                  <a href="${baseArchivos}/${r.id}" class="btn btn-outline-info btn-sm">
                    <i class="ti ti-folder"></i> Archivos
                  </a>
                </td>
                <td class="text-center">
                  <button class="btn btn-light btn-sm do-edit" data-id="${r.id}">
                    <i class="ti ti-edit"></i>
                  </button>
                  <button class="btn btn-danger btn-sm do-delete" data-id="${r.id}">
                    <i class="ti ti-trash"></i>
                  </button>
                </td>
              </tr>
            `).join('');


      // 🔹 Activar botón "Editar"
      tbody.querySelectorAll('.do-edit').forEach(btn => {
  btn.addEventListener('click', async e => {
    const id = e.currentTarget.dataset.id
    const res = await fetch(`/api/historial/${id}`)
    const data = await res.json()

    document.getElementById('edit-id-cita').value = data.idCita
    document.getElementById('edit-fecha').value = data.fecha

    // Primero cargamos todas las opciones
    selectEdit.setData(
      data.estudios_all.map(e => ({
        text: e.descripcion,
        value: e.idAnalisis
      }))
    )

    // Necesario para asegurar que SlimSelect terminó de renderizar
    setTimeout(() => {
      selectEdit.setSelected(data.estudios_selected)
    }, 50)


    new bootstrap.Modal(modalEdit).show()
  })
})

      // 🔹 Activar botón "Eliminar"
      tbody.querySelectorAll('.do-delete').forEach(btn => {
        btn.addEventListener('click', async e => {
          const id = e.currentTarget.dataset.id
          if (!confirm('¿Eliminar este estudio y sus archivos asociados?')) return

          const res = await fetch(`/historial/delete/${id}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
          })

          const resp = await res.json()
          if (resp.ok) {
            alert('🗑️ Estudio eliminado correctamente')
            e.target.closest('tr').remove()
          } else {
            alert('❌ Error al eliminar')
          }
        })
      })
    })

  // 🔹 Guardar cambios (PUT)
  formEdit.addEventListener('submit', async e => {
    e.preventDefault()
    const id = document.getElementById('edit-id-cita').value
    const data = new FormData(formEdit)

    const res = await fetch(`/historial/update/${id}`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
      body: data
    })

    const resp = await res.json().catch(() => ({}))
    if (resp.ok || res.ok) {
      alert('✅ Estudio actualizado correctamente')
      window.location.reload()
    } else {
      alert('❌ Error al actualizar')
    }
  })
})
</script>
<script src="https://cdn.jsdelivr.net/npm/slim-select@2.8.1/dist/slimselect.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slim-select@2.8.1/dist/slimselect.css" rel="stylesheet" />

<script>
document.addEventListener('DOMContentLoaded', async () => {
  // Inicializar SlimSelect
  const select = new SlimSelect({
    select: '#select-estudios',
    placeholder: 'Seleccionar estudios...',
    searchingText: 'Buscando...',
    searchHighlight: true,
  })

  // Cargar lista de estudios al abrir el modal
  const modal = document.getElementById('modalNuevoEstudio')
  modal.addEventListener('show.bs.modal', async () => {
    const res = await fetch('/api/estudios')
    const data = await res.json()
    const options = data.map(e => ({ text: e.descripcion, value: e.idAnalisis }))
    select.setData(options)
  })

  // Envío del formulario AJAX
  document.getElementById('formNuevoEstudio').addEventListener('submit', async e => {
    e.preventDefault()
    const data = new FormData(e.target)

    const res = await fetch('{{ route('historial.store') }}', {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
      body: data
    })

    const resp = await res.json()
    if (resp.success) {
      alert('✅ ' + resp.message)
      window.location.href = `/historial/detalle/${resp.idCita}`
    } else {
      alert('❌ Error al guardar estudio')
    }
  })
})
</script>
@endpush