@extends('layouts.admin')

@section('page-title', 'مدیریت پیگیری تماس‌ها')

@section('content')
    <div class="max-w-6xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6 text-sm">

        <div class="flex items-center justify-between mb-6 border-b pb-4">
            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-headset text-blue-600"></i>
                مرکز پیگیری و مدیریت تماس‌ها
            </h2>
            <span class="text-xs bg-gray-100 text-gray-600 px-3 py-1.5 rounded-full font-bold">
            کل درخواست‌ها: {{ $messages->total() }}
        </span>
        </div>

        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-xs flex items-center gap-2 font-bold">
                <i class="fas fa-check-circle text-green-500 text-sm"></i>
                {{ session('success') }}
            </div>
        @endif

        <div class="space-y-6" dir="rtl">
            @forelse($messages as $msg)
                <div class="p-5 rounded-2xl border transition-all bg-white shadow-sm
                @if($msg->status == 'answered') border-green-200 bg-green-50/10
                @elseif($msg->status == 'no_answer') border-red-200 bg-red-50/10
                @else border-gray-200 hover:shadow-md @endif">

                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b pb-3 mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center text-base font-bold
                            @if($msg->status == 'answered') bg-green-100 text-green-700
                            @elseif($msg->status == 'no_answer') bg-red-100 text-red-700
                            @else bg-blue-100 text-blue-700 @endif">
                                {{ mb_substr($msg->name, 0, 1) }}
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 text-sm">{{ $msg->name }}</h3>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 mt-1 text-xs">
                                    <a href="tel:{{ $msg->phone }}" class="font-bold text-blue-600 hover:underline flex items-center gap-1 select-all" dir="ltr">
                                        <i class="fas fa-phone-alt text-[10px] text-gray-400"></i> {{ $msg->phone }}
                                    </a>
                                    <span class="text-gray-400">
                                    <i class="fas fa-calendar-alt text-[10px]"></i> ثبت درخواست: {{ $msg->created_at->format('Y/m/d H:i') }}
                                </span>
                                    @if($msg->called_at)
                                        <span class="text-indigo-600 font-medium">
                                        <i class="fas fa-clock text-[10px]"></i> زمان تماس: {{ \Carbon\Carbon::parse($msg->called_at)->format('Y/m/d H:i') }}
                                    </span>
                                    @endif
                                    @if($msg->admin)
                                        <span class="text-emerald-700 font-medium bg-emerald-50 px-2 py-0.5 rounded border border-emerald-100">
                                        <i class="fas fa-user-shield text-[10px]"></i> پیگیری توسط: {{ $msg->admin->name }}
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <form action="{{ route('admin.contacts.destroy', $msg->id) }}" method="POST" onsubmit="return confirm('آیا از حذف این درخواست مطمئن هستید؟')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-gray-400 hover:text-red-600 p-2 rounded-lg transition">
                                <i class="fas fa-trash-alt text-sm"></i>
                            </button>
                        </form>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-5">

                        <div class="lg:col-span-5 bg-gray-50 p-3.5 rounded-xl border border-gray-100">
                        <span class="font-bold text-gray-700 block mb-1 text-xs">
                            <i class="fas fa-comment-alt text-gray-400 ml-1"></i> متن پیام کاربر:
                        </span>
                            <p class="text-xs text-gray-600 leading-6 whitespace-pre-line">{{ $msg->message ?? 'توضیحاتی نوشته نشده است.' }}</p>
                        </div>

                        <div class="lg:col-span-7 bg-white p-4 rounded-xl border border-gray-100 shadow-inner">
                            <form action="{{ route('admin.contacts.update_status', $msg->id) }}" method="POST" class="space-y-3">
                                @csrf
                                @method('PUT')

                                <div class="flex flex-wrap items-center gap-3">
                                    <span class="font-bold text-gray-800 text-xs">تعیین وضعیت تماس:</span>

                                    <label class="inline-flex items-center gap-1.5 cursor-pointer text-xs font-bold text-gray-600">
                                        <input type="radio" name="status" value="pending" {{ $msg->status == 'pending' ? 'checked' : '' }} class="text-blue-600 focus:ring-blue-500">
                                        <span class="px-2 py-0.5 rounded bg-gray-100 border">در انتظار</span>
                                    </label>

                                    <label class="inline-flex items-center gap-1.5 cursor-pointer text-xs font-bold text-green-700">
                                        <input type="radio" name="status" value="answered" {{ $msg->status == 'answered' ? 'checked' : '' }} class="text-green-600 focus:ring-green-500">
                                        <span class="px-2 py-0.5 rounded bg-green-50 border border-green-200">تماس موفق (پاسخ داد)</span>
                                    </label>

                                    <label class="inline-flex items-center gap-1.5 cursor-pointer text-xs font-bold text-red-700">
                                        <input type="radio" name="status" value="no_answer" {{ $msg->status == 'no_answer' ? 'checked' : '' }} class="text-red-600 focus:ring-red-500">
                                        <span class="px-2 py-0.5 rounded bg-red-50 border border-red-200">عدم پاسخگویی</span>
                                    </label>
                                </div>

                                <div>
                                <textarea
                                    name="admin_notes"
                                    rows="2"
                                    placeholder="یادداشت کارشناس (مثلاً: قیمت‌ها رو خواست قرار شد فردا خبر بده / یا زنگ زدم بوق خورد جواب نداد)..."
                                    class="w-full text-xs p-2.5 border border-gray-200 rounded-lg outline-none focus:border-indigo-500 resize-none bg-gray-50/50">{{ $msg->admin_notes }}</textarea>
                                </div>

                                <div class="text-left">
                                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 transition text-white text-[11px] font-bold px-4 py-1.5 rounded-lg shadow-sm">
                                        ثبت و بروزرسانی پیگیری
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>
            @empty
                <div class="bg-gray-50 p-12 rounded-2xl text-center text-gray-400 border">
                    <i class="fas fa-inbox text-5xl mb-3 block text-gray-300"></i>
                    هیچ درخواست تماسی در دیتابیس یافت نشد.
                </div>
            @endforelse
        </div>

        <div class="mt-6">
            {{ $messages->links() }}
        </div>
    </div>
@endsection