@extends('layouts.customer')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <a href="{{ route('customer.support') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Support
    </a>

    {{-- Ticket Header --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-start justify-between mb-3">
            <h1 class="text-xl font-bold text-gray-900">{{ $ticket->subject }}</h1>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ml-4
                @if($ticket->status === 'open') bg-emerald-100 text-emerald-700
                @elseif($ticket->status === 'in_progress') bg-blue-100 text-blue-700
                @elseif($ticket->status === 'resolved') bg-purple-100 text-purple-700
                @else bg-gray-100 text-gray-700 @endif">
                {{ str_replace('_', ' ', ucfirst($ticket->status)) }}
            </span>
        </div>
        <div class="flex items-center space-x-4 text-xs text-gray-500">
            <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100">{{ ucfirst($ticket->category) }}</span>
            <span class="inline-flex items-center
                @if($ticket->priority === 'high') text-rose-600
                @elseif($ticket->priority === 'medium') text-amber-600
                @else text-gray-500 @endif">
                <span class="w-1.5 h-1.5 rounded-full mr-1
                    @if($ticket->priority === 'high') bg-rose-500
                    @elseif($ticket->priority === 'medium') bg-amber-500
                    @else bg-gray-400 @endif"></span>
                {{ ucfirst($ticket->priority) }}
            </span>
            <span>Created: {{ $ticket->created_at->format('M d, Y h:i A') }}</span>
        </div>
    </div>

    {{-- Message Thread --}}
    <div class="space-y-4 mb-6">
        @forelse($ticket->replies ?? [] as $reply)
        <div class="flex {{ $reply->is_admin ? 'justify-start' : 'justify-end' }}">
            <div class="max-w-[80%] rounded-2xl px-5 py-3
                @if($reply->is_admin) bg-gray-100 text-gray-900
                @else bg-[#0D6B58] text-white @endif">
                <p class="text-sm {{ $reply->is_admin ? 'text-gray-600' : 'text-emerald-100' }} text-xs mb-1">
                    {{ $reply->is_admin ? ($reply->sender_name ?? 'Support') : 'You' }}
                </p>
                <p class="text-sm whitespace-pre-wrap">{{ $reply->message }}</p>
                <p class="text-xs mt-2 {{ $reply->is_admin ? 'text-gray-400' : 'text-emerald-200' }}">{{ $reply->created_at->format('M d, Y h:i A') }}</p>
            </div>
        </div>
        @empty
        <div class="bg-gray-50 rounded-xl p-6 text-center">
            <p class="text-sm text-gray-500">No messages yet. Start the conversation below.</p>
        </div>
        @endforelse
    </div>

    {{-- Reply Form --}}
    @if($ticket->status !== 'closed' && $ticket->status !== 'resolved')
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-3">Reply</h3>
        <form method="POST" action="{{ route('customer.support.reply', $ticket->id) }}">
            @csrf
            @method('POST')
            <div class="mb-4">
                <textarea name="message" rows="4" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] resize-none" placeholder="Type your message..." required></textarea>
                @error('message')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex items-center justify-between">
                <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                    Send Reply
                </button>
                <form method="POST" action="{{ route('customer.support.close', $ticket->id) }}" onsubmit="return confirm('Close this ticket?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="text-sm text-gray-500 hover:text-gray-700 font-medium">Close Ticket</button>
                </form>
            </div>
        </form>
    </div>
    @else
    <div class="bg-gray-50 rounded-xl p-6 text-center">
        <p class="text-sm text-gray-500">This ticket has been {{ $ticket->status }}.</p>
        @if($ticket->status === 'closed')
        <form method="POST" action="{{ route('customer.support.reopen', $ticket->id) }}" class="mt-3">
            @csrf
            @method('PATCH')
            <button type="submit" class="text-sm text-[#0D6B58] hover:underline font-medium">Reopen Ticket</button>
        </form>
        @endif
    </div>
    @endif

</div>
@endsection