@extends('layouts.app')

@section('title', 'Ticket #TK-' . str_pad($ticket->id, 5, '0', STR_PAD_LEFT))

@section('content')
<div class="row g-4">
    @include('vendor.partials.sidebar-column')

    <div class="col-lg-9">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-2 small">
                        <li class="breadcrumb-item"><a href="{{ route('vendor.support.tickets.index') }}">Support</a></li>
                        <li class="breadcrumb-item active">#TK-{{ str_pad($ticket->id, 5, '0', STR_PAD_LEFT) }}</li>
                    </ol>
                </nav>
                <h2 class="fw-bold mb-0">{{ $ticket->subject }}</h2>
            </div>
            <a href="{{ route('vendor.support.tickets.index') }}" class="btn btn-light border btn-sm">
                <i class="bi bi-arrow-left me-1"></i> Back
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
                    <div>
                        <span class="badge bg-{{ $ticket->status === 'open' ? 'success' : ($ticket->status === 'closed' ? 'secondary' : 'warning') }} bg-opacity-10 text-{{ $ticket->status === 'open' ? 'success' : ($ticket->status === 'closed' ? 'secondary' : 'warning') }} me-2">{{ ucfirst($ticket->status) }}</span>
                        <span class="badge bg-light text-dark border">{{ ucfirst($ticket->priority) }} priority</span>
                    </div>
                    <small class="text-muted">{{ $ticket->created_at->format('d M, Y H:i') }}</small>
                </div>
                <div class="text-secondary">{!! nl2br(e($ticket->message)) !!}</div>
            </div>
        </div>

        @foreach($ticket->replies as $reply)
        <div class="card border-0 shadow-sm mb-3 {{ $reply->user?->role === 'admin' ? 'border-start border-4 border-primary' : '' }}">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between mb-2">
                    <strong>{{ $reply->user?->name ?? 'Support' }}</strong>
                    <small class="text-muted">{{ $reply->created_at->diffForHumans() }}</small>
                </div>
                <div class="text-secondary mb-0">{!! nl2br(e($reply->message)) !!}</div>
            </div>
        </div>
        @endforeach

        @if($ticket->status !== 'closed')
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h6 class="fw-bold mb-3">Add Reply</h6>
                <form action="{{ route('vendor.support.tickets.reply', $ticket->id) }}" method="POST">
                    @csrf
                    <textarea name="message" class="form-control mb-3" rows="4" placeholder="Type your message..." required></textarea>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-send me-1"></i> Send Reply
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection