@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 id="itemsHidden"></div>
            <div id="couponsHidden"></div>

            <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-9">
                    <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-4">
                                <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-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"
                                                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))>
                                                    <label class="form-check-label" for="all_members">استهداف جميع
                                                        الأعضاء</label>
                                                </div>
                                                <div id="members_box"
                                                    class="{{ is_null($offer->target_member_ids) ? 'disabled-wrap' : '' }}">
                                                    <label class="form-label">تخصيص للأعضاء</label>
                                                    <select class="form-select" name="target_member_ids[]" multiple>
                                                        @foreach ($members as $m)
                                                            <option value="{{ $m->id }}"
                                                                @selected(in_array($m->id, old('target_member_ids', $offer->target_member_ids ?? [])))>
                                                                {{ $m->name }} — {{ $m->member_code }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text muted">عند تفعيل “جميع الأعضاء” سيتم تجاهل هذه
                                                        القائمة.</div>
                                                </div>
                                            </div>

                                            <div id="scope_customers"
                                                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))>
                                                    <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>
                                                        @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"
                                                    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', $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', $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 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>
                                                @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 }}">
                                                        <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>
                                                            <input type="hidden" class="svc-id"
                                                                value="{{ $it->service_id }}">
                                                        </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">{{ $it->base_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">{{ $it->base_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>
                                                @endforeach
                                            </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">
                                @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>
                </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>
        // تبديل النطاق
        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) {
            const t = document.getElementById(toggleId),
                b = document.getElementById(boxId);
            const apply = () => b.classList.toggle('disabled-wrap', t.checked);
            t?.addEventListener('change', apply);
            apply();
        }
        lockBox('all_members', 'members_box');
        lockBox('all_customers', 'customers_box');

        // تواريخ: ميلادي → هجري + مدة
        function gToH(iso) {
            if (!iso) return '';
            if (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 = Object.fromEntries(fmt.formatToParts(dt).map(x => [x.type, x.value]));
                return `${p.year}-${p.month}-${p.day}`;
            } catch (e) {
                return '';
            }
        }

        function refreshDates() {
            const s = document.getElementById('start_g').value,
                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(Array.from(tbody.querySelectorAll('tr')).map(tr => tr.dataset.id));

        function rowTpl(idx, svc) {
            return `<tr data-id="${svc.id}">
      <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 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);
            tr.querySelector('.final-price').textContent = final.toFixed(2);
            tr.querySelector('.final-dur').textContent = dur + (isNaN(gExt) ? 0 : gExt);
        }

        function recalcAll() {
            tbody.querySelectorAll('tr').forEach(recalcRow);
        }
        ['g_discount_type', 'g_discount_value', 'g_extra_days'].forEach(id => {
            document.getElementById(id).addEventListener('input', recalcAll);
            document.getElementById(id).addEventListener('change', recalcAll);
        });
        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', (e) => {
            const rows = [...tbody.querySelectorAll('tr')];
            if (rows.length === 0) {
                e.preventDefault();
                alert('يجب إضافة خدمة واحدة على الأقل.');
                return;
            }
            const box = document.getElementById('itemsHidden');
            box.innerHTML = '';
            rows.forEach((tr, i) => {
                const sid = parseInt(tr.querySelector('.svc-id').value);
                box.insertAdjacentHTML('beforeend',
                    `<input type="hidden" name="items[${i}][service_id]" value="${sid}">`);
            });
            const inline = document.getElementById('coupon_inline')?.value || '';
            const coupons = document.getElementById('couponsHidden');
            coupons.innerHTML = '';
            if (inline) {
                inline.split(',').map(s => s.trim()).filter(Boolean).forEach(code => {
                    coupons.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="coupon_codes[]" value="${code}">`);
                });
            }
        });
    </script>
@endsection