@extends('layouts.master')

@section('css')
<style>
    /* ==========================================================
       Promotional & WhatsApp Marketing Modern Styling
       ========================================================== */
    .promo-stat-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 20px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .promo-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }
    .promo-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    /* Composer */
    .card-composer {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
        margin-bottom: 24px;
        overflow: hidden;
    }
    .card-composer-header {
        background: #f8fafc;
        border-bottom: 1.5px solid #edf2f7;
        padding: 16px 22px;
    }

    /* Live Preview WhatsApp Mockup */
    .whatsapp-preview-box {
        background: #efeae2;
        background-image: radial-gradient(#d1d7db 1px, transparent 1px);
        background-size: 16px 16px;
        border-radius: 14px;
        border: 1px solid #d1d7db;
        padding: 16px;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .whatsapp-bubble {
        background: #ffffff;
        border-radius: 10px 10px 2px 10px;
        padding: 10px 12px;
        max-width: 90%;
        margin-right: auto;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
        font-size: 13.5px;
        color: #111b21;
        position: relative;
    }
    .whatsapp-bubble-img {
        max-width: 100%;
        border-radius: 8px;
        margin-bottom: 8px;
        display: block;
        max-height: 200px;
        object-fit: cover;
    }
    .whatsapp-bubble-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        font-size: 11px;
        color: #667781;
        margin-top: 4px;
    }

    /* Badges */
    .badge-promo-type {
        font-size: 12px;
        font-weight: 800;
        padding: 5px 10px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .badge-promo-purple {
        background: #ede9fe;
        color: #6d28d9;
        border: 1px solid #ddd6fe;
    }
    .badge-promo-blue {
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }
    .badge-promo-gray {
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    /* Table */
    .table-promos thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border: none !important;
        padding: 12px 10px !important;
    }
    .table-promos tbody td {
        vertical-align: middle !important;
        padding: 12px 10px !important;
        font-size: 13.5px !important;
        border-bottom: 1px solid #f1f5f9;
    }
    .table-promos tbody tr:hover {
        background-color: #f8fafc;
    }

    /* Image upload box */
    .upload-zone {
        border: 2px dashed #cbd5e1;
        border-radius: 10px;
        padding: 14px;
        text-align: center;
        background: #f8fafc;
        cursor: pointer;
        transition: all 0.2s;
    }
    .upload-zone:hover {
        border-color: #25d366;
        background: #f0fdf4;
    }

    /* Timeline History */
    .history-timeline {
        position: relative;
        padding-left: 20px;
        margin-top: 10px;
    }
    .history-item {
        position: relative;
        padding-bottom: 18px;
        border-left: 2px solid #e2e8f0;
        padding-left: 16px;
    }
    .history-item::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #3b82f6;
    }
    .history-item.promo::before {
        background: #8b5cf6;
    }
</style>
@endsection

@section('page-header')
<div class="breadcrumb-header justify-content-between mb-3">
    <div class="my-auto">
        <div class="d-flex align-items-center">
            <div class="bg-success text-white rounded d-flex align-items-center justify-content-center mr-2 ml-2" style="width: 38px; height: 38px; background-color: #25d366 !important;">
                <i class="fab fa-whatsapp" style="font-size: 22px;"></i>
            </div>
            <div>
                <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('promotions.promotional_messages') }}</h4>
                <span class="text-muted tx-12 font-weight-semibold">{{ __('promotions.subtitle') }}</span>
            </div>
        </div>
    </div>
    <div class="d-flex align-items-center">
        <button type="button" class="btn btn-sm btn-outline-primary font-weight-bold" id="btnRefreshBalance" onclick="refreshLiveBalance()">
            <i class="fa fa-sync-alt ml-1 mr-1" id="balanceSpinner"></i> {{ __('promotions.refresh_balance') }}
        </button>
    </div>
</div>
@endsection

@section('content')

<!-- كروت الإحصائيات والرصيد -->
<div class="row row-sm">
    <!-- رصيد القناة -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-12">
        <div class="promo-stat-card border-success">
            <div>
                <span class="d-block text-muted tx-12 font-weight-bold mb-1">{{ __('promotions.channel_balance') }}</span>
                <h3 class="mb-0 font-weight-bold text-success" id="displayBalance">
                    {{ number_format((float)$balance, 2) }} <small class="tx-13">{{ __('promotions.sar') }}</small>
                </h3>
            </div>
            <div class="promo-stat-icon bg-success-transparent text-success">
                <i class="fa fa-wallet"></i>
            </div>
        </div>
    </div>

    <!-- إجمالي العملاء -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-12">
        <div class="promo-stat-card">
            <div>
                <span class="d-block text-muted tx-12 font-weight-bold mb-1">{{ __('promotions.total_customers') }}</span>
                <h3 class="mb-0 font-weight-bold text-dark">{{ number_format($totalCustomers) }}</h3>
            </div>
            <div class="promo-stat-icon bg-primary-transparent text-primary">
                <i class="fa fa-users"></i>
            </div>
        </div>
    </div>

    <!-- الرسائل الترويجية المرسلة -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-12">
        <div class="promo-stat-card">
            <div>
                <span class="d-block text-muted tx-12 font-weight-bold mb-1">{{ __('promotions.promotional_sent_count') }}</span>
                <h3 class="mb-0 font-weight-bold text-purple" style="color: #7c3aed;">{{ number_format($promotionalCount) }}</h3>
            </div>
            <div class="promo-stat-icon text-purple" style="background: rgba(124, 58, 237, 0.12); color: #7c3aed;">
                <i class="fa fa-bullhorn"></i>
            </div>
        </div>
    </div>

    <!-- الرسائل العادية المرسلة -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-12">
        <div class="promo-stat-card">
            <div>
                <span class="d-block text-muted tx-12 font-weight-bold mb-1">{{ __('promotions.normal_sent_count') }}</span>
                <h3 class="mb-0 font-weight-bold text-info">{{ number_format($normalCount) }}</h3>
            </div>
            <div class="promo-stat-icon bg-info-transparent text-info">
                <i class="fa fa-paper-plane"></i>
            </div>
        </div>
    </div>
</div>

<!-- محرر الرسائل والحملات الترويجية (Composer) -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="card-composer">
            <div class="card-composer-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h5 class="mb-0 font-weight-bold text-dark d-flex align-items-center">
                    <i class="fa fa-bullhorn text-success ml-2 mr-2" style="font-size: 18px;"></i>
                    {{ __('promotions.compose_campaign') }}
                </h5>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge badge-light border text-muted px-2 py-1 tx-12">
                        <i class="fab fa-whatsapp text-success ml-1 mr-1"></i> {{ __('promotions.whatsapp_sender') }}
                    </span>
                </div>
            </div>

            <div class="card-body p-4">
                <div class="row">
                    <!-- الجانب الأيسر: خيارات الرسالة والإعلان -->
                    <div class="col-lg-7">
                        <form id="campaignForm">
                            <!-- اختيار نوع الرسالة: ترويجية أم عادية -->
                            <div class="form-group mb-3">
                                <label class="font-weight-bold text-dark tx-13 d-block mb-2">
                                    {{ __('promotions.message_type') }}:
                                </label>
                                <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                    <label class="btn btn-outline-primary active font-weight-bold py-2" id="labelTypePromo">
                                        <input type="radio" name="message_type" id="typePromotional" value="promotional" checked onchange="updatePreview()">
                                        <i class="fa fa-bullhorn ml-1 mr-1"></i> {{ __('promotions.promotional_message') }}
                                    </label>
                                    <label class="btn btn-outline-info font-weight-bold py-2" id="labelTypeNormal">
                                        <input type="radio" name="message_type" id="typeNormal" value="normal" onchange="updatePreview()">
                                        <i class="fa fa-comment-dots ml-1 mr-1"></i> {{ __('promotions.normal_message') }}
                                    </label>
                                </div>
                            </div>

                            <!-- اختيار طريقة الإرسال: قالب معتمد من Meta أو إعلان بصورة أو نص حر -->
                            <div class="form-group mb-3">
                                <label class="font-weight-bold text-dark tx-13 d-block mb-2">
                                    {{ __('promotions.content_mode') }}:
                                </label>
                                <div class="btn-group btn-group-toggle w-100 flex-wrap" data-toggle="buttons">
                                    <label class="btn btn-outline-success active font-weight-bold py-2" id="modeTemplateLabel">
                                        <input type="radio" name="content_type" id="modeTemplate" value="template" checked onchange="toggleContentMode()">
                                        <i class="fa fa-certificate ml-1 mr-1 text-warning"></i> {{ __('promotions.approved_template') }}
                                    </label>
                                    <label class="btn btn-outline-secondary font-weight-bold py-2" id="modeImageLabel">
                                        <input type="radio" name="content_type" id="modeImage" value="image" onchange="toggleContentMode()">
                                        <i class="fa fa-image ml-1 mr-1 text-success"></i> {{ __('promotions.image_ad') }}
                                    </label>
                                    <label class="btn btn-outline-secondary font-weight-bold py-2" id="modeTextLabel">
                                        <input type="radio" name="content_type" id="modeText" value="text" onchange="toggleContentMode()">
                                        <i class="fa fa-align-right ml-1 mr-1 text-primary"></i> {{ __('promotions.text_only') }}
                                    </label>
                                </div>
                            </div>

                            <!-- صندوق اختيار القالب المعتمد (يظهر عند اختيار قالب معتمد) -->
                            <div id="templateSelectContainer" class="form-group mb-3">
                                <label class="font-weight-bold text-dark tx-13 d-block mb-1" for="selectedTemplateInput">
                                    {{ __('promotions.choose_template') }}:
                                </label>
                                <select id="selectedTemplateInput" class="form-control font-weight-bold" onchange="onTemplateSelected()">
                                    @forelse($templates as $tmpl)
                                        @php
                                            $headerTxt = collect($tmpl['components'])->firstWhere('type', 'HEADER')['text'] ?? '';
                                            $bodyTxt = collect($tmpl['components'])->firstWhere('type', 'BODY')['text'] ?? '';
                                            $footerTxt = collect($tmpl['components'])->firstWhere('type', 'FOOTER')['text'] ?? '';
                                        @endphp
                                        <option value="{{ $tmpl['name'] }}"
                                                data-namespace="{{ $tmpl['namespace'] ?? '' }}"
                                                data-category="{{ $tmpl['category'] ?? '' }}"
                                                data-header="{{ $headerTxt }}"
                                                data-body="{{ $bodyTxt }}"
                                                data-footer="{{ $footerTxt }}">
                                            {{ $tmpl['name'] }} ({{ $tmpl['category'] ?? 'MARKETING' }})
                                        </option>
                                    @empty
                                        <option value="saudi_nationalday"
                                                data-namespace="9d26daef_1dc7_4d1d_9fba_873163d88138"
                                                data-category="MARKETING"
                                                data-header="دام عزك يا وطن"
                                                data-body="احتفالاً باليوم الوطني السعودي الـ96، نقدم لك عروضنا الخاصة:
✨ فصّل ثوبك من الأقمشة الكورية ابتداءً من 250 ريالاً، واحصل على الثوب الثاني بـ96 ريالاً فقط.
✨ ولعشاق الفخامة، فصّل ثوبك من الأقمشة اليابانية ابتداءً من 350 ريالاً، واحصل على الثوب الثاني
نسعد بخدمتكم في فروعنا: طويق، البديعة، ووادي لبن"
                                                data-footer="العرض لفتره محدوده">
                                            saudi_nationalday (MARKETING)
                                        </option>
                                    @endforelse
                                </select>
                                <div class="alert alert-success mt-2 mb-0 py-2 px-3 tx-12 font-weight-semibold" style="border-radius: 8px;">
                                    <i class="fa fa-check-circle text-success ml-1 mr-1"></i>
                                    {{ __('promotions.template_guarantee_notice') }}
                                </div>
                            </div>

                            <!-- صندوق رفع صورة الإعلان (يظهر عند اختيار صورة) -->
                            <div id="imageUploadContainer" class="form-group mb-3" style="display: none;">
                                <label class="font-weight-bold text-dark tx-13 d-block mb-1">
                                    {{ __('promotions.upload_image') }}:
                                </label>
                                <div class="upload-zone" onclick="document.getElementById('adImageInput').click()">
                                    <input type="file" id="adImageInput" accept="image/*" style="display: none;" onchange="handleImageSelected(event)">
                                    <input type="hidden" id="uploadedImageUrl" name="image_url" value="">
                                    <div id="uploadPrompt">
                                        <i class="fa fa-cloud-upload-alt text-success mb-2" style="font-size: 32px;"></i>
                                        <div class="font-weight-bold text-dark tx-13">{{ __('promotions.upload_image') }}</div>
                                        <div class="text-muted tx-11 mt-1">{{ __('promotions.image_help') }}</div>
                                    </div>
                                    <div id="uploadPreviewBox" style="display: none;" class="text-center">
                                        <img id="uploadPreviewImg" src="" style="max-height: 120px; border-radius: 8px;" class="mb-2 shadow-sm">
                                        <div>
                                            <button type="button" class="btn btn-xs btn-outline-danger font-weight-bold" onclick="removeUploadedImage(event)">
                                                <i class="fa fa-trash ml-1 mr-1"></i> {{ __('promotions.remove_image') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- نص الرسالة أو التعليق على الإعلان (للإرسال الحر) -->
                            <div id="customTextContainer" class="form-group mb-3" style="display: none;">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <label class="font-weight-bold text-dark tx-13 mb-0" for="campaignMessage">
                                        {{ __('promotions.message_text') }}:
                                    </label>
                                    <button type="button" class="btn btn-xs btn-light border text-primary font-weight-bold" onclick="insertTag('{name}')">
                                        + {name}
                                    </button>
                                </div>
                                <textarea id="campaignMessage" class="form-control" rows="4" style="resize: vertical; font-size: 14px;"
                                          placeholder="{{ __('promotions.caption_placeholder') }}"
                                          oninput="updatePreview()">أهلاً بك عميلنا العزيز {name}، يسعدنا في يعرب للخياطة تقديم أقوى عروضنا الخاصة وتفصيل أرقى الأقمشة الرجالية. بانتظار تشريفكم لنا!</textarea>
                                <small class="text-muted d-block mt-1">
                                    <i class="fa fa-info-circle text-primary ml-1 mr-1"></i> {{ __('promotions.name_tag_notice') }}
                                </small>
                                <div class="alert alert-warning py-2 px-3 tx-12 font-weight-semibold mt-2 mb-0" style="border-radius: 8px;">
                                    <i class="fa fa-exclamation-triangle text-warning ml-1 mr-1"></i>
                                    {{ __('promotions.meta_policy_warning') }}
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- الجانب الأيمن: المعاينة الحية على هاتف الواتساب -->
                    <div class="col-lg-5">
                        <label class="font-weight-bold text-dark tx-13 d-block mb-2">
                            <i class="fab fa-whatsapp text-success ml-1 mr-1"></i> {{ __('promotions.live_preview') }}:
                        </label>
                        <div class="whatsapp-preview-box">
                            <div class="whatsapp-bubble">
                                <img id="previewBubbleImg" class="whatsapp-bubble-img" src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=500&auto=format&fit=crop&q=60" alt="Ad">
                                <div id="previewBubbleText" style="white-space: pre-wrap; line-height: 1.5;">
                                    أهلاً بك عميلنا العزيز محمد، يسعدنا في يعرب للخياطة تقديم أقوى عروضنا الخاصة وتفصيل أرقى الأقمشة الرجالية. بانتظار تشريفكم لنا!
                                </div>
                                <div class="whatsapp-bubble-meta">
                                    <span id="previewBubbleTime">{{ date('h:i A') }}</span>
                                    <i class="fa fa-check-double text-primary tx-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- قسم جدول العملاء وإرسال الحملات -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header pb-0 d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h5 class="card-title mb-1 font-weight-bold text-dark">
                        <i class="fa fa-users text-primary ml-1 mr-1"></i> {{ __('promotions.customer_list') }}
                    </h5>
                </div>

                <!-- شريط أزرار الحملة الترويجية للمحددين -->
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <span id="selectedCountBadge" class="badge badge-secondary px-2 py-1 font-weight-bold" style="display: none;">
                        <span id="selectedCountNum">0</span> {{ __('promotions.selected_count') }}
                    </span>

                    <button type="button" class="btn btn-sm btn-outline-secondary font-weight-bold" onclick="toggleSelectAllPage()">
                        <i class="fa fa-check-square ml-1 mr-1"></i> {{ __('promotions.select_all_page') }}
                    </button>

                    <button type="button" class="btn btn-sm btn-success font-weight-bold" id="btnSendCampaign" onclick="startCampaignToSelected()" disabled>
                        <i class="fab fa-whatsapp ml-1 mr-1"></i> {{ __('promotions.send_selected') }}
                    </button>
                </div>
            </div>

            <div class="card-body">
                <!-- شريط البحث والفلترة -->
                <form method="GET" action="{{ route('promotions.index') }}" class="mb-3">
                    <div class="row row-sm align-items-center">
                        <div class="col-lg-5 col-md-6 mb-2">
                            <div class="input-group">
                                <input type="text" name="search" class="form-control" placeholder="{{ __('promotions.search_placeholder') }}" value="{{ request('search') }}">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="submit">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 mb-2">
                            <select name="type_filter" class="form-control" onchange="this.form.submit()">
                                <option value="">{{ __('promotions.filter_all') }}</option>
                                <option value="promotional" {{ request('type_filter') == 'promotional' ? 'selected' : '' }}>{{ __('promotions.filter_promotional') }}</option>
                                <option value="normal" {{ request('type_filter') == 'normal' ? 'selected' : '' }}>{{ __('promotions.filter_normal') }}</option>
                                <option value="never" {{ request('type_filter') == 'never' ? 'selected' : '' }}>{{ __('promotions.filter_never') }}</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-2 mb-2 text-left">
                            @if(request('search') || request('type_filter'))
                                <a href="{{ route('promotions.index') }}" class="btn btn-sm btn-outline-danger font-weight-bold">
                                    <i class="fa fa-times ml-1 mr-1"></i> إلغاء الفلترة
                                </a>
                            @endif
                        </div>
                    </div>
                </form>

                <!-- جدول العملاء -->
                <div class="table-responsive" style="border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;">
                    <table class="table text-md-nowrap text-center table-promos mb-0">
                        <thead>
                            <tr>
                                <th width="4%">
                                    <input type="checkbox" id="masterCheckbox" onchange="toggleMasterCheckbox(this)">
                                </th>
                                <th width="5%">{{ __('promotions.number') }}</th>
                                <th width="20%" class="text-right pr-3">{{ __('promotions.customer_name') }}</th>
                                <th width="15%">{{ __('promotions.phone_number') }}</th>
                                <th width="25%">{{ __('promotions.last_message') }}</th>
                                <th width="13%">{{ __('promotions.last_message_type') }}</th>
                                <th width="18%">{{ __('promotions.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($customers as $index => $customer)
                                @php
                                    $lastMsg = $customer->lastMessage;
                                    $cleanPhone = preg_replace('/\D/', '', $customer->phone);
                                @endphp
                                <tr id="row-customer-{{ $customer->id }}">
                                    <!-- Checkbox -->
                                    <td>
                                        <input type="checkbox" class="customer-checkbox"
                                               value="{{ $customer->id }}"
                                               data-name="{{ $customer->name }}"
                                               data-phone="{{ $customer->phone }}"
                                               onchange="onCheckboxChange()">
                                    </td>

                                    <!-- Index -->
                                    <td class="font-weight-bold text-muted">{{ $customers->firstItem() + $index }}</td>

                                    <!-- الاسم -->
                                    <td class="text-right pr-3 font-weight-bold text-dark">
                                        <i class="far fa-user-circle text-muted ml-1 mr-1"></i>
                                        {{ $customer->name }}
                                    </td>

                                    <!-- الهاتف -->
                                    <td style="direction: ltr;" class="font-weight-semibold">
                                        @if($customer->phone)
                                            <span class="badge badge-light border px-2 py-1">
                                                <i class="fa fa-phone text-success ml-1 mr-1"></i> {{ $customer->phone }}
                                            </span>
                                        @else
                                            <span class="text-muted tx-12">لا يوجد</span>
                                        @endif
                                    </td>

                                    <!-- آخر رسالة مرسلة -->
                                    <td class="text-right" id="lastMsgCol-{{ $customer->id }}">
                                        @if($lastMsg)
                                            <div class="tx-12 font-weight-semibold text-dark text-truncate" style="max-width: 260px;" title="{{ $lastMsg->message }}">
                                                @if($lastMsg->content_type === 'image')
                                                    <i class="fa fa-image text-primary ml-1 mr-1"></i>
                                                @endif
                                                {{ $lastMsg->message ?: 'إعلان بدون نص' }}
                                            </div>
                                            <div class="tx-11 text-muted mt-1">
                                                <i class="far fa-clock ml-1 mr-1"></i> {{ $lastMsg->created_at->diffForHumans() }}
                                                @if($lastMsg->status === 'sent')
                                                    <span class="text-success ml-1 mr-1"><i class="fa fa-check"></i></span>
                                                @else
                                                    <span class="text-danger ml-1 mr-1" title="{{ $lastMsg->error_message }}"><i class="fa fa-exclamation-circle"></i></span>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted tx-12 font-italic">{{ __('promotions.no_previous_messages') }}</span>
                                        @endif
                                    </td>

                                    <!-- نوع آخر رسالة -->
                                    <td id="lastTypeCol-{{ $customer->id }}">
                                        @if($lastMsg)
                                            @if($lastMsg->message_type === 'promotional')
                                                <span class="badge-promo-type badge-promo-purple">
                                                    <i class="fa fa-bullhorn"></i> {{ __('promotions.badge_promotional') }}
                                                </span>
                                            @else
                                                <span class="badge-promo-type badge-promo-blue">
                                                    <i class="fa fa-comment-dots"></i> {{ __('promotions.badge_normal') }}
                                                </span>
                                            @endif
                                        @else
                                            <span class="badge-promo-type badge-promo-gray">
                                                {{ __('promotions.badge_not_sent') }}
                                            </span>
                                        @endif
                                    </td>

                                    <!-- الإجراءات -->
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-success font-weight-bold"
                                                    onclick="openDirectSendModal({{ $customer->id }}, '{{ addslashes($customer->name) }}', '{{ $customer->phone }}')">
                                                <i class="fab fa-whatsapp ml-1 mr-1"></i> {{ __('promotions.send_now') }}
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary font-weight-bold"
                                                    onclick="openHistoryModal({{ $customer->id }})">
                                                <i class="fa fa-history"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="py-4 text-muted font-weight-bold">
                                        <i class="fa fa-info-circle mb-2 d-block tx-22"></i>
                                        {{ __('promotions.no_customers_found') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- ترقيم الصفحات -->
                <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
                    <div class="text-muted tx-13 font-weight-semibold">
                        عرض <strong>{{ $customers->firstItem() }}</strong> إلى <strong>{{ $customers->lastItem() }}</strong> من أصل <strong>{{ $customers->total() }}</strong> عميل
                    </div>
                    <div>
                        {{ $customers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- نافذة الإرسال المباشر لعميل محدد (Single Send Modal) -->
<div class="modal fade" id="directSendModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 14px;">
            <div class="modal-header bg-light">
                <h6 class="modal-title font-weight-bold text-dark">
                    <i class="fab fa-whatsapp text-success ml-1 mr-1"></i>
                    {{ __('promotions.direct_send_title') }} <span id="directCustomerName" class="text-primary"></span>
                </h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <input type="hidden" id="directCustomerId">
                <input type="hidden" id="directCustomerPhone">

                <!-- نوع الرسالة -->
                <div class="form-group mb-3">
                    <label class="font-weight-bold text-dark tx-12">{{ __('promotions.message_type') }}:</label>
                    <div class="d-flex gap-3">
                        <div class="custom-control custom-radio mr-3 ml-3">
                            <input type="radio" id="directTypePromo" name="direct_message_type" value="promotional" class="custom-control-input" checked>
                            <label class="custom-control-label font-weight-bold text-purple" for="directTypePromo">{{ __('promotions.promotional_message') }}</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input type="radio" id="directTypeNormal" name="direct_message_type" value="normal" class="custom-control-input">
                            <label class="custom-control-label font-weight-bold text-info" for="directTypeNormal">{{ __('promotions.normal_message') }}</label>
                        </div>
                    </div>
                </div>

                <!-- نص الرسالة -->
                <div class="form-group mb-3">
                    <label class="font-weight-bold text-dark tx-12">{{ __('promotions.message_text') }}:</label>
                    <textarea id="directMessageText" class="form-control" rows="3"></textarea>
                </div>

                <!-- استخدام صورة الإعلان الحالية إن وجدت -->
                <div class="form-group mb-2" id="directImageOptionBox">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="directAttachAdImage" checked>
                        <label class="custom-control-label font-weight-bold text-dark tx-12" for="directAttachAdImage">
                            إرفاق صورة الإعلان المرفوعة حالياً في الصفحة
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary font-weight-bold" data-dismiss="modal">{{ __('promotions.cancel') }}</button>
                <button type="button" class="btn btn-success font-weight-bold" id="btnExecuteDirectSend" onclick="executeDirectSend()">
                    <i class="fab fa-whatsapp ml-1 mr-1"></i> {{ __('promotions.send') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- نافذة سجل مراسلات العميل (Customer History Modal) -->
<div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" style="border-radius: 14px;">
            <div class="modal-header bg-light">
                <h6 class="modal-title font-weight-bold text-dark">
                    <i class="fa fa-history text-primary ml-1 mr-1"></i>
                    {{ __('promotions.history_title') }} <span id="historyCustomerName" class="text-primary"></span>
                </h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4" style="max-height: 480px; overflow-y: auto;">
                <div id="historyLoading" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="mt-2 font-weight-bold text-muted">{{ __('promotions.loading_history') }}</div>
                </div>
                <div id="historyContent" style="display: none;">
                    <div class="history-timeline" id="historyTimelineList">
                        <!-- عناصر السجل تضاف ديناميكياً هنا -->
                    </div>
                </div>
                <div id="historyEmpty" class="text-center py-4 text-muted" style="display: none;">
                    <i class="fa fa-folder-open tx-30 mb-2"></i>
                    <div>{{ __('promotions.no_history') }}</div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary font-weight-bold" data-dismiss="modal">{{ __('promotions.close') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- نافذة شريط تقدم الحملة الترويجية (Campaign Progress Modal) -->
<div class="modal fade" id="campaignProgressModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 14px;">
            <div class="modal-header bg-light">
                <h6 class="modal-title font-weight-bold text-dark">
                    <i class="fa fa-bullhorn text-success ml-1 mr-1"></i> {{ __('promotions.campaign_in_progress') }}
                </h6>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="tx-13 text-muted mb-3">{{ __('promotions.campaign_desc') }}</div>

                <div class="progress mb-3" style="height: 22px; border-radius: 10px;">
                    <div id="campaignProgressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success font-weight-bold tx-12"
                         role="progressbar" style="width: 0%;">0%</div>
                </div>

                <div class="d-flex justify-content-around tx-13 font-weight-bold mb-3">
                    <div>{{ __('promotions.total_to_send') }}: <span id="campTotalCount">0</span></div>
                    <div class="text-success">{{ __('promotions.successful_sends') }}: <span id="campSuccessCount">0</span></div>
                    <div class="text-danger">{{ __('promotions.failed_sends') }}: <span id="campFailCount">0</span></div>
                </div>

                <div id="campaignLogBox" class="p-2 border rounded bg-light text-right" style="max-height: 120px; overflow-y: auto; font-size: 11.5px;">
                    <!-- سجل الخطوات -->
                </div>
            </div>
            <div class="modal-footer bg-light" id="campaignModalFooter" style="display: none;">
                <button type="button" class="btn btn-primary font-weight-bold" onclick="location.reload()">
                    <i class="fa fa-check ml-1 mr-1"></i> {{ __('promotions.ok') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
    const csrfToken = '{{ csrf_token() }}';
    const uploadImageUrl = '{{ route("promotions.upload_image") }}';
    const sendMessageUrl = '{{ route("promotions.send_message") }}';
    const getBalanceUrl  = '{{ route("promotions.get_balance") }}';
    const historyBaseUrl = '{{ url("promotions/history") }}';

    // -------------------------------------------------------------
    // Live Preview & Content Mode
    // -------------------------------------------------------------
    function toggleContentMode() {
        const mode = document.querySelector('input[name="content_type"]:checked').value;
        const templateBox = document.getElementById('templateSelectContainer');
        const uploadBox = document.getElementById('imageUploadContainer');
        const customTextBox = document.getElementById('customTextContainer');
        const previewImg = document.getElementById('previewBubbleImg');

        if (mode === 'template') {
            if (templateBox) templateBox.style.display = 'block';
            if (uploadBox) uploadBox.style.display = 'none';
            if (customTextBox) customTextBox.style.display = 'none';
            if (previewImg) previewImg.style.display = 'none';
            onTemplateSelected();
        } else if (mode === 'image') {
            if (templateBox) templateBox.style.display = 'none';
            if (uploadBox) uploadBox.style.display = 'block';
            if (customTextBox) customTextBox.style.display = 'block';
            if (previewImg) previewImg.style.display = 'block';
            updatePreview();
        } else {
            if (templateBox) templateBox.style.display = 'none';
            if (uploadBox) uploadBox.style.display = 'none';
            if (customTextBox) customTextBox.style.display = 'block';
            if (previewImg) previewImg.style.display = 'none';
            updatePreview();
        }
    }

    function onTemplateSelected() {
        const sel = document.getElementById('selectedTemplateInput');
        if (!sel || !sel.selectedOptions.length) return;
        const opt = sel.selectedOptions[0];
        const header = opt.getAttribute('data-header') || '';
        const body = opt.getAttribute('data-body') || '';
        const footer = opt.getAttribute('data-footer') || '';

        const previewText = document.getElementById('previewBubbleText');
        let fullHtml = '';
        if (header) {
            fullHtml += `<strong>${header}</strong>\n\n`;
        }
        fullHtml += body;
        if (footer) {
            fullHtml += `\n\n<span style="color: #667781; font-size: 11.5px;">${footer}</span>`;
        }

        previewText.innerHTML = fullHtml.replace(/\n/g, '<br>');
    }

    function updatePreview() {
        const text = document.getElementById('campaignMessage').value;
        const previewText = document.getElementById('previewBubbleText');
        // استبدال {name} باسم افتراضي في المعاينة
        previewText.textContent = text.replace(/{name}/g, 'محمد');
    }

    function insertTag(tag) {
        const textarea = document.getElementById('campaignMessage');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const val = textarea.value;
        textarea.value = val.substring(0, start) + tag + val.substring(end);
        textarea.focus();
        textarea.selectionStart = textarea.selectionEnd = start + tag.length;
        updatePreview();
    }

    // تشغيل وضع القالب المعتمد افتراضياً عند التحميل
    document.addEventListener('DOMContentLoaded', function () {
        toggleContentMode();
    });

    // -------------------------------------------------------------
    // Image Uploading
    // -------------------------------------------------------------
    function handleImageSelected(event) {
        const file = event.target.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('image', file);
        formData.append('_token', csrfToken);

        // إظهار حالة التحميل
        document.getElementById('uploadPrompt').innerHTML = '<div class="spinner-border text-success" role="status"></div><div class="mt-2 tx-12 font-weight-bold">جاري رفع الصورة...</div>';

        fetch(uploadImageUrl, {
            method: 'POST',
            body: formData,
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('uploadedImageUrl').value = data.url;
                document.getElementById('uploadPreviewImg').src = data.url;
                document.getElementById('previewBubbleImg').src = data.url;
                document.getElementById('previewBubbleImg').style.display = 'block';

                document.getElementById('uploadPrompt').style.display = 'none';
                document.getElementById('uploadPreviewBox').style.display = 'block';
            } else {
                alert('فشل رفع الصورة: ' + (data.message || 'خطأ'));
                resetUploadBox();
            }
        })
        .catch(err => {
            alert('حدث خطأ أثناء رفع الصورة');
            resetUploadBox();
        });
    }

    function removeUploadedImage(event) {
        if (event) event.stopPropagation();
        resetUploadBox();
    }

    function resetUploadBox() {
        document.getElementById('adImageInput').value = '';
        document.getElementById('uploadedImageUrl').value = '';
        document.getElementById('uploadPrompt').style.display = 'block';
        document.getElementById('uploadPrompt').innerHTML = `
            <i class="fa fa-cloud-upload-alt text-success mb-2" style="font-size: 32px;"></i>
            <div class="font-weight-bold text-dark tx-13">{{ __('promotions.upload_image') }}</div>
            <div class="text-muted tx-11 mt-1">{{ __('promotions.image_help') }}</div>
        `;
        document.getElementById('uploadPreviewBox').style.display = 'none';
        document.getElementById('previewBubbleImg').src = 'https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=500&auto=format&fit=crop&q=60';
    }

    // -------------------------------------------------------------
    // Refresh Live Balance
    // -------------------------------------------------------------
    function refreshLiveBalance() {
        const spinner = document.getElementById('balanceSpinner');
        spinner.classList.add('fa-spin');

        fetch(getBalanceUrl)
            .then(res => res.json())
            .then(data => {
                spinner.classList.remove('fa-spin');
                if (data.success) {
                    const bal = parseFloat(data.current_balance || data.balance || 0).toFixed(2);
                    document.getElementById('displayBalance').innerHTML = `${bal} <small class="tx-13">{{ __('promotions.sar') }}</small>`;
                }
            })
            .catch(() => {
                spinner.classList.remove('fa-spin');
            });
    }

    // -------------------------------------------------------------
    // Checkbox Selection for Bulk Campaign
    // -------------------------------------------------------------
    function onCheckboxChange() {
        const checkedBoxes = document.querySelectorAll('.customer-checkbox:checked');
        const count = checkedBoxes.length;
        const badge = document.getElementById('selectedCountBadge');
        const num = document.getElementById('selectedCountNum');
        const sendBtn = document.getElementById('btnSendCampaign');

        if (count > 0) {
            badge.style.display = 'inline-block';
            num.textContent = count;
            sendBtn.disabled = false;
        } else {
            badge.style.display = 'none';
            sendBtn.disabled = true;
        }
    }

    function toggleSelectAllPage() {
        const checkboxes = document.querySelectorAll('.customer-checkbox');
        const master = document.getElementById('masterCheckbox');
        const allChecked = Array.from(checkboxes).every(c => c.checked);

        checkboxes.forEach(c => c.checked = !allChecked);
        if (master) master.checked = !allChecked;
        onCheckboxChange();
    }

    function toggleMasterCheckbox(master) {
        const checkboxes = document.querySelectorAll('.customer-checkbox');
        checkboxes.forEach(c => c.checked = master.checked);
        onCheckboxChange();
    }

    // -------------------------------------------------------------
    // Single / Direct Send Modal
    // -------------------------------------------------------------
    function openDirectSendModal(id, name, phone) {
        document.getElementById('directCustomerId').value = id;
        document.getElementById('directCustomerPhone').value = phone;
        document.getElementById('directCustomerName').textContent = name;

        // وضع نص الرسالة الافتراضي من المحرر
        const currentMsg = document.getElementById('campaignMessage').value;
        document.getElementById('directMessageText').value = currentMsg.replace(/{name}/g, name);

        // هل توجد صورة إعلان حالياً؟
        const uploadedImg = document.getElementById('uploadedImageUrl').value;
        const imgOption = document.getElementById('directImageOptionBox');
        if (uploadedImg) {
            imgOption.style.display = 'block';
            document.getElementById('directAttachAdImage').checked = true;
        } else {
            imgOption.style.display = 'none';
            document.getElementById('directAttachAdImage').checked = false;
        }

        $('#directSendModal').modal('show');
    }

    function executeDirectSend() {
        const customerId = document.getElementById('directCustomerId').value;
        const phone = document.getElementById('directCustomerPhone').value;
        const message = document.getElementById('directMessageText').value;
        const messageType = document.querySelector('input[name="direct_message_type"]:checked').value;
        const attachImage = document.getElementById('directAttachAdImage').checked;
        const imageUrl = attachImage ? document.getElementById('uploadedImageUrl').value : null;
        
        // التحقق من الوضع النشط في المحرر (قالب أم مخصص)
        const currentMode = document.querySelector('input[name="content_type"]:checked').value;
        let payload = {
            customer_id: customerId,
            phone: phone,
            message_type: messageType,
        };

        if (currentMode === 'template') {
            const tmplSelect = document.getElementById('selectedTemplateInput');
            const tmplOpt = tmplSelect.selectedOptions[0];
            payload.content_type = 'template';
            payload.template_name = tmplSelect.value;
            payload.template_namespace = tmplOpt ? tmplOpt.getAttribute('data-namespace') : '';
            payload.message = tmplOpt ? (tmplOpt.getAttribute('data-header') + ' - ' + tmplOpt.getAttribute('data-body')) : '';
        } else if (imageUrl) {
            payload.content_type = 'image';
            payload.image_url = imageUrl;
            payload.message = message;
        } else {
            payload.content_type = 'text';
            payload.message = message;
        }

        const btn = document.getElementById('btnExecuteDirectSend');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm ml-1 mr-1"></span> {{ __("promotions.sending") }}';

        fetch(sendMessageUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fab fa-whatsapp ml-1 mr-1"></i> {{ __("promotions.send") }}';

            if (data.success) {
                $('#directSendModal').modal('hide');
                updateTableRowMessage(customerId, data.last_message);
                refreshLiveBalance();
                alert('{{ __("promotions.send_success") }}');
            } else {
                alert('{{ __("promotions.send_error") }}' + (data.message || ''));
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fab fa-whatsapp ml-1 mr-1"></i> {{ __("promotions.send") }}';
            alert('{{ __("promotions.connection_error") }}');
        });
    }

    // تحديث العمود في الجدول لحظياً بدون إعادة تحميل الصفحة
    function updateTableRowMessage(customerId, lastMsg) {
        const msgCol = document.getElementById(`lastMsgCol-${customerId}`);
        const typeCol = document.getElementById(`lastTypeCol-${customerId}`);

        if (msgCol && lastMsg) {
            const icon = lastMsg.content_type === 'image' ? '<i class="fa fa-image text-primary ml-1 mr-1"></i> ' : (lastMsg.content_type === 'template' ? '<i class="fa fa-certificate text-warning ml-1 mr-1"></i> ' : '');
            msgCol.innerHTML = `
                <div class="tx-12 font-weight-semibold text-dark text-truncate" style="max-width: 260px;">
                    ${icon}${lastMsg.message || 'إعلان'}
                </div>
                <div class="tx-11 text-muted mt-1">
                    <i class="far fa-clock ml-1 mr-1"></i> ${lastMsg.created_at}
                    <span class="text-success ml-1 mr-1"><i class="fa fa-check"></i></span>
                </div>
            `;
        }

        if (typeCol && lastMsg) {
            if (lastMsg.message_type === 'promotional') {
                typeCol.innerHTML = `
                    <span class="badge-promo-type badge-promo-purple">
                        <i class="fa fa-bullhorn"></i> {{ __('promotions.badge_promotional') }}
                    </span>
                `;
            } else {
                typeCol.innerHTML = `
                    <span class="badge-promo-type badge-promo-blue">
                        <i class="fa fa-comment-dots"></i> {{ __('promotions.badge_normal') }}
                    </span>
                `;
            }
        }
    }

    // -------------------------------------------------------------
    // Customer History Modal
    // -------------------------------------------------------------
    function openHistoryModal(customerId) {
        $('#historyModal').modal('show');
        document.getElementById('historyLoading').style.display = 'block';
        document.getElementById('historyContent').style.display = 'none';
        document.getElementById('historyEmpty').style.display = 'none';

        fetch(`${historyBaseUrl}/${customerId}`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('historyLoading').style.display = 'none';
                if (data.success && data.messages.length > 0) {
                    document.getElementById('historyCustomerName').textContent = `${data.customer_name} (${data.phone})`;
                    const list = document.getElementById('historyTimelineList');
                    list.innerHTML = '';

                    data.messages.forEach(m => {
                        const isPromo = m.message_type === 'promotional';
                        const badgeClass = isPromo ? 'badge-promo-purple' : 'badge-promo-blue';
                        const badgeText = isPromo ? '{{ __("promotions.badge_promotional") }}' : '{{ __("promotions.badge_normal") }}';
                        const imgHtml = m.image_url ? `<div class="mt-1"><img src="${m.image_url}" style="max-height: 80px; border-radius: 6px;"></div>` : '';
                        const statusIcon = m.status === 'sent' ? '<span class="text-success ml-1"><i class="fa fa-check"></i></span>' : `<span class="text-danger ml-1" title="${m.error_message || ''}"><i class="fa fa-exclamation-circle"></i> فشل</span>`;

                        const item = document.createElement('div');
                        item.className = `history-item ${isPromo ? 'promo' : ''}`;
                        item.innerHTML = `
                            <div class="d-flex align-items-center justify-content-between">
                                <span class="badge-promo-type ${badgeClass}">${badgeText}</span>
                                <span class="tx-11 text-muted">${m.exact_time} (${m.created_at}) ${statusIcon}</span>
                            </div>
                            <div class="tx-13 text-dark mt-2" style="white-space: pre-wrap;">${m.message || ''}</div>
                            ${imgHtml}
                        `;
                        list.appendChild(item);
                    });

                    document.getElementById('historyContent').style.display = 'block';
                } else {
                    document.getElementById('historyCustomerName').textContent = data.customer_name || '';
                    document.getElementById('historyEmpty').style.display = 'block';
                }
            })
            .catch(() => {
                document.getElementById('historyLoading').style.display = 'none';
                document.getElementById('historyEmpty').style.display = 'block';
            });
    }

    // -------------------------------------------------------------
    // Bulk Promotional Campaign Processor
    // -------------------------------------------------------------
    async function startCampaignToSelected() {
        const checkedBoxes = Array.from(document.querySelectorAll('.customer-checkbox:checked'));
        if (checkedBoxes.length === 0) {
            alert('{{ __("promotions.select_at_least_one") }}');
            return;
        }

        const contentType = document.querySelector('input[name="content_type"]:checked').value;
        const messageType = (contentType === 'template') ? 'promotional' : document.querySelector('input[name="message_type"]:checked').value;
        const rawMessage = document.getElementById('campaignMessage').value;
        const imageUrl = (contentType === 'image') ? document.getElementById('uploadedImageUrl').value : null;

        let templateName = '';
        let templateNamespace = '';
        let templateBodyText = '';
        if (contentType === 'template') {
            const tmplSelect = document.getElementById('selectedTemplateInput');
            const tmplOpt = tmplSelect.selectedOptions[0];
            templateName = tmplSelect.value;
            templateNamespace = tmplOpt ? tmplOpt.getAttribute('data-namespace') : '';
            templateBodyText = tmplOpt ? (tmplOpt.getAttribute('data-header') + ' - ' + tmplOpt.getAttribute('data-body')) : '';
        } else {
            if (!rawMessage && !imageUrl) {
                alert('{{ __("promotions.message_required") }}');
                return;
            }
        }

        if (!confirm(`هل أنت متأكد من رغبتك في إرسال الحملة الترويجية إلى (${checkedBoxes.length}) عميل محدد؟`)) {
            return;
        }

        // فتح نافذة التقدم
        $('#campaignProgressModal').modal('show');
        const progressBar = document.getElementById('campaignProgressBar');
        const totalSpan = document.getElementById('campTotalCount');
        const successSpan = document.getElementById('campSuccessCount');
        const failSpan = document.getElementById('campFailCount');
        const logBox = document.getElementById('campaignLogBox');
        const footer = document.getElementById('campaignModalFooter');

        totalSpan.textContent = checkedBoxes.length;
        successSpan.textContent = '0';
        failSpan.textContent = '0';
        progressBar.style.width = '0%';
        progressBar.textContent = '0%';
        logBox.innerHTML = '';
        footer.style.display = 'none';

        let successCount = 0;
        let failCount = 0;

        for (let i = 0; i < checkedBoxes.length; i++) {
            const cb = checkedBoxes[i];
            const cId = cb.value;
            const cName = cb.getAttribute('data-name');
            const cPhone = cb.getAttribute('data-phone');

            const logLine = document.createElement('div');
            logLine.innerHTML = `<span class="text-muted">[${i + 1}/${checkedBoxes.length}]</span> إرسال إلى: <strong>${cName}</strong> (${cPhone})...`;
            logBox.appendChild(logLine);
            logBox.scrollTop = logBox.scrollHeight;

            const sendPayload = {
                customer_id: cId,
                phone: cPhone,
                message_type: messageType,
                content_type: contentType,
            };

            if (contentType === 'template') {
                sendPayload.template_name = templateName;
                sendPayload.template_namespace = templateNamespace;
                sendPayload.message = templateBodyText;
            } else if (contentType === 'image') {
                sendPayload.image_url = imageUrl;
                sendPayload.message = rawMessage;
            } else {
                sendPayload.message = rawMessage;
            }

            try {
                const res = await fetch(sendMessageUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(sendPayload)
                });

                const data = await res.json();
                if (data.success) {
                    successCount++;
                    successSpan.textContent = successCount;
                    logLine.innerHTML += ' <span class="text-success font-weight-bold">✔ نجاح</span>';
                    updateTableRowMessage(cId, data.last_message);
                } else {
                    failCount++;
                    failSpan.textContent = failCount;
                    logLine.innerHTML += ` <span class="text-danger font-weight-bold">✖ فشل (${data.message || ''})</span>`;
                }
            } catch (err) {
                failCount++;
                failSpan.textContent = failCount;
                logLine.innerHTML += ' <span class="text-danger font-weight-bold">✖ خطأ بالاتصال</span>';
            }

            const pct = Math.round(((i + 1) / checkedBoxes.length) * 100);
            progressBar.style.width = `${pct}%`;
            progressBar.textContent = `${pct}%`;

            // مهلة زمنية 400 ميلي ثانية بين الرسائل لتجنب الضغط
            await new Promise(r => setTimeout(r, 400));
        }

        progressBar.classList.remove('progress-bar-animated');
        footer.style.display = 'block';
        refreshLiveBalance();
    }
</script>
@endsection