{{-- resources/views/admin/offers/create.blade.php --}}
@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: .8
        }

        .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.store') }}" method="POST" id="offerForm">
            @csrf

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="mb-0">إضافة عرض</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-9">
                    <div class="shell">
                        <div class="row g-3">

                            <div class="col-md-3">
                                <div class="block">
                                    <label class="form-label">رقم العرض</label>
                                    <input type="text" class="form-control" value="{{ $nextNo }}" readonly>
                                </div>
                            </div>


                            <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" 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" required>
                                </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">الأعضاء</option>
                                                <option value="customers">العملاء</option>
                                                <option value="coupons">كوبونات</option>
                                            </select>
                                        </div>

                                        <div class="col-md-9">
                                            <div id="scope_members">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="all_members"
                                                        name="all_members" value="1">
                                                    <label class="form-check-label" for="all_members">استهداف جميع
                                                        الأعضاء</label>
                                                </div>
                                                <div id="members_box">
                                                    <label class="form-label">تخصيص للأعضاء</label>
                                                    <select class="form-select" id="members_select"
                                                        name="target_member_ids[]" multiple>
                                                        @foreach ($members as $m)
                                                            <option value="{{ $m->id }}">{{ $m->name }} —
                                                                {{ $m->member_code }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text muted">عند تفعيل “جميع الأعضاء” سيتم تجاهل هذه
                                                        القائمة.</div>
                                                </div>
                                            </div>

                                            <div id="scope_customers" class="d-none">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="all_customers"
                                                        name="all_customers" value="1">
                                                    <label class="form-check-label" for="all_customers">استهداف جميع
                                                        العملاء</label>
                                                </div>
                                                <div id="customers_box">
                                                    <label class="form-label">تخصيص للعملاء</label>
                                                    <select class="form-select" id="customers_select"
                                                        name="target_customer_ids[]" multiple>
                                                        @foreach ($customers as $c)
                                                            <option value="{{ $c->id }}">{{ $c->name }} —
                                                                {{ $c->customer_code ?? $c->id }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text muted">عند تفعيل “جميع العملاء” سيتم تجاهل هذه
                                                        القائمة.</div>
                                                </div>
                                            </div>

                                            <div id="scope_coupons" class="d-none">
                                                <label class="form-label">أكواد الكوبونات</label>
                                                <input type="text" class="form-control" id="coupon_inline"
                                                    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"
                                                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"
                                                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" 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"
                                                readonly>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">المدّة (أيام)</label>
                                            <input type="text" class="form-control" id="duration_days" readonly>
                                        </div>
                                    </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 }}">
                                                        {{ $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 style="width:54px">حذف</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- يمين --}}
                <div class="col-lg-3">
                    <div class="shell side-panel">
                        <div class="block">
                            <label class="form-label">الخصم العام</label>
                            <div class="input-group">
                                <select class="form-select" name="discount_type" id="g_discount_type"
                                    style="max-width:110px">
                                    <option value="percent">%</option>
                                    <option value="amount">مبلغ</option>
                                </select>
                                <input type="number" step="0.01" min="0" class="form-control"
                                    name="discount_value" id="g_discount_value" value="0">
                            </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="0">
                        </div>
                    </div>
                </div>
            </div>

            {{-- مخازن خفية --}}
            <div id="itemsHidden"></div>
            <div id="couponsHidden"></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>
        // ===== تبديل النطاق =====
        function switchScope() {
            const v = document.getElementById('scope').value;
            document.getElementById('scope_members').classList.toggle('d-none', v !== 'members');
            document.getElementById('scope_customers').classList.toggle('d-none', v !== 'customers');
            document.getElementById('scope_coupons').classList.toggle('d-none', v !== 'coupons');
        }
        document.getElementById('scope').addEventListener('change', switchScope);
        switchScope();

        // قفل/فتح صناديق التخصيص + تعطيل العناصر الداخلية فعليًا
        function lockBox(toggleId, boxId, selectId) {
            const t = document.getElementById(toggleId),
                b = document.getElementById(boxId),
                s = document.getElementById(selectId);
            const apply = () => {
                const on = t.checked;
                b.classList.toggle('disabled-wrap', on);
                if (s) s.disabled = on;
            };
            t?.addEventListener('change', apply);
            apply();
        }
        lockBox('all_members', 'members_box', 'members_select');
        lockBox('all_customers', 'customers_box', 'customers_select');

        // ===== التواريخ (ميلادي ← هجري + مدة)
        function gToH(iso) {
            if (!iso) return '';
            if (moment.fn && typeof moment.fn.iYear === 'function') {
                const m = moment(iso, 'YYYY-MM-DD', true);
                return m.isValid() ? m.format('iYYYY-iMM-iDD') : '';
            }
            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 p = fmt.formatToParts(dt).reduce((a, c) => {
                    a[c.type] = c.value;
                    return a;
                }, {});
                return `${p.year}-${p.month}-${p.day}`;
            } 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 d = moment(e, 'YYYY-MM-DD', true).diff(moment(s, 'YYYY-MM-DD', true), 'days') + 1;
                document.getElementById('duration_days').value = d > 0 ? d : 0;
            } else {
                document.getElementById('duration_days').value = '';
            }
        }
        document.getElementById('start_g').addEventListener('change', refreshDates);
        document.getElementById('end_g').addEventListener('change', refreshDates);
        // حساب أولي عند الفتح
        refreshDates();

        // ===== الخدمات
        const tbody = document.querySelector('#itemsTable tbody');
        const chosen = new Set();

        function rowTpl(idx, svc) {
            // نزرع وحدة المدة في data-unit
            return `
      <tr data-id="${svc.id}" data-unit="${svc.duration_unit}">
        <td class="text-center">${idx}</td>
        <td>
          <div class="svc-name fw-bold" title="${svc.name}">${svc.name}</div>
          <div class="svc-meta text-muted">المدة الأساسية: ${svc.duration_value} ${svc.duration_unit}</div>
          <input type="hidden" class="svc-id" value="${svc.id}">
        </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">${svc.duration_unit}</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>
          <span class="badge bg-secondary ms-1">${svc.duration_unit}</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.querySelector('.base-price').textContent) || 0;
            const dur = parseInt(tr.querySelector('.base-dur').textContent) || 0;
            const unit = tr.dataset.unit || '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 finalDur = unit === 'days' ? dur + (isNaN(gExt) ? 0 : gExt) : dur;

            tr.querySelector('.final-price').textContent = final.toFixed(2);
            tr.querySelector('.final-dur').textContent = finalDur;
        }

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

        document.getElementById('g_discount_type').addEventListener('change', recalcAll);
        document.getElementById('g_discount_value').addEventListener('input', recalcAll);
        document.getElementById('g_extra_days').addEventListener('input', recalcAll);

        tbody.addEventListener('click', e => {
            if (e.target.closest('.remove-row')) {
                const tr = e.target.closest('tr');
                chosen.delete(tr.dataset.id);
                tr.remove();
                reindex();
            }
        });

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

        document.getElementById('addServiceBtn').addEventListener('click', async () => {
            const sel = document.getElementById('service_select');
            if (!sel.value) return;
            if (chosen.has(sel.value)) {
                return (window.toastr ? toastr.info('تمت إضافة هذه الخدمة مسبقًا') : alert('الخدمة مكررة'));
            }
            const res = await fetch(`{{ route('offers.service-info', 0) }}`.replace('/0', '/' + sel.value));
            const j = await res.json();
            const svc = {
                id: j.id,
                name: j.name["{{ app()->getLocale() }}"] ?? (j.name.en ?? Object.values(j.name)[0] ?? ''),
                price: j.price,
                duration_value: j.duration_value,
                duration_unit: j.duration_unit
            };
            chosen.add(String(svc.id));
            tbody.insertAdjacentHTML('beforeend', rowTpl(tbody.children.length + 1, svc));
            recalcAll();
            sel.value = '';
        });

        // ===== تجهيز الإرسال (مرّة واحدة فقط) =====
        document.getElementById('offerForm').addEventListener('submit', function(e) {
            const rows = Array.from(tbody.querySelectorAll('tr'));
            if (rows.length === 0) {
                e.preventDefault();
                alert('يجب إضافة خدمة واحدة على الأقل داخل قائمة العروض.');
                return;
            }
            // عناصر الخدمات
            const box = document.getElementById('itemsHidden');
            box.innerHTML = '';
            rows.forEach((tr, i) => {
                const svcId = parseInt(tr.querySelector('.svc-id').value);
                box.insertAdjacentHTML('beforeend',
                    `<input type="hidden" name="items[${i}][service_id]" value="${svcId}">`);
            });
            // كوبونات (لو موجودة)
            const couponsBox = document.getElementById('couponsHidden');
            couponsBox.innerHTML = '';
            const inline = document.getElementById('coupon_inline')?.value || '';
            if (inline) {
                inline.split(',').map(s => s.trim()).filter(Boolean).forEach(code => {
                    couponsBox.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="coupon_codes[]" value="${code}">`);
                });
            }
        });
    </script>
@endsection