@extends('layouts.app')

@section('title', 'Support ticket '.$ticket->displayLabel())

@push('styles')
<style>
    .support-ticket-view {
        max-width: 920px;
        margin: 0 auto;
    }
    .support-ticket-view__back {
        border: 1px solid #d8dee6;
        background: #fff;
        color: #334155;
        border-radius: 0.45rem;
        padding: 0.45rem 0.9rem;
        font-weight: 500;
        box-shadow: none;
    }
    .support-ticket-view__back:hover {
        background: #f8fafc;
        color: #1e293b;
        border-color: #cbd5e1;
    }
    .support-ticket-view__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }
    .support-ticket-view__closed-banner {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 0.45rem;
        padding: 0.55rem 0.85rem;
        color: #9a3412;
        font-size: 0.875rem;
    }
    .support-ticket-view__reopen-btn {
        background: #f97316;
        border: none;
        color: #fff;
        border-radius: 0.4rem;
        padding: 0.45rem 0.95rem;
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .support-ticket-view__reopen-btn:hover {
        background: #ea580c;
        color: #fff;
    }
    .support-ticket-view__chat-btn {
        background: #0891b2;
        border: none;
        color: #fff;
        border-radius: 0.4rem;
        padding: 0.45rem 0.95rem;
        font-weight: 600;
        font-size: 0.875rem;
    }
    .support-ticket-view__chat-btn:hover {
        background: #0e7490;
        color: #fff;
    }
    .support-ticket-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .support-ticket-card__section {
        padding: 1.35rem 1.5rem;
        border-bottom: 1px solid #eef2f7;
    }
    .support-ticket-card__section:last-child {
        border-bottom: none;
    }
    .support-ticket-card__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    .support-ticket-card__id {
        font-size: 1.65rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.2;
        margin: 0;
    }
    .support-ticket-card__status {
        display: inline-block;
        padding: 0.28rem 0.8rem;
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
    }
    .support-ticket-card__status--open {
        background: #fef3c7;
        color: #92400e;
    }
    .support-ticket-card__status--closed {
        background: #e2e8f0;
        color: #475569;
    }
    .support-ticket-card__ref {
        margin-left: auto;
        color: #64748b;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .support-ticket-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
    @media (max-width: 575.98px) {
        .support-ticket-meta {
            grid-template-columns: 1fr;
        }
    }
    .support-ticket-field__label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 0.35rem;
    }
    .support-ticket-field__value {
        color: #334155;
        font-size: 0.9375rem;
        line-height: 1.5;
        margin: 0;
    }
    .support-ticket-field__value--message {
        white-space: pre-wrap;
    }
    .dark-mode .support-ticket-card {
        background: #2b3035;
        border-color: #495057;
    }
    .dark-mode .support-ticket-card__section {
        border-bottom-color: #495057;
    }
    .dark-mode .support-ticket-card__id,
    .dark-mode .support-ticket-field__value,
    .dark-mode .support-ticket-attachment__name {
        color: #e9ecef;
    }
    .dark-mode .support-ticket-card__ref,
    .dark-mode .support-ticket-field__label {
        color: #adb5bd;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="support-ticket-view">
            <div class="mb-3 d-flex flex-wrap align-items-center justify-content-between">
                <a href="{{ route('support.tickets.index') }}" class="btn btn-sm support-ticket-view__back">
                    <i class="fas fa-arrow-left mr-1"></i>Back to my tickets
                </a>
                <div class="support-ticket-view__actions">
                    @if ($canChat)
                        <a href="{{ route('support.tickets.chat', $ticket) }}" class="btn btn-sm support-ticket-view__chat-btn">
                            <i class="far fa-comments mr-1"></i>Continue in chat
                        </a>
                    @elseif (!$ticket->isOpen())
                        <div class="support-ticket-view__closed-banner">
                            <span>Chat is unavailable while this ticket is closed.</span>
                            @if ($canReopen)
                                <button type="button" class="btn btn-sm support-ticket-view__reopen-btn" id="support-ticket-reopen-btn">
                                    <i class="fas fa-redo mr-1"></i>Reopen ticket
                                </button>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <div class="support-ticket-card">
                <div class="support-ticket-card__section">
                    <div class="support-ticket-card__head">
                        <h1 class="support-ticket-card__id">{{ $ticket->displayLabel() }}</h1>
                        @if ($ticket->isOpen())
                            <span class="support-ticket-card__status support-ticket-card__status--open">Open</span>
                        @else
                            <span class="support-ticket-card__status support-ticket-card__status--closed">Closed</span>
                        @endif
                        <span class="support-ticket-card__ref">Ref: {{ $ticket->ticket_number }}</span>
                    </div>
                </div>

                <div class="support-ticket-card__section">
                    <div class="support-ticket-meta">
                        <div>
                            <span class="support-ticket-field__label">Submitted</span>
                            <p class="support-ticket-field__value">{{ $ticket->created_at->format('d M Y, H:i') }}</p>
                        </div>
                        <div>
                            <span class="support-ticket-field__label">Last updated</span>
                            <p class="support-ticket-field__value">{{ ($ticket->updated_at ?? $ticket->created_at)->format('d M Y, H:i') }}</p>
                        </div>
                    </div>
                </div>

                <div class="support-ticket-card__section">
                    <span class="support-ticket-field__label">Message</span>
                    <p class="support-ticket-field__value support-ticket-field__value--message mb-0">{{ $ticket->message }}</p>
                </div>

                @if ($attachmentLinks !== [])
                    <div class="support-ticket-card__section">
                        <span class="support-ticket-field__label mb-3 d-block">Attachments ({{ count($attachmentLinks) }})</span>
                        @include('support.partials.ticket-attachment-grid', [
                            'attachmentLinks' => $attachmentLinks,
                            'large' => true,
                        ])
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@if ($canReopen)
<script>
(function () {
    var btn = document.getElementById('support-ticket-reopen-btn');
    if (!btn) return;
    var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    btn.addEventListener('click', function () {
        fetch(@json(route('support.tickets.reopen', $ticket)), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf
            },
            body: new URLSearchParams({ _token: csrf })
        }).then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
          .then(function (res) {
              if (res.ok && res.d.success) {
                  if (typeof Swal !== 'undefined') {
                      Swal.fire({ icon: 'success', title: 'Reopened', text: res.d.message || 'Ticket reopened.' }).then(function () {
                          window.location.reload();
                      });
                  } else {
                      window.location.reload();
                  }
                  return;
              }
              var msg = (res.d && res.d.message) || 'Could not reopen ticket.';
              if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: msg });
          });
    });
})();
</script>
@endif
@endpush