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

@section('content')
<div class="container-fluid">
    @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

@include('layouts.partials.page-title', [
  'subtitle' => '<a href="' . route('historial.index', $paciente->idPaciente) . '" class="text-decoration-none text-primary">Historial</a>',
  'title' => 'Estudios de ' . ($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">
  <div class="mb-3 text-end">
    <a href="{{ route('historial.detalle.masivo', $historial->idCita) }}" 
       class="btn btn-primary">
        <i class="ti ti-upload"></i> Carga Masiva
    </a>
</div>
  @foreach($estudios as $est)
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="m-0">
        Estudio: <strong>{{ $est->descripcion }}</strong>
      </h5>
      <div>
        <button class="btn btn-sm btn-outline-primary"
                data-bs-toggle="modal"
                data-bs-target="#modalAgregarArchivo"
                data-estudio="{{ $est->idAnalisis }}"
                data-estudio-nombre="{{ $est->descripcion }}">
          <i class="ti ti-plus"></i> Agregar Archivo
        </button>
      </div>
    </div>

    <div class="card-body p-0">
      <table class="table table-sm mb-0 align-middle">
        <thead class="bg-light">
          <tr class="text-uppercase fs-xxs">
            <th>Archivo</th>
            <th>Fecha</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($est->files as $f)
          <tr>
            <td>
              <a href="{{ route('verArchivo', [
                    'year' => date('Y', strtotime($f->registro)),
                    'paciente' => 'paciente-' . $paciente->idPaciente,
                    'cita' => 'cita-' . $historial->idCita,
                    'archivo' => $f->archivo
                ]) }}" target="_blank">
                    {{ $f->archivo }}
                </a>
            <td>{{ \Carbon\Carbon::parse($f->fecha)->format('d/m/Y') }}</td>
            <td class="text-center">
              <a href="{{ route('historial.detalle.edit', $f->idArchivo) }}"
                 class="btn btn-light btn-sm" title="Editar">
                <i class="ti ti-edit"></i>
              </a>
              <form action="{{ route('historial.detalle.destroy', $f->idArchivo) }}" method="POST"
                    class="d-inline" onsubmit="return confirm('¿Eliminar archivo?')">
                @csrf @method('DELETE')
                <input type="hidden" name="id" value="{{ $f->idArchivo }}">
                <input type="hidden" name="idPaciente" value="{{ $paciente->idPaciente }}">
                <input type="hidden" name="idCita" value="{{ $historial->idCita ?? '' }}">
                <button type="submit" class="btn btn-danger btn-sm" title="Eliminar">
                  <i class="ti ti-trash"></i>
                </button>
              </form>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="3" class="text-center text-muted">Sin archivos</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  @endforeach
</div>
</div>

{{-- MODAL PARA AGREGAR ARCHIVO --}}
<div class="modal fade" id="modalAgregarArchivo" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Agregar Archivo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="formAgregarArchivo">
        @csrf
        <div class="modal-body">
          <input type="hidden" name="idPaciente" value="{{ $paciente->idPaciente }}">
          <input type="hidden" name="idCita" value="{{ $historial->idCita ?? '' }}">
          <input type="hidden" name="idEstudio" id="modal-id-estudio">

          <div class="mb-3">
            <label class="form-label">Fecha del Archivo</label>
            <input type="date" name="fecha" class="form-control" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Tipo de archivo</label>
            <select name="extension" class="form-select" required>
              <option value="">Seleccionar...</option>
              <option value="pdf">PDF</option>
              <option value="imagen">Imagen</option>
            </select>
          </div>

          <div class="mb-3">
            <<label class="form-label">Seleccionar uno o varios archivos (Ctrl o Shift)</label>
            <input type="file" name="files[]" class="form-control" accept=".pdf,image/*" multiple required>
          </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">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('modalAgregarArchivo')
  const form = document.getElementById('formAgregarArchivo')

  modal.addEventListener('show.bs.modal', e => {
    const btn = e.relatedTarget
    document.getElementById('modal-id-estudio').value = btn.dataset.estudio
  })

  form.addEventListener('submit', async e => {
    e.preventDefault()
    const data = new FormData(form)

    const res = await fetch('{{ route('historial.detalle.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('✅ Archivo agregado correctamente')
      window.location.reload()
    } else {
      alert('❌ Error al subir archivo')
    }
  })
})
</script>
@endpush