@extends('admin.layouts.master')
@section('title', 'نقطة البيع')

@push('styles')
<style>
.product-card { cursor:pointer; transition: all .2s; border:1px solid #dee2e6; min-height: 90px; }
.product-card:active { transform: scale(0.97); }
.product-card:hover { border-color:#0d6efd; transform: translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.cart-item { padding:10px 8px; border-bottom:1px solid #eee; }
.qty-btn { width:38px; height:38px; padding:0; font-size:1.1rem; font-weight:bold; }
.totals-card { background:linear-gradient(135deg, #0d6efd, #0a58ca); color:#fff; padding:18px; border-radius:10px; }
.product-grid { max-height: 65vh; overflow-y: auto; }
.cart-list { max-height: 45vh; overflow-y: auto; }
@media (max-width: 768px) {
    .product-grid { max-height: calc(100vh - 240px); }
    .cart-mobile-section { display: none; }
}
@media (min-width: 769px) {
    .cart-mobile-offcanvas-toggle { display: none; }
}
.totals-card input { background:transparent; border:none; color:#fff; padding:2px; }
.totals-card input::placeholder { color:rgba(255,255,255,0.5); }
</style>
@endpush

@section('page-header')
    <div class="row align-items-center">
        <div class="col"><h2 class="page-title"><i class="ti ti-cash-register ms-1"></i> نقطة البيع</h2></div>
        <div class="col-auto"><a href="{{ route('admin.pos.history') }}" class="btn btn-outline-secondary"><i class="ti ti-history ms-1"></i> <span class="d-none d-sm-inline">سجل المبيعات</span></a></div>
    </div>
@endsection

@section('content')
<div class="row">
    <!-- Products column -->
    <div class="col-12 col-lg-7">
        <div class="card">
            <div class="card-header">
                <div class="input-group">
                    <span class="input-group-text"><i class="ti ti-search"></i></span>
                    <input type="text" id="productSearch" class="form-control" placeholder="ابحث بالاسم أو الكود أو الباركود...">
                </div>
            </div>
            <div class="card-body product-grid">
                <div class="row g-2" id="productsGrid">
                    @foreach($items as $item)
                    <div class="col-6 col-sm-4 col-lg-4 col-xl-3">
                        <div class="card product-card text-center"
                             data-id="{{ $item->id }}" data-name="{{ $item->name }}" data-price="{{ $item->selling_price }}"
                             onclick="addToCart(this)">
                            <div class="card-body p-2">
                                <div class="text-muted small">{{ $item->code }}</div>
                                <div class="fw-bold" style="min-height:40px;font-size:13px;line-height:1.2">{{ $item->name }}</div>
                                <div class="text-success fw-bold mt-1">{{ number_format($item->selling_price, 2) }} ج</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Cart column (desktop visible, mobile in offcanvas) -->
    <div class="col-lg-5 cart-mobile-section">
        @include('admin.pos._cart_panel')
    </div>
</div>

{{-- Cart Offcanvas for Mobile --}}
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="cartOffcanvas" style="height:90vh;border-top-left-radius:1rem;border-top-right-radius:1rem">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title"><i class="ti ti-shopping-cart ms-1"></i> السلة (<span id="offcanvasCartCount">0</span>)</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body p-2">
        @include('admin.pos._cart_panel', ['offcanvasMode' => true])
    </div>
</div>

{{-- Floating Cart Button for Mobile --}}
<button type="button" class="pos-mobile-cart-fab" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-label="فتح السلة">
    <i class="ti ti-shopping-cart"></i>
    <span class="badge" id="cartBadge" style="display:none">0</span>
</button>
@endsection

@push('scripts')
<script>
let cart = [];

function addToCart(card) {
    const id = $(card).data('id'), name = $(card).data('name'), price = parseFloat($(card).data('price'));
    const existing = cart.find(x => x.id == id);
    if (existing) existing.qty++;
    else cart.push({ id, name, price, qty: 1, discount: 0 });
    renderCart();

    // Show toast on mobile
    if (window.innerWidth < 992 && toastr) {
        toastr.options.timeOut = 1500;
        toastr.success(name + ' أُضيف للسلة');
    }
}

function renderCart() {
    const cartHTML = cart.length
        ? cart.map((x, i) => `
            <div class="cart-item d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="fw-bold">${x.name}</div>
                    <div class="text-muted small">${x.price.toFixed(2)} × ${x.qty} = <strong class="text-primary">${(x.price*x.qty).toFixed(2)}</strong> ج</div>
                </div>
                <button class="btn qty-btn btn-outline-secondary" onclick="changeQty(${i},-1)" aria-label="نقص">−</button>
                <span class="px-2 fw-bold" style="min-width:32px;text-align:center">${x.qty}</span>
                <button class="btn qty-btn btn-outline-secondary" onclick="changeQty(${i},1)" aria-label="زيادة">+</button>
                <button class="btn qty-btn btn-outline-danger ms-2" onclick="removeItem(${i})" aria-label="حذف"><i class="ti ti-x"></i></button>
            </div>`).join('')
        : '<div class="text-center text-muted py-4"><i class="ti ti-shopping-cart-off fs-1 opacity-25"></i><div class="mt-2">السلة فارغة</div></div>';

    // Update both cart panels (desktop and offcanvas)
    $('.cartList').html(cartHTML);

    // Update badges
    const itemCount = cart.length;
    $('#cartBadge').text(itemCount).toggle(itemCount > 0);
    $('#offcanvasCartCount').text(itemCount);

    recalc();
}
function changeQty(i, d) { cart[i].qty = Math.max(1, cart[i].qty + d); renderCart(); }
function removeItem(i) { cart.splice(i, 1); renderCart(); }
function clearCart() {
    if (!cart.length) return;
    Swal.fire({
        title: 'تفريغ السلة؟', icon: 'question', showCancelButton: true,
        confirmButtonText: 'نعم', cancelButtonText: 'إلغاء'
    }).then(r => {
        if (r.isConfirmed) {
            cart = []; renderCart(); $('.paidAmount').val(0);
        }
    });
}

function recalc() {
    const subtotal = cart.reduce((s, x) => s + x.price * x.qty, 0);
    const discount = parseFloat($('.discount').first().val()) || 0;
    const taxPct = parseFloat($('.taxPct').first().val()) || 0;
    const taxable = Math.max(0, subtotal - discount);
    const tax = taxable * taxPct / 100;
    const total = taxable + tax;

    // Sync values across both panels
    $('.discount').val(discount);
    $('.taxPct').val(taxPct);
    $('.subtotal').text(subtotal.toFixed(2));
    $('.tax').text(tax.toFixed(2));
    $('.grandTotal').text(total.toFixed(2));
    const paid = parseFloat($('.paidAmount').first().val()) || 0;
    $('.changeAmount').val(Math.max(0, paid - total).toFixed(2));
}
$(document).on('input', '.discount, .taxPct, .paidAmount', function () {
    // sync the changed input value to all panels
    const val = $(this).val();
    const cls = '.' + $(this).attr('class').split(' ').find(c => ['discount','taxPct','paidAmount'].includes(c));
    $(cls).val(val);
    recalc();
});

function completeSale() {
    if (!cart.length) { toastr.error('السلة فارغة'); return; }
    const total = parseFloat($('.grandTotal').first().text());
    const paid = parseFloat($('.paidAmount').first().val()) || 0;
    if (paid < total) { toastr.error('المبلغ المدفوع أقل من الإجمالي'); return; }

    $.post('{{ route('admin.pos.store') }}', {
        customer_id: $('.customerSelect').first().val() || null,
        treasury_id: $('.treasurySelect').first().val(),
        payment_method: $('.paymentMethod').first().val(),
        paid_amount: paid,
        discount_amount: parseFloat($('.discount').first().val()) || 0,
        tax_percent: parseFloat($('.taxPct').first().val()) || 0,
        items: cart.map(x => ({ item_id: x.id, quantity: x.qty, unit_price: x.price, discount: x.discount })),
    }, function (res) {
        if (res.success) {
            toastr.success('تم البيع بنجاح: ' + res.sale_no);
            window.open(res.receipt_url, '_blank');
            cart = []; renderCart(); $('.paidAmount').val(0);
            // Close offcanvas on mobile
            const oc = bootstrap.Offcanvas.getInstance(document.getElementById('cartOffcanvas'));
            if (oc) oc.hide();
        }
    }).fail(xhr => toastr.error(xhr.responseJSON?.message || 'حدث خطأ'));
}

$('#productSearch').on('input', function () {
    const q = $(this).val().toLowerCase();
    $('#productsGrid .product-card').each(function () {
        const name = $(this).data('name').toLowerCase();
        const id = $(this).data('id').toString();
        $(this).parent().toggle(name.includes(q) || id.includes(q) || q === '');
    });
});

renderCart();
</script>
@endpush