@extends('portal.layouts.master')
@section('title', 'Ticket #' . $ticket->id)
@section('page-title', 'Ticket #' . $ticket->id)

@section('extra-css')
.ticket-detail { max-width: 800px; }
.ticket-header-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem;
}
.ticket-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.ticket-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.t-badge {
    font-size: .68rem; font-weight: 600; padding: .2rem .5rem;
    border-radius: 4px; text-transform: uppercase;
}
.t-badge.dept-sales { background: rgba(59,130,246,.15); color: #3b82f6; }
.t-badge.dept-technical { background: rgba(168,85,247,.15); color: #a855f7; }
.t-badge.status-open { background: rgba(245,158,11,.15); color: #f59e0b; }
.t-badge.status-in_progress { background: rgba(59,130,246,.15); color: #3b82f6; }
.t-badge.status-resolved { background: rgba(14,203,129,.15); color: var(--green); }
.t-badge.status-closed { background: rgba(255,255,255,.08); color: var(--text-muted); }
.t-badge.prio-low { background: rgba(255,255,255,.08); color: var(--text-muted); }
.t-badge.prio-medium { background: rgba(59,130,246,.12); color: #3b82f6; }
.t-badge.prio-high { background: rgba(245,158,11,.12); color: #f59e0b; }
.t-badge.prio-urgent { background: rgba(246,70,93,.12); color: #f6465d; }
.ticket-info { font-size: .78rem; color: var(--text-secondary); }
.ticket-message {
    background: var(--bg-secondary); border-radius: 6px; padding: .75rem 1rem;
    margin-top: .75rem; font-size: .85rem; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
}

/* Replies */
.replies-section { margin-top: 1rem; }
.reply-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1rem; margin-bottom: .75rem;
}
.reply-item.staff { border-left: 3px solid var(--accent); }
.reply-item.client { border-left: 3px solid var(--green); }
.reply-header { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.reply-author { font-size: .78rem; font-weight: 600; }
.reply-time { font-size: .7rem; color: var(--text-muted); }
.reply-body { font-size: .83rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.reply-form {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1rem; margin-top: 1rem;
}
@endsection

@section('content')
<div class="ticket-detail">
    <a href="{{ route('portal.helpdesk') }}" style="font-size:.82rem;margin-bottom:.75rem;display:inline-block">
        <i class="fas fa-arrow-left me-1"></i> Back to Help Desk
    </a>

    <div class="ticket-header-card">
        <div class="ticket-title">{{ $ticket->subject }}</div>
        <div class="ticket-badges">
            <span class="t-badge dept-{{ $ticket->department }}">{{ ucfirst($ticket->department) }}</span>
            <span class="t-badge status-{{ $ticket->status }}">{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</span>
            <span class="t-badge prio-{{ $ticket->priority }}">{{ ucfirst($ticket->priority) }} Priority</span>
            <span class="t-badge" style="background:rgba(255,255,255,.06);color:var(--text-secondary)">
                <i class="fas fa-{{ $ticket->update_via === 'phone' ? 'phone' : ($ticket->update_via === 'callback' ? 'phone-flip' : 'bell') }} me-1"></i>
                {{ ucfirst(str_replace('_', ' ', $ticket->update_via)) }}
            </span>
        </div>
        <div class="ticket-info">
            Opened {{ $ticket->created_at->format('M d, Y \a\t H:i') }} &middot;
            {{ $ticket->created_at->diffForHumans() }}
            @if($ticket->resolved_at)
                &middot; Resolved {{ $ticket->resolved_at->diffForHumans() }}
            @endif
        </div>
        <div class="ticket-message">{{ $ticket->message }}</div>
    </div>

    {{-- Replies --}}
    @if($ticket->replies->isNotEmpty())
    <div class="replies-section">
        <h6 style="font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem">
            Replies ({{ $ticket->replies->count() }})
        </h6>
        @foreach($ticket->replies as $reply)
        <div class="reply-item {{ $reply->is_staff ? 'staff' : 'client' }}">
            <div class="reply-header">
                <span class="reply-author">
                    @if($reply->is_staff)
                        <i class="fas fa-headset me-1" style="color:var(--accent)"></i> Support Team
                    @else
                        <i class="fas fa-user me-1" style="color:var(--green)"></i> You
                    @endif
                </span>
                <span class="reply-time">{{ $reply->created_at->format('M d, H:i') }}</span>
            </div>
            <div class="reply-body">{{ $reply->message }}</div>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Reply form --}}
    @if($ticket->status !== 'closed')
    <div class="reply-form">
        <h6 style="font-size:.82rem;font-weight:600;margin-bottom:.5rem">
            <i class="fas fa-reply me-1"></i> Reply
        </h6>
        <form method="POST" action="{{ route('portal.helpdesk.reply', $ticket->id) }}">
            @csrf
            <textarea name="message" class="form-control mb-2" rows="3" required
                placeholder="Type your reply...">{{ old('message') }}</textarea>
            @error('message')
                <div class="text-danger mb-2" style="font-size:.75rem">{{ $message }}</div>
            @enderror
            <button type="submit" class="btn btn-accent" style="font-size:.82rem;padding:.45rem 1.2rem">
                <i class="fas fa-paper-plane me-1"></i> Send Reply
            </button>
        </form>
    </div>
    @else
    <div style="text-align:center;padding:1rem;color:var(--text-muted);font-size:.85rem">
        <i class="fas fa-lock me-1"></i> This ticket is closed.
    </div>
    @endif
</div>
@endsection