@extends('dashboard.layouts.master')

@section('css')
    <style>
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeSlideIn {
            from { opacity:0; transform:translateY(-8px); }
            to   { opacity:1; transform:translateY(0); }
        }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

        .spinner {
            display:inline-block; width:16px; height:16px;
            border:2px solid #e5e7eb; border-top:2px solid #6366f1;
            border-radius:50%; animation:spin .7s linear infinite;
        }
        .fade-in { animation: fadeSlideIn .35s ease; }
        .pulse-dot { animation: pulse 1.5s infinite; }
        .btn { border:none; border-radius:8px; padding:8px 16px; font-size:13px;
               font-weight:600; cursor:pointer; font-family:inherit; }
        .btn-sm { padding:6px 12px; font-size:12px; }
        table { width:100%; border-collapse:collapse; font-size:14px; }
        thead th {
            padding:12px 16px; text-align:right; color:#475569;
            font-weight:600; font-size:12px; white-space:nowrap;
            border-bottom:1px solid #e2e8f0; background:#f8fafc;
        }
        tbody tr { border-bottom:1px solid #f1f5f9; transition:background .2s; }
        tbody tr:hover { background:#f8fafc; }
        tbody td { padding:12px 16px; color:#334155; vertical-align:middle; }
        .badge {
            padding:3px 10px; border-radius:20px; font-size:12px;
            font-weight:600; display:inline-flex; align-items:center; gap:5px;
        }
        td {
            text-align: right;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.student_management')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">متابعة الطلاب</li>
        </ol>
    </div>
@endsection

@section('content')
    <div 
    dir="rtl"
    x-data="ordersTable()"
    x-init="init()"
    style="font-family: 'Cairo', sans-serif; background:#f8fafc; min-height:100vh; padding:24px 16px;"
>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">

    @include('dashboard.pages.student-management.filter-form')

    {{-- ─── Header ─────────────────────────────────────────────────── --}}
    <div style="margin:0 auto 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
        <div>
            <h1 style="margin:0; font-size:22px; font-weight:700; color:#0f172a;">📋 متابعة الطلاب</h1>
            <p style="margin:4px 0 0; color:#64748b; font-size:13px;">
                آخر فحص:
                <span x-text="lastChecked || 'لم يتم الفحص بعد'"></span>
            </p>
            <p style="margin:4px 0 0; color:#64748b; font-size:13px;">
                اجمالي:
                <span x-text="total || '0'"></span>
            </p>
        </div>
        <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <button class="btn" @click="checkNow()" style="background:#6366f1; color:#fff;">🔄 فحص الآن</button>
            <button class="btn" @click="togglePolling()"
                :style="polling ? 'background:#10b981;color:#fff' : 'background:#ef4444;color:#fff'">
                <span x-text="polling ? '⏸ إيقاف الفحص' : '▶ تشغيل الفحص'"></span>
            </button>
        </div>
    </div>

    {{-- ─── إشعار عناصر جديدة ──────────────────────────────────────── --}}
    <div
        x-show="newCount > 0"
        x-transition
        class="fade-in"
        style="margin:0 auto 16px; background:#eff6ff; border:1px solid #bfdbfe;
               border-radius:10px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center;"
    >
        <span style="color:#1d4ed8; font-weight:600; font-size:14px;">
            🆕 يوجد <span x-text="newCount"></span> سجل جديد — هل تريد إضافتها؟
        </span>
        <div style="display:flex; gap:8px;">
            <button class="btn btn-sm" @click="applyNewRows()" style="background:#1d4ed8; color:#fff;">عرض الجديد</button>
            <button class="btn btn-sm" @click="dismissNew()" style="background:#94a3b8; color:#fff;">تجاهل</button>
        </div>
    </div>

    {{-- ─── Polling Status ──────────────────────────────────────────── --}}
    <div style="margin:0 auto 12px; display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b;">
        <span
            :class="polling ? 'pulse-dot' : ''"
            :style="polling ? 'width:8px;height:8px;border-radius:50%;background:#10b981;display:inline-block;'
                            : 'width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block;'"
        ></span>
        <span x-text="polling ? 'فحص تلقائي كل 30 ثانية' : 'الفحص التلقائي متوقف'"></span>
        <span style="margin-right:auto; color:#94a3b8;">
            <span x-text="rows.length"></span> سجل محمّل
        </span>
    </div>

    {{-- ─── الجدول ──────────────────────────────────────────────────── --}}
    <div style="margin:0 auto; background:#fff; border-radius:14px;
                box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.04); overflow:hidden;">

        {{-- Loading initial --}}
        <div x-show="loading" style="padding:60px; text-align:center; color:#94a3b8;">
            <span class="spinner"></span>
            <span style="margin-right:10px;">جارٍ التحميل...</span>
        </div>

        {{-- Table --}}
        <div x-show="!loading" style="overflow-x:auto;">
            <table>
                <thead>
                    <tr>
                        <th>التاريخ</th>
                        <th>النوع</th>
                        <th>الادمن</th>
                        <th>التعليق</th>
                        <th>تذكرة </th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(row, index) in rows" :key="row.id + '-' + index">
                        <tr :style="row.isNew ? 'background:#f0f9ff;' : ''">
                            <td x-text="formatDate(row.created_at)" style="color:#94a3b8; font-size:12px;"></td>
                            <td x-text="row.type_details" style="font-weight:600; color:#0f172a;"></td>
                            <td x-html="formatTextArray([row.admin_name,row.student_name])" style="color:#6366f1; direction:ltr;"></td>
                            <td x-html="formatText(row.comment ?? '')" style="font-weight:600; color:#059669;"></td>
                            <td>
                                <span
                                    class="badge"
                                    :style="badgeStyle(row.ticket ? row.ticket.status : '')"
                                >
                                    <span :style="dotStyle(row.ticket ? row.ticket.status : '')"></span>
                                    <span x-text="formatText(row.ticket ? row.ticket.status : '')"></span>
                                </span>
                            </td>
                            <!-- <td x-text="row.id" style="color:#94a3b8; font-size:12px;"></td> -->
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Load More --}}
        <div x-show="!loading && hasMore" style="padding:16px; text-align:center; border-top:1px solid #f1f5f9;">
            <button
                class="btn"
                @click="loadMore()"
                :disabled="loadingMore"
                style="background:#6366f1; color:#fff; min-width:160px;"
                :style="loadingMore ? 'opacity:.7' : ''"
            >
                <template x-if="loadingMore">
                    <span style="display:flex; align-items:center; gap:8px; justify-content:center;">
                        <span class="spinner"></span> جارٍ التحميل...
                    </span>
                </template>
                <template x-if="!loadingMore">
                    <span>⬇ تحميل المزيد</span>
                </template>
            </button>
        </div>

        {{-- All loaded --}}
        <div
            x-show="!loading && !hasMore && rows.length > 0"
            style="padding:14px; text-align:center; color:#94a3b8; font-size:13px; border-top:1px solid #f1f5f9;"
        >
            ✅ تم تحميل جميع السجلات (<span x-text="rows.length"></span>)
        </div>
    </div>
</div>
    <!-- <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                        <tr>
                            <th>التاريخ</th>
                            <th>النوع</th>
                            <th>الادمن</th>
                            <th>التعليق</th>
                            <th>تذكرة </th>
                        </tr>
                        </thead>

                        <tbody>
                        @foreach($logs as $log)
                            <tr>
                                <td>{{$log->created_at}}</td>
                                <td>{{$log->type}}</td>
                                <td>{{$log->admin->name ?? "---"}} <br>
                                    {{$log->student->name ?? "---"}}
                                </td>
                                <td>{!! nl2br(e($log->comment)) !!}</td>
                                <td>{{$log->ticket->status ?? "---"}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div> <!-- end col -->
    </div> -->
@endsection

@section('script')
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        function ordersTable() {
            return {
                // ── State ──────────────────────────────────────────────────────
                rows:        [],
                page:        1,
                limit:       10,
                hasMore:     true,
                loading:     false,
                loadingMore: false,
                polling:     true,
                newCount:    0,
                pendingRows: [],   // الصفوف الجديدة المنتظرة
                lastId:      0,
                lastChecked: null,
                timer:       null,
                total: 0,
                
                // State الفلاتر
                filters: {
                    search:    '',
                    type:    '',
                    admin_id:      '',
                    date_from: '',
                    date_to:   '',
                },

                // ── تطبيق الفلاتر (reset للصفحة الأولى) ──────────────────────────────
                async applyFilters() {
                    this.page    = 1;
                    this.rows    = [];
                    this.hasMore = true;
                    await this.fetchPage(1);
                },

                // ── مسح كل الفلاتر ───────────────────────────────────────────────────
                async resetFilters() {
                    this.filters = { search: '', status: '', type: '', date_from: '', date_to: '' };
                    await this.applyFilters();
                },

                // ── هل فيه فلاتر نشطة؟ ───────────────────────────────────────────────
                hasActiveFilters() {
                    return Object.values(this.filters).some(v => v !== '');
                },

                // ── Init ───────────────────────────────────────────────────────
                async init() {
                    await this.fetchPage(1);    // جلب الصفحة الأولى
                    this.startPolling();        // بدء الفحص التلقائي
                },

                // ── جلب صفحة (للتحميل الأول وLoad More) ──────────────────────
                async fetchPage(page) {
                    if (page === 1) this.loading = true;
                    else this.loadingMore = true;

                    try {
                        // بناء الـ query string من الفلاتر
                        const params = new URLSearchParams({
                            page:  page,
                            limit: this.limit,
                            ...Object.fromEntries(
                                Object.entries(this.filters).filter(([_, v]) => v !== '')
                            )
                        });

                        const res  = await fetch(`/control-panel/student/customer-service/activity-data?${params}`, {
                            headers: {
                                'Accept':       'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                        const json = await res.json();

                        if (page === 1) {
                            this.rows = json.data;
                        } else {
                            const existingIds = new Set(this.rows.map(r => r.id));
                            const newRows     = json.data.filter(r => !existingIds.has(r.id));
                            this.rows         = [...this.rows, ...newRows];
                        }

                        this.page    = page + 1;
                        this.hasMore = this.rows.length < json.total;
                        this.total = json.total;

                        if (json.data.length > 0) {
                            const maxId = Math.max(...json.data.map(r => r.id));
                            if (maxId > this.lastId) this.lastId = maxId;
                        }


                    } catch (err) {
                        console.error('Fetch error:', err);
                    } finally {
                        this.loading     = false;
                        this.loadingMore = false;
                    }
                },

                // ── Load More ──────────────────────────────────────────────────
                async loadMore() {
                    if (this.loadingMore || !this.hasMore) return;
                    await this.fetchPage(this.page);
                },

                // ── Polling: فحص العناصر الجديدة ──────────────────────────────
                startPolling() {
                    this.timer = setInterval(() => this.checkNow(), 30000); // 30 ثانية
                },

                async checkNow() {
                    const params = new URLSearchParams({
                        ...Object.fromEntries(
                            Object.entries(this.filters).filter(([_, v]) => v !== '')
                        )
                    });
                    this.lastChecked = new Date().toLocaleTimeString('ar-EG');

                    try {
                        const res = await fetch(`/control-panel/student/customer-service/activity-new-data?last_id=${this.lastId}&&${params}`, {
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                        const json = await res.json();

                        if (json.data && json.data.length > 0) {
                            this.pendingRows = json.data;
                            this.newCount    = json.data.length;
                            // تحديث lastId
                            const maxId = Math.max(...json.data.map(r => r.id));
                            this.lastId = maxId;
                        }

                    } catch (err) {
                        console.error('Polling error:', err);
                    }
                },

                togglePolling() {
                    this.polling = !this.polling;
                    if (this.polling) {
                        this.startPolling();
                    } else {
                        clearInterval(this.timer);
                    }
                },

                // ── إضافة الصفوف الجديدة للجدول ──────────────────────────────
                applyNewRows() {
                    const marked = this.pendingRows.map(r => ({ ...r, isNew: true }));
                    this.rows    = [...marked, ...this.rows]; // Prepend في الأعلى
                    this.dismissNew();
                },

                dismissNew() {
                    this.pendingRows = [];
                    this.newCount    = 0;
                },

                // ── Helpers ────────────────────────────────────────────────────
                formatDate(date) {
                    if (!date) return '—';
                    return new Date(date).toLocaleString('en-GB');
                },

                badgeStyle(status) {
                    const map = {
                        'active':   'background:#d1fae5; color:#065f46;',
                        'pending':  'background:#fef9c3; color:#854d0e;',
                        'banned':   'background:#fee2e2; color:#991b1b;',
                    };
                    return map[status] || map['active'];
                },

                dotStyle(status) {
                    const map = {
                        'active':  'width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;',
                        'pending': 'width:7px;height:7px;border-radius:50%;background:#eab308;display:inline-block;',
                        'banned':  'width:7px;height:7px;border-radius:50%;background:#ef4444;display:inline-block;',
                    };
                    return map[status] || map['active'];
                },
                formatText(text) {
                    if (!text) return '—';
                    return text
                        .replace(/&/g, '&amp;')   // e() = escape
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/\n/g, '<br>');   // nl2br
                },
            }
        }
    </script>
    <script>
        function formatTextArray(details) {
            if (!details) return '—';
            
            // لو array
            return details.map(item => 
                `<span style="display:block; line-height:1.8;">${item}</span>`
            ).join('');
        };
    </script>
@endsection