@extends('layouts.superadmin')

@section('title', 'دفتر ملاحظات اللايفات')
@section('page-title', 'دفتر ملاحظات اللايفات (Feedback)')

@section('content')
@php
    $initialView = request('view','table');
    if (!in_array($initialView, ['table','cards'])) {
        $initialView = 'table';
    }
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-comments text-emerald-400 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">دفتر ملاحظات اللايفات</h1>
                    <p class="text-sm text-slate-300/80">
                        هذه الصفحة مخصصة لتوثيق ملاحظات بشرية على أداء الأعضاء في اللايفات:
                        نقاط القوة، نقاط تحتاج تحسين، وتوصيات للمرة الجاية – بعيدًا عن النقاط والحالات.
                    </p>
                </div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.lives-insights.feedback.index') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">

            <input type="hidden" name="view" id="fb-view-input" value="{{ $initialView }}">

            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من تاريخ</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى تاريخ</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">بحث عضو</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="اسم / يوزر"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-emerald-500 focus:border-emerald-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">حالة اللايف</label>
                    <select name="status"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="" @selected($status==='')>الكل</option>
                        <option value="confirmed" @selected($status==='confirmed')>مؤكد</option>
                        <option value="missed_excuse" @selected($status==='missed_excuse')>لم يفتح بعذر</option>
                        <option value="missed_no_excuse" @selected($status==='missed_no_excuse')>لم يفتح بدون عذر</option>
                    </select>
                </div>
            </div>
            <div class="mt-3 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-emerald-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i>
                    تطبيق الفلاتر
                </button>
                <a href="{{ route('superadmin.falcon-room.lives-insights.feedback.index') }}"
                   class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                          font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>
                <span class="text-[11px] text-slate-400">
                    اختر لايف من القائمة ثم اضغط &quot;ملاحظات&quot; لإضافة أو مشاهدة Feedback.
                </span>
            </div>
        </form>

        {{-- قائمة اللايفات (جدول + كروت) --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">لايفات الفترة المختارة</h2>
                    <p class="text-[11px] text-slate-400">
                        يمكنك عرض اللايفات في <span class="font-semibold">جدول</span> للتحليل السريع، أو <span class="font-semibold">كروت</span> مناسبة للهاتف،
                        ثم فتح بانيل الملاحظات لكل لايف.
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[11px] text-slate-400 hidden sm:inline">
                        عدد اللايفات: {{ $lives->total() }}
                    </span>
                    <div class="inline-flex rounded-xl overflow-hidden border border-slate-700">
                        <button type="button" id="btn-fb-table"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200">
                            <i class="fa-solid fa-table ml-1"></i> جدول
                        </button>
                        <button type="button" id="btn-fb-cards"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200 border-r border-slate-700">
                            <i class="fa-solid fa-grip ml-1"></i> كروت
                        </button>
                    </div>
                </div>
            </div>

            {{-- جدول --}}
            <div id="fb-table-view" class="{{ $initialView === 'cards' ? 'hidden' : '' }}">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm text-slate-200">
                        <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                            <tr>
                                <th class="px-3 py-2 text-right">التاريخ</th>
                                <th class="px-3 py-2 text-right">الوقت</th>
                                <th class="px-3 py-2 text-right">العضو</th>
                                <th class="px-3 py-2 text-right">النوع</th>
                                <th class="px-3 py-2 text-right">الحالة</th>
                                <th class="px-3 py-2 text-right">عدد الملاحظات</th>
                                <th class="px-3 py-2 text-right">آخر ملاحظة</th>
                                <th class="px-3 py-2 text-right">ملاحظات</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800">
                            @forelse($lives as $live)
                                @php
                                    $memberName = $live->user?->name ?? $live->user?->username ?? ('#'.$live->user_id);
                                    $cnt = (int)($feedbackCounts[$live->id] ?? 0);
                                    $last = optional(optional($lastFeedbacks[$live->id] ?? collect())->first());
                                    $lastPreview = '';
                                    if ($last) {
                                        $lastPreview = \Illuminate\Support\Str::limit(
                                            trim(($last->strengths ?? '').' '.($last->weaknesses ?? '').' '.($last->suggestions ?? '')),
                                            80
                                        );
                                    }
                                @endphp
                                <tr class="hover:bg-slate-800/50">
                                    <td class="px-3 py-2 align-top text-slate-300">{{ (string)$live->scheduled_date }}</td>
                                    <td class="px-3 py-2 align-top text-slate-300">{{ (string)$live->scheduled_time }}</td>
                                    <td class="px-3 py-2 align-top font-medium">{{ $memberName }}</td>
                                    <td class="px-3 py-2 align-top text-slate-300">
                                        {{ $live->type }} @if($live->is_sahra) • <span class="text-emerald-300">سهرة</span>@endif
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                        {{ $live->status }}
                                    </td>
                                    <td class="px-3 py-2 align-top">
                                        <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[11px]
                                                     {{ $cnt > 0 ? 'bg-emerald-500/15 border border-emerald-500/40 text-emerald-200' : 'bg-slate-800 border border-slate-700 text-slate-300' }}">
                                            {{ $cnt }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-400">
                                        {{ $lastPreview ?: 'لا يوجد ملاحظات بعد.' }}
                                    </td>
                                    <td class="px-3 py-2 align-top">
                                        <button type="button"
                                                class="btn-open-feedback inline-flex items-center gap-2 rounded-xl bg-emerald-500/15
                                                       border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold text-emerald-200
                                                       hover:bg-emerald-500/25 transition"
                                                data-live-id="{{ $live->id }}"
                                                data-member="{{ e($memberName) }}"
                                                data-when="{{ (string)$live->scheduled_date.' • '.(string)$live->scheduled_time }}">
                                            <i class="fa-solid fa-pen"></i>
                                            ملاحظات
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-4 py-8 text-center text-slate-400">
                                        لا توجد لايفات ضمن هذه الفلاتر.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($lives->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $lives->links() }}
                    </div>
                @endif
            </div>

            {{-- كروت --}}
            <div id="fb-cards-view" class="{{ $initialView === 'cards' ? '' : 'hidden' }}">
                <div class="p-4 grid gap-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
                    @forelse($lives as $live)
                        @php
                            $memberName = $live->user?->name ?? $live->user?->username ?? ('#'.$live->user_id);
                            $cnt = (int)($feedbackCounts[$live->id] ?? 0);
                            $last = optional(optional($lastFeedbacks[$live->id] ?? collect())->first());
                            $lastPreview = '';
                            if ($last) {
                                $lastPreview = \Illuminate\Support\Str::limit(
                                    trim(($last->strengths ?? '').' '.($last->weaknesses ?? '').' '.($last->suggestions ?? '')),
                                    80
                                );
                            }
                        @endphp
                        <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                                    from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-[11px] text-slate-400">العضو</span>
                                    <span class="font-semibold text-slate-100">{{ $memberName }}</span>
                                    <span class="text-[11px] text-slate-400">
                                        {{ (string)$live->scheduled_date }} • {{ (string)$live->scheduled_time }}
                                    </span>
                                </div>
                                <span class="text-[11px] text-slate-400">
                                    {{ $live->status }}
                                </span>
                            </div>

                            <div class="text-[11px] text-slate-300 mb-2">
                                نوع: <span class="font-semibold">{{ $live->type }}</span>
                                @if($live->is_sahra) • <span class="text-emerald-300 font-semibold">سهرة</span>@endif
                            </div>

                            <div class="flex items-center justify-between mb-2">
                                <div class="text-[11px] text-slate-400">
                                    عدد الملاحظات:
                                    <span class="font-semibold {{ $cnt > 0 ? 'text-emerald-300' : 'text-slate-300' }}">
                                        {{ $cnt }}
                                    </span>
                                </div>
                            </div>

                            <div class="text-[11px] text-slate-400 mb-3">
                                {{ $lastPreview ?: 'لا يوجد ملاحظات بعد لهذا اللايف.' }}
                            </div>

                            <button type="button"
                                    class="btn-open-feedback inline-flex items-center justify-center w-full gap-2 rounded-xl bg-emerald-500/15
                                           border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold text-emerald-200
                                           hover:bg-emerald-500/25 transition"
                                    data-live-id="{{ $live->id }}"
                                    data-member="{{ e($memberName) }}"
                                    data-when="{{ (string)$live->scheduled_date.' • '.(string)$live->scheduled_time }}">
                                <i class="fa-solid fa-pen"></i>
                                إضافة / تعديل الملاحظات
                            </button>
                        </div>
                    @empty
                        <div class="col-span-full text-center text-slate-400 text-sm py-8">
                            لا توجد لايفات ضمن هذه الفلاتر.
                        </div>
                    @endforelse
                </div>

                @if($lives->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $lives->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- فوتر توضيحي --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            دفتر الملاحظات هذا ليس جزءًا من النقاط أو العقوبات،
            بل أداة داخلية تساعد القيادة على <span class="font-semibold text-slate-300">تطوير أداء الأعضاء في اللايفات</span>
            بشكل مهني ومتدرج عبر الزمن.
        </div>

        {{-- مودال / بانيل الملاحظات --}}
        <div id="fbModal" class="fixed inset-0 z-50 hidden">
            <div id="fbBackdrop" class="absolute inset-0 bg-black/60"></div>

            <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-0 sm:left-auto
                        w-full sm:w-[560px] max-h-[85vh] sm:max-h-none
                        bg-slate-950 border border-slate-700 rounded-t-2xl sm:rounded-none sm:rounded-l-2xl
                        shadow-2xl overflow-hidden flex flex-col">

                <div class="px-4 py-3 border-b border-slate-800 flex items-center justify-between">
                    <div class="flex flex-col">
                        <span class="text-xs text-slate-400">ملاحظات على اللايف</span>
                        <span id="fbMember" class="font-semibold text-slate-100">—</span>
                        <span id="fbWhen" class="text-[11px] text-slate-400">—</span>
                    </div>
                    <button id="fbClose"
                            class="h-9 w-9 rounded-xl bg-slate-800 hover:bg-slate-700 transition flex items-center justify-center">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <div class="p-4 border-b border-slate-800 text-[11px] text-slate-300">
                    <p>قم بتسجيل تقييم بشري لللايف: ما الذي كان مميزًا، وما الذي يحتاج تحسين، وما هي التوصية للمرة القادمة.</p>
                </div>

                <div class="p-4 overflow-y-auto flex-1">
                    <form id="fbForm" method="POST"
                          action="{{ route('superadmin.falcon-room.lives-insights.feedback.store', ['live' => 0]) }}"
                          class="space-y-3">
                        @csrf
                        <input type="hidden" name="from" value="{{ $from }}">
                        <input type="hidden" name="to" value="{{ $to }}">
                        <input type="hidden" name="q" value="{{ $q }}">
                        <input type="hidden" name="status" value="{{ $status }}">
                        <input type="hidden" id="fbLiveIdHidden">

                        <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                            <label class="block text-xs text-slate-300 mb-1">نقاط القوة في اللايف</label>
                            <textarea name="strengths" rows="2"
                                      class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                             focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                      placeholder="مثال: افتتاحية قوية، تفاعل ممتاز مع التعليقات، وضوح في الفكرة..."></textarea>
                        </div>

                        <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                            <label class="block text-xs text-slate-300 mb-1">نقاط تحتاج تحسين</label>
                            <textarea name="weaknesses" rows="2"
                                      class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                             focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                      placeholder="مثال: سرعة الكلام، تشتت في الموضوع، ضعف ختام اللايف..."></textarea>
                        </div>

                        <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                            <label class="block text-xs text-slate-300 mb-1">توصية للمرة القادمة</label>
                            <textarea name="suggestions" rows="2"
                                      class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                             focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                      placeholder="مثال: ركّز على نقطة واحدة رئيسية، أضف فقرة تفاعل ثابتة، استخدم أسئلة معيّنة..."></textarea>
                        </div>

                        <div class="flex items-center gap-2 mt-2">
                            <button id="fbSave"
                                    class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                                           text-slate-950 hover:bg-emerald-400 transition">
                                <i class="fa-solid fa-floppy-disk ml-2 text-xs"></i>
                                حفظ الملاحظات
                            </button>
                            <span id="fbMsg" class="text-[11px] text-slate-400"></span>
                        </div>
                    </form>
                </div>

                <div class="px-4 py-3 border-t border-slate-800 text-[11px] text-slate-400">
                    الملاحظات هنا للاستخدام الداخلي فقط بين القيادة والمشرفين، ولا تُعرض للأعضاء بشكل مباشر.
                </div>
            </div>
        </div>

        {{-- Toast --}}
        <div id="fbToast" class="fixed top-4 left-4 z-[60] hidden">
            <div id="fbToastBox" class="rounded-xl border border-slate-700 bg-slate-900 text-slate-200 px-4 py-3 shadow-xl text-sm"></div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Toggle table/cards
    const tableView = document.getElementById('fb-table-view');
    const cardsView = document.getElementById('fb-cards-view');
    const btnTable  = document.getElementById('btn-fb-table');
    const btnCards  = document.getElementById('btn-fb-cards');
    const inputView = document.getElementById('fb-view-input');

    function setActive(btn, active) {
        if (!btn) return;
        btn.classList.toggle('bg-emerald-500', active);
        btn.classList.toggle('text-slate-950', active);
        btn.classList.toggle('bg-slate-800', !active);
        btn.classList.toggle('text-slate-200', !active);
    }

    function setView(view, persist = true) {
        const isCards = view === 'cards';

        if (tableView) tableView.classList.toggle('hidden', isCards);
        if (cardsView) cardsView.classList.toggle('hidden', !isCards);

        setActive(btnTable, !isCards);
        setActive(btnCards, isCards);

        if (inputView) inputView.value = isCards ? 'cards' : 'table';

        if (persist) {
            try { localStorage.setItem('feedback_view', isCards ? 'cards' : 'table'); } catch (e) {}
        }

        try {
            const url = new URL(window.location.href);
            url.searchParams.set('view', isCards ? 'cards' : 'table');
            window.history.replaceState({}, '', url);
        } catch (e) {}
    }

    const qsView = new URLSearchParams(window.location.search).get('view');
    let saved = null;
    try { saved = localStorage.getItem('feedback_view'); } catch (e) {}

    const initial = (qsView === 'cards' || qsView === 'table') ? qsView : (saved || @json($initialView));
    setView(initial, false);

    if (btnTable) btnTable.addEventListener('click', () => setView('table'));
    if (btnCards) btnCards.addEventListener('click', () => setView('cards'));

    // Feedback modal
    const fbModal    = document.getElementById('fbModal');
    const fbBackdrop = document.getElementById('fbBackdrop');
    const fbClose    = document.getElementById('fbClose');
    const fbMember   = document.getElementById('fbMember');
    const fbWhen     = document.getElementById('fbWhen');
    const fbForm     = document.getElementById('fbForm');
    const fbLiveId   = document.getElementById('fbLiveIdHidden');
    const fbSave     = document.getElementById('fbSave');
    const fbMsg      = document.getElementById('fbMsg');
    const fbToast    = document.getElementById('fbToast');
    const fbToastBox = document.getElementById('fbToastBox');

    const baseAction = fbForm.getAttribute('action'); // live=0

    function showToast(msg) {
        fbToastBox.textContent = msg;
        fbToast.classList.remove('hidden');
        setTimeout(() => fbToast.classList.add('hidden'), 2300);
    }

    function openFbModal(liveId, member, when) {
        fbMember.textContent = member || '—';
        fbWhen.textContent   = when || '—';
        fbLiveId.value       = liveId;

        const newAction = baseAction.replace(/\/0(\/?)/, '/' + liveId + '$1');
        fbForm.setAttribute('action', newAction);

        fbMsg.textContent = '';
        fbModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeFbModal() {
        fbModal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    document.querySelectorAll('.btn-open-feedback').forEach(btn => {
        btn.addEventListener('click', () => {
            openFbModal(
                btn.dataset.liveId,
                btn.dataset.member,
                btn.dataset.when
            );
        });
    });

    if (fbClose) fbClose.addEventListener('click', closeFbModal);
    if (fbBackdrop) fbBackdrop.addEventListener('click', closeFbModal);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !fbModal.classList.contains('hidden')) closeFbModal();
    });

    fbForm.addEventListener('submit', () => {
        fbSave.disabled = true;
        fbSave.classList.add('opacity-60');
        fbMsg.textContent = 'جاري الحفظ، سيتم تحديث الصفحة بعد التسجيل...';
    });
});
</script>
@endsection