@extends('layouts.master')

@section('title', 'إدارة فواتير هيئة الزكاة والضريبة والجمارك (ZATCA)')

@section('css')
<style>
    :root {
        --zt-primary: #004d44;
        --zt-primary-light: #00695c;
        --zt-accent-emerald: #10b981;
        --zt-accent-amber: #f59e0b;
        --zt-accent-red: #ef4444;
        --zt-accent-blue: #0284c7;
        --zt-card-bg: #ffffff;
        --zt-border: #e2e8f0;
    }

    .zatca-wrap {
        font-family: 'Cairo', sans-serif;
    }

    /* كروت المؤشرات العلوية */
    .zatca-kpi-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--zt-border);
        padding: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        margin-bottom: 20px;
    }
    .zatca-kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
    .zatca-kpi-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .zatca-kpi-title {
        font-size: 13.5px;
        font-weight: 700;
        color: #475569;
    }
    .zatca-kpi-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    .zatca-kpi-value {
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 6px;
        font-family: 'Cairo', monospace;
    }
    .zatca-kpi-sub {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
    }

    /* التبويبات المودرن */
    .zatca-tabs-nav {
        display: flex;
        gap: 10px;
        background: #f1f5f9;
        padding: 6px;
        border-radius: 14px;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
    }
    .zatca-tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 20px;
        border-radius: 10px;
        border: none;
        background: transparent;
        font-weight: 800;
        font-size: 14px;
        color: #475569;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }
    .zatca-tab-btn:hover {
        background: rgba(255, 255, 255, 0.6);
        color: #0f172a;
    }
    .zatca-tab-btn.active {
        background: #fff;
        color: var(--zt-primary);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
    .zatca-tab-badge {
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 800;
    }

    /* قسم الفلترة */
    .zatca-filter-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--zt-border);
        padding: 18px 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }

    /* الجدول */
    .zatca-table-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--zt-border);
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }
    .zatca-table {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .zatca-table thead th {
        background: #0f172a;
        color: #fff;
        font-weight: 700;
        font-size: 12.5px;
        padding: 14px 10px;
        border: none;
        white-space: nowrap;
        text-align: center;
    }
    .zatca-table tbody td {
        padding: 12px 10px;
        font-size: 13px;
        vertical-align: middle;
        text-align: center;
        border-color: #f1f5f9;
    }
    .zatca-table tbody tr:hover {
        background-color: #f8fafc;
    }

    /* أزرار الإجراءات */
    .btn-action-sm {
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: transform 0.15s ease;
        text-decoration: none !important;
    }
    .btn-action-sm:hover {
        transform: translateY(-2px);
    }

    /* لودينج معالجة الزكاة */
    #zatca-loading-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.75);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        flex-direction: column;
        color: #fff;
        backdrop-filter: blur(4px);
    }
    .zatca-spinner {
        width: 55px;
        height: 55px;
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-top-color: #10b981;
        border-radius: 50%;
        animation: zatcaSpin 0.9s linear infinite;
        margin-bottom: 16px;
    }
    @keyframes zatcaSpin { to { transform: rotate(360deg); } }
</style>
@endsection

@section('content')
<div class="zatca-wrap my-3">

    {{-- 1. رأس الصفحة --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 text-dark" style="font-weight:800;display:flex;align-items:center;gap:10px;">
                <span style="font-size:24px;">🏛️</span>
                <span>منظومة الفوترة الإلكترونية والربط مع هيئة الزكاة (ZATCA)</span>
            </h4>
            <p class="text-muted mb-0 small">متابعة الفواتير المعتمدة وغير المرسلة، اعتماد وتوقيع الفواتير الإلكترونية (Phase 2)، وتحميل ملفات الـ XML المعتمدة.</p>
        </div>
        <div class="d-flex align-items-center gap-2 mt-2 mt-md-0">
            <span class="badge badge-soft-success px-3 py-2 rounded-pill font-weight-bold" style="font-size:12px;background:#e8f5e9;color:#004d44;">
                <i class="fas fa-check-circle me-1"></i> وضع الربط: نشط (Live Integration)
            </span>
            <a href="{{ url('/dashboard') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                <i class="fas fa-arrow-right me-1"></i> العودة للرئيسية
            </a>
        </div>
    </div>

    {{-- 1.1 شريط مفاتيح الإرسال التلقائي للزكاة (Auto-Send Settings Quick Toggles) --}}
    <div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius: 14px; overflow: hidden;">
        <div class="card-body p-3 d-flex flex-wrap align-items-center justify-content-between gap-3 text-white">
            <div class="d-flex align-items-center gap-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background: rgba(16, 185, 129, 0.2); color: #10b981; font-size: 20px;">
                    <i class="fas fa-magic"></i>
                </div>
                <div>
                    <h6 class="mb-0 font-weight-bold" style="font-size: 15px;">⚙️ الإرسال التلقائي المباشر لهيئة الزكاة (Instant Auto-Sync)</h6>
                    <small class="text-white-50">تفعيل أو تعطيل الترحيل والربط اللحظي للفواتير والمرتجعات بمجرد حفظها في النظام أو شاشة الكاشير</small>
                </div>
            </div>

            <div class="d-flex align-items-center gap-4 flex-wrap">
                <!-- مفتاح إرسال المبيعات -->
                <div class="d-flex align-items-center gap-2 px-3 py-2 rounded" style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);">
                    <div class="custom-control custom-switch m-0 p-0 d-flex align-items-center gap-2">
                        <input type="checkbox" class="custom-control-input" id="quickToggleSales"
                               {{ !empty($zatcaSettings->zatca_auto_send_sales) ? 'checked' : '' }}
                               onchange="ZATCA.toggleAutoSend('sales', this.checked)">
                        <label class="custom-control-label font-weight-bold text-white mb-0" for="quickToggleSales" style="cursor:pointer;font-size:13px;">
                            📤 إرسال المبيعات تلقائياً
                        </label>
                    </div>
                    <span id="badge-auto-sales" class="badge" style="font-size:11px;background:{{ !empty($zatcaSettings->zatca_auto_send_sales) ? '#10b981' : '#64748b' }};color:#fff;">
                        {{ !empty($zatcaSettings->zatca_auto_send_sales) ? 'مفعل ON' : 'معطل OFF' }}
                    </span>
                </div>

                <!-- مفتاح إرسال المرتجعات -->
                <div class="d-flex align-items-center gap-2 px-3 py-2 rounded" style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);">
                    <div class="custom-control custom-switch m-0 p-0 d-flex align-items-center gap-2">
                        <input type="checkbox" class="custom-control-input" id="quickToggleReturns"
                               {{ !empty($zatcaSettings->zatca_auto_send_returns) ? 'checked' : '' }}
                               onchange="ZATCA.toggleAutoSend('returns', this.checked)">
                        <label class="custom-control-label font-weight-bold text-white mb-0" for="quickToggleReturns" style="cursor:pointer;font-size:13px;">
                            ↩️ إرسال المرتجعات تلقائياً
                        </label>
                    </div>
                    <span id="badge-auto-returns" class="badge" style="font-size:11px;background:{{ !empty($zatcaSettings->zatca_auto_send_returns) ? '#10b981' : '#64748b' }};color:#fff;">
                        {{ !empty($zatcaSettings->zatca_auto_send_returns) ? 'مفعل ON' : 'معطل OFF' }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- 2. كروت المؤشرات المالية والإحصائية --}}
    <div class="row row-sm mb-3">
        <!-- كارت 1: الفواتير غير المرسلة -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12">
            <div class="zatca-kpi-card" style="border-top: 4px solid var(--zt-accent-amber);">
                <div class="zatca-kpi-header">
                    <span class="zatca-kpi-title">الفواتير بانتظار الإرسال والربط</span>
                    <div class="zatca-kpi-icon" style="background:#fef3c7;color:#d97706;">
                        <i class="fas fa-paper-plane"></i>
                    </div>
                </div>
                <div class="zatca-kpi-value text-warning">
                    {{ number_format($stats['unsent_count']) }} <small style="font-size:13px;color:#64748b;">فاتورة</small>
                </div>
                <div class="zatca-kpi-sub d-flex justify-content-between">
                    <span>إجمالي القيمة: <b>{{ number_format($stats['unsent_total'], 2) }}</b> ر.س</span>
                    <span class="badge badge-warning" style="background:#fde68a;color:#92400e;">غير مرسلة</span>
                </div>
            </div>
        </div>

        <!-- كارت 2: الفواتير المرسلة والمعتمدة -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12">
            <div class="zatca-kpi-card" style="border-top: 4px solid var(--zt-accent-emerald);">
                <div class="zatca-kpi-header">
                    <span class="zatca-kpi-title">الفواتير المرسلة والمعتمدة (PASS)</span>
                    <div class="zatca-kpi-icon" style="background:#dcfce7;color:#16a34a;">
                        <i class="fas fa-check-double"></i>
                    </div>
                </div>
                <div class="zatca-kpi-value text-success">
                    {{ number_format($stats['sent_count']) }} <small style="font-size:13px;color:#64748b;">فاتورة معتمدة</small>
                </div>
                <div class="zatca-kpi-sub d-flex justify-content-between">
                    <span>إجمالي المعتمد: <b>{{ number_format($stats['sent_total'], 2) }}</b> ر.س</span>
                    <span class="badge badge-success" style="background:#bbf7d0;color:#166534;">معتمدة 100%</span>
                </div>
            </div>
        </div>

        <!-- كارت 3: متطلبات المرحلة الثانية ZATCA -->
        <div class="col-xl-4 col-lg-4 col-md-12 col-12">
            <div class="zatca-kpi-card" style="border-top: 4px solid var(--zt-accent-blue);">
                <div class="zatca-kpi-header">
                    <span class="zatca-kpi-title">معايير الامتثال الضريبي</span>
                    <div class="zatca-kpi-icon" style="background:#e0f2fe;color:#0284c7;">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                </div>
                <div style="font-size:13px;font-weight:700;color:#0f172a;margin-bottom:4px;">
                    المرحلة الثانية (ZATCA Phase 2)
                </div>
                <div class="zatca-kpi-sub">
                    <div>✓ رمز الاستجابة السريع (6 المعاملات المعتمدة)</div>
                    <div>✓ التشفير والهاش التتابعي (PIH & SHA-256)</div>
                </div>
            </div>
        </div>
    </div>

    {{-- 3. تبويبات التنقل الرئيسية (غير مرسلة / مرسلة) --}}
    <div class="zatca-tabs-nav">
        <a href="{{ route('zatca.invoices', array_merge(request()->query(), ['tab' => 'unsent'])) }}"
           class="zatca-tab-btn {{ $tab === 'unsent' ? 'active' : '' }}">
            <span>📤 الفواتير غير المرسلة للزكاة</span>
            <span class="zatca-tab-badge" style="background:{{ $tab === 'unsent' ? '#fee2e2' : '#e2e8f0' }};color:{{ $tab === 'unsent' ? '#dc2626' : '#64748b' }};">
                {{ $stats['unsent_count'] }}
            </span>
        </a>

        <a href="{{ route('zatca.invoices', array_merge(request()->query(), ['tab' => 'sent'])) }}"
           class="zatca-tab-btn {{ $tab === 'sent' ? 'active' : '' }}">
            <span>📥 الفواتير المرسلة والمعتمدة (PASS)</span>
            <span class="zatca-tab-badge" style="background:{{ $tab === 'sent' ? '#dcfce7' : '#e2e8f0' }};color:{{ $tab === 'sent' ? '#16a34a' : '#64748b' }};">
                {{ $stats['sent_count'] }}
            </span>
        </a>
    </div>

    {{-- 4. كارد الفلاتر والبحث --}}
    <div class="zatca-filter-card">
        <form method="GET" action="{{ route('zatca.invoices') }}" id="filterForm">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div class="row row-sm align-items-end">
                <div class="col-xl-3 col-lg-3 col-md-6 col-12 mb-2 mb-lg-0">
                    <label class="form-label small fw-bold">الفرع</label>
                    <select name="branch_id" class="form-control form-control-sm select2">
                        <option value="">— كل الفروع —</option>
                        @foreach($branches as $b)
                            <option value="{{ $b->id }}" @selected($branchId == $b->id)>{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-6 col-12 mb-2 mb-lg-0">
                    <label class="form-label small fw-bold">مصدر الفاتورة</label>
                    <select name="source" class="form-control form-control-sm">
                        <option value="all" @selected($source === 'all')>الكل (تجزئة + مطعم)</option>
                        <option value="retail" @selected($source === 'retail')>مبيعات عامة</option>
                        <option value="restaurant" @selected($source === 'restaurant')>مطعم (POS)</option>
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-6 col-12 mb-2 mb-lg-0">
                    <label class="form-label small fw-bold">من تاريخ</label>
                    <input type="date" name="date_from" value="{{ $dateFrom }}" class="form-control form-control-sm">
                </div>

                <div class="col-xl-2 col-lg-2 col-md-6 col-12 mb-2 mb-lg-0">
                    <label class="form-label small fw-bold">إلى تاريخ</label>
                    <input type="date" name="date_to" value="{{ $dateTo }}" class="form-control form-control-sm">
                </div>

                <div class="col-xl-3 col-lg-3 col-md-6 col-12">
                    <label class="form-label small fw-bold">بحث برقم الفاتورة أو العميل</label>
                    <div class="input-group input-group-sm">
                        <input type="text" name="search" value="{{ $search }}" class="form-control" placeholder="بحث...">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                        <a href="{{ route('zatca.invoices', ['tab' => $tab]) }}" class="btn btn-outline-secondary" title="إعادة تعيين">
                            <i class="fas fa-undo"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- 5. شريط الإجراءات الجماعية (يظهر في غير المرسلة) --}}
    @if($tab === 'unsent' && $invoices->count() > 0)
    <div class="d-flex justify-content-between align-items-center mb-3 p-3 rounded" style="background:#fff7ed;border:1px dashed #fdba74;">
        <div class="d-flex align-items-center gap-2">
            <span style="font-size:18px;">⚠️</span>
            <span class="small font-weight-bold text-dark">
                يوجد <b>{{ $invoices->total() }}</b> فاتورة بانتظار الإرسال إلى هيئة الزكاة والضريبة والجمارك.
            </span>
        </div>
        <div>
            <button type="button" class="btn btn-sm text-white px-3 font-weight-bold" style="background:#004d44;border-radius:8px;" onclick="ZATCA.bulkSendSelected()">
                <i class="fas fa-paper-plane me-1"></i> إرسال الفواتير المحددة للزكاة
            </button>
        </div>
    </div>
    @endif

    {{-- 6. جدول الفواتير --}}
    <div class="zatca-table-card">
        <div class="table-responsive">
            <table class="table zatca-table">
                <thead>
                    <tr>
                        @if($tab === 'unsent')
                        <th style="width:30px">
                            <input type="checkbox" id="checkAll" onclick="ZATCA.toggleSelectAll(this)">
                        </th>
                        @endif
                        <th>رقم الفاتورة</th>
                        <th>المصدر</th>
                        <th>الفرع</th>
                        <th>العميل</th>
                        <th>البائع / الكاشير</th>
                        <th>طريقة الدفع</th>
                        <th>المبلغ الإجمالي</th>
                        <th>الضريبة</th>
                        <th>التاريخ والوقت</th>
                        <th>حالة الزكاة</th>
                        <th>إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoices as $inv)
                    <tr id="row-{{ $inv->source }}-{{ $inv->id }}">
                        @if($tab === 'unsent')
                        <td>
                            <input type="checkbox" class="inv-checkbox" data-id="{{ $inv->id }}" data-source="{{ $inv->source }}">
                        </td>
                        @endif
                        <td class="font-weight-bold text-start">
                            <span class="badge" style="background:#f1f5f9;color:#0f172a;font-family:monospace;font-size:12.5px;">
                                {{ $inv->display_number }}
                            </span>
                            @if($inv->invoice_number && $inv->invoice_number !== $inv->display_number)
                                <div class="text-muted small" style="font-size:11px;">{{ $inv->invoice_number }}</div>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $inv->source === 'restaurant' ? 'badge-soft-warning' : 'badge-soft-info' }}"
                                  style="padding:4px 8px;border-radius:6px;font-size:11px;font-weight:700;">
                                {{ $inv->source_label }}
                            </span>
                        </td>
                        <td>{{ $inv->branch_name }}</td>
                        <td class="text-start">
                            <div class="font-weight-bold">{{ $inv->customer_name }}</div>
                            @if($inv->customer_tax)
                                <div class="small text-muted" dir="ltr" style="font-size:11px;">{{ $inv->customer_tax }}</div>
                            @endif
                        </td>
                        <td>{{ $inv->seller_name }}</td>
                        <td>
                            <span class="badge badge-light border text-dark" style="font-size:11px;">
                                {{ $inv->payment_method }}
                            </span>
                        </td>
                        <td class="font-weight-bold num text-dark" style="font-size:13.5px;">
                            {{ number_format($inv->total, 2) }} <small>ر.س</small>
                        </td>
                        <td class="num text-muted" style="font-size:12.5px;">
                            {{ number_format($inv->vat_amount, 2) }}
                        </td>
                        <td class="text-muted small" style="font-size:11.5px;white-space:nowrap;">
                            {{ \Carbon\Carbon::parse($inv->created_at)->format('Y-m-d H:i') }}
                        </td>
                        <td id="status-cell-{{ $inv->source }}-{{ $inv->id }}">
                            @if($inv->sent_to_zatca)
                                <span class="badge" style="background:#dcfce7;color:#166534;border:1px solid #86efac;font-size:11.5px;padding:4px 10px;border-radius:20px;">
                                    <i class="fas fa-check-circle me-1"></i> معتمدة PASS
                                </span>
                            @else
                                <span class="badge" style="background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;font-size:11.5px;padding:4px 10px;border-radius:20px;">
                                    <i class="fas fa-clock me-1"></i> بانتظار الإرسال
                                </span>
                            @endif
                        </td>
                        <td class="nowrap text-end" id="actions-cell-{{ $inv->source }}-{{ $inv->id }}">
                            <div class="d-flex justify-content-center align-items-center gap-1">
                                {{-- زر عرض وطباعة الفاتورة --}}
                                <a href="{{ $inv->print_url }}" target="_blank" class="btn-action-sm btn-light border text-dark" title="عرض وطباعة الفاتورة">
                                    <i class="fas fa-print"></i> طباعة
                                </a>

                                {{-- زر إرسال الآن --}}
                                @if(!$inv->sent_to_zatca)
                                <button type="button" class="btn-action-sm text-white" style="background:#004d44;"
                                        onclick="ZATCA.sendSingle({{ $inv->id }}, '{{ $inv->source }}')"
                                        id="btn-send-{{ $inv->source }}-{{ $inv->id }}"
                                        title="إرسال واعتماد الفاتورة فوراً لدى هيئة الزكاة">
                                    <i class="fas fa-paper-plane"></i> إرسال للزكاة
                                </button>
                                @endif

                                {{-- زر تحميل XML إذا معتمدة --}}
                                @if($inv->sent_to_zatca && $inv->xml_url)
                                <a href="{{ $inv->xml_url }}" class="btn-action-sm btn-outline-success" title="تحميل ملف XML المعتمد">
                                    <i class="fas fa-download"></i> XML
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12" class="py-5 text-center text-muted">
                            <div style="font-size:40px;margin-bottom:8px;">📁</div>
                            <h6 class="font-weight-bold">لا توجد فواتير مطابقة لخيارات البحث</h6>
                            <p class="small mb-0">جميع الفواتير في هذا القسم تم تدقيقها بالكامل.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- الترقيم وتوزيع الصفحات --}}
        @if($invoices->hasPages())
        <div class="p-3 border-top d-flex justify-content-center">
            {{ $invoices->links() }}
        </div>
        @endif
    </div>

</div>

{{-- لودينج معالجة الإرسال لهيئة الزكاة --}}
<div id="zatca-loading-overlay">
    <div class="zatca-spinner"></div>
    <h5 class="font-weight-bold mb-2">جارٍ الاتصال بهيئة الزكاة والضريبة والجمارك...</h5>
    <p class="small text-muted mb-0" id="zatca-loading-text">يتم توقيع الفاتورة وتوليد الـ XML والـ Hash التتابعي</p>
</div>
@endsection

@section('js')
<script>
window.ZATCA = (function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

    function showLoading(msg) {
        if (msg) document.getElementById('zatca-loading-text').textContent = msg;
        document.getElementById('zatca-loading-overlay').style.display = 'flex';
    }

    function hideLoading() {
        document.getElementById('zatca-loading-overlay').style.display = 'none';
    }

    function toggleSelectAll(master) {
        document.querySelectorAll('.inv-checkbox').forEach(cb => cb.checked = master.checked);
    }

    function sendSingle(id, source) {
        if (!confirm('هل أنت متأكد من إرسال واعتماد الفاتورة لدى هيئة الزكاة الآن؟')) return;

        showLoading('جارٍ إرسال الفاتورة رقم #' + id + ' واعتمادها لدى الهيئة...');
        const btn = document.getElementById('btn-send-' + source + '-' + id);
        if (btn) btn.disabled = true;

        fetch("{{ url('/zatca/send') }}/" + id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ source: source })
        })
        .then(r => r.json().then(data => ({ status: r.status, ok: r.ok, data: data })))
        .then(res => {
            hideLoading();
            if (res.ok && res.data.ok) {
                alert('✅ ' + (res.data.message || 'تم اعتماد الفاتورة بنجاح في الزكاة (PASS)'));
                // تحديث الخلية في الجدول دون إعادة تحميل الصفحة
                const statusCell = document.getElementById('status-cell-' + source + '-' + id);
                if (statusCell) {
                    statusCell.innerHTML = '<span class="badge" style="background:#dcfce7;color:#166534;border:1px solid #86efac;font-size:11.5px;padding:4px 10px;border-radius:20px;"><i class="fas fa-check-circle me-1"></i> معتمدة PASS</span>';
                }
                const actionsCell = document.getElementById('actions-cell-' + source + '-' + id);
                if (actionsCell && btn) {
                    btn.remove();
                }
            } else {
                alert('❌ ' + (res.data.message || 'تعذر إرسال الفاتورة لهيئة الزكاة'));
                if (btn) btn.disabled = false;
            }
        })
        .catch(err => {
            hideLoading();
            alert('❌ حدث خطأ في الاتصال بالخادم: ' + err.message);
            if (btn) btn.disabled = false;
        });
    }

    function bulkSendSelected() {
        const checked = Array.from(document.querySelectorAll('.inv-checkbox:checked'));
        if (!checked.length) {
            alert('يرجى تحديد فاتورة واحدة على الأقل للإرسال.');
            return;
        }

        if (!confirm('سيتم إرسال ' + checked.length + ' فاتورة إلى هيئة الزكاة. هل تريد المتابعة؟')) return;

        showLoading('جارٍ إرسال ' + checked.length + ' فاتورة بشكل تتابعي لهيئة الزكاة...');

        const items = checked.map(c => ({ id: c.dataset.id, source: c.dataset.source }));

        fetch("{{ route('zatca.bulk-send') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ ids: items })
        })
        .then(r => r.json())
        .then(data => {
            hideLoading();
            alert(data.message || 'اكتملت العملية');
            location.reload();
        })
        .catch(err => {
            hideLoading();
            alert('❌ خطأ في الإرسال: ' + err.message);
        });
    }

    function toggleAutoSend(type, enabled) {
        showLoading('جارٍ تحديث إعدادات الإرسال التلقائي لهيئة الزكاة...');

        fetch("{{ route('zatca.toggle-auto-send') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ type: type, enabled: enabled })
        })
        .then(r => r.json())
        .then(data => {
            hideLoading();
            if (data.ok) {
                const badge = document.getElementById(type === 'sales' ? 'badge-auto-sales' : 'badge-auto-returns');
                if (badge) {
                    badge.style.background = enabled ? '#10b981' : '#64748b';
                    badge.textContent = enabled ? 'مفعل ON' : 'معطل OFF';
                }
            } else {
                alert('❌ ' + (data.message || 'حدث خطأ أثناء تحديث الإعداد.'));
            }
        })
        .catch(err => {
            hideLoading();
            alert('❌ فشل الاتصال بالخادم: ' + err.message);
        });
    }

    return {
        sendSingle,
        bulkSendSelected,
        toggleSelectAll,
        toggleAutoSend
    };
})();
</script>
@endsection