@php $offcanvasMode = $offcanvasMode ?? false; @endphp

<div class="card {{ $offcanvasMode ? 'h-100' : '' }}" style="{{ $offcanvasMode ? 'box-shadow:none;border:none' : '' }}">
    @if(!$offcanvasMode)
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-shopping-cart ms-1"></i> السلة</h3>
        <button class="btn btn-sm btn-outline-danger ms-auto" onclick="clearCart()" type="button"><i class="ti ti-trash"></i> تفريغ</button>
    </div>
    @endif
    <div class="card-body">
        <div class="mb-3">
            <label class="form-label">العميل</label>
            <select class="form-select customerSelect">
                <option value="">— عميل نقدي —</option>
                @foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach
            </select>
        </div>

        <div class="cartList border rounded p-2 mb-3" style="min-height:150px;max-height:35vh;overflow-y:auto"></div>

        <div class="totals-card mb-3">
            <div class="d-flex justify-content-between"><span>الإجمالي:</span><span class="subtotal">0.00</span></div>
            <div class="d-flex justify-content-between mt-1"><span>الخصم:</span>
                <input type="number" class="discount text-end" value="0" step="0.01" style="width:90px">
            </div>
            <div class="d-flex justify-content-between mt-1"><span>ضريبة <input type="number" class="taxPct" value="14" min="0" max="100" style="width:50px">%:</span><span class="tax">0.00</span></div>
            <hr style="border-color:rgba(255,255,255,.5);margin:8px 0">
            <div class="d-flex justify-content-between fs-2 fw-bold mb-0"><span>الإجمالي:</span><span class="grandTotal">0.00</span></div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-6">
                <label class="form-label">طريقة الدفع</label>
                <select class="form-select paymentMethod">
                    <option value="cash">نقدي</option>
                    <option value="card">بطاقة</option>
                    <option value="transfer">تحويل</option>
                    <option value="mixed">مختلط</option>
                </select>
            </div>
            <div class="col-6">
                <label class="form-label">الخزينة</label>
                <select class="form-select treasurySelect">
                    @foreach($treasuries as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-6">
                <label class="form-label">المبلغ المدفوع</label>
                <input type="number" class="form-control form-control-lg paidAmount" step="0.01" value="0" inputmode="decimal">
            </div>
            <div class="col-6">
                <label class="form-label">الباقي</label>
                <input type="text" class="form-control form-control-lg bg-light fw-bold changeAmount text-success" readonly value="0.00">
            </div>
        </div>

        <button class="btn btn-success btn-lg w-100" onclick="completeSale()" type="button">
            <i class="ti ti-check ms-1"></i> إتمام البيع
        </button>

        @if($offcanvasMode)
        <button class="btn btn-outline-danger w-100 mt-2" onclick="clearCart()" type="button">
            <i class="ti ti-trash ms-1"></i> تفريغ السلة
        </button>
        @endif
    </div>
</div>