@extends('layouts.customer')

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

    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Support Center</h1>
        <a href="{{ route('customer.support.create') }}" class="inline-flex items-center px-4 py-2.5 bg-[#0D6B58] text-white text-sm font-medium 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 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            New Ticket
        </a>
    </div>

    @if(isset($tickets) && $tickets->count())
    <div class="space-y-4">
        @foreach($tickets as $ticket)
        <a href="{{ route('customer.support.show', $ticket->id) }}" class="block bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition">
            <div class="flex items-start justify-between">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center space-x-3 mb-2">
                        <h3 class="text-sm font-semibold text-gray-900 truncate">{{ $ticket->subject }}</h3>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0
                            @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>
                        @if(isset($ticket->priority))
                        <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) }} Priority
                        </span>
                        @endif
                        <span>{{ $ticket->created_at->diffForHumans() }}</span>
                        @if($ticket->last_reply_at)
                        <span>Last reply: {{ $ticket->last_reply_at->diffForHumans() }}</span>
                        @endif
                    </div>
                </div>
                <svg class="w-5 h-5 text-gray-300 flex-shrink-0 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </a>
        @endforeach
    </div>

    @if($tickets->hasPages())
    <div class="mt-6">
        {{ $tickets->links() }}
    </div>
    @endif
    @else
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
        </svg>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">No Support Tickets</h3>
        <p class="text-gray-500 text-sm mb-4">Need help? Create a new support ticket.</p>
        <a href="{{ route('customer.support.create') }}" class="inline-flex items-center px-4 py-2 bg-[#0D6B58] text-white text-sm font-medium rounded-lg hover:bg-[#0A5A49] transition">
            Create Ticket
        </a>
    </div>
    @endif

</div>
@endsection