templates/admin/appointment/index.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/base_admin.html.twig' %}
  3. {% block content %}
  4. <div class="row mb-4">
  5.     <div class="col-12">
  6.         <!-- Header con estadísticas -->
  7.         <div class="row g-3 mb-4">
  8.             <div class="col-md-3">
  9.                 <div class="card bg-primary text-white">
  10.                     <div class="card-body">
  11.                         <div class="d-flex align-items-center">
  12.                             <div class="flex-grow-1">
  13.                                 <h4 class="mb-0">{{ appointments.getTotalItemCount }}</h4>
  14.                                 <small class="opacity-75">Total Citas</small>
  15.                             </div>
  16.                             <div class="flex-shrink-0">
  17.                                 <i class="fas fa-calendar-check fa-2x opacity-50"></i>
  18.                             </div>
  19.                         </div>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.             <div class="col-md-3">
  24.                 <div class="card bg-success text-white">
  25.                     <div class="card-body">
  26.                         <div class="d-flex align-items-center">
  27.                             <div class="flex-grow-1">
  28.                                 <h4 class="mb-0">{{ appointments|filter(a => a.status == 'confirmada')|length }}</h4>
  29.                                 <small class="opacity-75">Confirmadas</small>
  30.                             </div>
  31.                             <div class="flex-shrink-0">
  32.                                 <i class="fas fa-check-circle fa-2x opacity-50"></i>
  33.                             </div>
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.             <div class="col-md-3">
  39.                 <div class="card bg-info text-white">
  40.                     <div class="card-body">
  41.                         <div class="d-flex align-items-center">
  42.                             <div class="flex-grow-1">
  43.                                 <h4 class="mb-0">{{ appointments|filter(a => a.status == 'completada')|length }}</h4>
  44.                                 <small class="opacity-75">Completadas</small>
  45.                             </div>
  46.                             <div class="flex-shrink-0">
  47.                                 <i class="fas fa-check-double fa-2x opacity-50"></i>
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.             <div class="col-md-3">
  54.                 <div class="card bg-danger text-white">
  55.                     <div class="card-body">
  56.                         <div class="d-flex align-items-center">
  57.                             <div class="flex-grow-1">
  58.                                 <h4 class="mb-0">{{ appointments|filter(a => a.status starts with 'cancelada')|length }}</h4>
  59.                                 <small class="opacity-75">Canceladas</small>
  60.                             </div>
  61.                             <div class="flex-shrink-0">
  62.                                 <i class="fas fa-times-circle fa-2x opacity-50"></i>
  63.                             </div>
  64.                         </div>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  70.         <!-- Card principal -->
  71.         <div class="card border-0 shadow-lg">
  72.             <div class="card-header bg-white border-bottom-0 py-4">
  73.                 <div class="row align-items-center">
  74.                     <div class="col-md-6">
  75.                         <h4 class="mb-0 text-dark fw-bold">
  76.                             <i class="fas fa-calendar-check me-2 text-primary"></i>
  77.                             Gestión de Citas
  78.                         </h4>
  79.                         <p class="text-muted mb-0 mt-1">Administra las citas médicas del sistema</p>
  80.                     </div>
  81.                     <div class="col-md-6 text-md-end">
  82.                         <div class="d-flex flex-column flex-md-row gap-2 justify-content-md-end">
  83.                             <a href="{{ path('admin_appointment_calendar') }}" class="btn btn-outline-primary btn-lg px-4">
  84.                                 <i class="fas fa-calendar-alt me-2"></i>Vista Calendario
  85.                             </a>
  86.                             <a href="{{ path('admin_appointment_new') }}" class="btn btn-primary btn-lg px-4">
  87.                                 <i class="fas fa-plus-circle me-2"></i>Nueva Cita
  88.                             </a>
  89.                         </div>
  90.                     </div>
  91.                 </div>
  92.             </div>
  94.             <div class="card-body p-0">
  95.                     <!-- Barra de búsqueda y filtros -->
  96.                     <div class="bg-light border-bottom p-4">
  97.                         <form method="get" class="row g-3 align-items-end">
  98.                             <!-- Primera fila -->
  99.                             <div class="col-12 col-md-8 col-lg-6">
  100.                                 <label class="form-label fw-semibold text-dark">Búsqueda</label>
  101.                                 <div class="input-group">
  102.                                     <span class="input-group-text bg-white border-end-0">
  103.                                         <i class="fas fa-search text-muted"></i>
  104.                                     </span>
  105.                                     <input type="text" name="q" value="{{ q|default('') }}" 
  106.                                         class="form-control border-start-0" 
  107.                                         placeholder="Buscar por paciente, método de pago, tipo estudio, notas...">
  108.                                 </div>
  109.                             </div>
  110.                             
  111.                             <!-- Segunda fila - Filtros -->
  112.                             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
  113.                                 <label class="form-label fw-semibold text-dark">Proveedor</label>
  114.                                 <select name="provider" class="form-select">
  115.                                     <option value="">Todos los proveedores</option>
  116.                                     {% for provider in providers %}
  117.                                         <option value="{{ provider.id }}" 
  118.                                             {{ (selectedProvider|default('') == provider.id) ? 'selected' : '' }}>
  119.                                             {{ provider.name }} {{ provider.lastName }}
  120.                                         </option>
  121.                                     {% endfor %}
  122.                                 </select>
  123.                             </div>
  124.                             
  125.                             {# Filtro de estado - solo mostrar cuando no hay filtro del submenú #}
  126.                             {% if active_filter == 'all' %}
  127.                             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
  128.                                 <label class="form-label fw-semibold text-dark">Estado</label>
  129.                                 <select name="status" class="form-select">
  130.                                     <option value="">Todos los estados</option>
  131.                                     {% for status in statuses %}
  132.                                         <option value="{{ status }}" 
  133.                                             {{ (selectedStatus|default('') == status) ? 'selected' : '' }}>
  134.                                             {{ status }}
  135.                                         </option>
  136.                                     {% endfor %}
  137.                                 </select>
  138.                             </div>
  139.                             {% endif %}
  140.                             
  141.                             <!-- Tercera fila - Botones -->
  142.                             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
  143.                                 <label class="form-label fw-semibold text-dark">&nbsp;</label>
  144.                                 <div class="d-grid gap-2 d-md-flex">
  145.                                     <button type="submit" class="btn btn-primary btn-lg flex-fill">
  146.                                         <i class="fas fa-search me-2"></i>Buscar
  147.                                     </button>
  148.                                     <a href="{{ path('admin_appointment') }}" class="btn btn-outline-secondary btn-lg flex-fill">
  149.                                         <i class="fas fa-times me-2"></i>Limpiar
  150.                                     </a>
  151.                                 </div>
  152.                             </div>
  153.                         </form>
  154.                 
  155.                         {# Información del filtro activo del submenú #}
  156.                         {% if active_filter != 'all' %}
  157.                         <div class="row mt-3">
  158.                             <div class="col-12">
  159.                                 <div class="alert alert-info py-2 mb-0">
  160.                                     <small class="d-flex align-items-center">
  161.                                         <i class="fas fa-filter me-2"></i>
  162.                                         <span>
  163.                                             Mostrando 
  164.                                              <strong class="text-dark">
  165.                                                     {% if active_filter == 'confirmada' %}
  166.                                                         citas confirmadas
  167.                                                     {% elseif active_filter == 'completada' %}
  168.                                                         citas finalizadas (incluye completadas y ausentes)
  169.                                                     {% elseif active_filter == 'cancelada' %}
  170.                                                         citas canceladas (incluye canceladas por paciente y clínica)
  171.                                                     {% endif %}
  172.                                             </strong>
  173.                                             . 
  174.                                             <a href="{{ path('admin_appointment') }}" class="alert-link ms-1">
  175.                                                 Ver todas las citas
  176.                                             </a>
  177.                                         </span>
  178.                                     </small>
  179.                                 </div>
  180.                             </div>
  181.                         </div>
  182.                         {% endif %}
  183.                     </div>
  184.                 </div>
  185.             
  186.                 <!-- Leyenda de estados -->
  187.                 <div class="p-4 border-bottom bg-white">
  188.                     <h6 class="text-muted mb-3 fw-semibold">
  189.                         <i class="fas fa-info-circle me-2 text-primary"></i> 
  190.                         Leyenda de Estados
  191.                     </h6>
  192.                     <div class="d-flex flex-wrap gap-2">
  193.                         <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill">
  194.                             <i class="fas fa-check-circle me-1"></i>Confirmada
  195.                         </span>
  196.                         <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-3 py-2 rounded-pill">
  197.                             <i class="fas fa-check-double me-1"></i>Completada
  198.                         </span>
  199.                         <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-3 py-2 rounded-pill">
  200.                             <i class="fas fa-user-times me-1"></i>Cancelada Paciente
  201.                         </span>
  202.                         <span class="badge bg-dark bg-opacity-10 text-dark border border-dark border-opacity-25 px-3 py-2 rounded-pill">
  203.                             <i class="fas fa-clinic-medical me-1"></i>Cancelada Clínica
  204.                         </span>
  205.                         <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25 px-3 py-2 rounded-pill">
  206.                             <i class="fas fa-user-slash me-1"></i>Ausente
  207.                         </span>
  208.                         <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-3 py-2 rounded-pill">
  209.                             <i class="fas fa-calendar-alt me-1"></i>Reprogramada
  210.                         </span>
  211.                     </div>
  212.                 </div>
  214.                 <!-- Tabla de citas ACTUALIZADA con paciente y MÉTODO DE PAGO -->
  215.                 <div class="table-responsive">
  216.                     <table class="table table-hover align-middle mb-0">
  217.                         <thead class="table-light">
  218.                             <tr>
  219.                                 <th class="ps-4 py-3 fw-semibold text-dark border-bottom-2">
  220.                                     <i class="fas fa-hashtag me-2 text-primary"></i>ID
  221.                                 </th>
  222.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  223.                                     <i class="fas fa-user-injured me-2 text-primary"></i>Paciente
  224.                                 </th>
  225.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  226.                                     <i class="fas fa-credit-card me-2 text-primary"></i>Método de Pago
  227.                                 </th>
  228.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  229.                                     <i class="fas fa-clock me-2 text-primary"></i>Fecha/Hora
  230.                                 </th>
  231.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  232.                                     <i class="fas fa-tag me-2 text-primary"></i>Estado
  233.                                 </th>
  234.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  235.                                     <i class="fas fa-stethoscope me-2 text-primary"></i>Tipo Estudio
  236.                                 </th>
  237.                                 <th class="py-3 fw-semibold text-dark border-bottom-2">
  238.                                     <i class="fas fa-file-alt me-2 text-primary"></i>Notas
  239.                                 </th>
  240.                                 <th class="text-end pe-4 py-3 fw-semibold text-dark border-bottom-2">
  241.                                     <i class="fas fa-cogs me-2 text-primary"></i>Acciones
  242.                                 </th>
  243.                             </tr>
  244.                         </thead>
  245.                         <tbody>
  246.                             {% for appointment in appointments %}
  247.                                 <tr class="border-bottom">
  248.                                     <td class="ps-4 py-3">
  249.                                         <div class="d-flex align-items-center">
  250.                                             <div class="bg-primary bg-opacity-10 rounded p-2 me-3">
  251.                                                 <i class="fas fa-calendar text-primary"></i>
  252.                                             </div>
  253.                                             <div>
  254.                                                 <h6 class="mb-0 fw-semibold text-dark">#{{ appointment.id }}</h6>
  255.                                                 <small class="text-muted">Cita</small>
  256.                                             </div>
  257.                                         </div>
  258.                                     </td>
  259.                                     
  260.                                     <!-- Columna PACIENTE -->
  261.                                     <td class="py-3">
  262.                                         <div class="d-flex align-items-center">
  263.                                             <div class="bg-success bg-opacity-10 rounded p-2 me-2">
  264.                                                 <i class="fas fa-user-injured text-success"></i>
  265.                                             </div>
  266.                                             <div>
  267.                                                 <h6 class="mb-0 fw-semibold text-dark">{{ appointment.patient.name }} {{ appointment.patient.lastName }}</h6>
  268.                                                 <small class="text-muted">tel: {{ appointment.patient.phone ?? 'Sin teléfono' }}</small>
  269.                                                 <small class="text-success d-block">
  270.                                                     <i class="fas fa-user-md me-1"></i>
  271.                                                     Proveedor: {{ appointment.provider.name }}
  272.                                                 </small>
  273.                                                 <div>
  274.                                                     <small class="text-primary">
  275.                                                         <i class="fas fa-envelope me-1"></i>{{ appointment.provider.email }}
  276.                                                     </small>
  277.                                                 </div>
  278.                                             </div>
  279.                                         </div>
  280.                                     </td>
  281.                                     
  282.                                     <!-- Columna MÉTODO DE PAGO (REEMPLAZA PROVEEDOR) -->
  283.                                    <td class="py-3">
  284.                                         <div class="d-flex align-items-center">
  285.                                             <div class="bg-info bg-opacity-10 rounded p-2 me-2">
  286.                                                 <i class="fas fa-credit-card text-info"></i>
  287.                                             </div>
  288.                                             <div>
  289.                                                 {% if appointment.paymentMethod == 'imaging_pro' %}
  290.                                                     <h6 class="mb-0 fw-semibold text-dark">
  291.                                                         Imaging Pro
  292.                                                         {% if appointment.montoImagingPro %}
  293.                                                             <span class="text-success fw-bold ms-1">
  294.                                                                 ${{ appointment.montoImagingPro|number_format(2, '.', ',') }}
  295.                                                             </span>
  296.                                                         {% endif %}
  297.                                                     </h6>
  298.                                                     <small class="text-muted">Pago en Imaging Pro</small>
  299.                                     
  300.                                                 {% elseif appointment.paymentMethod == 'clinica' %}
  301.                                                     <h6 class="mb-0 fw-semibold text-dark">Clínica</h6>
  302.                                                     <small class="text-muted">Pago directo</small>
  303.                                     
  304.                                                 {% else %}
  305.                                                     <h6 class="mb-0 fw-semibold text-dark">No especificado</h6>
  306.                                                     <small class="text-muted">-</small>
  307.                                                 {% endif %}
  308.                                             </div>
  309.                                         </div>
  310.                                     </td>
  312.                                     
  313.                                     <td class="py-3">
  314.                                         <span class="fw-semibold text-dark">{{ appointment.horario.fecha|date("d/m/Y") }}</span>
  315.                                         <small class="text-muted d-block">{{ appointment.horario.hora|date("H:i") }}</small>
  316.                                     </td>
  317.                                     
  318.                                     <td class="py-3">
  319.                                         {% if appointment.status == 'confirmada' %}
  320.                                             <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill">
  321.                                                 <i class="fas fa-check-circle me-1"></i>Confirmada
  322.                                             </span>
  323.                                         {% elseif appointment.status starts with 'cancelada_paciente' %}
  324.                                             <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-3 py-2 rounded-pill">
  325.                                                 <i class="fas fa-user-times me-1"></i>Cancelada Paciente
  326.                                             </span>
  327.                                         {% elseif appointment.status starts with 'cancelada_clinica' %}
  328.                                             <span class="badge bg-dark bg-opacity-10 text-dark border border-dark border-opacity-25 px-3 py-2 rounded-pill">
  329.                                                 <i class="fas fa-clinic-medical me-1"></i>Cancelada Clínica
  330.                                             </span>
  331.                                         {% elseif appointment.status == 'completada' %}
  332.                                             <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-3 py-2 rounded-pill">
  333.                                                 <i class="fas fa-check-double me-1"></i>Completada
  334.                                             </span>
  335.                                         {% elseif appointment.status == 'ausente' %}
  336.                                             <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25 px-3 py-2 rounded-pill">
  337.                                                 <i class="fas fa-user-slash me-1"></i>Ausente
  338.                                             </span>
  339.                                         {% elseif appointment.status == 'reprogramada' %}    
  340.                                             <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-3 py-2 rounded-pill">
  341.                                                 <i class="fas fa-calendar-alt me-1"></i>Reprogramada
  342.                                             </span>
  343.                                         {% else %}
  344.                                             <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary border-opacity-25 px-3 py-2 rounded-pill">
  345.                                                 <i class="fas fa-question-circle me-1"></i>{{ appointment.status|title }}
  346.                                             </span>
  347.                                         {% endif %}
  348.                                     </td>
  349.                                     
  350.                                     <!-- Columna TIPO ESTUDIO -->
  351.                                     <td class="py-3">
  352.                                         {% if appointment.tipoEstudio %}
  353.                                             <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-3 py-2 rounded-pill">
  354.                                                 <i class="fas fa-stethoscope me-1"></i>{{ appointment.tipoEstudio }}
  355.                                             </span>
  356.                                         {% else %}
  357.                                             <span class="text-muted">-</span>
  358.                                         {% endif %}
  359.                                     </td>
  360.                                     
  361.                                     <td class="py-3">
  362.                                         {% if appointment.notes %}
  363.                                             <div style="white-space: pre-line; max-width: 200px; font-size: 0.9rem; line-height: 1.4;"
  364.                                                 data-bs-toggle="tooltip" 
  365.                                                 title="{{ appointment.notes|replace({'\n': ' / '}) }}">
  366.                                                 {{ appointment.notes|length > 50 ? appointment.notes|slice(0, 50) ~ '...' : appointment.notes }}
  367.                                             </div>
  368.                                         {% else %}
  369.                                             <span class="text-muted">-</span>
  370.                                         {% endif %}
  371.                                     </td>
  372.                                     
  373.                                     <td class="text-end pe-4 py-3">
  374.                                         <div class="d-flex justify-content-end gap-2">
  375.                                             {% if appointment.status not in ['cancelada_clinica', 'cancelada_paciente', 'completada', 'ausente'] %}
  376.                                                 <button class="btn btn-outline-danger btn-sm px-3 rounded-pill btn-cancelar"
  377.                                                     data-bs-toggle="modal" 
  378.                                                     data-bs-target="#cancelModal"
  379.                                                     data-appointment-id="{{ appointment.id }}"
  380.                                                     data-appointment-info="{{ appointment.horario.fecha|date('d/m/Y') }} {{ appointment.horario.hora|date('H:i') }} - {{ appointment.patient.name }}"
  381.                                                     data-csrf-token="{{ csrf_token('cancel_' ~ appointment.id) }}">
  382.                                                     <i class="fas fa-times-circle me-1"></i>Cancelar
  383.                                                 </button>
  385.                                                 <button class="btn btn-outline-success btn-sm px-3 rounded-pill btn-finalizar"
  386.                                                         data-bs-toggle="modal" 
  387.                                                         data-bs-target="#finalizeModal"
  388.                                                         data-appointment-id="{{ appointment.id }}"
  389.                                                         data-appointment-info="Cita #{{ appointment.id }} - {{ appointment.horario.fecha|date('d/m/Y') }} {{ appointment.horario.hora|date('H:i') }} - {{ appointment.patient.name }}"
  390.                                                         data-csrf-token="{{ csrf_token('status_' ~ appointment.id) }}">
  391.                                                     <i class="fas fa-flag-checkered me-1"></i>Finalizar
  392.                                                 </button>
  393.                                             {% endif %}
  394.                                             
  395.                                             <a href="{{ path('admin_appointment_reschedule', {id: appointment.id}) }}" 
  396.                                                class="btn btn-outline-primary btn-sm px-3 rounded-pill"
  397.                                                data-bs-toggle="tooltip" 
  398.                                                title="Reprogramar cita">
  399.                                                <i class="fas fa-calendar-alt me-1"></i>Reprogramar
  400.                                             </a>
  401.                                             
  402.                                             <button class="btn btn-outline-danger btn-sm px-3 rounded-pill"
  403.                                                     data-bs-toggle="modal" 
  404.                                                     data-bs-target="#deleteModal"
  405.                                                     data-appointment-id="{{ appointment.id }}"
  406.                                                     data-appointment-info="Cita #{{ appointment.id }} - {{ appointment.horario.fecha|date('d/m/Y') }} {{ appointment.horario.hora|date('H:i') }} - {{ appointment.patient.name }}"
  407.                                                     data-csrf-token="{{ csrf_token('delete' ~ appointment.id) }}">
  408.                                                 <i class="fas fa-trash me-1"></i>Eliminar
  409.                                             </button>
  410.                                         </div>
  411.                                     </td>
  412.                                 </tr>
  413.                             {% else %}
  414.                                 <tr>
  415.                                     <td colspan="8" class="text-center py-5">
  416.                                         <div class="py-5">
  417.                                             <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
  418.                                             <h5 class="text-muted">No se encontraron citas</h5>
  419.                                             <p class="text-muted mb-4">No hay citas registradas en el sistema</p>
  420.                                             <a href="{{ path('admin_appointment_new') }}" class="btn btn-primary">
  421.                                                 <i class="fas fa-plus me-2"></i>Crear primera cita
  422.                                             </a>
  423.                                         </div>
  424.                                     </td>
  425.                                 </tr>
  426.                             {% endfor %}
  427.                         </tbody>
  428.                     </table>
  429.                 </div>
  431.                 <!-- Paginación (mantener igual) -->
  432.                 {% if appointments.getTotalItemCount > 0 %}
  433.                 <div class="border-top bg-light">
  434.                     <div class="row align-items-center p-3 p-md-4">
  435.                         <div class="col-12 col-md-6 mb-3 mb-md-0">
  436.                             {% set total = appointments.getTotalItemCount %}
  437.                             {% set perPage = appointments.getItemNumberPerPage %}
  438.                             {% set page = appointments.getCurrentPageNumber %}
  439.                             {% set first = total > 0 ? ((page - 1) * perPage + 1) : 0 %}
  440.                             {% set last = min(first + appointments|length - 1, total) %}
  441.                             
  442.                             <p class="mb-0 text-muted fw-semibold text-center text-md-start">
  443.                                 Mostrando <span class="text-dark">{{ first }}–{{ last }}</span> de 
  444.                                 <span class="text-dark">{{ total }}</span> citas
  445.                             </p>
  446.                         </div>
  447.                         <div class="col-12 col-md-6">
  448.                             <div class="d-flex justify-content-center justify-content-md-end align-items-center">
  449.                                 <!-- Paginación responsive -->
  450.                                 <nav aria-label="Paginación de citas">
  451.                                     <ul class="pagination pagination-sm mb-0 flex-wrap justify-content-center">
  452.                                         <!-- Primera página -->
  453.                                         <li class="page-item {% if page == 1 %}disabled{% endif %}">
  454.                                             <a class="page-link" href="{{ path('admin_appointment', app.request.query.all|merge({page: 1})) }}" 
  455.                                             aria-label="Primera página" data-bs-toggle="tooltip" title="Primera página">
  456.                                                 <i class="fas fa-angle-double-left d-none d-sm-inline"></i>
  457.                                                 <span class="d-inline d-sm-none">Primera</span>
  458.                                             </a>
  459.                                         </li>
  460.                                         
  461.                                         <!-- Página anterior -->
  462.                                         <li class="page-item {% if page == 1 %}disabled{% endif %}">
  463.                                             <a class="page-link" href="{{ path('admin_appointment', app.request.query.all|merge({page: page - 1})) }}" 
  464.                                             aria-label="Página anterior" data-bs-toggle="tooltip" title="Página anterior">
  465.                                                 <i class="fas fa-angle-left"></i>
  466.                                             </a>
  467.                                         </li>
  469.                                         <!-- Indicador de página actual en móvil -->
  470.                                         <li class="page-item d-block d-md-none disabled">
  471.                                             <span class="page-link fw-bold text-primary">
  472.                                                 {{ page }} de {{ (total / perPage)|round(0, 'ceil') }}
  473.                                             </span>
  474.                                         </li>
  476.                                         <!-- Páginas numeradas (ocultas en móvil) -->
  477.                                         {% set totalPages = (total / perPage)|round(0, 'ceil') %}
  478.                                         {% set startPage = max(1, page - 2) %}
  479.                                         {% set endPage = min(totalPages, startPage + 4) %}
  480.                                         
  481.                                         {% if startPage > 1 %}
  482.                                             <li class="page-item d-none d-md-block disabled">
  483.                                                 <span class="page-link">...</span>
  484.                                             </li>
  485.                                         {% endif %}
  486.                                         
  487.                                         {% for i in startPage..endPage %}
  488.                                             <li class="page-item d-none d-md-block {% if i == page %}active{% endif %}">
  489.                                                 <a class="page-link" href="{{ path('admin_appointment', app.request.query.all|merge({page: i})) }}">
  490.                                                     {{ i }}
  491.                                                 </a>
  492.                                             </li>
  493.                                         {% endfor %}
  494.                                         
  495.                                         {% if endPage < totalPages %}
  496.                                             <li class="page-item d-none d-md-block disabled">
  497.                                                 <span class="page-link">...</span>
  498.                                             </li>
  499.                                         {% endif %}
  501.                                         <!-- Página siguiente -->
  502.                                         <li class="page-item {% if page == totalPages %}disabled{% endif %}">
  503.                                             <a class="page-link" href="{{ path('admin_appointment', app.request.query.all|merge({page: page + 1})) }}" 
  504.                                             aria-label="Página siguiente" data-bs-toggle="tooltip" title="Página siguiente">
  505.                                                 <i class="fas fa-angle-right"></i>
  506.                                             </a>
  507.                                         </li>
  508.                                         
  509.                                         <!-- Última página -->
  510.                                         <li class="page-item {% if page == totalPages %}disabled{% endif %}">
  511.                                             <a class="page-link" href="{{ path('admin_appointment', app.request.query.all|merge({page: totalPages})) }}" 
  512.                                             aria-label="Última página" data-bs-toggle="tooltip" title="Última página">
  513.                                                 <i class="fas fa-angle-double-right d-none d-sm-inline"></i>
  514.                                                 <span class="d-inline d-sm-none">Última</span>
  515.                                             </a>
  516.                                         </li>
  517.                                     </ul>
  518.                                 </nav>
  519.                             </div>
  520.                         </div>
  521.                     </div>
  522.                 </div>
  523.                 {% endif %}
  524.             </div>
  525.         </div>
  526.     </div>
  527. </div>
  529. <!-- Modal de Cancelación - Manteniendo el mismo estilo -->
  530. <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
  531.     <div class="modal-dialog modal-dialog-centered">
  532.         <div class="modal-content">
  533.             <div class="modal-header bg-danger text-white">
  534.                 <h5 class="modal-title" id="cancelModalLabel">
  535.                     <i class="fas fa-exclamation-triangle me-2"></i>Confirmar Cancelación
  536.                 </h5>
  537.                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  538.             </div>
  539.             <div class="modal-body">
  540.                 <p>¿Estás seguro de que deseas cancelar la siguiente cita?</p>
  541.                 <div class="alert alert-warning">
  542.                     <i class="fas fa-info-circle me-2"></i>
  543.                     <strong id="appointmentInfo"></strong>
  544.                 </div>
  545.                 <div class="mb-3">
  546.                     <label for="cancelReason" class="form-label">Motivo de cancelación (opcional):</label>
  547.                     <textarea class="form-control" id="cancelReason" rows="3" placeholder="Ingresa el motivo de la cancelación..."></textarea>
  548.                 </div>
  549.             </div>
  550.             <div class="modal-footer">
  551.                 <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
  552.                     <i class="fas fa-times me-2"></i>Cancelar
  553.                 </button>
  554.                 <button type="button" class="btn btn-danger" id="confirmCancel">
  555.                     <i class="fas fa-times-circle me-2"></i>Confirmar Cancelación
  556.                 </button>
  557.             </div>
  558.         </div>
  559.     </div>
  560. </div>
  562. <!-- Modal de Finalización -->
  563. <div class="modal fade" id="finalizeModal" tabindex="-1" aria-labelledby="finalizeModalLabel" aria-hidden="true">
  564.     <div class="modal-dialog modal-dialog-centered">
  565.         <div class="modal-content">
  566.             <div class="modal-header bg-success text-white">
  567.                 <h5 class="modal-title" id="finalizeModalLabel">
  568.                     <i class="fas fa-flag-checkered me-2"></i>Finalizar Cita
  569.                 </h5>
  570.                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  571.             </div>
  572.             <div class="modal-body">
  573.                 <p>Selecciona el estado final para la siguiente cita:</p>
  574.                 <div class="alert alert-info">
  575.                     <i class="fas fa-info-circle me-2"></i>
  576.                     <strong id="finalizeAppointmentInfo"></strong>
  577.                 </div>
  578.                 
  579.                 <div class="row g-3">
  580.                     <div class="col-md-6">
  581.                         <div class="card border-success h-100 text-center finalize-option" data-status="completada">
  582.                             <div class="card-body">
  583.                                 <i class="fas fa-check-double fa-2x text-success mb-3"></i>
  584.                                 <h6 class="card-title">Completada</h6>
  585.                                 <p class="card-text small text-muted">El paciente asistió y la cita se completó exitosamente</p>
  586.                             </div>
  587.                         </div>
  588.                     </div>
  589.                     <div class="col-md-6">
  590.                         <div class="card border-warning h-100 text-center finalize-option" data-status="ausente">
  591.                             <div class="card-body">
  592.                                 <i class="fas fa-user-slash fa-2x text-warning mb-3"></i>
  593.                                 <h6 class="card-title">Ausente</h6>
  594.                                 <p class="card-text small text-muted">El paciente no se presentó a la cita programada</p>
  595.                             </div>
  596.                         </div>
  597.                     </div>
  598.                 </div>
  599.                 
  600.                 <div class="mt-3">
  601.                     <label for="finalizeNotes" class="form-label">Observaciones (opcional):</label>
  602.                     <textarea class="form-control" id="finalizeNotes" rows="2" placeholder="Agregar observaciones sobre el estado final..."></textarea>
  603.                 </div>
  604.             </div>
  605.             <div class="modal-footer">
  606.                 <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
  607.                     <i class="fas fa-times me-2"></i>Cancelar
  608.                 </button>
  609.                 <button type="button" class="btn btn-success" id="confirmFinalize" disabled>
  610.                     <i class="fas fa-check me-2"></i>Confirmar
  611.                 </button>
  612.             </div>
  613.         </div>
  614.     </div>
  615. </div>
  617. <!-- Modal de Eliminación - VERSIÓN CORREGIDA -->
  618. <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  619.     <div class="modal-dialog modal-dialog-centered">
  620.         <div class="modal-content">
  621.             <div class="modal-header bg-danger text-white">
  622.                 <h5 class="modal-title" id="deleteModalLabel">
  623.                     <i class="fas fa-exclamation-triangle me-2"></i>Confirmar Eliminación
  624.                 </h5>
  625.                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  626.             </div>
  627.             <div class="modal-body">
  628.                 <p>¿Estás seguro de que deseas eliminar la siguiente cita?</p>
  629.                 <div class="alert alert-danger">
  630.                     <i class="fas fa-exclamation-circle me-2"></i>
  631.                     <strong>¡Esta acción no se puede deshacer!</strong>
  632.                 </div>
  633.                 <div class="card border-danger">
  634.                     <div class="card-body">
  635.                         <h6 id="deleteAppointmentInfo" class="text-danger mb-2"></h6>
  636.                         <p class="mb-0 text-muted small">
  637.                             <i class="fas fa-info-circle me-1"></i>
  638.                             Se eliminará permanentemente toda la información de esta cita.
  639.                         </p>
  640.                     </div>
  641.                 </div>
  642.             </div>
  643.             <div class="modal-footer">
  644.                 <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
  645.                     <i class="fas fa-times me-2"></i>Cancelar
  646.                 </button>
  647.                 <button type="button" class="btn btn-danger" id="confirmDelete">
  648.                     <i class="fas fa-trash me-2"></i>Eliminar Permanentemente
  649.                 </button>
  650.             </div>
  651.         </div>
  652.     </div>
  653. </div>
  655. <style>
  656. .finalize-option {
  657.     cursor: pointer;
  658.     transition: all 0.3s ease;
  659. }
  660. .finalize-option:hover {
  661.     transform: translateY(-2px);
  662.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  663. }
  664. </style>
  666. {% endblock %}
  668. {% block javascripts %}
  669.     {{ parent() }}
  670.     <script>
  671.             document.addEventListener('DOMContentLoaded', function() {
  672.             // Tooltips
  673.             var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  674.             var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  675.                 return new bootstrap.Tooltip(tooltipTriggerEl)
  676.             });
  678.             // Modal de cancelación
  679.             const cancelModal = document.getElementById('cancelModal');
  680.             const cancelButtons = document.querySelectorAll('.btn-cancelar');
  681.             const confirmCancelBtn = document.getElementById('confirmCancel');
  682.             const appointmentInfo = document.getElementById('appointmentInfo');
  683.             let currentAppointmentId = null;
  684.             let currentCsrfToken = null;
  686.             cancelButtons.forEach(button => {
  687.                 button.addEventListener('click', function() {
  688.                     currentAppointmentId = this.getAttribute('data-appointment-id');
  689.                     const info = this.getAttribute('data-appointment-info');
  690.                     const csrfToken = this.getAttribute('data-csrf-token');
  691.                     appointmentInfo.textContent = `Cita #${currentAppointmentId} - ${info}`;
  692.                     currentCsrfToken = csrfToken;
  693.                 });
  694.             });
  696.             confirmCancelBtn.addEventListener('click', function() {
  697.                 if (currentAppointmentId) {
  698.                     const reason = document.getElementById('cancelReason').value;
  699.                     
  700.                     // Mostrar loading
  701.                     confirmCancelBtn.disabled = true;
  702.                     confirmCancelBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cancelando...';
  704.                     // Endpoint real para cancelar la cita
  705.                     fetch(`/admin/appointment/${currentAppointmentId}/status`, {
  706.                         method: 'POST',
  707.                         headers: {
  708.                             'Content-Type': 'application/x-www-form-urlencoded',
  709.                             'X-Requested-With': 'XMLHttpRequest'
  710.                         },
  711.                         body: new URLSearchParams({
  712.                             'status': 'cancelada_clinica',
  713.                             'reason': reason || 'Sin motivo especificado',
  714.                             '_token': currentCsrfToken
  715.                         })
  716.                     })
  717.                     .then(response => {
  718.                         if (!response.ok) {
  719.                             throw new Error('Error en la respuesta del servidor');
  720.                         }
  721.                         return response.json();
  722.                     })
  723.                     .then(data => {
  724.                         if (data.success) {
  725.                             // Mostrar toast de éxito para cancelación
  726.                             showToast('success', 'Cita cancelada correctamente');
  727.                             
  728.                             // Cerrar modal
  729.                             const modal = bootstrap.Modal.getInstance(cancelModal);
  730.                             modal.hide();
  731.                             
  732.                             // Recargar la página después de un breve delay
  733.                             setTimeout(() => {
  734.                                 location.reload();
  735.                             }, 1500);
  736.                         } else {
  737.                             throw new Error(data.message || 'Error al cancelar la cita');
  738.                         }
  739.                     })
  740.                     .catch(error => {
  741.                         console.error('Error:', error);
  742.                         showToast('error', 'Error al cancelar la cita: ' + error.message);
  743.                         
  744.                         // Restaurar botón
  745.                         confirmCancelBtn.disabled = false;
  746.                         confirmCancelBtn.innerHTML = '<i class="fas fa-times-circle me-2"></i>Confirmar Cancelación';
  747.                     });
  748.                 }
  749.             });
  751.             // Reset modal cuando se cierra
  752.             cancelModal.addEventListener('hidden.bs.modal', function () {
  753.                 document.getElementById('cancelReason').value = '';
  754.                 currentAppointmentId = null;
  755.                 currentCsrfToken = null;
  756.                 confirmCancelBtn.disabled = false;
  757.                 confirmCancelBtn.innerHTML = '<i class="fas fa-times-circle me-2"></i>Confirmar Cancelación';
  758.             });
  761.             // Modal de Finalización
  762.             const finalizeModal = document.getElementById('finalizeModal');
  763.             const finalizeButtons = document.querySelectorAll('.btn-finalizar');
  764.             const finalizeAppointmentInfo = document.getElementById('finalizeAppointmentInfo');
  765.             const confirmFinalizeBtn = document.getElementById('confirmFinalize');
  766.             const finalizeOptions = document.querySelectorAll('.finalize-option');
  768.             let currentFinalizeAppointmentId = null;
  769.             let currentFinalizeCsrfToken = null;
  770.             let selectedStatus = null;
  772.             finalizeButtons.forEach(button => {
  773.                 button.addEventListener('click', function() {
  774.                     currentFinalizeAppointmentId = this.getAttribute('data-appointment-id');
  775.                     const appointmentInfo = this.getAttribute('data-appointment-info');
  776.                     currentFinalizeCsrfToken = this.getAttribute('data-csrf-token');
  777.                     
  778.                     finalizeAppointmentInfo.textContent = appointmentInfo;
  779.                     
  780.                     // Resetear selección
  781.                     selectedStatus = null;
  782.                     confirmFinalizeBtn.disabled = true;
  783.                     finalizeOptions.forEach(option => {
  784.                         option.classList.remove('bg-success', 'bg-warning', 'text-white');
  785.                         option.classList.add('bg-light');
  786.                     });
  787.                 });
  788.             });
  790.             // Manejar selección de opción
  791.             finalizeOptions.forEach(option => {
  792.                 option.addEventListener('click', function() {
  793.                     const status = this.getAttribute('data-status');
  794.                     
  795.                     // Remover selección anterior
  796.                     finalizeOptions.forEach(opt => {
  797.                         opt.classList.remove('bg-success', 'bg-warning', 'text-white');
  798.                         opt.classList.add('bg-light');
  799.                     });
  800.                     
  801.                     // Aplicar selección actual
  802.                     this.classList.remove('bg-light');
  803.                     if (status === 'completada') {
  804.                         this.classList.add('bg-success', 'text-white');
  805.                     } else {
  806.                         this.classList.add('bg-warning', 'text-white');
  807.                     }
  808.                     
  809.                     selectedStatus = status;
  810.                     confirmFinalizeBtn.disabled = false;
  811.                 });
  812.             });
  814.             // Confirmar finalización
  815.             confirmFinalizeBtn.addEventListener('click', function() {
  816.                 if (currentFinalizeAppointmentId && selectedStatus) {
  817.                     const notes = document.getElementById('finalizeNotes').value;
  818.                     const statusText = selectedStatus === 'completada' ? 'Completada' : 'Ausente';
  819.                     
  820.                     // Mostrar loading
  821.                     confirmFinalizeBtn.disabled = true;
  822.                     confirmFinalizeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Procesando...';
  823.                     
  824.                     // Cambiar estado de la cita
  825.                     fetch(`/admin/appointment/${currentFinalizeAppointmentId}/status`, {
  826.                         method: 'POST',
  827.                         headers: {
  828.                             'Content-Type': 'application/x-www-form-urlencoded',
  829.                             'X-Requested-With': 'XMLHttpRequest'
  830.                         },
  831.                         body: new URLSearchParams({
  832.                             'status': selectedStatus,
  833.                             'reason': notes || 'Sin observaciones',
  834.                             '_token': currentFinalizeCsrfToken
  835.                         })
  836.                     })
  837.                     .then(response => {
  838.                         if (!response.ok) {
  839.                             throw new Error('Error en la respuesta del servidor');
  840.                         }
  841.                         return response.json();
  842.                     })
  843.                     .then(data => {
  844.                         if (data.success) {
  845.                             showToast('success', `Cita marcada como ${statusText} correctamente`);
  846.                             
  847.                             // Cerrar modal
  848.                             const modal = bootstrap.Modal.getInstance(finalizeModal);
  849.                             modal.hide();
  850.                             
  851.                             // Recargar después de un breve delay
  852.                             setTimeout(() => {
  853.                                 location.reload();
  854.                             }, 1500);
  855.                         } else {
  856.                             throw new Error(data.message || `Error al marcar como ${statusText}`);
  857.                         }
  858.                     })
  859.                     .catch(error => {
  860.                         console.error('Error:', error);
  861.                         showToast('error', error.message);
  862.                         
  863.                         // Restaurar botón
  864.                         confirmFinalizeBtn.disabled = false;
  865.                         confirmFinalizeBtn.innerHTML = '<i class="fas fa-check me-2"></i>Confirmar';
  866.                     });
  867.                 }
  868.             });
  870.             // Reset modal cuando se cierra
  871.             finalizeModal.addEventListener('hidden.bs.modal', function () {
  872.                 document.getElementById('finalizeNotes').value = '';
  873.                 currentFinalizeAppointmentId = null;
  874.                 currentFinalizeCsrfToken = null;
  875.                 selectedStatus = null;
  876.                 confirmFinalizeBtn.disabled = true;
  877.                 confirmFinalizeBtn.innerHTML = '<i class="fas fa-check me-2"></i>Confirmar';
  878.                 
  879.                 // Resetear opciones
  880.                 finalizeOptions.forEach(option => {
  881.                     option.classList.remove('bg-success', 'bg-warning', 'text-white');
  882.                     option.classList.add('bg-light');
  883.                 });
  884.             });
  886.             // ========== MODAL DE ELIMINACIÓN - VERSIÓN CORREGIDA ==========
  887.             const deleteModal = document.getElementById('deleteModal');
  888.             const deleteButtons = document.querySelectorAll('[data-bs-target="#deleteModal"]');
  889.             const deleteAppointmentInfo = document.getElementById('deleteAppointmentInfo');
  890.             const confirmDeleteBtn = document.getElementById('confirmDelete');
  891.             
  892.             let currentDeleteAppointmentId = null;
  893.             let currentDeleteCsrfToken = null;
  894.             
  895.             deleteButtons.forEach(button => {
  896.                 button.addEventListener('click', function() {
  897.                     currentDeleteAppointmentId = this.getAttribute('data-appointment-id');
  898.                     const appointmentInfo = this.getAttribute('data-appointment-info');
  899.                     currentDeleteCsrfToken = this.getAttribute('data-csrf-token');
  900.                     
  901.                     deleteAppointmentInfo.textContent = appointmentInfo;
  902.                 });
  903.             });
  904.             
  905.             // Manejar el clic en el botón "Eliminar Permanentemente"
  906.             confirmDeleteBtn.addEventListener('click', function() {
  907.                 if (!currentDeleteAppointmentId || !currentDeleteCsrfToken) {
  908.                     showToast('error', 'Error: No se pudo obtener la información de la cita');
  909.                     return;
  910.                 }
  911.                 
  912.                 const url = "{{ path('admin_appointment_delete', {id: 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', currentDeleteAppointmentId);
  913.                 
  914.                 // Mostrar loading en el botón y deshabilitar
  915.                 confirmDeleteBtn.disabled = true;
  916.                 confirmDeleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Eliminando...';
  917.                 
  918.                 // Hacer la petición fetch UNA sola vez
  919.                 fetch(url, {
  920.                     method: 'POST',
  921.                     headers: {
  922.                         'Content-Type': 'application/x-www-form-urlencoded',
  923.                         'X-Requested-With': 'XMLHttpRequest'
  924.                     },
  925.                     body: new URLSearchParams({
  926.                         '_token': currentDeleteCsrfToken
  927.                     })
  928.                 })
  929.                 .then(response => {
  930.                     if (!response.ok) {
  931.                         throw new Error('Error en la respuesta del servidor');
  932.                     }
  933.                     return response.json();
  934.                 })
  935.                 .then(data => {
  936.                     if (data.success) {
  937.                         showToast('success', data.message || 'Cita eliminada correctamente');
  938.                         
  939.                         // Cerrar modal
  940.                         const modal = bootstrap.Modal.getInstance(deleteModal);
  941.                         modal.hide();
  942.                         
  943.                         // Recargar la página después de un breve delay
  944.                         setTimeout(() => {
  945.                             location.reload();
  946.                         }, 1500);
  947.                     } else {
  948.                         throw new Error(data.message || 'Error al eliminar la cita');
  949.                     }
  950.                 })
  951.                 .catch(error => {
  952.                     console.error('Error:', error);
  953.                     showToast('error', error.message || 'Error al eliminar la cita');
  954.                     
  955.                     // Restaurar botón en caso de error
  956.                     confirmDeleteBtn.disabled = false;
  957.                     confirmDeleteBtn.innerHTML = '<i class="fas fa-trash me-2"></i>Eliminar Permanentemente';
  958.                 });
  959.             });
  960.             
  961.             // Reset modal cuando se cierra
  962.             deleteModal.addEventListener('hidden.bs.modal', function () {
  963.                 currentDeleteAppointmentId = null;
  964.                 currentDeleteCsrfToken = null;
  965.                 confirmDeleteBtn.disabled = false;
  966.                 confirmDeleteBtn.innerHTML = '<i class="fas fa-trash me-2"></i>Eliminar Permanentemente';
  967.             });
  968.             // ========== FIN MODAL DE ELIMINACIÓN ==========
  970.             // Función para mostrar toast (compartida)
  971.             function showToast(type, message) {
  972.                 // Crear contenedor de toasts si no existe
  973.                 let toastContainer = document.getElementById('toast-container');
  974.                 if (!toastContainer) {
  975.                     toastContainer = document.createElement('div');
  976.                     toastContainer.id = 'toast-container';
  977.                     toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
  978.                     toastContainer.style.zIndex = '1060';
  979.                     document.body.appendChild(toastContainer);
  980.                 }
  981.                 
  982.                 // Crear toast
  983.                 const toastId = 'toast-' + Date.now();
  984.                 const toastHtml = `
  985.                     <div id="${toastId}" class="toast align-items-center text-bg-${type} border-0" role="alert">
  986.                         <div class="d-flex">
  987.                             <div class="toast-body">
  988.                                 <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} me-2"></i>
  989.                                 ${message}
  990.                             </div>
  991.                             <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  992.                         </div>
  993.                     </div>
  994.                 `;
  995.                 
  996.                 toastContainer.insertAdjacentHTML('beforeend', toastHtml);
  997.                 
  998.                 // Mostrar toast
  999.                 const toastElement = document.getElementById(toastId);
  1000.                 const toast = new bootstrap.Toast(toastElement, {
  1001.                     autohide: true,
  1002.                     delay: 5000
  1003.                 });
  1004.                 toast.show();
  1005.                 
  1006.                 // Remover del DOM cuando se oculte
  1007.                 toastElement.addEventListener('hidden.bs.toast', function() {
  1008.                     this.remove();
  1009.                 });
  1010.             }
  1011.         });
  1012.     </script>
  1013. {% endblock %}