@extends('layouts.app')
@section('title', $ticket->ticket_number)
@section('sidebar')
    @include('staff._sidebar')
@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-4">
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-1">
                <h1 class="text-lg font-bold">{{ $ticket->subject }}</h1>
                <span class="text-xs text-gray-400">{{ $ticket->ticket_number }}</span>
            </div>
            <p class="text-sm text-gray-500">من {{ $ticket->user->name }} • {{ $ticket->created_at->diffForHumans() }}</p>
            <p class="mt-3 text-gray-700 whitespace-pre-line">{{ $ticket->description }}</p>
        </div>

        {{-- سجل المحادثة (رسائل العميل + ردود الموظفين + الملاحظات الداخلية) --}}
        <div class="space-y-3">
            @foreach($ticket->replies as $reply)
            <div class="rounded-xl p-4 border {{ $reply->is_internal_note ? 'bg-yellow-50 border-yellow-200' : ($reply->user_id === $ticket->user_id ? 'bg-white border-gray-200' : 'bg-indigo-50 border-indigo-100') }}">
                <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                    <span class="font-medium text-gray-700">
                        {{ $reply->user->name }}
                        @if($reply->is_internal_note) <span class="text-yellow-600">(ملاحظة داخلية)</span> @endif
                    </span>
                    <span>{{ $reply->created_at->diffForHumans() }}</span>
                </div>
                <p class="text-sm text-gray-700 whitespace-pre-line">{{ $reply->body }}</p>
            </div>
            @endforeach
        </div>

        {{-- صندوق الرد --}}
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <form method="POST" action="{{ route('staff.tickets.reply', $ticket) }}" class="space-y-3">
                @csrf
                <textarea name="body" rows="4" required placeholder="اكتب ردك للعميل هنا..."
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 outline-none"></textarea>
                <div class="flex items-center justify-between">
                    <label class="flex items-center gap-2 text-sm text-gray-600">
                        <input type="checkbox" name="notify_whatsapp" value="1"> إرسال نسخة عبر واتساب أيضًا (اختياري)
                    </label>
                    <button class="bg-indigo-600 text-white rounded-lg px-5 py-2 text-sm hover:bg-indigo-700">إرسال الرد</button>
                </div>
            </form>

            <form method="POST" action="{{ route('staff.tickets.note', $ticket) }}" class="mt-4 pt-4 border-t border-gray-100 space-y-2">
                @csrf
                <textarea name="body" rows="2" required placeholder="أضف ملاحظة داخلية (لا يراها العميل)..."
                          class="w-full border border-yellow-300 bg-yellow-50 rounded-lg px-3 py-2 text-sm outline-none"></textarea>
                <button class="bg-yellow-500 text-white rounded-lg px-4 py-1.5 text-sm hover:bg-yellow-600">إضافة ملاحظة</button>
            </form>
        </div>
    </div>

    {{-- لوحة جانبية: الحالة، الأولوية، القسم، المسؤول --}}
    <div class="space-y-4">
        <div class="bg-white rounded-xl border border-gray-200 p-4 space-y-3 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">الحالة</span>
                <span class="px-2 py-0.5 rounded text-xs status-{{ $ticket->status }}">{{ $ticket->status }}</span>
            </div>
            <div class="flex justify-between"><span class="text-gray-500">الأولوية</span><span>{{ $ticket->priority }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">القسم</span><span>{{ $ticket->department?->name_ar ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">المسؤول الحالي</span><span>{{ $ticket->assignee?->name ?? 'غير مخصصة' }}</span></div>

            <div class="pt-3 border-t border-gray-100 flex flex-col gap-2">
                <form method="POST" action="{{ route('staff.tickets.assign', $ticket) }}">
                    @csrf
                    <button name="assigned_to" value="{{ auth()->id() }}"
                            class="w-full bg-gray-100 hover:bg-gray-200 rounded-lg py-2 text-sm">تخصيص التذكرة لي</button>
                </form>

                @if($ticket->status !== 'closed')
                <form method="POST" action="{{ route('staff.tickets.close', $ticket) }}">
                    @csrf
                    <button class="w-full bg-gray-800 hover:bg-black text-white rounded-lg py-2 text-sm">إغلاق التذكرة</button>
                </form>
                @else
                <form method="POST" action="{{ route('staff.tickets.reopen', $ticket) }}">
                    @csrf
                    <button class="w-full bg-orange-500 hover:bg-orange-600 text-white rounded-lg py-2 text-sm">إعادة فتح</button>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection