@extends('layouts.horizontal', ['title' => 'Interpretaciones'])

@section('content')
<div class="container-fluid">

@include('layouts.partials.page-title', [
    'subtitle' => 'Interpretaciones',
    'title' => 'Pendientes por Enviar'
])
  @if ($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
  @endif
   @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
    @endif
<div class="card" data-table>

  <div class="card-header d-flex justify-content-between align-items-center">
    <h4 class="card-title m-0">Citas Atendidas</h4>
  </div>

  {{-- BUSCADOR --}}
  <div class="card-header border-light">
    <div class="app-search w-50">
      <input id="search" type="search" class="form-control"
             placeholder="Buscar paciente...">
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="bg-light">
        <tr>
          <th>Cita No.</th>
          <th>Paciente</th>
          <th>Fecha</th>
          <th>Estudios</th>
          <th>Archivos</th>
          <th class="text-center">Urgente</th>
          <th class="text-center">Acción</th>
        </tr>
      </thead>

      <tbody>
        @forelse($citas as $cita)
        <tr>
        <td>
            <strong>
              {{ $cita->idCita }}
            </strong>
          </td>
          <td>
            <strong>
              {{ $cita->paciente->nombre }} 
              {{ $cita->paciente->apPaterno }}
            </strong>
          </td>

          <td>{{ \Carbon\Carbon::parse($cita->fecha)->format('d/m/Y') }}</td>

          <td>{{ $cita->estudio }}</td>

          <td>
            <span class="badge bg-info">
              {{ $cita->archivos->count() }}
            </span>
          </td>

          {{-- 🔥 URGENTE --}}
          <td class="text-center">
            <input type="checkbox" class="form-check-input urgente-check"
                   data-id="{{ $cita->idCita }}">
          </td>

          {{-- 🔥 ACCIÓN --}}
          <td class="text-center">
            <button class="btn btn-primary btn-sm enviar-btn"
                    data-id="{{ $cita->idCita }}">
                Enviar a Interpretación
            </button>
          </td>

        </tr>
        @empty
        <tr>
          <td colspan="6" class="text-center text-muted">
            No hay citas pendientes
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

</div>
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('.enviar-btn').forEach(btn => {
    btn.addEventListener('click', function () {

        let id = this.dataset.id
        let urgente = document.querySelector(`.urgente-check[data-id="${id}"]`).checked ? 1 : 0

        fetch(`/interpretaciones/enviar`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                idCita: id,
                urgente: urgente
            })
        })
        .then(res => res.json())
        .then(res => {
            if(res.error){
                alert(res.error)
                return
            }

            location.reload()
        })
    })
})
</script>
@endpush