{$tickets.currentTicket.title}

{statusConfig[$tickets.currentTicket.status].label} {priorityConfig[$tickets.currentTicket.priority].label} Creado {formatDate($tickets.currentTicket.created_at)}

{#if canClose} {/if}

{$tickets.currentTicket.description}

{#if $tickets.currentTicket.resolution}

Resolución:

{$tickets.currentTicket.resolution}

{/if}

Archivos Adjuntos {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1 ? 's' : ''}

{#if showAttachments}

{#each $tickets.attachments as attachment}

{attachment.original_filename}

{Math.round(attachment.size_bytes / 1024)} KB • Subido por {attachment.uploaded_by_name} • {formatDate(attachment.uploaded_at)}

{/each}

{/if}

Conversación

{#if $tickets.comments.length === 0}

No hay comentarios aún. ¡Sé el primero en comentar!

{:else}

{#each $tickets.comments as comment} {console.log('Comment:', comment)}

{comment.author_name ? comment.author_name .split(' ') .map(n => n[0]) .join('') : '??'}

{comment.author_name} {formatDate(comment.created_at)} {#if comment.is_internal} Interno {/if}

{comment.content}

{/each}

{/if}

<div class="flex justify-between items-center">
                  <div class="flex items-center space-x-4">
                    <input
                      type="file"
                      bind:this={fileInput}
                      on:change={handleFileUpload}
                      class="hidden"
                      accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.txt,.doc,.docx,.xls,.xlsx"
                      disabled={isUploading}
                    />
                    <button
                      type="button"
                      on:click={() => fileInput.click()}
                      class="btn-ghost p-2 flex items-center space-x-2"
                      disabled={isUploading}
                    >
                      {#if isUploading}
                        <div class="spinner w-4 h-4" />
                      {:else}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
                          />
                        </svg>
                      {/if}
                      <span class="text-sm">Adjuntar archivo</span>
                    </button>
                  </div>

<button
                    on:click={handleAddComment}
                    class="btn-primary px-4 py-2"
                    disabled={isSubmittingComment || !newComment.trim()}
                  >
                    {#if isSubmittingComment}
                      <div class="flex items-center space-x-2">
                        <div class="spinner w-4 h-4" />
                        <span>Enviando...</span>
                      </div>
                    {:else}
                      Enviar Comentario
                    {/if}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div class="space-y-6">
        
        <div class="card">
          <div class="card-header">
            <h3 class="text-lg font-semibold text-gray-900">Información</h3>
          </div>
          <div class="card-content space-y-4">
            <div>
              <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
              <dd class="text-sm text-gray-900 font-mono">
                #{$tickets.currentTicket.id.substring(0, 8)}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Categoría</dt>
              <dd class="text-sm text-gray-900">
                {$tickets.currentTicket.category_name || 'Sin categoría'}
              </dd>
            </div>

{#if $tickets.currentTicket.assigned_to_name}
              <div>
                <dt class="text-sm font-medium text-gray-500">Asignado a</dt>
                <dd class="text-sm text-gray-900">{$tickets.currentTicket.assigned_to_name}</dd>
              </div>
            {/if}

<div>
              <dt class="text-sm font-medium text-gray-500">Creado</dt>
              <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.created_at)}</dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Última actualización</dt>
              <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.updated_at)}</dd>
            </div>

{#if $tickets.currentTicket.due_date}
              <div>
                <dt class="text-sm font-medium text-gray-500">Fecha límite</dt>
                <dd
                  class="text-sm text-gray-900 {new Date($tickets.currentTicket.due_date) <
                  new Date()
                    ? 'text-red-600'
                    : ''}"
                >
                  {formatDate($tickets.currentTicket.due_date)}
                  {#if new Date($tickets.currentTicket.due_date) < new Date()}
                    <span class="block text-xs text-red-500">¡Vencido!</span>
                  {/if}
                </dd>
              </div>
            {/if}
          </div>
        </div>
      </div>
    </div>
  {/if}
</div>

{#if showCloseDialog}
  <div class="fixed inset-0 z-50 overflow-y-auto">
    <div
      class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div
        class="fixed inset-0 transition-opacity"
        role="dialog"
        tabindex="0"
        on:click={cancelCloseTicket}
        on:keydown={e => e.key === 'Escape' && cancelCloseTicket()}
      >
        <div class="absolute inset-0 bg-gray-500 opacity-75" />
      </div>

<div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">Cerrar Ticket</h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500">
                  ¿Estás seguro de que quieres cerrar este ticket? Esta acción indica que el
                  problema ha sido resuelto satisfactoriamente.
                </p>
              </div>

<div class="mt-4">
                <label for="close-resolution" class="form-label">
                  Comentario de cierre (opcional)
                </label>
                <textarea
                  id="close-resolution"
                  rows="3"
                  class="form-input"
                  placeholder="Describe cómo se resolvió el problema o agrega comentarios finales..."
                  bind:value={closeResolution}
                  disabled={isClosingTicket}
                />
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            type="button"
            class="w-full inline-flex justify-center btn-success px-4 py-2 sm:ml-3 sm:w-auto disabled:opacity-50"
            disabled={isClosingTicket}
            on:click={confirmCloseTicket}
          >
            {#if isClosingTicket}
              <div class="flex items-center space-x-2">
                <div class="spinner w-4 h-4" />
                <span>Cerrando...</span>
              </div>
            {:else}
              Cerrar Ticket
            {/if}
          </button>
          <button
            type="button"
            class="mt-3 w-full inline-flex justify-center btn-secondary px-4 py-2 sm:mt-0 sm:w-auto"
            disabled={isClosingTicket}
            on:click={cancelCloseTicket}
          >
            Cancelar
          </button>
        </div>
      </div>
    </div>
  </div>
{/if}

Error al cargar ticket

{$tickets.currentTicket.title}

Resolución:

Archivos Adjuntos {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1 ? 's' : ''}

Conversación