@extends('admin.layout')

@section('title', 'Ticket #'.$ticket->id)
@section('page_title', 'Ticket #'.$ticket->id)
@section('container_class', 'container py-4')

@section('header_actions')
    <a href="{{ route('admin.support_tickets_board') }}" class="btn btn-outline-secondary btn-sm">Volver tablero</a>
@endsection

@section('content')
        <section class="card mt-shell-card mb-3">
            <div class="card-body p-4">
                <p class="mt-kicker mb-2">Ticket workspace</p>
                <h2 class="h5 mb-1">Contexto completo para decidir rapido</h2>
                <p class="text-secondary mb-0">Revisa prioridad, SLA, historial y adjuntos en una misma vista con jerarquia clara.</p>
            </div>
        </section>

        <div class="card mb-4 mt-ticket-detail-card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <h2 class="h5 mb-1">{{ $ticket->subject }}</h2>
                        <div class="small text-secondary">
                            Categoria: {{ $ticket->category }} ·
                            Prioridad: <span class="badge bg-dark">{{ $ticket->priority }}</span> ·
                            Estado: @include('portal.partials.ui.status-badge', ['status' => $ticket->status])
                            @if($ticket->escalated_at)
                                · <span class="mt-badge mt-badge-danger">Escalado</span>
                            @endif
                        </div>
                    </div>
                    <div class="text-end small">
                        <div>Reporter: <strong>{{ $ticket->reporter?->name }}</strong></div>
                        <div>Asignado: <strong>{{ $ticket->assignee?->name ?? 'Sin asignar' }}</strong></div>
                        <div>SLA:
                            @if($ticket->sla_due_at && $ticket->sla_due_at->isPast() && !in_array($ticket->status, ['resolved','closed'], true))
                                <span class="text-danger fw-semibold">{{ $ticket->sla_due_at }}</span>
                            @else
                                <span>{{ $ticket->sla_due_at }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <hr>
                <div class="small">{!! nl2br(e($ticket->description)) !!}</div>
            </div>
        </div>

        <h3 class="h6 text-uppercase text-secondary mb-2">Timeline</h3>
        <div class="vstack gap-2 mb-4 mt-ticket-timeline">
            @forelse($ticket->comments as $comment)
                <div class="card {{ $comment->is_internal ? 'border-warning' : '' }} mt-ticket-comment">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between small text-secondary mb-1">
                            <span>
                                <strong>{{ $comment->author?->name }}</strong>
                                @if($comment->is_internal)
                                    <span class="badge bg-warning text-dark">interno</span>
                                @endif
                            </span>
                            <span>{{ $comment->created_at }}</span>
                        </div>
                        <div class="small">{!! nl2br(e($comment->comment)) !!}</div>
                        @if($comment->attachments && $comment->attachments->count() > 0)
                            <div class="mt-2 d-flex flex-wrap gap-2">
                                @foreach($comment->attachments as $att)
                                    <a class="btn btn-sm btn-outline-primary"
                                       href="{{ route('admin.support_ticket_attachment_download', [$ticket, $att]) }}">
                                        {{ $att->original_name }} ({{ number_format($att->size_bytes / 1024, 1) }} KB)
                                    </a>
                                @endforeach
                            </div>
                        @endif

                        <details class="mt-2 small">
                            <summary class="text-secondary">Adjuntar archivo a este comentario</summary>
                            <form method="POST"
                                  action="{{ route('admin.support_ticket_attachment_upload', [$ticket, $comment]) }}"
                                  enctype="multipart/form-data" class="mt-2 d-flex gap-2 align-items-center">
                                @csrf
                                <input type="file" name="file" class="form-control form-control-sm" required>
                                <button type="submit" class="btn btn-sm btn-primary">Subir</button>
                            </form>
                        </details>
                    </div>
                </div>
            @empty
                <div class="text-secondary small">Aun no hay comentarios.</div>
            @endforelse
        </div>

        <div class="card mt-ticket-reply-card">
            <div class="card-header fw-semibold">Añadir comentario</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.support_ticket_comment', $ticket) }}">
                    @csrf
                    <div class="mb-2">
                        <label class="form-label small" for="support-comment-body">Comentario</label>
                        <textarea id="support-comment-body" name="comment" rows="3" class="form-control" required minlength="2" maxlength="3000" placeholder="Escribe un comentario..."></textarea>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_internal" value="1" id="isInternal">
                            <label class="form-check-label small" for="isInternal">Solo staff (interno)</label>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Enviar</button>
                    </div>
                </form>
            </div>
        </div>
@endsection