@extends('layouts.master')


@section('title', 'إجراءات الاشتراك')

@section('content')
    <div class="container-fluid py-4 actions-page-modern">
        <style>
            .actions-page-modern {
                --ap-bg: #f5f7fb;
                --ap-surface: #ffffff;
                --ap-surface-2: #f8fafc;
                --ap-border: #e7ecf3;
                --ap-text: #162033;
                --ap-muted: #6b7280;
                --ap-primary: #2563eb;
                --ap-primary-soft: rgba(37, 99, 235, 0.08);
                --ap-success: #16a34a;
                --ap-success-soft: rgba(22, 163, 74, 0.10);
                --ap-warning: #d97706;
                --ap-warning-soft: rgba(217, 119, 6, 0.10);
                --ap-danger: #dc2626;
                --ap-danger-soft: rgba(220, 38, 38, 0.10);
                --ap-info: #0891b2;
                --ap-info-soft: rgba(8, 145, 178, 0.10);
                --ap-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
                color: var(--ap-text);
            }

            @media (prefers-color-scheme: dark) {
                .actions-page-modern {
                    --ap-bg: #0f172a;
                    --ap-surface: #111827;
                    --ap-surface-2: #182132;
                    --ap-border: #273244;
                    --ap-text: #e5edf8;
                    --ap-muted: #94a3b8;
                    --ap-primary: #60a5fa;
                    --ap-primary-soft: rgba(96, 165, 250, 0.12);
                    --ap-success: #4ade80;
                    --ap-success-soft: rgba(74, 222, 128, 0.12);
                    --ap-warning: #f59e0b;
                    --ap-warning-soft: rgba(245, 158, 11, 0.12);
                    --ap-danger: #f87171;
                    --ap-danger-soft: rgba(248, 113, 113, 0.12);
                    --ap-info: #22d3ee;
                    --ap-info-soft: rgba(34, 211, 238, 0.12);
                    --ap-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
                }
            }

            .actions-page-modern .ap-shell {
                background: var(--ap-bg);
                border-radius: 24px;
            }

            .actions-page-modern .ap-card,
            .actions-page-modern .card,
            .actions-page-modern .accordion-item {
                background: var(--ap-surface);
                border: 1px solid var(--ap-border) !important;
                border-radius: 20px !important;
                box-shadow: var(--ap-shadow) !important;
                overflow: hidden;
            }

            .actions-page-modern .ap-hero {
                background:
                    radial-gradient(circle at top right, var(--ap-primary-soft), transparent 26%),
                    radial-gradient(circle at bottom left, var(--ap-info-soft), transparent 20%),
                    var(--ap-surface);
                padding: 22px;
                border-radius: 22px;
                border: 1px solid var(--ap-border);
                box-shadow: var(--ap-shadow);
            }

            .actions-page-modern .ap-title {
                font-size: 1.45rem;
                font-weight: 800;
                margin-bottom: 4px;
                color: var(--ap-text);
            }

            .actions-page-modern .ap-subtitle {
                color: var(--ap-muted);
                margin-bottom: 0;
            }

            .actions-page-modern .ap-btn-row {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .actions-page-modern .btn {
                border-radius: 14px;
                font-weight: 700;
                padding-inline: 16px;
                min-height: 42px;
            }

            .actions-page-modern .btn-outline-secondary {
                border-color: var(--ap-border);
                color: var(--ap-text);
                background: var(--ap-surface);
            }

            .actions-page-modern .btn-outline-primary {
                border-color: var(--ap-primary);
                color: var(--ap-primary);
            }

            .actions-page-modern .alert {
                border: 1px solid var(--ap-border);
                border-radius: 18px;
                box-shadow: var(--ap-shadow);
            }

            .actions-page-modern .ap-info-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 14px;
            }

            .actions-page-modern .ap-mini-card {
                background: var(--ap-surface);
                border: 1px solid var(--ap-border);
                border-radius: 18px;
                padding: 16px;
                box-shadow: var(--ap-shadow);
                min-height: 100px;
            }

            .actions-page-modern .ap-mini-label {
                font-size: .82rem;
                color: var(--ap-muted);
                margin-bottom: 8px;
            }

            .actions-page-modern .ap-mini-value {
                font-size: 1rem;
                font-weight: 800;
                color: var(--ap-text);
                line-height: 1.45;
            }

            .actions-page-modern .ap-guide-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 14px;
            }

            .actions-page-modern .ap-guide-card {
                background: var(--ap-surface-2);
                border: 1px solid var(--ap-border);
                border-radius: 18px;
                padding: 16px;
                height: 100%;
            }

            .actions-page-modern .ap-guide-card h6 {
                font-weight: 800;
                margin-bottom: 8px;
                color: var(--ap-text);
            }

            .actions-page-modern .ap-guide-card p {
                margin: 0;
                color: var(--ap-muted);
                font-size: .92rem;
                line-height: 1.7;
            }

            .actions-page-modern .ap-tabs-wrap {
                padding: 18px 18px 0;
                background: var(--ap-surface);
            }

            .actions-page-modern .nav-tabs {
                border-bottom: 1px solid var(--ap-border);
                gap: 8px;
            }

            .actions-page-modern .nav-tabs .nav-link {
                border: 0;
                border-radius: 14px 14px 0 0;
                color: var(--ap-muted);
                font-weight: 800;
                padding: 12px 16px;
                background: transparent;
            }

            .actions-page-modern .nav-tabs .nav-link.active {
                color: var(--ap-primary);
                background: var(--ap-primary-soft);
                border-bottom: 2px solid var(--ap-primary);
            }

            .actions-page-modern .tab-content {
                padding: 18px;
            }

            .actions-page-modern .ap-form-section-title {
                font-weight: 800;
                font-size: 1rem;
                margin-bottom: 10px;
            }

            .actions-page-modern .form-label {
                font-weight: 700;
                color: var(--ap-text);
                margin-bottom: 6px;
            }

            .actions-page-modern .form-control,
            .actions-page-modern .form-select {
                border-radius: 14px;
                border: 1px solid var(--ap-border);
                background: var(--ap-surface);
                color: var(--ap-text);
                min-height: 46px;
                box-shadow: none !important;
            }

            .actions-page-modern .form-control::placeholder {
                color: var(--ap-muted);
            }

            .actions-page-modern textarea.form-control {
                min-height: 100px;
            }

            .actions-page-modern .ap-soft-box {
                background: var(--ap-surface-2);
                border: 1px solid var(--ap-border);
                border-radius: 16px;
                padding: 14px;
            }

            .actions-page-modern .payments-wrapper {
                background: var(--ap-surface-2);
                border: 1px dashed var(--ap-border);
                border-radius: 18px;
                padding: 14px;
            }

            .actions-page-modern .payment-row {
                background: var(--ap-surface);
                border: 1px solid var(--ap-border);
                border-radius: 16px;
                padding: 12px;
            }

            .actions-page-modern .ap-calc-box {
                background: linear-gradient(180deg, var(--ap-surface), var(--ap-surface-2));
                border: 1px solid var(--ap-border);
                border-radius: 18px;
                padding: 14px;
            }

            .actions-page-modern .ap-calc-box div {
                margin-bottom: 4px;
                color: var(--ap-text);
            }

            .actions-page-modern .accordion-button {
                background: var(--ap-surface);
                color: var(--ap-text);
                font-weight: 800;
                box-shadow: none !important;
            }

            .actions-page-modern .accordion-button:not(.collapsed) {
                background: var(--ap-primary-soft);
                color: var(--ap-primary);
            }

            .actions-page-modern .table {
                --bs-table-bg: transparent;
                color: var(--ap-text);
                margin-bottom: 0;
            }

            .actions-page-modern .table thead th {
                background: var(--ap-surface-2);
                color: var(--ap-text);
                white-space: nowrap;
                font-size: .9rem;
                border-color: var(--ap-border);
            }

            .actions-page-modern .table td {
                border-color: var(--ap-border);
            }

            .actions-page-modern .badge {
                border-radius: 999px;
                font-size: .78rem;
                padding: .55em .8em;
                font-weight: 800;
            }

            .actions-page-modern .bg-success {
                background: var(--ap-success) !important;
                color: #fff !important;
            }

            .actions-page-modern .bg-warning {
                background: var(--ap-warning) !important;
                color: #111827 !important;
            }

            .actions-page-modern .bg-danger {
                background: var(--ap-danger) !important;
                color: #fff !important;
            }

            .actions-page-modern .bg-info {
                background: var(--ap-info) !important;
                color: #fff !important;
            }

            .actions-page-modern .text-muted {
                color: var(--ap-muted) !important;
            }

            .actions-page-modern .text-success {
                color: var(--ap-success) !important;
            }

            .actions-page-modern .text-danger {
                color: var(--ap-danger) !important;
            }

            .actions-page-modern .text-primary {
                color: var(--ap-primary) !important;
            }

            .actions-page-modern .border-top-soft {
                border-top: 1px solid var(--ap-border);
                margin-top: 10px;
                padding-top: 14px;
            }

            @media (max-width: 1200px) {

                .actions-page-modern .ap-guide-grid,
                .actions-page-modern .ap-info-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
            }

            @media (max-width: 767.98px) {

                .actions-page-modern .ap-guide-grid,
                .actions-page-modern .ap-info-grid {
                    grid-template-columns: 1fr;
                }

                .actions-page-modern .ap-title {
                    font-size: 1.2rem;
                }

                .actions-page-modern .nav-tabs .nav-link {
                    font-size: .9rem;
                    padding: 10px 12px;
                }
            }
        </style>

        <div class="ap-shell">

            <div class="ap-hero mb-4">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <div>
                        <div class="ap-title">إجراءات الاشتراك</div>
                        <p class="ap-subtitle">
                            إدارة جميع إجراءات الاشتراك رقم
                            <strong>{{ $subscription->verification_code }}</strong>
                        </p>
                    </div>

                    <div class="ap-btn-row">
                        <a href="{{ route('new_approved-subscriptions.index') }}" class="btn btn-outline-secondary">
                            رجوع

                        </a>
                        <button type="button" class="btn btn-outline-primary" onclick="window.print()">
                            طباعة الصفحة
                        </button>
                    </div>
                </div>
            </div>

            @if (session('success'))
                <div class="alert alert-success mb-4">{{ session('success') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger mb-4">
                    <div class="fw-bold mb-2">يوجد بعض الملاحظات:</div>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="ap-card p-4 mb-4 d-none">
                <div class="ap-form-section-title mb-3">توضيح عام للإجراءات</div>
                <div class="ap-guide-grid">
                    <div class="ap-guide-card">
                        <h6>الإيقاف المؤقت</h6>
                        <p>يتم تنفيذه مباشرة إذا كانت الخدمة تسمح به، مع مراعاة عدد المرات والمدة المسموحة.</p>
                    </div>
                    <div class="ap-guide-card">
                        <h6>الإيقاف النهائي</h6>
                        <p>لا يتم التنفيذ إلا بعد إدخال السداد الكامل إذا وُجدت رسوم على الإجراء.</p>
                    </div>
                    <div class="ap-guide-card">
                        <h6>التنازل</h6>
                        <p>يتم نقل الاشتراك إلى عضو آخر، ورسوم التنازل والضريبة تظهر تلقائيًا.</p>
                    </div>
                    <div class="ap-guide-card">
                        <h6>الترقية</h6>
                        <p>يتم حساب فرق الترقية آليًا ثم يُشترط اكتمال السداد قبل التنفيذ.</p>
                    </div>
                </div>
            </div>

            <div class="ap-info-grid mb-4">
                <div class="ap-mini-card">
                    <div class="ap-mini-label">رقم الاعتماد</div>
                    <div class="ap-mini-value">{{ $subscription->verification_code }}</div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">العضو الحالي</div>
                    <div class="ap-mini-value">{{ $subscription->member->name ?? '---' }}</div>
                    @if (!empty($subscription->member?->member_code))
                        <div class="small text-muted mt-1">{{ $subscription->member->member_code }}</div>
                    @endif
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">الفرع</div>
                    <div class="ap-mini-value">{{ $subscription->branch->name ?? '---' }}</div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">الخدمة الحالية</div>
                    <div class="ap-mini-value">{{ $subscription->item_name }}</div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">تاريخ البداية</div>
                    <div class="ap-mini-value" dir="ltr">{{ optional($subscription->start_date)->format('Y-m-d') }}
                    </div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">تاريخ النهاية</div>
                    <div class="ap-mini-value" dir="ltr">{{ optional($subscription->end_date)->format('Y-m-d') }}
                    </div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">الحالة التشغيلية</div>
                    <div class="ap-mini-value">
                        @php
                            $lifeLabel = match ($subscription->current_action_type) {
                                'pause' => 'موقوف مؤقتًا',
                                'transfer' => 'تم التنازل',
                                'upgrade' => 'تمت الترقية',
                                'stop_final' => 'موقوف نهائيًا',
                                default => match ($subscription->lifecycle_status) {
                                    'active' => 'نشط',
                                    'paused' => 'موقوف',
                                    'ended' => 'منتهي',
                                    default => 'غير معروف',
                                },
                            };
                        @endphp
                        {{ $lifeLabel }}
                    </div>
                </div>

                <div class="ap-mini-card">
                    <div class="ap-mini-label">الإجراءات</div>
                    <div class="ap-mini-value {{ $canTakeAction ? 'text-success' : 'text-muted' }}">
                        {{ $canTakeAction ? 'متاحة' : 'غير متاحة' }}
                    </div>
                </div>
            </div>

            <div class="ap-card mb-4">
                <div class="ap-tabs-wrap">
                    <ul class="nav nav-tabs" id="actionTabs" role="tablist">
                        @if ($pauseEnabled)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-pause"
                                    type="button">
                                    إيقاف مؤقت
                                </button>
                            </li>
                        @endif

                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ !$pauseEnabled ? 'active' : '' }}" data-bs-toggle="tab"
                                data-bs-target="#tab-stop-final" type="button">
                                إيقاف نهائي
                            </button>
                        </li>

                        @if ($transferEnabled)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-transfer" type="button">
                                    تنازل
                                </button>
                            </li>
                        @endif

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-upgrade" type="button">
                                ترقية
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="tab-content">
                    @if ($pauseEnabled)
                        <div class="tab-pane fade show active" id="tab-pause">
                            @if ($canTakeAction)
                                <form method="POST"
                                    action="{{ route('subscriptions.actions.pause.store', $subscription) }}"
                                    class="row g-3">
                                    @csrf
                                    <div class="col-md-6">
                                        <label class="form-label">من تاريخ</label>
                                        <input type="date" name="pause_from" class="form-control"
                                            min="{{ now()->toDateString() }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">إلى تاريخ</label>
                                        <input type="date" name="pause_to" class="form-control"
                                            min="{{ now()->toDateString() }}" required>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">ملاحظات</label>
                                        <textarea name="notes" class="form-control" rows="3"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-warning">تنفيذ الإيقاف المؤقت</button>
                                    </div>
                                </form>
                            @else
                                <div class="alert alert-secondary mb-0">الإيقاف المؤقت غير متاح حاليًا لهذا الاشتراك.</div>
                            @endif
                        </div>
                    @endif

                    <div class="tab-pane fade {{ !$pauseEnabled ? 'show active' : '' }}" id="tab-stop-final">
                        @if ($canTakeAction)
                            <form method="POST"
                                action="{{ route('subscriptions.actions.stop-final.store', $subscription) }}"
                                class="row g-3 stop-final-form-js">
                                @csrf

                                <div class="col-md-4">
                                    <label class="form-label">رسوم الإجراء</label>
                                    <input type="number" step="0.01" name="fee" class="form-control stop-fee-js"
                                        value="0" required>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">الضريبة</label>
                                    <input type="number" step="0.01" name="tax_amount"
                                        class="form-control stop-tax-js" value="0">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">الخصم</label>
                                    <input type="number" step="0.01" name="discount_amount"
                                        class="form-control stop-discount-js" value="0">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">تاريخ السريان</label>
                                    <input type="date" name="effective_date" class="form-control"
                                        min="{{ now()->toDateString() }}" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">الإجمالي النهائي</label>
                                    <input type="text" class="form-control fw-bold stop-total-display-js"
                                        value="0.00" readonly>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">ملاحظات</label>
                                    <input type="text" name="notes" class="form-control">
                                </div>

                                @include('admin.subscriptions.actions.partials.multi-payment', [
                                    'wrapperId' => 'stop-payments-wrapper',
                                    'buttonClass' => 'stop-submit-btn btn-danger',
                                    'buttonText' => 'تنفيذ الإيقاف النهائي',
                                    'totalTextClass' => 'stop-total-text-js',
                                    'paidTextClass' => 'stop-paid-text-js',
                                    'diffTextClass' => 'stop-diff-text-js',
                                    'methods' => $paymentMethods,
                                ])
                            </form>
                        @else
                            <div class="alert alert-secondary mb-0">الإيقاف النهائي غير متاح حاليًا لهذا الاشتراك.</div>
                        @endif
                    </div>

                    @if ($transferEnabled)
                        <div class="tab-pane fade" id="tab-transfer">
                            @if ($canTakeAction)
                                <form method="POST"
                                    action="{{ route('subscriptions.actions.transfer.store', $subscription) }}"
                                    class="row g-3 transfer-form-js">
                                    @csrf

                                    <div class="col-md-4">
                                        <label class="form-label">رسوم التنازل</label>
                                        <input type="text" class="form-control transfer-fee-js"
                                            value="{{ number_format($transferFee, 2, '.', '') }}" readonly>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">الضريبة 15%</label>
                                        <input type="text" class="form-control transfer-tax-js"
                                            value="{{ number_format($transferTax, 2, '.', '') }}" readonly>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">الإجمالي</label>
                                        <input type="text" class="form-control fw-bold text-primary transfer-total-js"
                                            value="{{ number_format($transferTotal, 2, '.', '') }}" readonly>
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label">العضو الجديد</label>
                                        <select name="new_member_id" class="form-select" required>
                                            <option value="">اختر العضو</option>
                                            @foreach ($members as $member)
                                                <option value="{{ $member->id }}">
                                                    {{ $member->name }}
                                                    @if (!empty($member->member_code))
                                                        - {{ $member->member_code }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label">ملاحظات</label>
                                        <textarea name="notes" class="form-control" rows="3"></textarea>
                                    </div>

                                    @if ($transferTotal > 0)
                                        @include('admin.subscriptions.actions.partials.multi-payment', [
                                            'wrapperId' => 'transfer-payments-wrapper',
                                            'buttonClass' => 'transfer-submit-btn btn-info text-white',
                                            'buttonText' => 'تنفيذ التنازل بعد السداد',
                                            'totalTextClass' => 'transfer-total-text-js',
                                            'paidTextClass' => 'transfer-paid-text-js',
                                            'diffTextClass' => 'transfer-diff-text-js',
                                            'methods' => $paymentMethods,
                                            'defaultAmount' => number_format($transferTotal, 2, '.', ''),
                                        ])
                                    @else
                                        <div class="col-12">
                                            <button class="btn btn-info text-white">تنفيذ التنازل</button>
                                        </div>
                                    @endif
                                </form>
                            @else
                                <div class="alert alert-secondary mb-0">التنازل غير متاح حاليًا لهذا الاشتراك.</div>
                            @endif
                        </div>
                    @endif

                    <div class="tab-pane fade" id="tab-upgrade">
                        @if ($canTakeAction)
                            <form method="POST"
                                action="{{ route('subscriptions.actions.upgrade.store', $subscription) }}"
                                class="row g-3 upgrade-form-js">
                                @csrf

                                <div class="col-12">
                                    <label class="form-label">الخدمة الجديدة</label>
                                    <select name="to_service_id" class="form-select upgrade-service-js" required>
                                        <option value="">اختر الخدمة</option>
                                        @foreach ($services as $service)
                                            <option value="{{ $service->id }}"
                                                data-price="{{ (float) $service->price }}">
                                                {{ $service->localized_name }} - {{ number_format($service->price, 2) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">فرق الترقية</label>
                                    <input type="text" class="form-control upgrade-diff-display-js" value="0.00"
                                        readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">الضريبة</label>
                                    <input type="number" step="0.01" name="tax_amount"
                                        class="form-control upgrade-tax-js" value="0">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">الخصم</label>
                                    <input type="number" step="0.01" name="discount_amount"
                                        class="form-control upgrade-discount-js" value="0">
                                </div>

                                <div class="col-12">
                                    <label class="form-label">الإجمالي النهائي</label>
                                    <input type="text" class="form-control fw-bold upgrade-total-display-js"
                                        value="0.00" readonly>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">ملاحظات</label>
                                    <textarea name="notes" class="form-control" rows="3"></textarea>
                                </div>

                                @include('admin.subscriptions.actions.partials.multi-payment', [
                                    'wrapperId' => 'upgrade-payments-wrapper',
                                    'buttonClass' => 'upgrade-submit-btn btn-success',
                                    'buttonText' => 'تنفيذ الترقية',
                                    'totalTextClass' => 'upgrade-total-text-js',
                                    'paidTextClass' => 'upgrade-paid-text-js',
                                    'diffTextClass' => 'upgrade-diff-text-js',
                                    'methods' => $paymentMethods,
                                ])
                            </form>
                        @else
                            <div class="alert alert-secondary mb-0">الترقية غير متاح حاليًا لهذا الاشتراك.</div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="accordion mt-4" id="actionsHistoryAccordion">
                <div class="accordion-item mb-3">
                    <h2 class="accordion-header">
                        <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse"
                            data-bs-target="#history-general">
                            السجل العام للإجراءات
                        </button>
                    </h2>
                    <div id="history-general" class="accordion-collapse collapse show"
                        data-bs-parent="#actionsHistoryAccordion">
                        <div class="accordion-body p-0">
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>رقم الوثيقة</th>
                                            <th>النوع</th>
                                            <th>الحالة</th>
                                            <th>الإجمالي</th>
                                            <th>المدفوع</th>
                                            <th>المتبقي</th>
                                            <th>أنشئ بواسطة</th>
                                            <th>تاريخ الإنشاء</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($actions as $action)
                                            @php
                                                $typeLabel = match ($action->action_type) {
                                                    'pause' => 'إيقاف مؤقت',
                                                    'stop_final' => 'إيقاف نهائي',
                                                    'transfer' => 'تنازل',
                                                    'upgrade' => 'ترقية',
                                                    default => $action->action_type,
                                                };
                                                $remaining = max(
                                                    0,
                                                    (float) $action->total_amount - (float) $action->paid_amount,
                                                );
                                            @endphp
                                            <tr>
                                                <td>{{ $action->id }}</td>
                                                <td>{{ $action->action_no }}</td>
                                                <td>{{ $typeLabel }}</td>
                                                <td><span class="badge bg-success">تم التنفيذ</span></td>
                                                <td>{{ number_format($action->total_amount, 2) }}</td>
                                                <td>{{ number_format($action->paid_amount, 2) }}</td>
                                                <td>{{ number_format($remaining, 2) }}</td>
                                                <td>{{ $action->creator->name ?? '---' }}</td>
                                                <td>{{ optional($action->created_at)->format('Y-m-d H:i') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center py-4">لا توجد إجراءات على هذا
                                                    الاشتراك بعد.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                @include('admin.subscriptions.actions.partials.history-table', [
                    'title' => 'تاريخ الإيقاف المؤقت',
                    'collapseId' => 'history-pause',
                    'rows' => $pauseActions,
                    'type' => 'pause',
                ])

                @include('admin.subscriptions.actions.partials.history-table', [
                    'title' => 'تاريخ التنازل',
                    'collapseId' => 'history-transfer',
                    'rows' => $transferActions,
                    'type' => 'transfer',
                ])

                @include('admin.subscriptions.actions.partials.history-table', [
                    'title' => 'تاريخ الترقية',
                    'collapseId' => 'history-upgrade',
                    'rows' => $upgradeActions,
                    'type' => 'upgrade',
                ])

                @include('admin.subscriptions.actions.partials.history-table', [
                    'title' => 'تاريخ الإيقاف النهائي',
                    'collapseId' => 'history-stop-final',
                    'rows' => $stopFinalActions,
                    'type' => 'stop_final',
                ])
            </div>

        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function toNumber(value) {
                const n = parseFloat(value || 0);
                return isNaN(n) ? 0 : n;
            }

            function round2(value) {
                return Math.round((value + Number.EPSILON) * 100) / 100;
            }

            function sumPayments(wrapper) {
                let total = 0;
                wrapper.querySelectorAll('.payment-amount-input').forEach(input => {
                    total += toNumber(input.value);
                });
                return round2(total);
            }

            function resetPaymentRowNames(wrapper) {
                const rows = wrapper.querySelectorAll('.payment-row');
                rows.forEach((row, index) => {
                    row.querySelectorAll('select, input').forEach(field => {
                        const oldName = field.getAttribute('name');
                        if (!oldName) return;
                        field.setAttribute('name', oldName.replace(/payments\[\d+\]/,
                            `payments[${index}]`));
                    });

                    const removeBtn = row.querySelector('.remove-payment-row');
                    if (removeBtn) removeBtn.disabled = rows.length === 1;
                });
            }

            function createPaymentRow(methodOptionsHtml, index) {
                const row = document.createElement('div');
                row.className = 'payment-row row g-3 mb-2';
                row.innerHTML = `
            <div class="col-md-4">
                <select name="payments[${index}][payment_method_id]" class="form-select" required>
                    <option value="">اختر</option>
                    ${methodOptionsHtml}
                </select>
            </div>
            <div class="col-md-3">
                <input type="number" step="0.01" name="payments[${index}][amount]" class="form-control payment-amount-input" required>
            </div>
            <div class="col-md-4">
                <input type="text" name="payments[${index}][notes]" class="form-control" placeholder="ملاحظات الدفع">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-outline-danger remove-payment-row w-100">×</button>
            </div>
        `;
                return row;
            }

            function setSubmitState(button, total, paid) {
                if (!button) return;
                button.disabled = round2(total - paid) !== 0;
            }

            document.querySelectorAll('.add-payment-row').forEach(button => {
                button.addEventListener('click', function() {
                    const wrapper = document.querySelector(this.dataset.target);
                    const firstSelect = wrapper.querySelector('select');
                    let methodOptionsHtml = '';
                    firstSelect.querySelectorAll('option').forEach(opt => {
                        if (opt.value !== '') {
                            methodOptionsHtml +=
                                `<option value="${opt.value}">${opt.textContent}</option>`;
                        }
                    });

                    const row = createPaymentRow(methodOptionsHtml, wrapper.querySelectorAll(
                        '.payment-row').length);
                    wrapper.appendChild(row);
                    resetPaymentRowNames(wrapper);
                    document.dispatchEvent(new Event('recalc-all-payments'));
                });
            });

            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-payment-row')) {
                    const row = e.target.closest('.payment-row');
                    const wrapper = row.closest('.payments-wrapper');
                    if (wrapper.querySelectorAll('.payment-row').length > 1) {
                        row.remove();
                        resetPaymentRowNames(wrapper);
                        document.dispatchEvent(new Event('recalc-all-payments'));
                    }
                }
            });

            document.addEventListener('input', function(e) {
                if (e.target.classList.contains('payment-amount-input')) {
                    document.dispatchEvent(new Event('recalc-all-payments'));
                }
            });

            const stopForm = document.querySelector('.stop-final-form-js');
            if (stopForm) {
                const feeEl = stopForm.querySelector('.stop-fee-js');
                const taxEl = stopForm.querySelector('.stop-tax-js');
                const discountEl = stopForm.querySelector('.stop-discount-js');
                const totalDisplayEl = stopForm.querySelector('.stop-total-display-js');
                const totalTextEl = stopForm.querySelector('.stop-total-text-js');
                const paidTextEl = stopForm.querySelector('.stop-paid-text-js');
                const diffTextEl = stopForm.querySelector('.stop-diff-text-js');
                const wrapper = stopForm.querySelector('#stop-payments-wrapper');
                const submitBtn = stopForm.querySelector('.stop-submit-btn');

                function calcStopTotal() {
                    const fee = toNumber(feeEl.value);
                    const tax = toNumber(taxEl.value);
                    const discount = toNumber(discountEl.value);
                    const total = round2(Math.max(0, fee + tax - discount));
                    const paid = sumPayments(wrapper);
                    const diff = round2(total - paid);

                    totalDisplayEl.value = total.toFixed(2);
                    totalTextEl.textContent = total.toFixed(2);
                    paidTextEl.textContent = paid.toFixed(2);
                    diffTextEl.textContent = diff.toFixed(2);
                    diffTextEl.className = diff === 0 ? 'stop-diff-text-js text-success' :
                        'stop-diff-text-js text-danger';

                    setSubmitState(submitBtn, total, paid);
                }

                [feeEl, taxEl, discountEl].forEach(el => el.addEventListener('input', calcStopTotal));
                document.addEventListener('recalc-all-payments', calcStopTotal);
                calcStopTotal();
            }

            const transferForm = document.querySelector('.transfer-form-js');
            if (transferForm) {
                const total = toNumber(transferForm.querySelector('.transfer-total-js')?.value || 0);
                const totalTextEl = transferForm.querySelector('.transfer-total-text-js');
                const paidTextEl = transferForm.querySelector('.transfer-paid-text-js');
                const diffTextEl = transferForm.querySelector('.transfer-diff-text-js');
                const wrapper = transferForm.querySelector('#transfer-payments-wrapper');
                const submitBtn = transferForm.querySelector('.transfer-submit-btn');

                function calcTransfer() {
                    if (!wrapper) return;
                    const paid = sumPayments(wrapper);
                    const diff = round2(total - paid);

                    totalTextEl.textContent = total.toFixed(2);
                    paidTextEl.textContent = paid.toFixed(2);
                    diffTextEl.textContent = diff.toFixed(2);
                    diffTextEl.className = diff === 0 ? 'transfer-diff-text-js text-success' :
                        'transfer-diff-text-js text-danger';

                    setSubmitState(submitBtn, total, paid);
                }

                document.addEventListener('recalc-all-payments', calcTransfer);
                calcTransfer();
            }

            const upgradeForm = document.querySelector('.upgrade-form-js');
            if (upgradeForm) {
                const serviceSelect = upgradeForm.querySelector('.upgrade-service-js');
                const taxEl = upgradeForm.querySelector('.upgrade-tax-js');
                const discountEl = upgradeForm.querySelector('.upgrade-discount-js');
                const diffDisplayEl = upgradeForm.querySelector('.upgrade-diff-display-js');
                const totalDisplayEl = upgradeForm.querySelector('.upgrade-total-display-js');
                const totalTextEl = upgradeForm.querySelector('.upgrade-total-text-js');
                const paidTextEl = upgradeForm.querySelector('.upgrade-paid-text-js');
                const diffTextEl = upgradeForm.querySelector('.upgrade-diff-text-js');
                const wrapper = upgradeForm.querySelector('#upgrade-payments-wrapper');
                const submitBtn = upgradeForm.querySelector('.upgrade-submit-btn');

                const currentPrice = parseFloat(@json((float) ($subscription->price ?? 0)));

                function calcUpgrade() {
                    const selectedOption = serviceSelect.options[serviceSelect.selectedIndex];
                    const newPrice = toNumber(selectedOption?.dataset?.price || 0);
                    const diffBase = round2(Math.max(0, newPrice - currentPrice));
                    const tax = toNumber(taxEl.value);
                    const discount = toNumber(discountEl.value);
                    const total = round2(Math.max(0, diffBase + tax - discount));
                    const paid = sumPayments(wrapper);
                    const diff = round2(total - paid);

                    diffDisplayEl.value = diffBase.toFixed(2);
                    totalDisplayEl.value = total.toFixed(2);
                    totalTextEl.textContent = total.toFixed(2);
                    paidTextEl.textContent = paid.toFixed(2);
                    diffTextEl.textContent = diff.toFixed(2);
                    diffTextEl.className = diff === 0 ? 'upgrade-diff-text-js text-success' :
                        'upgrade-diff-text-js text-danger';

                    setSubmitState(submitBtn, total, paid);
                }

                [serviceSelect, taxEl, discountEl].forEach(el => {
                    el.addEventListener('input', calcUpgrade);
                    el.addEventListener('change', calcUpgrade);
                });

                document.addEventListener('recalc-all-payments', calcUpgrade);
                calcUpgrade();
            }
        });
    </script>
@endsection