{{-- resources/views/general/received-tips/show.blade.php --}}
@extends($layout)

@section('title', 'تفاصيل النصيحة')
@section('page-title', 'تفاصيل النصيحة')

@push('styles')
<style>
    @keyframes pulseScale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    .animate-pulse-scale{ animation:pulseScale 1.15s ease-in-out infinite; }

    .sc-scroll::-webkit-scrollbar{ width:10px; height:10px; }
    .sc-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }

    .sc-card{
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .sc-soft{
        background: rgba(0,0,0,.20);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(42vmax 42vmax at 110% -10%, rgba(56,189,248,.18) 0, transparent 60%),
       radial-gradient(40vmax 40vmax at -10% 120%, rgba(16,185,129,.12) 0, transparent 60%),
       radial-gradient(34vmax 34vmax at 30% 10%, rgba(168,85,247,.10) 0, transparent 55%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

    <div class="max-w-4xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6 text-white">

        {{-- Back --}}
        <div>
            <a href="{{ route('received-tips.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl
                      bg-white/10 hover:bg-white/15 border border-white/15
                      text-white/90 font-extrabold transition">
                <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                العودة للقائمة
            </a>
        </div>

        {{-- Tip Card --}}
        <div class="relative overflow-hidden rounded-3xl shadow-2xl sc-card">
            {{-- Header --}}
            <div class="relative overflow-hidden p-6 sm:p-7
                        bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                        border-b border-white/10">
                <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-sky-500/16 blur-3xl"></div>
                <div class="pointer-events-none absolute -bottom-28 -left-16 w-96 h-96 rounded-full bg-fuchsia-500/12 blur-3xl"></div>

                <div class="relative flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-center gap-4 min-w-0">
                        <div class="relative">
                            <img src="{{ $tip->advisor->avatar_url }}"
                                 alt="{{ $tip->advisor->name }}"
                                 class="w-16 h-16 rounded-2xl object-cover border border-white/15 ring-4 ring-sky-500/20 shadow-xl">
                            <span class="absolute -bottom-1 -left-1 w-5 h-5 rounded-full bg-emerald-400/90 border-4 border-slate-950/70 animate-pulse-scale"></span>
                        </div>

                        <div class="min-w-0">
                            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-sky-400/20 text-[11px] text-white/85 w-fit mb-2">
                                <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
                                    <i class="fa-solid fa-lightbulb text-[11px]"></i>
                                </span>
                                تفاصيل النصيحة
                            </div>

                            <h2 class="text-xl sm:text-2xl font-extrabold text-white truncate">
                                {{ $tip->title }}
                            </h2>
                            <p class="text-[12px] text-white/60 mt-1">
                                من: <span class="font-extrabold text-white/85">{{ $tip->advisor->name }}</span>
                            </p>
                        </div>
                    </div>

                    @if($tip->reply)
                        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full
                                     bg-emerald-500/12 border border-emerald-400/20 text-emerald-100 font-extrabold">
                            <svg class="w-5 h-5" 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 0z"/>
                            </svg>
                            تم الرد
                        </span>
                    @endif
                </div>
            </div>

            {{-- Body --}}
            <div class="p-5 sm:p-7 space-y-6">

                {{-- Content --}}
                <div>
                    <h3 class="text-base sm:text-lg font-extrabold text-white mb-3 flex items-center gap-2">
                        <span class="w-10 h-10 rounded-2xl bg-sky-500/12 border border-sky-400/20 grid place-items-center text-sky-200">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                            </svg>
                        </span>
                        نص النصيحة
                    </h3>

                    <div class="rounded-3xl p-5 sm:p-6 border border-sky-400/20 bg-sky-500/8 shadow-lg shadow-sky-500/10">
                        <p class="text-white/85 leading-relaxed whitespace-pre-wrap text-base sm:text-lg">
                            {{ $tip->content }}
                        </p>
                    </div>
                </div>

                {{-- Attachment --}}
                @if($tip->attachment)
                    <div>
                        <h3 class="text-base sm:text-lg font-extrabold text-white mb-3 flex items-center gap-2">
                            <span class="w-10 h-10 rounded-2xl bg-emerald-500/12 border border-emerald-400/20 grid place-items-center text-emerald-200">
                                <svg class="w-5 h-5" 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.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                </svg>
                            </span>
                            المرفقات
                        </h3>

                        <div class="rounded-3xl p-4 border border-white/10 bg-black/18">
                            @if($tip->attachment_type === 'image')
                                <img src="{{ $tip->attachment_url }}"
                                     alt="Attachment"
                                     class="max-w-full h-auto rounded-2xl border border-white/10 shadow-2xl mx-auto">
                            @else
                                <a href="{{ $tip->attachment_url }}" target="_blank" download
                                   class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl
                                          bg-emerald-500/15 hover:bg-emerald-500/20 border border-emerald-400/20
                                          text-emerald-100 font-extrabold transition shadow-lg shadow-emerald-500/10">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    تحميل الملف ({{ strtoupper($tip->attachment_type) }})
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Previous Reply --}}
                @if($tip->reply)
                    <div>
                        <h3 class="text-base sm:text-lg font-extrabold text-white mb-3 flex items-center gap-2">
                            <span class="w-10 h-10 rounded-2xl bg-fuchsia-500/12 border border-fuchsia-400/20 grid place-items-center text-fuchsia-200">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                </svg>
                            </span>
                            ردك السابق
                        </h3>

                        <div class="rounded-3xl p-5 border border-fuchsia-400/20 bg-fuchsia-500/8 shadow-lg shadow-fuchsia-500/10">
                            <div class="flex items-center gap-2 mb-3">
                                <img src="{{ $tip->recipient->avatar_url }}"
                                     alt="{{ $tip->recipient->name }}"
                                     class="w-9 h-9 rounded-2xl object-cover border border-white/10">
                                <div>
                                    <p class="font-extrabold text-white">أنت</p>
                                    <p class="text-[11px] text-white/50">{{ $tip->replied_at->diffForHumans() }}</p>
                                </div>
                            </div>
                            <p class="text-white/85 leading-relaxed whitespace-pre-wrap">{{ $tip->reply }}</p>
                        </div>
                    </div>
                @endif

                {{-- Reply Form --}}
                @if(!$tip->reply)
                    <div class="pt-6 border-t border-white/10">
                        <h3 class="text-base sm:text-lg font-extrabold text-white mb-4 flex items-center gap-2">
                            <span class="w-10 h-10 rounded-2xl bg-sky-500/12 border border-sky-400/20 grid place-items-center text-sky-200">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                                </svg>
                            </span>
                            الرد على النصيحة
                        </h3>

                        <form id="replyForm">
                            <div class="mb-4">
                                <textarea id="reply" name="reply" rows="5" required
                                          class="w-full px-4 py-3 rounded-3xl bg-black/25 border border-white/12 text-white
                                                 placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40
                                                 transition resize-none"
                                          placeholder="اكتب ردك على النصيحة..."></textarea>
                            </div>

                            <button type="submit" id="replyBtn"
                                    class="w-full px-6 py-3 rounded-3xl font-extrabold flex items-center justify-center gap-2
                                           bg-gradient-to-r from-sky-500/20 to-indigo-500/20 hover:from-sky-500/28 hover:to-indigo-500/28
                                           border border-sky-400/25 text-white transition shadow-xl shadow-sky-500/10">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                                </svg>
                                <span>إرسال الرد</span>
                            </button>
                        </form>
                    </div>
                @endif

                {{-- Extra info --}}
                <div class="pt-6 border-t border-white/10">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-[12px] text-white/60">
                        <div class="flex items-center gap-2">
                            <i class="fa-regular fa-calendar text-white/40"></i>
                            <span>تاريخ الإرسال: {{ $tip->created_at->format('Y/m/d H:i') }}</span>
                        </div>

                        @if($tip->read_at)
                            <div class="flex items-center gap-2">
                                <i class="fa-regular fa-eye text-white/40"></i>
                                <span>تاريخ القراءة: {{ $tip->read_at->format('Y/m/d H:i') }}</span>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@push('scripts')
<script>
document.getElementById('replyForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();

    const replyBtn = document.getElementById('replyBtn');
    const replyText = document.getElementById('reply').value;

    replyBtn.disabled = true;
    replyBtn.innerHTML = '<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span>جاري الإرسال...</span>';

    try {
        const response = await fetch('{{ route("received-tips.reply", $tip) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ reply: replyText })
        });

        const data = await response.json();

        if (data.success) {
            showNotification(data.message, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showNotification(data.message || 'حدث خطأ', 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        showNotification('حدث خطأ في الاتصال بالخادم', 'error');
    } finally {
        replyBtn.disabled = false;
        replyBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg><span>إرسال الرد</span>';
    }
});

function showNotification(message, type = 'success') {
    const bgColor = type === 'success' ? 'bg-emerald-500' : 'bg-rose-500';
    const icon = type === 'success'
        ? '<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 0z"/>'
        : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>';

    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center gap-3 z-50`;
    notification.innerHTML = `
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            ${icon}
        </svg>
        <span class="font-extrabold">${message}</span>
    `;

    document.body.appendChild(notification);
    setTimeout(() => notification.remove(), 3000);
}
</script>
@endpush
@endsection