servicedesk/src/resources/views/livewire/client/ticket-show.blade.php

<div style="flex:1;display:flex;flex-direction:column">
    <x-topbar area="client" />

    <div class="page-pad" style="flex:1;padding:28px;display:flex;flex-direction:column;gap:20px;max-width:1180px;width:100%;margin:0 auto;box-sizing:border-box">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
            <a href="{{ route('client.dashboard') }}" wire:navigate class="btn btn-ghost" style="padding:0">&larr; Wróć do listy</a>

            {{-- Live updates arrive via broadcasting, but websocket connections can
                 drop silently — this is a periodic fallback refresh, with a visible
                 countdown so it's clear the thread is still refreshing on its own.
                 Also clickable, to fetch immediately and reset the countdown. --}}
            @php
                $refreshTicketSeconds = max(1, (int) \App\Support\Settings::get('refresh_ticket_view_seconds'));
            @endphp
            <div
                class="btn btn-secondary"
                style="cursor:pointer;gap:6px"
                x-data="{ remaining: {{ $refreshTicketSeconds }}, total: {{ $refreshTicketSeconds }} }"
                x-init="setInterval(() => { remaining = remaining <= 1 ? total : remaining - 1; if (remaining === total) $wire.refreshTicketData(); }, 1000)"
                x-on:click="remaining = total; $wire.refreshTicketData()"
                title="Zgłoszenie odświeża się automatycznie — kliknij, aby odświeżyć teraz"
            >
                <span class="material-symbols-outlined" style="font-size:18px">schedule</span>
                <span x-text="remaining + 's'"></span>
            </div>
        </div>

        <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
            <div class="main-col" style="display:flex;flex-direction:column;gap:16px">
                @php
                    $firstMessage = $this->ticketMessages->first();
                    $threadMessages = $this->ticketMessages->skip(1);
                @endphp

                <div class="card" style="padding:22px;gap:10px">
                    <div class="card-kicker">Zgłoszenie {{ $ticket->displayNumber() }}</div>
                    <h2 style="margin:2px 0 0">{{ $ticket->subject }}</h2>
                    <div class="card-meta">{{ $ticket->categoryLabel() }} &middot; utworzono {{ \App\Support\Rel::format($ticket->created_at) }}</div>
                    <div style="white-space:pre-wrap;font-size:14px;margin-top:4px">{{ $ticket->body }}</div>
                    @foreach ($firstMessage?->attachments ?? [] as $a)
                        <x-message-attachment :attachment="$a" />
                    @endforeach
                    @if (count($ticket->customFieldEntries()))
                        <div style="display:flex;flex-direction:column;gap:2px;margin-top:2px">
                            @foreach ($ticket->customFieldEntries() as $cf)
                                <div style="font-size:14px"><strong>{{ $cf['label'] }}:</strong> {{ $cf['value'] }}</div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div style="display:flex;flex-direction:column;gap:10px">
                    @foreach ($threadMessages as $m)
                        @php $mine = $m->role === 'client' && $m->author_id === auth()->id(); @endphp
                        <div wire:key="msg-{{ $m->id }}" style="display:flex;justify-content:{{ $mine ? 'flex-end' : 'flex-start' }}">
                            <div style="max-width:75%;padding:10px 14px;border-radius:12px;font-size:14px;background:{{ $mine ? 'var(--color-accent-800)' : 'var(--color-surface)' }};color:{{ $mine ? 'var(--color-accent-100)' : 'var(--color-text)' }};border:1px solid var(--color-divider)">
                                <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
                                    <div style="font-size:11px;opacity:0.65;margin-bottom:4px">{{ $m->author_name }} &middot; {{ \App\Support\Rel::format($m->created_at) }}{{ $m->edited ? ' · edytowano' : '' }}</div>
                                    @if ($m->role === 'client' && $m->author_id === auth()->id())
                                        <div style="display:flex;gap:6px;flex:none">
                                            <span class="material-symbols-outlined" style="font-size:15px;cursor:pointer;opacity:0.7" wire:click="startEdit({{ $m->id }}, @js($m->body))">edit</span>
                                            <span class="material-symbols-outlined" style="font-size:15px;cursor:pointer;opacity:0.7" wire:click="requestDelete({{ $m->id }})">delete</span>
                                        </div>
                                    @endif
                                </div>
                                @if ($editingMessageId === $m->id)
                                    <textarea class="input" wire:model="editingDraft"></textarea>
                                    <div style="display:flex;gap:8px;margin-top:6px">
                                        <button type="button" class="btn btn-secondary" wire:click="cancelEdit">Anuluj</button>
                                        <button type="button" class="btn btn-primary" wire:click="saveEdit">Zapisz</button>
                                    </div>
                                @else
                                    <div style="white-space:pre-wrap">{{ $m->body }}</div>
                                @endif
                                @foreach ($m->attachments as $a)
                                    <x-message-attachment :attachment="$a" />
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                <form wire:submit="sendReply" class="card" style="padding:16px;gap:10px">
                    <textarea class="input" placeholder="Napisz odpowiedź…" wire:model="reply"></textarea>
                    @error('reply') <span style="color:var(--color-danger);font-size:12px">{{ $message }}</span> @enderror
                    <div style="display:flex;align-items:center;gap:10px">
                        <div
                            x-data="{ dragging: false }"
                            @dragover.prevent="dragging = true"
                            @dragleave.prevent="dragging = false"
                            @drop.prevent="dragging = false; const input = $el.querySelector('input[type=file]'); input.files = $event.dataTransfer.files; input.dispatchEvent(new Event('change'))"
                            :style="{ borderColor: dragging ? 'var(--color-accent)' : undefined, background: dragging ? 'color-mix(in srgb, var(--color-accent) 8%, transparent)' : undefined }"
                            style="flex:1;min-width:0;border:1px dashed var(--color-divider);border-radius:8px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px"
                        >
                            <label class="btn btn-secondary" style="cursor:pointer;flex:none">Załącz pliki<input type="file" multiple style="display:none" wire:model="attachments"></label>
                            @forelse ($attachments as $i => $file)
                                <span class="text-muted" style="font-size:13px;display:flex;align-items:center;gap:6px;min-width:0">
                                    <span class="material-symbols-outlined" style="font-size:16px;flex:none">attach_file</span>
                                    <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $file->getClientOriginalName() }}</span>
                                    <span class="material-symbols-outlined" style="font-size:16px;cursor:pointer;opacity:0.7;flex:none" wire:click="removeAttachment({{ $i }})">close</span>
                                </span>
                            @empty
                                <span class="text-muted" style="font-size:13px">Brak załączników</span>
                            @endforelse
                        </div>
                        <button class="btn btn-primary" style="flex:none" type="submit">Wyślij odpowiedź</button>
                    </div>
                    @error('attachments') <span style="color:var(--color-danger);font-size:12px">{{ $message }}</span> @enderror
                </form>
            </div>

            <div class="aside-col" style="display:flex;flex-direction:column;gap:14px">
                <div class="card" style="padding:16px;gap:8px">
                    <div class="card-kicker">Twoje dane</div>
                    <div style="font-size:14px;font-weight:500">{{ auth()->user()->name }}</div>
                    <div class="text-muted" style="font-size:13px">{{ auth()->user()->email }}</div>
                </div>
                <div wire:init="loadSuggestedArticles">
                    <x-bookstack-suggestions :articles="$this->suggestedArticles" variant="sidebar" title="Baza wiedzy" />
                </div>

                @if ($ticket->snipeit_asset_name)
                    <div class="card" style="padding:16px;gap:6px">
                        <div class="card-kicker">Powiązany sprzęt</div>
                        <div style="display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500">
                            <span class="material-symbols-outlined" style="font-size:18px;color:var(--color-accent)">devices</span>
                            {{ $ticket->snipeit_asset_name }}
                        </div>
                    </div>
                @endif

                <div class="card" style="padding:16px;gap:10px">
                    <div class="card-kicker">Status i priorytet</div>
                    <div style="display:flex;gap:6px;flex-wrap:wrap">
                        <span style="{{ $ticket->priorityStyle() }}">{{ $ticket->priorityLabel() }}</span>
                        <span style="{{ $ticket->statusStyle() }}">{{ $ticket->statusLabel() }}</span>
                    </div>
                    <div style="font-size:13px" class="text-muted">Przypisany operator: <span style="color:var(--color-text)">{{ $ticket->assignee?->name ?? 'Nieprzypisane' }}</span></div>
                    <div style="font-size:13px" class="text-muted">Zespół: <span style="color:var(--color-text)">{{ $ticket->team?->name ?? 'Brak' }}</span></div>
                    @if (! $ticket->isClosed())
                        <button type="button" class="btn btn-secondary btn-block" wire:click="close">Zamknij zgłoszenie</button>
                    @elseif ($ticket->isClosed())
                        <button type="button" class="btn btn-secondary btn-block" wire:click="reopen">Otwórz ponownie</button>
                    @endif
                </div>
                <div id="csat" class="card" style="padding:16px;gap:10px">
                    <div class="card-kicker">Ocena obsługi</div>
                    @if ($ticket->hasCsatRating())
                        <div style="display:flex;gap:2px">
                            @for ($i = 1; $i <= 5; $i++)
                                <span class="material-symbols-outlined" style="font-size:20px;color:{{ $i <= $ticket->csat_rating ? 'var(--color-accent)' : 'var(--color-divider)' }}">star</span>
                            @endfor
                        </div>
                        @if ($ticket->csat_comment)
                            <p style="font-size:13px;margin:0;white-space:pre-wrap">{{ $ticket->csat_comment }}</p>
                        @endif
                    @elseif ($ticket->csatSubmittable())
                        <div style="display:flex;gap:4px" wire:key="csat-stars-{{ $csatRating }}">
                            @for ($i = 1; $i <= 5; $i++)
                                <span
                                    class="material-symbols-outlined"
                                    style="font-size:24px;cursor:pointer;color:{{ $csatRating && $i <= $csatRating ? 'var(--color-accent)' : 'var(--color-divider)' }}"
                                    wire:click="$set('csatRating', {{ $i }})"
                                >star</span>
                            @endfor
                        </div>
                        @error('csatRating') <span style="color:var(--color-danger);font-size:12px">{{ $message }}</span> @enderror
                        <textarea class="input" placeholder="Komentarz (opcjonalnie)" wire:model="csatComment" style="min-height:60px"></textarea>
                        <button type="button" class="btn btn-primary btn-block" wire:click="submitCsat">Wyślij ocenę</button>
                    @else
                        <p class="text-muted" style="font-size:12px;margin:0">Ocena będzie dostępna po zamknięciu zgłoszenia.</p>
                    @endif
                </div>
                <div class="card" style="padding:16px;gap:8px">
                    <div class="card-kicker">Historia zmian</div>
                    @forelse ($ticket->histories as $h)
                        <div wire:key="history-{{ $h->id }}" style="font-size:12.5px"><span>{{ $h->text }}</span><div class="text-muted" style="font-size:11px">{{ \App\Support\Rel::format($h->created_at) }}</div></div>
                    @empty
                        <p class="text-muted" style="font-size:12px;margin:0">Brak historii zmian.</p>
                    @endforelse
                </div>
                <div class="card" style="padding:16px;gap:8px">
                    <div class="card-kicker">Inne Twoje zgłoszenia</div>
                    @forelse ($this->otherTickets as $ot)
                        <a wire:key="other-ticket-{{ $ot->id }}" href="{{ route('client.ticket', $ot) }}" wire:navigate style="display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;text-decoration:none;color:inherit">
                            <span style="font-size:13px">{{ $ot->displayNumber() }} — {{ $ot->subject }}</span>
                            <span style="{{ $ot->statusStyle() }};flex:none">{{ $ot->statusLabel() }}</span>
                        </a>
                    @empty
                        <p wire:key="other-tickets-empty" class="text-muted" style="font-size:12px;margin:0">Brak innych zgłoszeń.</p>
                    @endforelse
                    @if (! $showAllOtherTickets && $this->otherTicketsCount > count($this->otherTickets))
                        <button wire:key="show-all-other-tickets" type="button" wire:click="revealAllOtherTickets" class="btn btn-secondary" style="font-size:12px;padding:6px 10px;align-self:flex-start">
                            Pokaż wszystkie ({{ $this->otherTicketsCount }})
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if ($pendingDeleteMessageId)
        <div class="dialog-backdrop">
            <div class="dialog" style="max-width:400px">
                <div class="dialog-title">Potwierdź usunięcie</div>
                <div class="dialog-body">Czy na pewno usunąć tę wiadomość?</div>
                <div class="dialog-actions">
                    <button type="button" class="btn btn-secondary" wire:click="cancelDelete">Anuluj</button>
                    <button type="button" class="btn btn-primary" wire:click="confirmDelete">Usuń</button>
                </div>
            </div>
        </div>
    @endif

    @script
    <script>
        // Re-runs on every mount of this component, including after a
        // wire:navigate to a different ticket, so the socket subscription
        // always matches whichever ticket is currently on screen.
        if (window.subscribeToTicketChannel) {
            window.subscribeToTicketChannel({{ $ticket->id }});
        } else {
            // echo.js (a deferred module) hasn't run yet — queue the id so it
            // subscribes as soon as it does, instead of silently doing nothing.
            (window.__pendingTicketChannelIds = window.__pendingTicketChannelIds || []).push({{ $ticket->id }});
        }
    </script>
    @endscript
</div>