@extends('layouts.master')
@section('title', 'تعديل عرض')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        .shell {
            background: #0f1e2b;
            border-radius: 14px;
            padding: 14px
        }

        .block {
            background: #0b1621;
            border: 1px solid #203446;
            border-radius: 12px;
            
            padding: 12px
        }

        .muted {
            opacity: .85
        }

        .badge-soft {
            background: #13283a;
            border: 1px solid #254a65;
            border-radius: 999px;
            padding: 2px 10px;
            color: #d6f0ff
        }

        .table-offer th,
        .table-offer td {
            vertical-align: middle
        }

        .side-panel {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .btn-circle {
            width: 38px;
            height: 38px;
            border-radius: 50%
        }

        .disabled-wrap {
            opacity: .55;
            pointer-events: none;
            filter: grayscale(.3)
        }

        .svc-name {
            white-space: normal;
            line-height: 1.35
        }

        .svc-meta {
            font-size: .85rem;
            opacity: .85
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('offers.update', $offer) }}" method="POST" id="offerForm">
            @csrf
            @method('PUT')

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="mb-0">تعديل عرض #{{ $offer->offer_no }}</h5>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary"><i class="fas fa-save me-2"></i>حفظ</button>
                    <a href="{{ route('offers.index') }}" class="btn btn-secondary">رجوع</a>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-lg-12">
                    <div class="shell">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="block">
                                    <label class="form-label">اسم العرض (ar) <span class="text-danger">*</span></label>
                                    <input type="text" name="name[ar]" class="form-control"
                                        value="{{ old('name.ar', $offer->name['ar'] ?? '') }}" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="block">
                                    <label class="form-label">اسم العرض (en) <span class="text-danger">*</span></label>
                                    <input type="text" name="name[en]" class="form-control"
                                        value="{{ old('name.en', $offer->name['en'] ?? '') }}" required>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="block">
                                    <label class="form-label">الحالة</label>
                                    <select name="active" class="form-select">
                                        <option value="1" @selected(old('active', $offer->active))>نشط</option>
                                        <option value="0" @selected(!old('active', $offer->active))>مغلق</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="block">
                                    <label class="form-label d-flex justify-content-between align-items-center">
                                        <span class="text-muted small">تشغيل / إيقاف</span>
                                    </label>

                                    <div class="form-check form-switch mt-2">
                                        <input type="hidden" name="is_live" value="0">
                                        <input class="form-check-input" type="checkbox" name="is_live" value="1"
                                            {{ old('is_live', $offer->is_live ?? 1) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_live">
                                            {{ old('is_live', $offer->is_live ?? 1) ? 'Live' : 'Not Live' }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="block">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label class="form-label">الفئة المستهدفة</label>
                                            <select name="scope" id="scope" class="form-select">
                                                <option value="members" @selected(old('scope', $offer->scope) === 'members')>الأعضاء</option>
                                                <option value="customers" @selected(old('scope', $offer->scope) === 'customers')>العملاء</option>
                                                <option value="coupons" @selected(old('scope', $offer->scope) === 'coupons')>كوبونات</option>
                                            </select>
                                        </div>

                                        <div class="col-md-9">
                                            <div id="scope_members"
                                                data-all-members="{{ is_null($offer->target_member_ids) ? '1' : '0' }}"
                                                class="{{ old('scope', $offer->scope) === 'members' ? '' : 'd-none' }}">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="all_members"
                                                        name="all_members" value="1" @checked(is_null($offer->target_member_ids) || old('all_members'))>
                                                    <label class="form-check-label" for="all_members">استهداف جميع
                                                        الأعضاء</label>
                                                </div>
                                            </div>

                                            <div id="scope_customers"
                                                data-all-customers="{{ is_null($offer->target_customer_ids) ? '1' : '0' }}"
                                                class="{{ old('scope', $offer->scope) === 'customers' ? '' : 'd-none' }}">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="all_customers"
                                                        name="all_customers" value="1" @checked(is_null($offer->target_customer_ids) || old('all_customers'))>
                                                    <label class="form-check-label" for="all_customers">استهداف جميع
                                                        العملاء</label>
                                                </div>

                                                <div id="customers_box"
                                                    class="{{ is_null($offer->target_customer_ids) ? 'disabled-wrap' : '' }}">
                                                    <label class="form-label">تخصيص للعملاء</label>
                                                    <select class="form-select" name="target_customer_ids[]" multiple
                                                        {{ is_null($offer->target_customer_ids) ? 'disabled' : '' }}>
                                                        @foreach ($customers as $c)
                                                            <option value="{{ $c->id }}"
                                                                @selected(in_array($c->id, old('target_customer_ids', $offer->target_customer_ids ?? [])))>
                                                                {{ $c->name }} — {{ $c->customer_code ?? $c->id }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text muted">عند تفعيل “جميع العملاء” سيتم تجاهل هذه
                                                        القائمة.</div>
                                                </div>
                                            </div>

                                            <div id="scope_coupons"
                                                class="{{ old('scope', $offer->scope) === 'coupons' ? '' : 'd-none' }}">
                                                <label class="form-label">أكواد الكوبونات</label>
                                                <input type="text" class="form-control" id="coupon_inline"
                                                    name="coupon_inline"
                                                    value="{{ old('coupon_inline', is_array($offer->coupon_codes) ? implode(', ', $offer->coupon_codes) : '') }}"
                                                    placeholder="ABC123, XYZ50">
                                                <div class="form-text muted">اكتب الأكواد مفصولة بفواصل؛ سنفككها قبل الحفظ.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="block">
                                    <div class="row g-3 align-items-end">
                                        <div class="col-md-3">
                                            <label class="form-label">تاريخ البداية (ميلادي)</label>
                                            <input type="date" class="form-control" name="start_date_g"
                                                id="start_g"
                                                value="{{ old('start_date_g', optional($offer->start_date_g)->format('Y-m-d')) }}"
                                                required>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">تاريخ النهاية (ميلادي)</label>
                                            <input type="date" class="form-control" name="end_date_g" id="end_g"
                                                value="{{ old('end_date_g', optional($offer->end_date_g)->format('Y-m-d')) }}"
                                                required>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">تاريخ البداية (هجري)</label>
                                            <input type="text" class="form-control" name="start_date_h"
                                                id="start_h" value="{{ old('start_date_h', $offer->start_date_h) }}"
                                                readonly>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">تاريخ النهاية (هجري)</label>
                                            <input type="text" class="form-control" name="end_date_h" id="end_h"
                                                value="{{ old('end_date_h', $offer->end_date_h) }}" readonly>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">المدّة (أيام)</label>
                                            <input type="text" class="form-control" id="duration_days"
                                                value="{{ $offer->duration_days }}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="shell side-panel">
                        <div class="block">
                            <label class="form-label">الخصم العام</label>
                            <div class="input-group">
                                @php $dt = old('discount_type', $offer->discount_type); @endphp
                                <select class="form-select" name="discount_type" id="g_discount_type"
                                    style="max-width:110px">
                                    <option value="percent" @selected($dt === 'percent')>%</option>
                                    <option value="amount" @selected($dt === 'amount')>مبلغ</option>
                                </select>
                                <input type="number" step="0.01" min="0" class="form-control"
                                    name="discount_value" id="g_discount_value"
                                    value="{{ old('discount_value', $offer->discount_value) }}">
                            </div>
                            <div class="form-text muted">يُطبّق تلقائيًا على كل الخدمات.</div>
                        </div>

                        <div class="block">
                            <label class="form-label">أيام إضافية (لجميع الخدمات)</label>
                            <input type="number" class="form-control" name="extra_days" id="g_extra_days"
                                min="0" value="{{ old('extra_days', $offer->extra_days) }}">
                        </div>

                        <div class="block">
                            <label class="form-label">عدد أيام الإيقاف</label>
                            <input type="number" class="form-control" id="g_stop_days" min="0"
                                value="{{ old('stop_days', $offer->stop_days ?? '') }}">
                        </div>

                        <div class="block">
                            <label class="form-label">عدد مرات الإيقاف</label>
                            <input type="number" class="form-control" id="g_stop_times" min="0"
                                value="{{ old('stop_times', $offer->stop_times ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="block">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="badge-soft">قائمة الخدمات</span>
                            <div class="d-flex gap-2">
                                <select id="service_select" class="form-select" style="min-width:320px">
                                    <option value="">— اختر خدمة لإضافتها —</option>
                                    @foreach ($services as $s)
                                        <option value="{{ $s->id }}" data-price="{{ $s->price }}"
                                            data-duration-value="{{ $s->duration_value }}"
                                            data-duration-unit="{{ $s->duration_unit }}">
                                            {{ $s->getTranslation('name', app()->getLocale()) }}
                                        </option>
                                    @endforeach
                                </select>
                                <button type="button" class="btn btn-success btn-circle" id="addServiceBtn">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-sm table-bordered table-offer align-middle" id="itemsTable">
                                <thead>
                                    <tr class="text-center">
                                        <th style="width:26px">#</th>
                                        <th>الخدمة</th>
                                        <th>السعر الأساسي</th>
                                        <th>المدة الأساسية</th>
                                        <th>المدة الإضافية</th>
                                        <th>السعر النهائي</th>
                                        <th>المدة النهائية</th>
                                        <th style="width:54px">حذف</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $locale = app()->getLocale(); @endphp
                                    @foreach ($offer->items as $i => $it)
                                        @php
                                            $n =
                                                $it->service?->getTranslation('name', $locale) ??
                                                ($it->service_name[$locale] ?? ($it->service_name['en'] ?? ''));
                                        @endphp
                                        <tr data-id="{{ $it->service_id }}" data-service-id="{{ $it->service_id }}"
                                            data-base-price="{{ (float) $it->base_price }}"
                                            data-base-duration-value="{{ (int) $it->base_duration_value }}"
                                            data-base-duration-unit="{{ $it->base_duration_unit }}"
                                            data-stop-days="{{ (int) ($it->stop_days ?? 0) }}"
                                            data-stop-times="{{ (int) ($it->stop_times ?? 0) }}">
                                            <td class="text-center">{{ $i + 1 }}</td>
                                            <td>
                                                <div class="svc-name fw-bold" title="{{ $n }}">
                                                    {{ $n }}</div>
                                                <div class="svc-meta text-muted">
                                                    النوع/المدة الأساسية:
                                                    {{ $it->base_duration_value }} {{ $it->base_duration_unit }}
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span
                                                    class="base-price">{{ number_format($it->base_price, 2, '.', '') }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="base-dur">{{ $it->base_duration_value }}</span>
                                                <span
                                                    class="badge bg-dark ms-1 base-unit">{{ $it->base_duration_unit }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span
                                                    class="extra-dur">{{ old('extra_days', $offer->extra_days) ?: 0 }}</span>
                                                <span class="badge bg-info ms-1">days</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="final-price fw-bold">0.00</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="final-dur fw-bold">0</span>
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-danger remove-row">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div id="itemsHidden"></div>
                        <div id="couponsHidden"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment-hijri@2.2.0/moment-hijri.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const scopeEl = document.getElementById('scope');

            const scopeMembers = document.getElementById('scope_members');
            const allMembers = document.getElementById('all_members');

            const scopeCustomers = document.getElementById('scope_customers');
            const allCustomers = document.getElementById('all_customers');
            const customersBox = document.getElementById('customers_box');
            const customersSelect = customersBox ? customersBox.querySelector('select') : null;

            const scopeCoupons = document.getElementById('scope_coupons');

            function applyBoxState(boxEl, selectEl, disabled) {
                if (!boxEl) return;
                boxEl.classList.toggle('disabled-wrap', disabled);
                if (selectEl) selectEl.disabled = disabled;
            }

            function switchScope(initial = false) {
                const v = scopeEl.value;

                scopeMembers?.classList.add('d-none');
                scopeCustomers?.classList.add('d-none');
                scopeCoupons?.classList.add('d-none');

                if (v === 'members') {
                    scopeMembers?.classList.remove('d-none');
                }

                if (v === 'customers') {
                    scopeCustomers?.classList.remove('d-none');
                    const checked = initial ?
                        (scopeCustomers?.dataset?.allCustomers === '1' || !!allCustomers?.checked) :
                        !!allCustomers?.checked;
                    if (allCustomers) allCustomers.checked = checked;
                    applyBoxState(customersBox, customersSelect, checked);
                }

                if (v === 'coupons') {
                    scopeCoupons?.classList.remove('d-none');
                }
            }

            scopeEl?.addEventListener('change', () => switchScope(false));
            allCustomers?.addEventListener('change', function() {
                applyBoxState(customersBox, customersSelect, this.checked);
            });

            switchScope(true);

            function gToH(iso) {
                if (!iso) return '';
                try {
                    const m = moment(iso, 'YYYY-MM-DD', true);
                    if (!m.isValid() || typeof m.iYear !== 'function') {
                        return convertWithIntl(iso);
                    }
                    return m.iFormat('iYYYY-iMM-iDD');
                } catch (err) {
                    return convertWithIntl(iso);
                }
            }

            function convertWithIntl(iso) {
                try {
                    const dt = new Date(iso + 'T00:00:00');
                    const fmt = new Intl.DateTimeFormat('en-u-ca-islamic', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit'
                    });
                    const parts = fmt.formatToParts(dt);
                    const y = parts.find(p => p.type === 'year').value;
                    const m = parts.find(p => p.type === 'month').value;
                    const d = parts.find(p => p.type === 'day').value;
                    return `${y}-${m}-${d}`;
                } catch {
                    return '';
                }
            }

            function refreshDates() {
                const s = document.getElementById('start_g')?.value || '';
                const e = document.getElementById('end_g')?.value || '';

                document.getElementById('start_h').value = gToH(s);
                document.getElementById('end_h').value = gToH(e);

                if (s && e) {
                    const diff = moment(e).diff(moment(s), 'days') + 1;
                    document.getElementById('duration_days').value = diff > 0 ? diff : 0;
                } else {
                    document.getElementById('duration_days').value = '';
                }
            }

            document.getElementById('start_g')?.addEventListener('change', function() {
                const start = this.value;
                if (start) document.getElementById('end_g')?.setAttribute('min', start);
                refreshDates();
            });

            document.getElementById('end_g')?.addEventListener('change', refreshDates);
            refreshDates();

            const tbody = document.querySelector('#itemsTable tbody');
            const hiddenBox = document.getElementById('itemsHidden');
            const chosen = new Set();

            tbody.querySelectorAll('tr').forEach(tr => {
                chosen.add(String(tr.dataset.id));
            });

            function unitText(unit) {
                switch (unit) {
                    case 'days':
                        return 'يوم';
                    case 'months':
                        return 'شهر';
                    case 'years':
                        return 'سنة';
                    default:
                        return unit;
                }
            }

            function durationToDays(value, unit) {
                value = parseInt(value) || 0;
                switch (unit) {
                    case 'days':
                        return value;
                    case 'months':
                        return value * 30;
                    case 'years':
                        return value * 365;
                    default:
                        return value;
                }
            }

            function finalDurationLabel(baseValue, baseUnit, extraDays) {
                baseValue = parseInt(baseValue) || 0;
                extraDays = parseInt(extraDays) || 0;

                if (extraDays <= 0) {
                    return `${baseValue} ${unitText(baseUnit)}`;
                }

                return `${baseValue} ${unitText(baseUnit)} و ${extraDays} يوم`;
            }

            function escapeHtml(s) {
                if (!s) return '';
                return String(s)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function buildRow(svc, index, stopDays = 0, stopTimes = 0) {
                return `
                    <tr data-id="${svc.id}"
                        data-service-id="${svc.id}"
                        data-base-price="${svc.price}"
                        data-base-duration-value="${svc.duration_value}"
                        data-base-duration-unit="${svc.duration_unit}"
                        data-stop-days="${stopDays}"
                        data-stop-times="${stopTimes}">
                        <td class="text-center">${index}</td>
                        <td>
                            <div class="svc-name fw-bold">${escapeHtml(svc.name)}</div>
                            <div class="svc-meta text-muted">
                                النوع/المدة الأساسية: ${svc.duration_value} ${svc.duration_unit}
                            </div>
                        </td>
                        <td class="text-center"><span class="base-price">${Number(svc.price).toFixed(2)}</span></td>
                        <td class="text-center">
                            <span class="base-dur">${svc.duration_value}</span>
                            <span class="badge bg-dark ms-1 base-unit">${svc.duration_unit}</span>
                        </td>
                        <td class="text-center">
                            <span class="extra-dur">0</span>
                            <span class="badge bg-info ms-1">days</span>
                        </td>
                        <td class="text-center"><span class="final-price fw-bold">0.00</span></td>
                        <td class="text-center"><span class="final-dur fw-bold">0</span></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-danger remove-row">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
            }

            function recalcRow(tr) {
                const price = parseFloat(tr.dataset.basePrice || tr.querySelector('.base-price')?.textContent ||
                    0) || 0;
                const baseValue = parseInt(tr.dataset.baseDurationValue || tr.querySelector('.base-dur')
                    ?.textContent || 0) || 0;
                const baseUnit = tr.dataset.baseDurationUnit || tr.querySelector('.base-unit')?.textContent ||
                    'days';

                const gType = document.getElementById('g_discount_type').value;
                const gVal = parseFloat(document.getElementById('g_discount_value').value) || 0;
                const gExt = parseInt(document.getElementById('g_extra_days').value) || 0;

                let final = price;
                if (gType === 'percent') {
                    final = Math.max(0, price - price * (gVal / 100));
                } else {
                    final = Math.max(0, price - gVal);
                }

                const finalDays = durationToDays(baseValue, baseUnit) + (isNaN(gExt) ? 0 : gExt);

                tr.querySelector('.final-price').textContent = final.toFixed(2);
                tr.querySelector('.extra-dur').textContent = isNaN(gExt) ? 0 : gExt;
                tr.querySelector('.final-dur').textContent = finalDurationLabel(baseValue, baseUnit, gExt);
            }

            function recalcAll() {
                tbody.querySelectorAll('tr').forEach(recalcRow);
                rebuildHiddenInputs();
            }

            function reindex() {
                let i = 1;
                tbody.querySelectorAll('tr').forEach(tr => {
                    tr.children[0].textContent = i++;
                });
                recalcAll();
            }

            function rebuildHiddenInputs() {
                hiddenBox.innerHTML = '';

                const gType = document.getElementById('g_discount_type').value;
                const gVal = parseFloat(document.getElementById('g_discount_value').value) || 0;
                const gExt = parseInt(document.getElementById('g_extra_days').value) || 0;

                tbody.querySelectorAll('tr').forEach((tr, index) => {
                    const serviceId = tr.dataset.serviceId;
                    const stopDays = parseInt(tr.dataset.stopDays || 0) || 0;
                    const stopTimes = parseInt(tr.dataset.stopTimes || 0) || 0;

                    hiddenBox.insertAdjacentHTML('beforeend', `
                        <input type="hidden" name="items[${index}][service_id]" value="${serviceId}">
                        <input type="hidden" name="items[${index}][stop_days]" value="${stopDays}">
                        <input type="hidden" name="items[${index}][stop_times]" value="${stopTimes}">
                    `);
                });
            }

            ['g_discount_type', 'g_discount_value', 'g_extra_days'].forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                el.addEventListener('input', recalcAll);
                el.addEventListener('change', recalcAll);
            });

            recalcAll();

            tbody.addEventListener('click', e => {
                const btn = e.target.closest('.remove-row');
                if (!btn) return;

                const tr = btn.closest('tr');
                chosen.delete(String(tr.dataset.id));
                tr.remove();
                reindex();
            });

            document.getElementById('addServiceBtn').addEventListener('click', () => {
                const sel = document.getElementById('service_select');
                if (!sel.value) return;

                if (chosen.has(String(sel.value))) {
                    return (window.toastr ? toastr.info('تمت إضافة هذه الخدمة مسبقًا') : alert(
                        'تمت إضافتها مسبقًا'));
                }

                const option = sel.options[sel.selectedIndex];
                const svc = {
                    id: option.value,
                    name: option.text.trim(),
                    price: parseFloat(option.dataset.price || 0) || 0,
                    duration_value: parseInt(option.dataset.durationValue || 0) || 0,
                    duration_unit: option.dataset.durationUnit || 'days'
                };

                const stopDays = parseInt(document.getElementById('g_stop_days')?.value || 0) || 0;
                const stopTimes = parseInt(document.getElementById('g_stop_times')?.value || 0) || 0;

                tbody.insertAdjacentHTML('beforeend', buildRow(svc, tbody.querySelectorAll('tr').length + 1,
                    stopDays, stopTimes));
                chosen.add(String(svc.id));
                recalcAll();
                sel.value = '';
            });

            document.getElementById('offerForm').addEventListener('submit', function(e) {
                const itemsCount = tbody.querySelectorAll('tr').length;
                const startDate = document.getElementById('start_g')?.value;
                const endDate = document.getElementById('end_g')?.value;
                const scope = document.getElementById('scope')?.value;
                const couponInline = document.getElementById('coupon_inline')?.value?.trim();

                if (itemsCount === 0) {
                    e.preventDefault();
                    return alert('أضف خدمة واحدة على الأقل.');
                }

                if (!startDate || !endDate) {
                    e.preventDefault();
                    return alert('أدخل تاريخ البداية والنهاية.');
                }

                if (moment(endDate).isBefore(moment(startDate))) {
                    e.preventDefault();
                    return alert('تاريخ النهاية لا يمكن أن يسبق البداية.');
                }

                if (scope === 'coupons' && !couponInline) {
                    e.preventDefault();
                    return alert('أدخل كوبون واحد على الأقل.');
                }

                rebuildHiddenInputs();
            });
        });
    </script>
@endsection