@extends('restaurant.layout')
@section('title', 'شاشة كاشير المطعم')
@section('main_class', 'full')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/restaurant/menu-picker.css') }}?v=2">
<style>
    .pos{display:grid;grid-template-columns:1fr 520px;height:calc(100vh - 57px - 52px)}
    @media(max-width:1100px){.pos{grid-template-columns:1fr 460px}}
    @media(max-width:960px){.pos{grid-template-columns:1fr;height:auto}body{overflow:auto}}
    .types{display:flex;gap:6px;padding:12px 12px 6px}
    .types button{flex:1;padding:10px 6px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:700;font-size:13.5px}
    .types button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
    .cust-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .cust-info{display:flex;align-items:center;gap:10px;min-width:0}
    .cust-icon{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
    .cust-text{display:flex;flex-direction:column;min-width:0}
    .cust-main{display:flex;align-items:center;gap:8px;font-size:14px}
    .cust-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
    .cust-phone{font-size:11.5px;color:var(--muted);direction:ltr;text-align:right}
    .cust-actions{display:flex;gap:6px;flex-shrink:0}
    .cust-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;padding-bottom:8px}
    .cust-tabs button{padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:700;font-size:13px}
    .cust-tabs button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
    .cust-search-box{position:relative;margin-bottom:12px}
    .cust-list{max-height:280px;overflow-y:auto;display:grid;gap:6px}
    .cust-card{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;transition:.15s}
    .cust-card:hover{border-color:var(--primary);background:var(--primary-soft)}
    .cust-card-name{font-weight:700;font-size:13.5px}
    .cust-card-sub{font-size:11px;color:var(--muted);display:flex;gap:10px;margin-top:2px}
    .extra{padding:4px 12px 8px;display:grid;gap:8px}
    .tbl-quick{display:flex;gap:5px;align-items:center}
    .tbl-quick button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:700}
    .tbl-quick button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
    .pays{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 12px}
    .pays button{padding:9px 2px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:700;font-size:12px}
    .pays button.on{background:var(--green);border-color:var(--green);color:#fff}
    .quick{display:flex;gap:5px;flex-wrap:wrap;padding:0 12px 6px;align-items:center;font-size:12px}
    .quick button{padding:3px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:700}
    .payrow{display:flex;gap:8px;padding:4px 12px 12px}
    .payrow .btn{flex:1;font-size:15px;padding:12px}
</style>
@endpush

@section('content')
<div class="pos-bar no-print">
    <div>
        <div class="ttl">شاشة كاشير المطعم <span class="live">مباشر</span></div>
        <div class="who">الكاشير: {{ auth()->user()->name }} · {{ $branchName }}</div>
    </div>
    <div class="search"><input id="q" class="inp" placeholder="🔍 ابحث عن وجبة بالاسم أو القسم..." autocomplete="off"></div>
    <button class="btn ghost sm" onclick="POS.recent()">🧾 آخر الطلبات <span id="recent-n"></span></button>
    <a class="btn ghost sm" href="{{ route('restaurant.display') }}" target="_blank">📺 شاشة العملاء</a>
    <a class="btn ghost sm" href="{{ route('restaurant.kitchen') }}" target="_blank">👨‍🍳 المطبخ</a>
    <button class="btn ghost sm" onclick="RS.fullscreen()">⛶</button>
    @if($shift)
        <a class="btn red sm" href="{{ route('restaurant.shifts.show', $shift) }}">🔒 تقفيل وردية (#{{ $shift->shift_number }})</a>
    @endif
</div>

<div class="pos">
    {{-- المنيو --}}
    <section class="menu">
        <div class="cats" id="cats"></div>
        <div class="meals" id="meals"></div>
    </section>

    {{-- السلة --}}
    <aside class="cart">
        {{-- شريط وضع تعديل طلب قائم --}}
        <div id="edit-banner" style="display:none;background:#fef3c7;border:1.5px dashed #f59e0b;padding:10px 14px;border-radius:10px;margin-bottom:12px;align-items:center;justify-content:space-between;color:#92400e;">
            <div style="display:flex;align-items:center;gap:8px;">
                <span style="font-size:18px;">✏️</span>
                <div>
                    <div style="font-weight:700;">وضع تعديل الطلب: <span id="edit-order-title">#0</span></div>
                    <div class="small" style="color:#b45309;">يمكنك تعديل الأصناف والطاولة والعميل ثم حفظ التعديلات</div>
                </div>
            </div>
            <button type="button" class="btn sm red" onclick="POS.cancelEdit()" title="إلغاء وضع التعديل والبدء بطلب جديد">إلغاء التعديل ✕</button>
        </div>

        <div class="types" id="types">
            <button data-t="dine_in" class="on">🍽️ صالة / محلي</button>
            <button data-t="takeaway">🥡 سفري / تيك أواي</button>
            <button data-t="delivery">🛵 توصيل / دليفري</button>
        </div>

        {{-- شريط اختيار العميل --}}
        <div class="cust-bar">
            <div class="cust-info">
                <div class="cust-icon">👤</div>
                <div class="cust-text">
                    <div class="cust-main">
                        <span id="c-badge" class="badge gray">نقدي / عام</span>
                        <strong id="c-name-display">عميل عام</strong>
                    </div>
                    <div id="c-phone-display" class="cust-phone text-muted" style="display:none"></div>
                </div>
            </div>
            <div class="cust-actions">
                <button type="button" class="btn sm soft" onclick="POS.openCustomerModal()" title="اختيار أو بحث عن عميل">
                    🔍 اختيار عميل
                </button>
                <button type="button" class="btn sm ghost text-red" id="btn-clear-cust" onclick="POS.clearCustomer()" style="display:none" title="إلغاء التحديد والعودة للعميل العام">
                    ✕
                </button>
            </div>
        </div>

        <div class="extra">
            <div id="box-dine">
                <label>رقم الطاولة</label>
                <div class="tbl-quick">
                    <input id="table" class="inp" placeholder="مثال: 5" style="max-width:110px">
                    <span id="tquick" style="display:flex;gap:5px"></span>
                </div>
            </div>
            <div id="box-delivery" style="display:none;gap:8px;grid-template-columns:1fr 1fr">
                <div><label>جوال العميل *</label><input id="c-phone" class="inp" inputmode="tel"></div>
                <div><label>اسم العميل</label><input id="c-name" class="inp"></div>
                <div style="grid-column:1/3"><label>عنوان التوصيل *</label><input id="c-addr" class="inp"></div>
                <div><label>كابتن التوصيل</label><select id="driver" class="inp"><option value="">— بدون —</option></select></div>
                <div><label>رسوم التوصيل</label><input id="fee" type="number" min="0" step="0.5" class="inp" value="0"></div>
            </div>
            <div id="box-credit" style="display:none;gap:8px;grid-template-columns:1fr 1fr">
                <div><label>اسم العميل (آجل) *</label><input id="k-name" class="inp"></div>
                <div><label>جوال العميل</label><input id="k-phone" class="inp" inputmode="tel"></div>
            </div>
        </div>

        <div class="lines" id="lines"></div>

        <div class="tot">
            <div class="row"><span>مجموع الوجبات:</span><b class="num" id="t-sub">0.00</b></div>
            <div class="row"><span>الخصم:</span><input id="disc" type="number" min="0" step="0.5" class="inp" value="0"></div>
            <div class="row"><span>ضريبة القيمة المضافة (<span id="vat-rate"></span>%):</span><b class="num" id="t-vat">0.00</b></div>
            <div class="row" id="row-fee" style="display:none"><span>رسوم التوصيل:</span><b class="num" id="t-fee">0.00</b></div>
        </div>
        <div class="grand"><div><b>الإجمالي النهائي</b><div class="small muted">شامل الضريبة</div></div><div class="v"><span class="num" id="t-total">0.00</span> <small>ر.س</small></div></div>

        <div class="pays" id="pays">
            <button data-p="cash" class="on">💵 كاش</button>
            <button data-p="card">💳 مدى/شبكة</button>
            <button data-p="split">✂️ مقسم</button>
            <button data-p="credit">⏳ آجل</button>
        </div>

        <div id="pay-cash" class="quick">
            <span>المستلم:</span>
            <input id="recv" type="number" min="0" step="0.5" class="inp" style="width:90px;padding:4px 8px" placeholder="0">
            <button data-q="exact">بالضبط</button><button data-q="50">50</button><button data-q="100">100</button><button data-q="200">200</button><button data-q="500">500</button>
            <span class="fw">الباقي: <span class="num text-green" id="change">0.00</span></span>
        </div>
        <div id="pay-split" class="quick" style="display:none">
            <span>المدفوع بالشبكة:</span>
            <input id="card-amt" type="number" min="0" step="0.5" class="inp" style="width:100px;padding:4px 8px">
            <span class="fw">الباقي كاش: <span class="num" id="split-cash">0.00</span></span>
        </div>

        <div class="payrow">
            <button class="btn ghost" onclick="POS.clear()">مسح</button>
            <button class="btn green" id="pay-btn" onclick="POS.submit()" disabled>⚡ دفع وحفظ الفاتورة <span class="num" id="pay-amt">0.00</span> ر.س</button>
        </div>
    </aside>
</div>

{{-- اختيار الحجم --}}
<div class="modal-bg" id="size-modal"><div class="modal">
    <h3 id="size-title">اختر الحجم</h3>
    <div id="size-list"></div>
    <div class="foot"><button class="btn ghost" onclick="RS.closeModal('size-modal')">إلغاء</button></div>
</div></div>

{{-- آخر الطلبات --}}
<div class="modal-bg" id="recent-modal"><div class="modal" style="max-width:760px">
    <h3>آخر طلبات الوردية</h3>
    <div class="tbl-wrap"><table class="tbl"><thead><tr><th>#</th><th>الوقت</th><th>النوع</th><th>الدفع</th><th>الإجمالي</th><th>الحالة</th><th style="text-align:center">إجراءات</th></tr></thead><tbody id="recent-body"></tbody></table></div>
    <div class="foot"><button class="btn ghost" onclick="RS.closeModal('recent-modal')">إغلاق</button><a class="btn soft" href="{{ route('restaurant.orders.index') }}">كل الطلبات والمرتجعات</a></div>
</div></div>

{{-- نافذة تسجيل مرتجع سريع من الكاشير --}}
<div class="modal-bg" id="pos-refund-modal">
    <div class="modal" style="max-width:480px">
        <h3 style="color:#dc2626;">↩️ تسجيل مرتجع للطلب <span id="pos-rf-no"></span></h3>
        <p class="muted">سيتم إرجاع كامل قيمة الطلب: <b class="num text-red" id="pos-rf-amt">0.00</b> ر.س وتُسجَّل على ورديتك الحالية.</p>
        <form id="pos-rf-form" onsubmit="event.preventDefault(); POS.submitRefund();">
            <div class="form-row">
                <div>
                    <label>طريقة رد المبلغ *</label>
                    <select id="pos-rf-method" class="inp" required>
                        <option value="cash">💵 كاش (من الدرج)</option>
                        <option value="card">💳 مدى / شبكة</option>
                        <option value="credit">⏳ تخفيض حساب العميل الآجل</option>
                    </select>
                </div>
                <div>
                    <label>سبب المرتجع (اختياري)</label>
                    <input id="pos-rf-reason" class="inp" maxlength="250" placeholder="مثال: رغبة العميل، تعديل أصناف...">
                </div>
            </div>
            <div class="foot" style="margin-top:16px">
                <button type="submit" class="btn red" id="btn-submit-refund">تأكيد المرتجع</button>
                <button type="button" class="btn ghost" onclick="RS.closeModal('pos-refund-modal')">إلغاء</button>
            </div>
        </form>
    </div>
</div>

{{-- نافذة اختيار أو إضافة عميل --}}
<div class="modal-bg" id="cust-modal">
    <div class="modal" style="max-width:560px">
        <div class="cust-tabs" id="c-tabs">
            <button type="button" class="on" id="tab-btn-search" onclick="POS.switchCustTab('search')">🔍 بحث واختيار عميل</button>
            <button type="button" id="tab-btn-new" onclick="POS.switchCustTab('new')">➕ إضافة عميل جديد</button>
        </div>

        {{-- تبويب البحث --}}
        <div id="c-tab-search">
            <div class="cust-search-box">
                <input id="c-search-inp" class="inp" placeholder="ابحث بالاسم، رقم الجوال، أو الرقم الضريبي..." autocomplete="off">
            </div>
            <div style="margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px">
                <button type="button" class="btn sm ghost" onclick="POS.selectWalkInCustomer()">
                    👤 تعيين كعميل نقدي / عام (الافتراضي)
                </button>
                <span class="small muted" id="c-count-hint"></span>
            </div>
            <div class="cust-list" id="c-list">
                <div class="empty">جاري تحميل العملاء...</div>
            </div>
        </div>

        {{-- تبويب إضافة عميل جديد --}}
        <div id="c-tab-new" style="display:none">
            <form id="c-new-form" onsubmit="event.preventDefault(); POS.submitNewCustomer();">
                <div class="form-row fr2">
                    <div>
                        <label>اسم العميل *</label>
                        <input id="new-c-name" class="inp" required placeholder="مثال: محمد عبدالله">
                    </div>
                    <div>
                        <label>رقم الجوال</label>
                        <input id="new-c-phone" class="inp" inputmode="tel" placeholder="05xxxxxxxx">
                    </div>
                </div>
                <div class="form-row fr2">
                    <div>
                        <label>العنوان / الحي</label>
                        <input id="new-c-addr" class="inp" placeholder="مثال: الرياض - حي الملقا">
                    </div>
                    <div>
                        <label>الرقم الضريبي (اختياري)</label>
                        <input id="new-c-tax" class="inp" placeholder="3xxxxxxxxxxxxxx">
                    </div>
                </div>
                <div>
                    <label>ملاحظات</label>
                    <textarea id="new-c-notes" class="inp" rows="2" placeholder="ملاحظات أو تفضيلات العميل..."></textarea>
                </div>
                <div class="foot" style="margin-top:14px">
                    <button type="submit" class="btn green" id="btn-save-cust">💾 حفظ واختيار العميل</button>
                    <button type="button" class="btn ghost" onclick="POS.switchCustTab('search')">رجوع للبحث</button>
                </div>
            </form>
        </div>

        <div class="foot">
            <button class="btn ghost" onclick="RS.closeModal('cust-modal')">إغلاق</button>
        </div>
    </div>
</div>

{{-- فتح وردية --}}
@unless($shift)
<div class="modal-bg show" id="shift-modal"><div class="modal">
    <h3>🕒 فتح وردية جديدة</h3>
    <p class="muted">لا توجد وردية مفتوحة لك. افتح وردية لتبدأ تسجيل الطلبات.</p>
    <div class="form-row">
        <div><label>الفرع</label>
            <select id="sh-branch" class="inp">
                @foreach($branches as $b)<option value="{{ $b->id }}" @selected($b->id == $myBranch)>{{ $b->name }}</option>@endforeach
            </select>
        </div>
        <div><label>العهدة (النقدية في الدرج عند البداية)</label><input id="sh-cash" type="number" min="0" step="0.5" class="inp" value="0"></div>
    </div>
    <div class="foot"><button class="btn green" onclick="POS.openShift()">فتح الوردية</button><a class="btn ghost" href="{{ route('restaurant.shifts.index') }}">سجل الورديات</a></div>
</div></div>
@endunless
@endsection

@push('scripts')
<script src="{{ asset('assets/restaurant/menu-picker.js') }}?v=1"></script>
<script>
const CFG = @json($config);
const POS = (function () {
    const $ = id => document.getElementById(id);
    const st = {type: 'dine_in', pay: 'cash', busy: false, editingOrderId: null, refundOrderId: null};
    const r2 = n => Math.round((n + 1e-7) * 100) / 100;
    let ready = false;
    let curCust = null;
    let custSearchTimer = null;
    const custStore = new Map();
    const picker = MenuPicker(CFG, {onChange: () => { if (ready) calc(); }});

    function init() {
        $('vat-rate').textContent = CFG.vat;
        $('fee').value = CFG.deliveryFee || 0;
        CFG.drivers.forEach(d => $('driver').insertAdjacentHTML('beforeend', `<option value="${d.id}">${RS.esc(d.name)}</option>`));
        for (let i = 1; i <= 8; i++) $('tquick').insertAdjacentHTML('beforeend', `<button type="button" data-n="${i}">${i}</button>`);
        $('tquick').addEventListener('click', e => { const n = e.target.dataset.n; if (n) { $('table').value = n; markTable(); } });
        $('table').addEventListener('input', markTable);
        $('types').addEventListener('click', e => { if (e.target.dataset.t) setType(e.target.dataset.t); });
        $('pays').addEventListener('click', e => { if (e.target.dataset.p) setPay(e.target.dataset.p); });
        ['disc', 'fee', 'recv', 'card-amt'].forEach(id => $(id).addEventListener('input', calc));
        $('pay-cash').addEventListener('click', e => {
            const q = e.target.dataset.q; if (!q) return;
            $('recv').value = q === 'exact' ? calc().total : q; calc();
        });
        $('c-search-inp').addEventListener('input', e => searchCustomers(e.target.value));
        ready = true; calc();

        // فحص إذا كان المطلوب فتح طلب محدد لتعديله عبر الرابط
        const urlParams = new URLSearchParams(window.location.search);
        const editId = urlParams.get('edit_order_id');
        if (editId) {
            setTimeout(() => startEdit(Number(editId)), 200);
        }
    }

    function markTable() { document.querySelectorAll('#tquick button').forEach(b => b.classList.toggle('on', b.dataset.n === $('table').value.trim())); }

    function setType(t) {
        st.type = t;
        document.querySelectorAll('#types button').forEach(b => b.classList.toggle('on', b.dataset.t === t));
        $('box-dine').style.display = t === 'dine_in' ? '' : 'none';
        $('box-delivery').style.display = t === 'delivery' ? 'grid' : 'none';
        $('row-fee').style.display = t === 'delivery' ? '' : 'none';
        if (t === 'delivery' && curCust) {
            if (curCust.phone && !$('c-phone').value) $('c-phone').value = curCust.phone;
            if (curCust.name && !$('c-name').value) $('c-name').value = curCust.name;
            if (curCust.address && !$('c-addr').value) $('c-addr').value = curCust.address;
        }
        calc();
    }

    function setPay(p) {
        st.pay = p;
        document.querySelectorAll('#pays button').forEach(b => b.classList.toggle('on', b.dataset.p === p));
        $('pay-cash').style.display = (p === 'cash') ? 'flex' : 'none';
        $('pay-split').style.display = (p === 'split') ? 'flex' : 'none';
        $('box-credit').style.display = (p === 'credit') ? 'grid' : 'none';
        if (p === 'credit' && curCust) {
            if (curCust.name && !$('k-name').value) $('k-name').value = curCust.name;
            if (curCust.phone && !$('k-phone').value) $('k-phone').value = curCust.phone;
        }
        calc();
    }

    function calc() {
        const sub = r2(picker.lines().reduce((s, l) => s + l.price * l.qty, 0));
        const disc = Math.min(Math.max(parseFloat($('disc').value) || 0, 0), sub);
        const vat = r2((sub - disc) * CFG.vat / 100);
        const fee = st.type === 'delivery' ? Math.max(parseFloat($('fee').value) || 0, 0) : 0;
        const total = r2(sub - disc + vat + fee);
        $('t-sub').textContent = RS.money(sub); $('t-vat').textContent = RS.money(vat);
        $('t-fee').textContent = RS.money(fee); $('t-total').textContent = RS.money(total); $('pay-amt').textContent = RS.money(total);
        const recv = parseFloat($('recv').value) || 0;
        $('change').textContent = RS.money(Math.max(recv - total, 0));
        const card = Math.min(Math.max(parseFloat($('card-amt').value) || 0, 0), total);
        $('split-cash').textContent = RS.money(total - card);
        $('pay-btn').disabled = !picker.lines().length || st.busy || !CFG.shift;
        return {sub, disc, vat, fee, total};
    }

    function clear() {
        picker.clear(); ['disc', 'recv', 'card-amt', 'table', 'c-phone', 'c-name', 'c-addr', 'k-name', 'k-phone'].forEach(id => $(id).value = '');
        $('disc').value = 0; $('driver').value = ''; markTable(); clearCustomer();
        if (st.editingOrderId) {
            st.editingOrderId = null;
            $('edit-banner').style.display = 'none';
            $('pay-btn').innerHTML = '⚡ دفع وحفظ الفاتورة <span class="num" id="pay-amt">0.00</span> ر.س';
        }
        calc();
    }

    // ================= دوال إدارة العملاء =================
    function openCustomerModal() {
        RS.openModal('cust-modal');
        switchCustTab('search');
        const inp = $('c-search-inp');
        inp.value = '';
        renderCustomerList(CFG.recentCustomers || []);
        setTimeout(() => inp.focus(), 150);
    }

    function switchCustTab(tab) {
        $('tab-btn-search').classList.toggle('on', tab === 'search');
        $('tab-btn-new').classList.toggle('on', tab === 'new');
        $('c-tab-search').style.display = tab === 'search' ? '' : 'none';
        $('c-tab-new').style.display = tab === 'new' ? '' : 'none';
        if (tab === 'new') {
            setTimeout(() => $('new-c-name').focus(), 100);
        }
    }

    function renderCustomerList(list) {
        const wrap = $('c-list');
        custStore.clear();
        if (!list || !list.length) {
            wrap.innerHTML = '<div class="empty">لا يوجد عملاء مطابقين للبحث.<br><button type="button" class="btn sm soft" style="margin-top:8px" onclick="POS.switchCustTab(\'new\')">➕ إضافة هذا العميل الآن</button></div>';
            $('c-count-hint').textContent = '';
            return;
        }
        $('c-count-hint').textContent = `(${list.length} عميل)`;
        wrap.innerHTML = list.map(c => {
            custStore.set(String(c.id), c);
            return `
            <div class="cust-card" onclick="POS.selectCustomerById('${c.id}')">
                <div>
                    <div class="cust-card-name">👤 ${RS.esc(c.name)}</div>
                    <div class="cust-card-sub">
                        ${c.phone ? `<span>📞 <span dir="ltr">${RS.esc(c.phone)}</span></span>` : ''}
                        ${c.address ? `<span>📍 ${RS.esc(c.address)}</span>` : ''}
                        ${c.tax_no ? `<span>🏢 ضريبة: ${RS.esc(c.tax_no)}</span>` : ''}
                    </div>
                </div>
                <div style="text-align:left">
                    <span class="btn sm soft">اختيار ←</span>
                    ${c.balance ? `<div class="small ${c.balance > 0 ? 'text-red' : 'text-green'}" style="margin-top:4px">رصيد: ${RS.money(c.balance)} ر.س</div>` : ''}
                </div>
            </div>
            `;
        }).join('');
    }

    function searchCustomers(val) {
        clearTimeout(custSearchTimer);
        custSearchTimer = setTimeout(() => {
            const q = val.trim();
            if (!q && CFG.recentCustomers) {
                renderCustomerList(CFG.recentCustomers);
                return;
            }
            $('c-list').innerHTML = '<div class="empty">جاري البحث...</div>';
            RS.api(CFG.urls.customers_search + '?q=' + encodeURIComponent(q)).then(res => {
                renderCustomerList(res.customers || []);
            }).catch(e => {
                $('c-list').innerHTML = `<div class="empty text-red">${RS.esc(e.message)}</div>`;
            });
        }, 220);
    }

    function selectCustomerById(id) {
        const c = custStore.get(String(id));
        if (c) selectCustomer(c);
    }

    function selectCustomer(c) {
        curCust = c;
        $('c-name-display').textContent = c.name;
        $('c-badge').textContent = 'عميل مسجل';
        $('c-badge').className = 'badge green';
        if (c.phone) {
            $('c-phone-display').textContent = c.phone;
            $('c-phone-display').style.display = '';
        } else {
            $('c-phone-display').style.display = 'none';
        }
        $('btn-clear-cust').style.display = '';

        // تعبئة حقول التوصيل والآجل تلقائياً
        if (c.phone) {
            $('c-phone').value = c.phone;
            $('k-phone').value = c.phone;
        }
        if (c.name) {
            $('c-name').value = c.name;
            $('k-name').value = c.name;
        }
        if (c.address) {
            $('c-addr').value = c.address;
        }

        RS.closeModal('cust-modal');
        RS.toast('تم اختيار العميل: ' + c.name, 'ok');
    }

    function selectWalkInCustomer() {
        clearCustomer();
        RS.closeModal('cust-modal');
    }

    function clearCustomer() {
        curCust = null;
        $('c-name-display').textContent = 'عميل عام';
        $('c-phone-display').textContent = '';
        $('c-phone-display').style.display = 'none';
        $('c-badge').textContent = 'نقدي / عام';
        $('c-badge').className = 'badge gray';
        $('btn-clear-cust').style.display = 'none';
    }

    function submitNewCustomer() {
        const name = $('new-c-name').value.trim();
        if (!name) { RS.toast('أدخل اسم العميل', 'bad'); return; }
        const btn = $('btn-save-cust');
        btn.disabled = true;
        const body = {
            name: name,
            phone: $('new-c-phone').value.trim() || null,
            address: $('new-c-addr').value.trim() || null,
            tax_no: $('new-c-tax').value.trim() || null,
            notes: $('new-c-notes').value.trim() || null,
        };
        RS.api(CFG.urls.customers_create, {body}).then(res => {
            RS.toast(res.message || 'تم حفظ العميل بنجاح', 'ok');
            $('new-c-name').value = '';
            $('new-c-phone').value = '';
            $('new-c-addr').value = '';
            $('new-c-tax').value = '';
            $('new-c-notes').value = '';
            if (res.customer) {
                if (CFG.recentCustomers) CFG.recentCustomers.unshift(res.customer);
                selectCustomer(res.customer);
            } else {
                RS.closeModal('cust-modal');
            }
        }).catch(e => {
            RS.toast(e.message, 'bad');
        }).finally(() => {
            btn.disabled = false;
        });
    }

    function submit() {
        if (st.busy) return;
        const t = calc();
        if (!picker.lines().length) return;
        if (st.type === 'dine_in' && !$('table').value.trim()) { RS.toast('أدخل رقم الطاولة', 'bad'); $('table').focus(); return; }
        if (st.type === 'delivery' && (!$('c-phone').value.trim() || !$('c-addr').value.trim())) { RS.toast('أدخل جوال العميل وعنوان التوصيل', 'bad'); return; }
        if (st.pay === 'credit' && !curCust && !$('k-name').value.trim() && !$('k-phone').value.trim() && !$('c-phone').value.trim()) {
            RS.toast('البيع الآجل يحتاج اسم العميل أو اختياره', 'bad'); return;
        }

        const custName = curCust ? curCust.name : (st.pay === 'credit' && $('k-name').value.trim() ? $('k-name').value.trim() : $('c-name').value.trim());
        const custPhone = curCust ? curCust.phone : (st.pay === 'credit' && $('k-phone').value.trim() ? $('k-phone').value.trim() : $('c-phone').value.trim());

        const body = {
            order_type: st.type, payment_method: st.pay, discount: t.disc,
            table_number: $('table').value.trim(),
            customer_id: curCust ? curCust.id : null,
            customer_name: custName || null,
            customer_phone: custPhone || null,
            delivery_address: $('c-addr').value.trim(),
            driver_id: $('driver').value || null, delivery_fee: t.fee,
            cash_received: parseFloat($('recv').value) || 0,
            card_amount: parseFloat($('card-amt').value) || 0,
            items: picker.lines().map(l => ({size_id: l.sizeId, qty: l.qty}))
        };
        st.busy = true; calc();

        if (st.editingOrderId) {
            RS.api(CFG.urls.order_update + '/' + st.editingOrderId, {method: 'PUT', body}).then(r => {
                RS.toast('✅ تم تحديث الطلب رقم #' + r.order.queue + ' بنجاح' + (r.order.change > 0 ? ' — الباقي ' + RS.money(r.order.change) + ' ر.س' : ''), 'ok');
                RS.printFrame(r.receipt_url);
                cancelEdit();
            }).catch(e => RS.toast(e.message, 'bad')).finally(() => { st.busy = false; calc(); });
        } else {
            RS.api(CFG.urls.store, {body}).then(r => {
                RS.toast('✅ تم حفظ الطلب رقم #' + r.order.queue + (r.order.change > 0 ? ' — الباقي ' + RS.money(r.order.change) + ' ر.س' : ''), 'ok');
                RS.printFrame(r.receipt_url);
                clear();
            }).catch(e => RS.toast(e.message, 'bad')).finally(() => { st.busy = false; calc(); });
        }
    }

    function startEdit(id) {
        RS.api(CFG.urls.order_show + '/' + id).then(res => {
            const o = res.order;
            if (!o) return;
            st.editingOrderId = id;

            // ضبط نوع الطلب
            setType(o.order_type);
            if (o.order_type === 'dine_in') {
                $('table').value = o.table_number || '';
                markTable();
            } else if (o.order_type === 'delivery') {
                $('c-phone').value = o.customer_phone || '';
                $('c-name').value = o.customer_name || '';
                $('c-addr').value = o.delivery_address || '';
                $('driver').value = o.driver_id || '';
                $('fee').value = o.delivery_fee || 0;
            }

            // ضبط العميل
            if (o.customer) {
                selectCustomer(o.customer);
            } else if (o.customer_name || o.customer_phone) {
                curCust = null;
                $('c-name-display').textContent = o.customer_name || 'عميل غير مسجل';
                $('c-badge').textContent = 'يدوي';
                $('c-badge').className = 'badge gray';
                if (o.customer_phone) {
                    $('c-phone-display').textContent = o.customer_phone;
                    $('c-phone-display').style.display = '';
                }
                $('btn-clear-cust').style.display = '';
                $('k-name').value = o.customer_name || '';
                $('k-phone').value = o.customer_phone || '';
            } else {
                clearCustomer();
            }

            // ضبط الخصم وطريقة الدفع
            $('disc').value = o.discount || 0;
            setPay(o.payment_method || 'cash');
            if (o.payment_method === 'split') {
                $('card-amt').value = o.card_amount || 0;
            } else if (o.payment_method === 'cash') {
                $('recv').value = o.cash_received || 0;
            }

            // تحميل الأصناف في السلة
            if (o.items && o.items.length) {
                picker.setLines(o.items.map(it => ({
                    sizeId: it.sizeId,
                    name: it.name,
                    size: it.size,
                    price: it.price,
                    qty: it.qty
                })));
            }

            // إظهار شريط وضع التعديل وتحديث نص زر الحفظ
            $('edit-banner').style.display = 'flex';
            $('edit-order-title').textContent = '#' + o.queue + ' (' + o.number + ')';
            $('pay-btn').innerHTML = '💾 حفظ تعديلات الطلب #' + o.queue + ' (<span class="num" id="pay-amt">0.00</span> ر.س)';

            RS.closeModal('recent-modal');
            calc();
            RS.toast('تم تحميل الطلب #' + o.queue + ' للتعديل في السلة', 'ok');
        }).catch(e => {
            RS.toast(e.message || 'تعذر تحميل بيانات الطلب للتعديل', 'bad');
        });
    }

    function cancelEdit() {
        st.editingOrderId = null;
        $('edit-banner').style.display = 'none';
        $('pay-btn').innerHTML = '⚡ دفع وحفظ الفاتورة <span class="num" id="pay-amt">0.00</span> ر.س';
        clear();
        RS.toast('تم إلغاء وضع التعديل', 'ok');
    }

    function openRefund(id, queue, amt, method) {
        st.refundOrderId = id;
        $('pos-rf-no').textContent = queue;
        $('pos-rf-amt').textContent = RS.money(amt);
        $('pos-rf-method').value = (method === 'credit' ? 'credit' : (method === 'card' ? 'card' : 'cash'));
        $('pos-rf-reason').value = '';
        RS.openModal('pos-refund-modal');
    }

    function submitRefund() {
        if (!st.refundOrderId) return;
        const btn = $('btn-submit-refund');
        btn.disabled = true;
        RS.api(CFG.urls.order_refund + '/' + st.refundOrderId + '/refund', {
            body: {
                method: $('pos-rf-method').value,
                reason: $('pos-rf-reason').value.trim() || null,
            }
        }).then(res => {
            RS.toast(res.message || 'تم تسجيل المرتجع بنجاح', 'ok');
            RS.closeModal('pos-refund-modal');
            recent();
        }).catch(e => {
            RS.toast(e.message, 'bad');
        }).finally(() => {
            btn.disabled = false;
        });
    }

    function openShift() {
        RS.api(CFG.urls.open, {body: {branch_id: $('sh-branch').value, opening_cash: parseFloat($('sh-cash').value) || 0}})
            .then(() => location.reload()).catch(e => RS.toast(e.message, 'bad'));
    }

    function recent() {
        RS.openModal('recent-modal');
        $('recent-body').innerHTML = '<tr><td colspan="7" class="empty">جاري التحميل...</td></tr>';
        RS.api(CFG.urls.recent).then(r => {
            $('recent-body').innerHTML = r.orders.length ? r.orders.map(o => `<tr>
                <td class="fw">#${o.queue}</td><td>${o.time}</td><td>${RS.esc(o.type)}</td><td>${RS.esc(o.payment)}</td>
                <td class="num">${RS.money(o.total)}</td><td>${o.refunded ? '<span class="badge red">مرتجع</span>' : `<span class="badge">${RS.esc(o.status)}</span>`}</td>
                <td style="text-align:center">
                    <div style="display:flex;gap:4px;justify-content:center;flex-wrap:wrap">
                        <button class="btn sm soft" onclick="RS.printFrame('${o.receipt}')" title="طباعة الفاتورة">🖨️ طباعة</button>
                        ${o.can_edit ? `<button class="btn sm secondary" onclick="POS.startEdit(${o.id})" title="تعديل هذا الطلب في الكاشير">✏️ تعديل</button>` : ''}
                        ${!o.refunded ? `<button class="btn sm red" onclick="POS.openRefund(${o.id}, '#${o.queue}', ${o.total}, '${o.payment_method}')" title="تسجيل مرتجع لهذا الطلب">↩️ مرتجع</button>` : ''}
                    </div>
                </td></tr>`).join('')
                : '<tr><td colspan="7" class="empty">لا توجد طلبات بعد</td></tr>';
        });
    }

    init();
    return {
        clear, submit, openShift, recent,
        startEdit, cancelEdit, openRefund, submitRefund,
        openCustomerModal, switchCustTab, selectCustomerById, selectCustomer,
        selectWalkInCustomer, clearCustomer, submitNewCustomer
    };
})();
</script>
@endpush