@extends('layouts.horizontal', ['title' => 'Pacientes'])
@vite(['resources/js/pages/custom-table.js'])
@section('content')
<div class="container-fluid">
@include('layouts.partials.page-title', ['subtitle' => 'Pacientes', 'title' => 'Listado de Pacientes'])
<div class="row mb-3">
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
<div class="col-md-4">
  <div class="card border-0 shadow-sm cursor-pointer" onclick="filtrarTabla('notificar')">
    <div class="card-body d-flex align-items-center">
      <div class="avatar-md bg-success-subtle rounded me-3">
      <i class="ti ti-brand-whatsapp fs-3 text-success"></i>
      </div>

      <div>
      <div class="text-muted small">Pacientes por Notificar</div>
      <h4 class="mb-0">{{ $porNotificar }}</h4>
      </div>
    </div>
  </div>
</div>
</div>
<div data-table data-table-rows-per-page="20" class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h4 class="card-title m-0">Pacientes</h4>
    @permiso('pacientes-crud.crear')
    <a href="{{ route('pacientes.create') }}" class="btn btn-primary btn-sm">
      <i class="ti ti-plus"></i> Nuevo Paciente
    </a>
    @endpermiso
  </div>

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

    <div>
      <select data-table-set-rows-per-page class="form-select form-control my-1 my-md-0">
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100" selected>100</option>
        <option value="200">200</option>
      </select>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-custom table-hover mb-0" id="tabla-pacientes">
      <thead class="bg-light align-middle bg-opacity-25 thead-sm">
        <tr class="text-uppercase fs-xxs">
          <th>Expediente</th>
          <th>Nombre Completo</th>
          <th>Correo</th>
          <th>Teléfono</th>
          <th class="text-center">Historial</th>
          <th class="text-center">Acciones</th>
          <th data-column="notificacion" class="d-none"></th>
        </tr>
      </thead>
      <tbody>
        @forelse($pacientes as $p)
          <tr>
            <td>{{ $p->expediente ?? '-' }}</td>
            <td>
              <strong>{{ $p->nombre_completo }}</strong>

              @if($p->notificacion == 1)
              <span class="badge bg-success ms-2">
              Pendiente
              </span>
              @endif

              </td>
            <td>{{ $p->correo ?? '-' }}</td>
            <td>{{ $p->telefono ?? '-' }}</td>
            <td class="text-center">
              @permiso('historial-crud.editar')
              <a href="{{ route('historial.index', $p->idPaciente) }}"
              class="btn btn-soft-info btn-sm">
              <i class="ti ti-notes"></i>
              </a>
              @endpermiso
            </td>
            <td class="text-center">
              <div class="d-flex justify-content-center gap-1">
                @permiso('pacientes-crud.editar')
                <a href="{{ route('pacientes.edit', $p->idPaciente) }}"
                   class="btn btn-light btn-icon btn-sm rounded-circle" title="Editar">
                  <i class="ti ti-edit fs-lg"></i>
                </a>
                @endpermiso
                @permiso('pacientes-crud.autorizar')
                 @if($p->notificacion == 1)
                <form action="{{ route('pacientes.notificar',$p->idPaciente) }}"
                      method="POST">

                    @csrf

                    <button class="btn btn-success btn-icon btn-sm rounded-circle"
                            title="Enviar notificación">

                        <i class="ti ti-brand-whatsapp"></i>

                    </button>

                </form>

                @endif
                @endpermiso
                @permiso('pacientes-crud.eliminar')
                <form action="{{ route('pacientes.destroy', $p->idPaciente) }}" method="POST" class="d-inline"
                      onsubmit="return confirm('¿Eliminar paciente?')">
                  @csrf
                  @method('DELETE')
                   <button type="submit"
                          class="btn btn-danger btn-icon btn-sm rounded-circle" title="Eliminar">
                    <i class="ti ti-trash fs-lg"></i>
                  </button> 
                </form>
                @endpermiso
              </div>
            </td>
            <td data-notificacion="{{ $p->notificacion }}" class="d-none"></td>
          </tr>
        @empty
          <tr>
            <td colspan="6" class="text-center text-muted">Sin pacientes registrados</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="card-footer border-0">
    <div class="d-flex justify-content-between align-items-center">
        <div data-table-pagination-info></div>
        <div data-table-pagination></div>
    </div>
</div>
</div>
</div>
@endsection

@push('scripts')
<script>
    window.PERMISOS = {
        pacienteEditar: @json(auth('admin')->user()->tienePermiso('pacientes-crud.editar')),
        pacienteEliminar: @json(auth('admin')->user()->tienePermiso('pacientes-crud.eliminar')),
        pacienteHistorial: @json(auth('admin')->user()->tienePermiso('historial-crud.editar')),
        pacienteNotificar: @json(auth('admin')->user()->tienePermiso('pacientes-crud.autorizar')),
    };
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('#search-paciente')
  const tbody = document.querySelector('#tabla-pacientes tbody')
  let timer = null

  input.addEventListener('input', e => {
    clearTimeout(timer)
    const term = e.target.value.trim()
    if (term.length < 2) return

    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted">Buscando...</td></tr>`

    timer = setTimeout(() => {
      fetch(`/api/pacientes/buscar?q=${encodeURIComponent(term)}`)
        .then(res => res.json())
        .then(rows => {
          if (!rows.length) {
            tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted">Sin resultados</td></tr>`
            return
          }

          tbody.innerHTML = rows.map(p => {
          const tieneNotificacion = p.notificacion == 1
          const botonNotificacion = p.notificacion == 1 ? `
          <form action="/pacientes/${p.idPaciente}/notificar" method="POST">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <button class="btn btn-success btn-icon btn-sm rounded-circle"
                    title="Enviar notificación">
                <i class="ti ti-brand-whatsapp"></i>
            </button>
          </form>
          ` : ''

          return `
          <tr>
            <td>${p.expediente || '-'}</td>
            <td><strong>${p.nombre_completo}</strong></td>
            <td>${p.correo || '-'}</td>
            <td>${p.telefono || '-'}</td>

            <td class="text-center">
              ${window.PERMISOS.pacienteHistorial ? `
              <a href="/historial/${p.idPaciente}" class="btn btn-outline-info btn-sm">
                <i class="ti ti-notes"></i> Ver Historial
              </a>
               ` : ''} 
            </td>

            <td class="text-center">
              <div class="d-flex justify-content-center gap-1">

                ${window.PERMISOS.pacienteEditar ? `
                  <a href="/pacientes/${p.idPaciente}/edit"
                    class="btn btn-light btn-icon btn-sm rounded-circle"
                    title="Editar">
                    <i class="ti ti-edit fs-lg"></i>
                  </a>
                ` : ''}

                ${window.PERMISOS.pacienteNotificar ? `
                  ${botonNotificacion}
                ` : ''}

                ${window.PERMISOS.pacienteEliminar ? `
                    <form action="/pacientes/${p.idPaciente}"
                          method="POST"
                          class="d-inline"
                          onsubmit="return confirm('¿Eliminar paciente?')">

                        <input type="hidden"
                              name="_token"
                              value="${document.querySelector('meta[name="csrf-token"]').getAttribute('content')}">

                        <input type="hidden"
                              name="_method"
                              value="DELETE">

                        <button type="submit"
                                class="btn btn-danger btn-icon btn-sm rounded-circle"
                                title="Eliminar">
                            <i class="ti ti-trash fs-lg"></i>
                        </button>
                    </form>
                ` : ''}

              </div>
            </td>
            <td data-notificacion="${tieneNotificacion ? '1' : '0'}" class="d-none"></td>
          </tr>
          `

          }).join('')
        })
        .catch(() => {
          tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger">Error al buscar</td></tr>`
        })
    }, 400)
  })
  document.querySelectorAll('.js-status-card').forEach(card => {
    card.addEventListener('click', () => {
        const status = card.dataset.status;

        const select = document.querySelector('[data-table-filter="notificacion"]');
        select.value = status;
        select.dispatchEvent(new Event('change'));
    });
});
})
function filtrarTabla(tipo){

  const tbody = document.querySelector('#tabla-pacientes tbody')

  if(tipo === 'notificar'){

    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted">Cargando...</td></tr>`

    fetch('/api/pacientes/notificar')

    .then(res => res.json())

    .then(rows => {

    if(!rows.length){
    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted">Sin pacientes</td></tr>`
    return
    }

    tbody.innerHTML = rows.map(p => {

    const botonNotificacion = p.notificacion == 1 ? `
      <form action="/pacientes/${p.idPaciente}/notificar" method="POST">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
      <button class="btn btn-success btn-icon btn-sm rounded-circle">
      <i class="ti ti-brand-whatsapp"></i>
      </button>
      </form>
      ` : ''

    return `
    <tr>
    <td>${p.expediente || '-'}</td>
    <td><strong>${p.nombre_completo}</strong></td>
    <td>${p.correo || '-'}</td>
    <td>${p.telefono || '-'}</td>

    <td class="text-center">
    <a href="/historial/${p.idPaciente}" class="btn btn-outline-info btn-sm">
    <i class="ti ti-notes"></i>
    </a>
    </td>

    <td class="text-center">
<div class="d-flex justify-content-center gap-1">

    ${window.PERMISOS.pacienteEditar ? `
        <a href="/pacientes/${p.idPaciente}/edit"
           class="btn btn-light btn-icon btn-sm rounded-circle"
           title="Editar">
            <i class="ti ti-edit fs-lg"></i>
        </a>
    ` : ''}

    ${window.PERMISOS.pacienteNotificar ? `
        ${botonNotificacion}
    ` : ''}

    ${window.PERMISOS.pacienteEliminar ? `
        <form action="/pacientes/${p.idPaciente}"
              method="POST"
              class="d-inline"
              onsubmit="return confirm('¿Eliminar paciente?')">

            <input type="hidden"
                   name="_token"
                   value="{{ csrf_token() }}">

            <input type="hidden"
                   name="_method"
                   value="DELETE">

            <button type="submit"
                    class="btn btn-danger btn-icon btn-sm rounded-circle"
                    title="Eliminar">
                <i class="ti ti-trash fs-lg"></i>
            </button>
        </form>
    ` : ''}

</div>
    </td>
    </tr>
    `

    }).join('')

    })

  }

}
</script>
@endpush