@extends('layouts.app')
@section('title', 'Ticket board')

@section('content')
    <div class="page-head">
        <div><h1>Ticket board</h1><p>Live view of every open and pending ticket.</p></div>
        <div class="page-actions">
            <a href="{{ route('tickets.index') }}" class="btn secondary">List view</a>
            <a href="{{ route('tickets.create') }}" class="btn">+ Raise ticket</a>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;">
        @foreach ($columns as $column)
            <div class="card">
                <div class="card-head">
                    <h3>{{ title_case_words($column['status']) }}</h3>
                    <span class="badge {{ status_color($column['status']) }}">{{ $column['tickets']->count() }}</span>
                </div>
                <div class="card-body">
                    @forelse ($column['tickets'] as $ticket)
                        <a href="{{ route('tickets.show', $ticket) }}"
                           style="display:block;border:1px solid var(--ink-200);border-left:3px solid {{ $ticket->priority === 'urgent' ? 'var(--danger)' : ($ticket->priority === 'high' ? 'var(--warning)' : 'var(--ink-300)') }};
                                  border-radius:8px;padding:.6rem .75rem;margin-bottom:.5rem;text-decoration:none;color:inherit;">
                            <div class="mono tiny muted">{{ $ticket->ticket_number }}</div>
                            <div class="small strong truncate" style="max-width:220px;">{{ $ticket->subject }}</div>
                            <div class="tiny muted">{{ $ticket->customer->display_name }}</div>
                            <div class="flex-between mt-1">
                                <span class="badge {{ match ($ticket->priority) { 'urgent' => 'danger', 'high' => 'warning', default => 'muted' } }}">{{ $ticket->priority }}</span>
                                <span class="tiny muted">{{ $ticket->assignee?->initials() ?? '—' }}</span>
                            </div>
                            @if ($ticket->is_breached)
                                <div class="tiny" style="color:var(--danger);">SLA breached</div>
                            @endif
                        </a>
                    @empty
                        <p class="small muted" style="text-align:center;padding:1.5rem 0;">Nothing here</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
@endsection