@extends('layouts.superadmin')
@section('title', 'تعديل نصيحة مستشار')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">

    {{-- فلاش نجاح --}}
    @if(session('success'))
        <div class="mb-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-start gap-3 shadow-sm">
            <div class="mt-0.5">
                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0"/>
                </svg>
            </div>
            <div class="flex-1">
                <p class="text-sm font-medium text-green-800 dark:text-green-200">
                    {{ session('success') }}
                </p>
            </div>
        </div>
    @endif

    {{-- عنوان الصفحة --}}
    <div class="mb-6 flex flex-col gap-2">
        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">
            ✨ تعديل نصيحة مستشار
        </h1>
        <p class="text-sm md:text-base text-gray-600 dark:text-gray-400">
            إدارة نصيحة المستشار مع إمكانية تحديث العنوان والمحتوى والرد والمرفق — بدون تغيير المستلم أو حالة القراءة.
        </p>
    </div>

    {{-- بطاقة معلومات سريعة عن النصيحة --}}
    <div class="mb-6 grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- معلومات المستشار / المستلم --}}
        <div class="lg:col-span-2 bg-gradient-to-br from-sky-50 via-indigo-50 to-blue-50 dark:from-slate-800 dark:via-slate-900 dark:to-slate-800 border border-sky-100 dark:border-slate-700 rounded-2xl p-5 shadow-sm relative overflow-hidden">
            <div class="pointer-events-none absolute -left-6 -top-8 w-32 h-32 rounded-full bg-sky-300/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -right-10 -bottom-10 w-40 h-40 rounded-full bg-indigo-400/15 blur-3xl"></div>

            <div class="relative flex flex-col md:flex-row md:items-center gap-4">
                <div class="flex-shrink-0">
                    <div class="w-14 h-14 rounded-2xl bg-white/80 dark:bg-slate-900/90 shadow-md flex items-center justify-center ring-2 ring-sky-400/40">
                        <svg class="w-7 h-7 text-sky-600 dark:text-sky-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"/>
                        </svg>
                    </div>
                </div>
                <div class="flex-1 min-w-0 space-y-1.5">
                    <p class="text-xs font-semibold text-sky-700 dark:text-sky-300 uppercase tracking-wider">
                        نصيحة رقم #{{ $tip->id }}
                    </p>
                    <div class="flex flex-wrap gap-2 items-center">
                        <div class="flex flex-col">
                            <span class="text-xs text-gray-500 dark:text-gray-400">المستشار</span>
                            <span class="text-sm md:text-base font-semibold text-gray-900 dark:text-white">
                                {{ $tip->advisor?->name ?? 'غير معروف' }}
                            </span>
                        </div>
                        <span class="hidden md:inline-block mx-3 h-8 w-px bg-slate-300 dark:bg-slate-700"></span>
                        <div class="flex flex-col">
                            <span class="text-xs text-gray-500 dark:text-gray-400">المستلم</span>
                            <span class="text-sm md:text-base font-semibold text-gray-900 dark:text-white">
                                {{ $tip->recipient?->name ?? 'مستخدم محذوف' }}
                            </span>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2 mt-2 text-xs">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/80 dark:bg-slate-900/80 border border-slate-200/70 dark:border-slate-600 text-slate-700 dark:text-slate-200">
                            <svg class="w-4 h-4 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M8 7V3m8 4V3M5 11h14M5 21h14a2 2 0 002-2v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7a2 2 0 002 2z"/>
                            </svg>
                            {{ $tip->created_at?->format('Y/m/d H:i') ?? '—' }}
                        </span>

                        {{-- حالة القراءة (عرض فقط) --}}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                            {{ $tip->is_read ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-200 dark:border-emerald-700' : 'bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-700' }}">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                @if($tip->is_read)
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M5 13l4 4L19 7"/>
                                @else
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                @endif
                            </svg>
                            {{ $tip->is_read ? 'مقروءة' : 'غير مقروءة' }}
                        </span>

                        {{-- حالة الرد (عرض فقط) --}}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                            {{ $tip->reply ? 'bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-200 dark:border-indigo-700' : 'bg-gray-50 text-gray-700 border border-gray-200 dark:bg-gray-800/40 dark:text-gray-200 dark:border-gray-700' }}">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                @if($tip->reply)
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-4 4z"/>
                                @else
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M7 8h10M7 12h6m8-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                @endif
                            </svg>
                            {{ $tip->reply ? 'يوجد رد' : 'لا يوجد رد بعد' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- كرت صغير لحالة المرفق --}}
        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 shadow-sm flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center">
                        <svg class="w-5 h-5 text-slate-600 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828L18 9.828M7 17l-3 3m0 0h6m-6 0v-6"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                            حالة المرفق
                        </p>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            @if($tip->attachment)
                                مرفق موجود
                            @else
                                لا يوجد مرفق
                            @endif
                        </p>
                    </div>
                </div>
                @if($tip->attachment)
                    <span class="text-[11px] px-2 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 border border-emerald-200/70 dark:border-emerald-700">
                        {{ strtoupper($tip->attachment_type ?? 'file') }}
                    </span>
                @endif
            </div>

            @if($tip->attachment)
                <a href="{{ asset('storage/advisor_tips/'.$tip->attachment) }}"
                   target="_blank"
                   class="text-xs inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg bg-sky-50 text-sky-700 hover:bg-sky-100 dark:bg-sky-900/30 dark:text-sky-200 dark:hover:bg-sky-900/50 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15 8a3 3 0 00-6 0v8a3 3 0 006 0V9"/>
                    </svg>
                    عرض / تحميل المرفق الحالي
                </a>
            @else
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    يمكنك إضافة مرفق جديد من خلال النموذج أدناه (اختياري).
                </p>
            @endif
        </div>
    </div>

    {{-- الفورم الملحمي --}}
    <div class="bg-white dark:bg-gray-900/90 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-l from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-between">
            <div>
                <h2 class="text-lg md:text-xl font-bold text-gray-900 dark:text-white">تفاصيل النصيحة</h2>
                <p class="text-xs md:text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                    يمكنك تعديل العنوان، محتوى النصيحة، الرد، والمرفق — بدون تغيير المستلم أو حالة القراءة.
                </p>
            </div>
            <div class="hidden sm:flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-800">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                    فورم إدارة متقدم
                </span>
            </div>
        </div>

        <form action="{{ route('superadmin.advisor-tips.update', $tip) }}"
              method="POST"
              enctype="multipart/form-data"
              class="px-5 py-6 space-y-6">
            @csrf
            @method('PUT')

            {{-- حماية: المستلم و حالة القراءة مخفية (لا يمكن تعديلها من الواجهة) --}}
            <input type="hidden" name="recipient_id" value="{{ $tip->recipient_id }}">
            <input type="hidden" name="is_read" value="{{ $tip->is_read ? 1 : 0 }}">

            {{-- عرض المستلم (للإطلاع فقط) --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        المستلم (عرض فقط)
                    </label>
                    <div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
                        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 flex items-center justify-center text-white text-sm font-semibold">
                            {{ mb_substr($tip->recipient?->name ?? '؟', 0, 1) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                {{ $tip->recipient?->name ?? 'مستخدم محذوف' }}
                            </p>
                            <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                                لا يمكن تغيير المستلم من هذه الصفحة
                            </p>
                        </div>
                    </div>
                </div>

                {{-- حالة القراءة (عرض فقط) --}}
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        حالة القراءة (عرض فقط)
                    </label>
                    <div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
                        <div class="w-9 h-9 rounded-full
                            {{ $tip->is_read ? 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-200' : 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200' }}
                            flex items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                @if($tip->is_read)
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M5 13l4 4L19 7"/>
                                @else
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                @endif
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                {{ $tip->is_read ? 'مقروءة من المستلم' : 'غير مقروءة بعد' }}
                            </p>
                            <p class="text-[11px] text-gray-500 dark:text-gray-400">
                                لا يمكن تغيير حالة القراءة من هنا (تُحدَّث من جهة المستخدم)
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- العنوان --}}
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                    العنوان
                </label>
                <input type="text"
                       name="title"
                       value="{{ old('title', $tip->title) }}"
                       class="w-full rounded-xl border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-sm md:text-base">
                @error('title')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- النصيحة --}}
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                    النصيحة
                </label>
                <textarea name="content" rows="5"
                          class="w-full rounded-xl border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-sm md:text-base leading-relaxed">{{ old('content', $tip->content) }}</textarea>
                @error('content')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- رد المستلم / الإدارة --}}
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                    رد المستلم / الإدارة (اختياري)
                </label>
                <textarea name="reply" rows="4"
                          placeholder="يمكنك تسجيل ملخص رد العضو أو ملاحظة من الإدارة العليا إن أردت..."
                          class="w-full rounded-xl border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm md:text-base">{{ old('reply', $tip->reply) }}</textarea>
                @error('reply')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- المرفق --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        رفع مرفق جديد (اختياري)
                    </label>
                    <input type="file"
                           name="attachment"
                           class="block w-full text-sm text-gray-700 dark:text-gray-200
                                  file:mr-2 file:py-2 file:px-4
                                  file:rounded-lg file:border-0
                                  file:text-sm file:font-semibold
                                  file:bg-sky-50 file:text-sky-700
                                  hover:file:bg-sky-100
                                  dark:file:bg-sky-900/50 dark:file:text-sky-200
                                  dark:hover:file:bg-sky-900/80">
                    <p class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                        الصيغ المسموحة: JPG, PNG, PDF, DOC, DOCX – أقصى حجم 10MB.
                    </p>
                    @error('attachment')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                @if($tip->attachment)
                    <div class="bg-slate-50 dark:bg-slate-800/70 rounded-xl p-3 border border-slate-200 dark:border-slate-700">
                        <p class="text-xs font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            المرفق الحالي
                        </p>
                        <div class="flex items-center gap-2 justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-9 h-9 rounded-lg bg-slate-200 dark:bg-slate-700 flex items-center justify-center">
                                    @if($tip->attachment_type === 'image')
                                        <svg class="w-5 h-5 text-slate-700 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 13M4 6h16v12H4z"/>
                                        </svg>
                                    @elseif($tip->attachment_type === 'pdf')
                                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    @else
                                        <svg class="w-5 h-5 text-slate-700 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M7 3h8l6 6v12H7z"/>
                                        </svg>
                                    @endif
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-xs font-medium text-gray-800 dark:text-gray-100">
                                        {{ \Illuminate\Support\Str::limit($tip->attachment, 28) }}
                                    </span>
                                    <span class="text-[11px] text-gray-500 dark:text-gray-400">
                                        سيتم استبداله إن قمت برفع مرفق جديد
                                    </span>
                                </div>
                            </div>
                            <a href="{{ asset('storage/advisor_tips/'.$tip->attachment) }}"
                               target="_blank"
                               class="inline-flex items-center justify-center px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-700 text-white text-xs font-medium transition">
                                فتح
                            </a>
                        </div>
                    </div>
                @endif
            </div>

            {{-- أزرار الحفظ --}}
            <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between sm:items-center">
                <div class="flex gap-2">
                    <button type="submit"
                            class="inline-flex items-center justify-center px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold shadow-sm hover:shadow-md transition">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M5 13l4 4L19 7M5 7h4M5 11h2"/>
                        </svg>
                        حفظ التعديلات
                    </button>

                    <a href="{{ route('superadmin.advisor-tips.index') }}"
                       class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-slate-200 hover:bg-slate-300 text-slate-800 text-sm font-medium dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-slate-100 transition">
                        إلغاء والعودة
                    </a>
                </div>

                <p class="text-[11px] text-gray-500 dark:text-gray-400">
                    * يتم حفظ التغييرات مباشرة في سجل النصائح مع الحفاظ على هوية المستلم وحالة القراءة كما هي.
                </p>
            </div>
        </form>
    </div>
</div>
@endsection