@extends('layouts.app')

@section('title', 'نقطة البيع (POS)')
@section('page_title', 'نقطة البيع')
@section('breadcrumb')<li class="breadcrumb-item active">نقطة البيع</li>@endsection

@push('styles')
<style>
    .pos-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
    .pos-cart-table th, .pos-cart-table td { padding: .35rem .5rem; vertical-align: middle; }
    .pos-cart-table input { padding: .15rem .35rem; height: 30px; }
    .pos-totals .row > div { padding: .25rem .5rem; }
    .pos-totals .grand { font-size: 1.4rem; font-weight: 700; color: #28a745; }
    .pos-search-result { max-height: 250px; overflow-y: auto; border: 1px solid #ddd; background: #fff; position: absolute; z-index: 1000; width: 100%; display: none; }
    .pos-search-result .item { padding: .35rem .5rem; cursor: pointer; border-bottom: 1px solid #eee; }
    .pos-search-result .item:hover { background: #f0f8ff; }
    .pos-keypad button { font-size: 1.3rem; padding: .8rem; }
</style>
@endpush

@section('content')
<form id="pos-form" autocomplete="off">
    @csrf
    <div class="pos-wrapper">

        {{-- ============== Left: Cart ============== --}}
        <div>
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="m-0">سلة البيع</h5>
                    <div class="d-flex gap-2 align-items-center">
                        <select id="pharmacy_id" name="pharmacy_id" class="form-control form-control-sm" required style="width: 200px">
                            @foreach ($pharmacies as $p)
                                <option value="{{ $p->id }}" {{ $p->is_main ? 'selected' : '' }}>{{ $p->name }}</option>
                            @endforeach
                        </select>
                        <select name="sale_type" class="form-control form-control-sm" style="width: 150px">
                            <option value="walk_in">عميل عابر</option>
                            <option value="account">حساب عميل</option>
                            <option value="prescription">بوصفة</option>
                        </select>
                    </div>
                </div>

                <div class="card-body">
                    <div class="position-relative mb-3">
                        <input type="text" id="item-search" class="form-control form-control-lg"
                               placeholder="ابحث عن صنف بالاسم أو الكود أو امسح الباركود …" autofocus>
                        <div id="search-results" class="pos-search-result"></div>
                    </div>

                    <table class="table table-bordered pos-cart-table" id="cart-table">
                        <thead class="thead-light">
                            <tr>
                                <th width="3%">#</th>
                                <th>الصنف</th>
                                <th width="13%">الوحدة</th>
                                <th width="9%">الكمية</th>
                                <th width="11%">السعر</th>
                                <th width="9%">خصم %</th>
                                <th width="9%">ضريبة %</th>
                                <th width="11%">الإجمالى</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                    <div class="text-muted text-center py-5" id="empty-cart-msg">
                        أضف صنف من البحث فى الأعلى أو امسح الباركود ليبدأ البيع.
                    </div>
                </div>
            </div>
        </div>

        {{-- ============== Right: Totals & Payment ============== --}}
        <div>
            <div class="card">
                <div class="card-header"><h5 class="m-0">العميل والدفع</h5></div>
                <div class="card-body pos-totals">

                    <div class="form-group">
                        <label>العميل</label>
                        <select name="customer_id" id="customer_id" class="form-control select2">
                            @if ($walkIn)
                                <option value="{{ $walkIn->id }}" selected>{{ $walkIn->name }}</option>
                            @endif
                        </select>
                    </div>

                    <div class="form-group">
                        <label>طريقة الدفع</label>
                        <select name="payment_method" id="payment_method" class="form-control">
                            <option value="cash">نقدى</option>
                            <option value="credit">آجل</option>
                            <option value="mixed">مختلط</option>
                        </select>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-7 text-muted">الإجمالى الفرعى</div>
                        <div class="col-5 text-left"><span id="t-subtotal">0.00</span></div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-muted">خصم البنود</div>
                        <div class="col-5 text-left"><span id="t-items-discount">0.00</span></div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-7 text-muted">خصم إضافى</div>
                        <div class="col-5 text-left">
                            <input type="number" step="0.01" min="0" name="extra_discount" id="t-extra-discount" class="form-control form-control-sm text-left" value="0">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-muted">الضريبة</div>
                        <div class="col-5 text-left"><span id="t-tax">0.00</span></div>
                    </div>
                    <hr>
                    <div class="row grand">
                        <div class="col-7">الإجمالى</div>
                        <div class="col-5 text-left"><span id="t-total">0.00</span> ج.م</div>
                    </div>

                    <hr>

                    <div class="form-group">
                        <label>المدفوع</label>
                        <input type="number" step="0.01" min="0" id="paid_amount" name="paid_amount" class="form-control form-control-lg text-left" value="0">
                    </div>
                    <div class="row">
                        <div class="col-7 text-muted">الباقى للعميل</div>
                        <div class="col-5 text-left text-success"><span id="t-change">0.00</span></div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-muted">المتبقى عليه</div>
                        <div class="col-5 text-left text-danger"><span id="t-due">0.00</span></div>
                    </div>

                    <hr>

                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-secondary" onclick="resetCart()"><i class="fas fa-times"></i> مسح</button>
                        <button type="button" class="btn btn-primary" onclick="submitSale(false)"><i class="fas fa-save"></i> حفظ كمسوّدة</button>
                        <button type="button" class="btn btn-success btn-lg ms-auto" onclick="submitSale(true)"><i class="fas fa-check"></i> تأكيد الفاتورة</button>
                    </div>
                </div>
            </div>

            <details class="card mt-3">
                <summary class="card-header" style="cursor: pointer">بيانات الوصفة (اختيارى)</summary>
                <div class="card-body">
                    <div class="form-group"><label>رقم الوصفة</label><input type="text" name="prescription_no" class="form-control"></div>
                    <div class="form-group"><label>الطبيب</label><input type="text" name="prescription_doctor" class="form-control"></div>
                    <div class="form-group"><label>تاريخ الوصفة</label><input type="date" name="prescription_date" class="form-control"></div>
                </div>
            </details>
        </div>

    </div>
</form>
@endsection

@push('scripts')
<script>
const cart = [];
const itemSearchUrl = '{{ route('items.search') }}';
const storeUrl      = '{{ route('sales.store') }}';

function fmt(n) { return Number(n || 0).toFixed(2); }

/* ---------- Item search ---------- */
let searchTimer;
$('#item-search').on('input', function () {
    const q = $(this).val().trim();
    clearTimeout(searchTimer);
    if (q.length < 2) { $('#search-results').hide(); return; }
    searchTimer = setTimeout(() => doSearch(q), 200);
});

function doSearch(q) {
    $.get(itemSearchUrl, { q, pharmacy_id: $('#pharmacy_id').val() }, (res) => {
        const $r = $('#search-results').empty();
        if (!res.data.length) { $r.append('<div class="item text-muted">لا توجد نتائج</div>').show(); return; }
        res.data.forEach((it) => {
            $r.append(`<div class="item" data-item='${JSON.stringify(it)}'>
                <strong>${it.name}</strong> <small class="text-muted">${it.code}</small>
                ${it.scientific_name ? `<span class="text-muted"> · ${it.scientific_name}</span>` : ''}
                ${it.stock_base !== null ? `<span class="float-left badge badge-info">${Number(it.stock_base).toFixed(0)}</span>` : ''}
            </div>`);
        });
        $r.show();
    });
}

$(document).on('click', '.pos-search-result .item[data-item]', function () {
    const it = JSON.parse($(this).attr('data-item'));
    addToCart(it);
    $('#search-results').hide();
    $('#item-search').val('').focus();
});

// barcode scan: enter with full code
$('#item-search').on('keydown', function (e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const $first = $('#search-results .item[data-item]').first();
        if ($first.length) $first.click();
    }
});

/* ---------- Cart ---------- */
function addToCart(item) {
    const defaultUnit = item.units.find(u => u.is_default_sell) || item.units[0];
    if (!defaultUnit) { alert('الصنف ليس له وحدات مُعرّفة.'); return; }

    cart.push({
        item_id:   item.id,
        item_name: item.name,
        item_code: item.code,
        units:     item.units,
        unit_id:   defaultUnit.unit_id,
        unit_name: defaultUnit.unit_name,
        quantity:  1,
        unit_price: Number(defaultUnit.selling_price || 0),
        discount_percent: 0,
        tax_rate:  Number(item.tax_rate || 0),
        tax_type:  item.tax_type || 'T1',
    });
    renderCart();
}

function renderCart() {
    const $tbody = $('#cart-table tbody').empty();
    $('#empty-cart-msg').toggle(cart.length === 0);

    cart.forEach((row, i) => {
        const subtotal = row.quantity * row.unit_price;
        const discount = subtotal * (row.discount_percent / 100);
        const net      = subtotal - discount;
        const tax      = net * (row.tax_rate / 100);
        const total    = net + tax;
        row._total = total;

        const unitOpts = row.units.map(u =>
            `<option value="${u.unit_id}" data-price="${u.selling_price}" ${u.unit_id == row.unit_id ? 'selected' : ''}>${u.unit_name}</option>`
        ).join('');

        $tbody.append(`<tr data-idx="${i}">
            <td>${i+1}</td>
            <td><strong>${row.item_name}</strong> <small class="text-muted">${row.item_code}</small></td>
            <td><select class="form-control form-control-sm" onchange="updateCart(${i}, 'unit', this)">${unitOpts}</select></td>
            <td><input type="number" step="0.001" min="0.001" class="form-control form-control-sm text-center" value="${row.quantity}" onchange="updateCart(${i}, 'quantity', this)"></td>
            <td><input type="number" step="0.01" min="0" class="form-control form-control-sm" value="${row.unit_price}" onchange="updateCart(${i}, 'unit_price', this)"></td>
            <td><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" value="${row.discount_percent}" onchange="updateCart(${i}, 'discount_percent', this)"></td>
            <td><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" value="${row.tax_rate}" onchange="updateCart(${i}, 'tax_rate', this)"></td>
            <td class="text-left">${fmt(total)}</td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-danger" onclick="removeRow(${i})"><i class="fas fa-times"></i></button></td>
        </tr>`);
    });

    recalcTotals();
}

function updateCart(i, field, el) {
    const row = cart[i];
    if (field === 'unit') {
        const $opt = $(el).find(':selected');
        row.unit_id   = Number(el.value);
        row.unit_name = $opt.text();
        row.unit_price = Number($opt.data('price') || row.unit_price);
    } else {
        row[field] = Number(el.value);
    }
    renderCart();
}

function removeRow(i) {
    cart.splice(i, 1);
    renderCart();
}

function recalcTotals() {
    let subtotal = 0, itemsDiscount = 0, tax = 0;
    cart.forEach(r => {
        const s = r.quantity * r.unit_price;
        const d = s * (r.discount_percent / 100);
        const n = s - d;
        const t = n * (r.tax_rate / 100);
        subtotal += s; itemsDiscount += d; tax += t;
    });
    const extra = Number($('#t-extra-discount').val() || 0);
    const total = subtotal - itemsDiscount - extra + tax;

    $('#t-subtotal').text(fmt(subtotal));
    $('#t-items-discount').text(fmt(itemsDiscount));
    $('#t-tax').text(fmt(tax));
    $('#t-total').text(fmt(total));
    recalcChange();
}

function recalcChange() {
    const total = Number($('#t-total').text());
    const paid  = Number($('#paid_amount').val() || 0);
    $('#t-change').text(fmt(Math.max(0, paid - total)));
    $('#t-due').text(fmt(Math.max(0, total - paid)));
}

$('#t-extra-discount, #paid_amount').on('input', recalcTotals);
$('#payment_method').on('change', function () {
    if ($(this).val() === 'cash') {
        $('#paid_amount').val($('#t-total').text());
        recalcChange();
    } else if ($(this).val() === 'credit') {
        $('#paid_amount').val(0);
        recalcChange();
    }
});

function resetCart() {
    cart.length = 0; renderCart();
    $('#paid_amount').val(0); $('#t-extra-discount').val(0);
}

/* ---------- Submit ---------- */
function submitSale(confirm) {
    if (cart.length === 0) { toastr.warning('السلة فارغة'); return; }

    const payload = {
        _token: $('input[name="_token"]').val(),
        pharmacy_id:  $('#pharmacy_id').val(),
        customer_id:  $('#customer_id').val() || null,
        sale_type:    $('select[name="sale_type"]').val(),
        payment_method: $('#payment_method').val(),
        extra_discount: Number($('#t-extra-discount').val() || 0),
        paid_amount:  Number($('#paid_amount').val() || 0),
        confirm:      confirm ? 1 : 0,
        prescription_no:     $('input[name="prescription_no"]').val()     || null,
        prescription_doctor: $('input[name="prescription_doctor"]').val() || null,
        prescription_date:   $('input[name="prescription_date"]').val()   || null,
        lines: cart.map(r => ({
            item_id: r.item_id, unit_id: r.unit_id,
            quantity: r.quantity, unit_price: r.unit_price,
            discount_percent: r.discount_percent,
            tax_rate: r.tax_rate, tax_type: r.tax_type,
        })),
    };

    $.post(storeUrl, payload)
        .done(res => {
            toastr.success('تم حفظ الفاتورة: ' + res.reference);
            resetCart();
            if (confirm) window.location = res.redirect;
        })
        .fail(xhr => {
            const msg = xhr.responseJSON?.message || 'فشلت العملية';
            toastr.error(msg);
        });
}

// Customer ajax search via select2
$('#customer_id').select2({
    placeholder: 'ابحث عن عميل …',
    minimumInputLength: 0,
    allowClear: true,
    ajax: {
        url: '{{ route('customers.search') }}',
        dataType: 'json',
        delay: 200,
        data: params => ({ q: params.term }),
        processResults: data => ({ results: data.data.map(c => ({ id: c.id, text: c.name + (c.mobile ? ' · '+c.mobile : '') })) }),
    },
});
</script>
@endpush