@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-gray-700 text-3xl font-medium">مشاهده تیکت</h3>
        <a href="{{ route('tickets.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
            <i class="fas fa-arrow-right ml-2"></i>بازگشت
        </a>
    </div>

    <!-- Ticket Info -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h4 class="text-lg font-semibold text-gray-800">اطلاعات تیکت</h4>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-600 text-sm font-medium mb-1">موضوع:</label>
                    <p class="text-gray-900 font-semibold">{{ $ticket->subject }}</p>
                </div>
                <div>
                    <label class="block text-gray-600 text-sm font-medium mb-1">کاربر:</label>
                    <p class="text-gray-900">
                        <i class="fas fa-user ml-1 text-gray-400"></i>
                        {{ $ticket->user->full_name ?? 'کاربر ناشناس' }}
                    </p>
                </div>
                <div>
                    <label class="block text-gray-600 text-sm font-medium mb-1">وضعیت:</label>
                    @php
                        $statusColors = [
                            'open' => 'bg-red-100 text-red-800',
                            'pending' => 'bg-yellow-100 text-yellow-800',
                            'answered' => 'bg-blue-100 text-blue-800',
                            'closed' => 'bg-gray-100 text-gray-800',
                        ];
                        $statusLabels = [
                            'open' => 'باز',
                            'pending' => 'در انتظار',
                            'answered' => 'پاسخ داده شده',
                            'closed' => 'بسته',
                        ];
                    @endphp
                    <span class="inline-block px-3 py-1 font-semibold leading-tight rounded-full {{ $statusColors[$ticket->status] ?? 'bg-gray-100 text-gray-800' }}">
                        {{ $statusLabels[$ticket->status] ?? $ticket->status }}
                    </span>
                </div>
                <div>
                    <label class="block text-gray-600 text-sm font-medium mb-1">اولویت:</label>
                    @php
                        $priorityColors = [
                            'low' => 'bg-green-100 text-green-800',
                            'normal' => 'bg-blue-100 text-blue-800',
                            'high' => 'bg-orange-100 text-orange-800',
                            'urgent' => 'bg-red-100 text-red-800',
                        ];
                        $priorityLabels = [
                            'low' => 'کم',
                            'normal' => 'معمولی',
                            'high' => 'زیاد',
                            'urgent' => 'فوری',
                        ];
                    @endphp
                    <span class="inline-block px-3 py-1 font-semibold leading-tight rounded-full {{ $priorityColors[$ticket->priority] ?? 'bg-gray-100 text-gray-800' }}">
                        {{ $priorityLabels[$ticket->priority] ?? $ticket->priority }}
                    </span>
                </div>
                <div>
                    <label class="block text-gray-600 text-sm font-medium mb-1">تاریخ ایجاد:</label>
                    <p class="text-gray-900">{{ $ticket->created_at->diffForHumans() }}</p>
                </div>
            </div>
            @if($ticket->description)
            <div class="mt-4">
                <label class="block text-gray-600 text-sm font-medium mb-1">توضیحات:</label>
                <p class="text-gray-900 bg-gray-50 p-4 rounded-lg">{{ $ticket->description }}</p>
            </div>
            @endif
        </div>
    </div>

    <!-- Update Status -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h4 class="text-lg font-semibold text-gray-800">تغییر وضعیت</h4>
        </div>
        <div class="p-6">
            <form action="{{ route('tickets.status', $ticket->id) }}" method="POST" class="flex items-center gap-4">
                @csrf
                @method('PATCH')
                <select name="status" class="block w-48 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="open" {{ $ticket->status == 'open' ? 'selected' : '' }}>باز</option>
                    <option value="pending" {{ $ticket->status == 'pending' ? 'selected' : '' }}>در انتظار</option>
                    <option value="answered" {{ $ticket->status == 'answered' ? 'selected' : '' }}>پاسخ داده شده</option>
                    <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>بسته</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
                    <i class="fas fa-save ml-2"></i>ذخیره
                </button>
            </form>
        </div>
    </div>

    <!-- Messages -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h4 class="text-lg font-semibold text-gray-800">پیام‌ها</h4>
        </div>
        <div class="p-6">
            @if($ticket->messages->count() > 0)
            <div class="space-y-4">
                @foreach($ticket->messages as $message)
                <div class="p-4 rounded-lg {{ $message->sender_type == 'admin' ? 'bg-indigo-50 mr-8' : 'bg-gray-50 ml-8' }}">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <i class="fas {{ $message->sender_type == 'admin' ? 'fa-user-shield text-indigo-500' : 'fa-user text-gray-500' }} ml-2"></i>
                            <span class="font-medium {{ $message->sender_type == 'admin' ? 'text-indigo-700' : 'text-gray-700' }}">
                                {{ $message->sender_type == 'admin' ? 'پشتیبانی' : ($ticket->user->full_name ?? 'کاربر') }}
                            </span>
                        </div>
                        <span class="text-xs text-gray-500">{{ $message->created_at->diffForHumans() }}</span>
                    </div>
                    <p class="text-gray-700 whitespace-pre-line">{{ $message->message }}</p>
                </div>
                @endforeach
            </div>
            @else
            <p class="text-gray-500 text-center py-4">هیچ پیامی وجود ندارد.</p>
            @endif
        </div>
    </div>

    <!-- Reply Form -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h4 class="text-lg font-semibold text-gray-800">ارسال پاسخ</h4>
        </div>
        <div class="p-6">
            <form action="{{ route('tickets.reply', $ticket->id) }}" method="POST">
                @csrf
                <div class="mb-4">
                    <textarea name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="پیام خود را بنویسید..." required>{{ old('message') }}</textarea>
                    @error('message')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
                    <i class="fas fa-paper-plane ml-2"></i>ارسال پاسخ
                </button>
            </form>
        </div>
    </div>

    <!-- Delete Ticket -->
    <div class="mt-6 text-left">
        <form action="{{ route('tickets.destroy', $ticket->id) }}" method="POST" onsubmit="return confirm('آیا مطمئن هستید که می‌خواهید این تیکت را حذف کنید؟')">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:bg-red-700">
                <i class="fas fa-trash ml-2"></i>حذف تیکت
            </button>
        </form>
    </div>
</div>
@endsection