@extends('layouts.app')

@section('title', 'Point of Sale - Pharmacy Management')

@section('content')
@push('styles')
<style>
.product-card { background: var(--card-bg); border: 1px solid var(--card-border); }
.product-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.product-card.in-cart { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.product-price { color: var(--accent); }
.product-image-placeholder { background: var(--table-header); }
.stock-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.stock-low { background: rgba(245,158,11,0.15); color: #d97706; }
.stock-ok { background: var(--accent-light); }
.promo-badge { font-size: 9px; font-weight: 700; color: #e11d48; background: rgba(225,29,72,0.08); padding: 0 4px; border-radius: 2px; display: inline-block; margin-top: 2px; }
.promo-price { color: #e11d48; }
</style>
@endpush

@can('create_sales')
<div class="mb-6">
    <h1 class="text-2xl font-bold tracking-tight">Point of Sale</h1>
    <p class="mt-1">Create a new sale</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 glass-card rounded-xl">
        <div class="p-4 border-b">
            <div class="flex gap-4 mb-4">
                <div class="flex-1 relative">
                    <input type="text" id="medicineSearch" placeholder="Search product by name or barcode..."
                        class="input-modern w-full rounded-lg px-3 py-2.5 text-sm"
                        autocomplete="off">
                </div>
                <div class="w-64">
                    <select id="customerSelect" name="customer_id" required
                        class="input-modern w-full rounded-lg px-3 py-2.5 text-sm">
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div id="productGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 p-4 max-h-[380px] overflow-y-auto border-b"></div>

        <div class="overflow-x-auto">
            <table class="min-w-full" id="cartTable">
                <thead class="table-header">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase">Product</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase">Price</th>
                        <th class="px-4 py-3 text-center text-xs font-medium uppercase">Qty</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase">Discount</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase">Subtotal</th>
                        <th class="px-4 py-3 text-center text-xs font-medium uppercase"></th>
                    </tr>
                </thead>
                <tbody id="cartItems" class="table-row">
                    <tr id="emptyCart">
                        <td colspan="6" class="px-4 py-8 text-center">
                            <i class="fas fa-shopping-cart text-3xl mb-2"></i>
                            <p>Search and add products to cart</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div>
        <div class="glass-card rounded-xl p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">Payment Summary</h3>

            <div class="space-y-3 mb-4">
                <div class="flex justify-between text-sm">
                    <span>Subtotal</span>
                    <span class="font-medium" id="subtotal">$0.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span>Discount</span>
                    <div class="flex items-center gap-1">
                        <input type="number" id="discount" value="0" min="0" step="0.01"
                            class="w-20 input-modern rounded px-2 py-1 text-sm text-right"
                            oninput="calculateTotals()">
                        <span>$</span>
                    </div>
                </div>
                <div class="flex justify-between text-sm">
                    <span>Tax (%)</span>
                    <div class="flex items-center gap-1">
                        <input type="number" id="taxRate" value="{{ \App\Models\Setting::get('default_tax_rate', '0') }}" min="0" max="100" step="0.1"
                            class="w-20 input-modern rounded px-2 py-1 text-sm text-right"
                            oninput="calculateTotals()">
                        <span>%</span>
                    </div>
                </div>
                <div class="border-t pt-3 flex justify-between">
                    <span class="text-lg font-bold">Total</span>
                    <span class="text-lg font-bold" id="total" style="color: var(--accent)">$0.00</span>
                </div>
            </div>

            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-medium mb-1">Payment Method</label>
                    <select id="paymentMethod" onchange="updatePaymentAccounts()"
                        class="input-modern w-full rounded-lg px-3 py-2 text-sm">
                        <option value="none" selected>None</option>
                        @foreach($paymentMethods as $method)
                            <option value="{{ $method->code }}" data-id="{{ $method->id }}">{{ $method->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div id="paymentAccountWrapper">
                    <label class="block text-sm font-medium mb-1">Payment Account</label>
                    <select id="paymentAccount"
                        class="input-modern w-full rounded-lg px-3 py-2 text-sm">
                    </select>
                    <p id="accountBalance" class="text-xs font-medium mt-1"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Amount Paid</label>
                    <input type="number" id="paidAmount" value="0" min="0" step="0.01"
                        class="input-modern w-full rounded-lg px-3 py-2.5 text-lg font-medium"
                        oninput="calculateChange()">
                </div>
                <div class="flex justify-between items-center p-3 rounded-lg" id="changeBox">
                    <span class="text-sm font-medium">Change</span>
                    <span class="text-xl font-bold" id="changeAmount">$0.00</span>
                </div>
                <div class="flex items-center justify-between p-3 rounded-lg border" id="statusBox">
                    <span class="text-sm font-medium">Status</span>
                    <span class="text-sm font-semibold text-red-600" id="paymentStatus"><i class="fas fa-times-circle mr-1"></i>Unpaid</span>
                </div>
            </div>

            <div class="mt-4">
                <label class="block text-sm font-medium mb-1">Notes</label>
                <textarea id="notes" rows="2"
                    class="input-modern w-full rounded-lg px-3 py-2 text-sm"></textarea>
            </div>

            <form id="saleForm" method="POST" action="{{ route('sales.store') }}">
                @csrf
                <input type="hidden" name="customer_id" id="formCustomerId">
                <input type="hidden" name="discount" id="formDiscount" value="0">
                <input type="hidden" name="tax" id="formTax" value="0">
                <input type="hidden" name="payment_method" id="formPaymentMethod" value="cash">
                <input type="hidden" name="payment_account_id" id="formPaymentAccountId" value="">
                <input type="hidden" name="paid_amount" id="formPaidAmount" value="0">
                <input type="hidden" name="notes" id="formNotes">
                <div id="formItems"></div>

                <button type="button" id="submitBtn" disabled onclick="submitSale()"
                    class="btn-primary w-full mt-4 py-3 rounded-lg font-semibold text-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <i class="fas fa-check-circle mr-2"></i> Complete Sale
                </button>
            </form>
        </div>
    </div>
</div>

<script>
let cart = [];
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const allMedicines = @json($products);
const paymentMethods = @json($paymentMethods);
const uploadsBase = '{{ asset('uploads') }}';

function updatePaymentAccounts() {
    const methodCode = document.getElementById('paymentMethod').value;
    const accountSelect = document.getElementById('paymentAccount');
    accountSelect.innerHTML = '';

    document.getElementById('paymentAccountWrapper').style.display = methodCode === 'none' ? 'none' : 'block';

    if (methodCode === 'none') {
        accountSelect.innerHTML = '<option value="">Not applicable</option>';
        accountSelect.disabled = true;
        document.getElementById('formPaymentAccountId').value = '';
        document.getElementById('accountBalance').textContent = '';
        return;
    }

    accountSelect.disabled = false;
    const method = paymentMethods.find(m => m.code === methodCode);

    if (!method || method.accounts.length === 0) {
        accountSelect.innerHTML = '<option value="">No accounts available</option>';
        document.getElementById('formPaymentAccountId').value = '';
        document.getElementById('accountBalance').textContent = '';
        return;
    }

    const defaultAccount = method.accounts.find(a => a.is_default) || method.accounts[0];

    method.accounts.forEach(account => {
        const opt = document.createElement('option');
        opt.value = account.id;
        const bal = parseFloat(account.balance || 0);
        opt.textContent = account.name + (account.is_default ? ' (Default)' : '') + ' — $' + bal.toFixed(2);
        opt.dataset.balance = bal;
        if (account.id === defaultAccount.id) opt.selected = true;
        accountSelect.appendChild(opt);
    });

    updateAccountBalanceDisplay();
    document.getElementById('formPaymentAccountId').value = accountSelect.value;
}

function updateAccountBalanceDisplay() {
    const accountSelect = document.getElementById('paymentAccount');
    const selected = accountSelect.options[accountSelect.selectedIndex];
    const bal = parseFloat(selected?.dataset?.balance || 0);
    const balEl = document.getElementById('accountBalance');
    if (balEl) {
        balEl.textContent = 'Balance: $' + bal.toFixed(2);
        balEl.className = bal <= 0 ? 'text-xs font-medium text-red-500 mt-1' : 'text-xs font-medium mt-1';
    }
}

document.getElementById('paymentAccount').addEventListener('change', function() {
    document.getElementById('formPaymentAccountId').value = this.value;
    updateAccountBalanceDisplay();
    calculateChange();
});

updatePaymentAccounts();

function renderProductGrid(filter = '') {
    const grid = document.getElementById('productGrid');
    const query = filter.toLowerCase().trim();
    const filtered = query
        ? allMedicines.filter(m =>
            m.name.toLowerCase().includes(query) ||
            (m.generic_name && m.generic_name.toLowerCase().includes(query)) ||
            (m.barcode && m.barcode.toLowerCase().includes(query))
          )
        : allMedicines;

    if (filtered.length === 0) {
        grid.innerHTML = '<div class="col-span-full text-center py-8"><i class="fas fa-search text-3xl mb-2"></i><p>No products found</p></div>';
        return;
    }

    grid.innerHTML = '';
    filtered.forEach(medicine => {
        const isPromo = medicine.promo_price !== null && (medicine.promo_start === null || new Date(medicine.promo_start) <= new Date()) && (medicine.promo_end === null || new Date(medicine.promo_end) >= new Date());
        const displayPrice = isPromo ? parseFloat(medicine.promo_price) : parseFloat(medicine.selling_price);
        const inCart = cart.some(item => item.product_id === medicine.id);

        const card = document.createElement('div');
        card.className = 'product-card rounded-lg p-2 cursor-pointer transition-all' + (inCart ? ' in-cart' : '');
        card.dataset.productId = medicine.id;
        const lowStock = medicine.quantity <= (medicine.reorder_level || 0);
        const stockClass = lowStock ? 'stock-low' : 'stock-ok';
        card.innerHTML = `
            <div class="product-image-placeholder h-20 rounded-md overflow-hidden flex items-center justify-center mb-1.5">
                ${medicine.image
                    ? `<img src="${uploadsBase}/products/${medicine.image}" class="w-full h-full object-cover" loading="lazy">`
                    : `<i class="fas fa-pills text-2xl"></i>`
                }
            </div>
            <p class="text-xs font-medium truncate" title="${medicine.name.replace(/"/g, '&quot;')}">${medicine.name}</p>
            <p class="text-[10px] truncate">${medicine.category.name}</p>
            <div class="flex items-center justify-between mt-1">
                <span class="text-xs font-bold ${isPromo ? 'promo-price' : 'product-price'}">$${displayPrice.toFixed(2)}</span>
                <span class="stock-badge ${stockClass}">${medicine.quantity}</span>
            </div>
            ${isPromo ? '<span class="promo-badge">PROMO</span>' : ''}
        `;
        card.addEventListener('click', () => addToCart(medicine));
        grid.appendChild(card);
    });
}

document.getElementById('medicineSearch').addEventListener('input', function() {
    renderProductGrid(this.value);
});

renderProductGrid();

function addToCart(medicine) {
    const isPromo = medicine.promo_price !== null && (medicine.promo_start === null || new Date(medicine.promo_start) <= new Date()) && (medicine.promo_end === null || new Date(medicine.promo_end) >= new Date());
    const effectivePrice = isPromo ? parseFloat(medicine.promo_price) : parseFloat(medicine.selling_price);
    const existing = cart.find(item => item.product_id === medicine.id);
    if (existing) {
        if (existing.quantity < existing.max_qty) {
            existing.quantity++;
        } else {
            alert('Maximum stock reached!');
            return;
        }
    } else {
        cart.push({
            product_id: medicine.id,
            name: medicine.name,
            price: effectivePrice,
            regular_price: parseFloat(medicine.selling_price),
            is_promo: isPromo,
            quantity: 1,
            max_qty: medicine.quantity,
            discount: 0
        });
    }
    renderCart();
    document.getElementById('medicineSearch').value = '';
    renderProductGrid();
}

function renderCart() {
    const tbody = document.getElementById('cartItems');
    const emptyCart = document.getElementById('emptyCart');

    if (cart.length === 0) {
        tbody.innerHTML = `<tr id="emptyCart"><td colspan="6" class="px-4 py-8 text-center"><i class="fas fa-shopping-cart text-3xl mb-2"></i><p>Search and add products to cart</p></td></tr>`;
        document.getElementById('submitBtn').disabled = true;
        calculateTotals();
        return;
    }

    tbody.innerHTML = '';
    cart.forEach((item, index) => {
        const subtotal = (item.price * item.quantity) - item.discount;
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="px-4 py-3">
                <p class="text-sm font-medium">${item.name}</p>
                ${item.is_promo ? '<span class="promo-badge" style="font-size:10px;padding:1px 6px">PROMO</span>' : ''}
            </td>
            <td class="px-4 py-3 text-sm text-right">
                ${item.is_promo ? `<span class="text-xs line-through mr-1">$${item.regular_price.toFixed(2)}</span>` : ''}
                <span class="${item.is_promo ? 'promo-price font-bold' : ''}">$${item.price.toFixed(2)}</span>
            </td>
            <td class="px-4 py-3 text-center">
                <input type="number" value="${item.quantity}" min="1" max="${item.max_qty}"
                    onchange="updateQuantity(${index}, this.value)"
                    class="input-modern w-16 rounded px-2 py-1 text-sm text-center">
            </td>
            <td class="px-4 py-3 text-right">
                <input type="number" value="${item.discount}" min="0" step="0.01"
                    onchange="updateDiscount(${index}, this.value)"
                    class="input-modern w-20 rounded px-2 py-1 text-sm text-right">
            </td>
            <td class="px-4 py-3 text-sm text-right font-medium">$${subtotal.toFixed(2)}</td>
            <td class="px-4 py-3 text-center">
                <button onclick="removeFromCart(${index})" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
            </td>
        `;
        tbody.appendChild(tr);
    });

    document.getElementById('submitBtn').disabled = false;
    calculateTotals();
}

function updateQuantity(index, value) {
    const qty = parseInt(value);
    if (qty > cart[index].max_qty) {
        alert(`Only ${cart[index].max_qty} available`);
        cart[index].quantity = cart[index].max_qty;
    } else if (qty < 1) {
        cart[index].quantity = 1;
    } else {
        cart[index].quantity = qty;
    }
    renderCart();
}

function updateDiscount(index, value) {
    cart[index].discount = parseFloat(value) || 0;
    renderCart();
}

function removeFromCart(index) {
    cart.splice(index, 1);
    renderCart();
    renderProductGrid(document.getElementById('medicineSearch').value);
}

function calculateTotals() {
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity) - item.discount, 0);
    const discount = parseFloat(document.getElementById('discount').value) || 0;
    const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
    const tax = (subtotal - discount) * (taxRate / 100);
    const total = subtotal - discount + tax;

    document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('total').textContent = `$${total.toFixed(2)}`;

    calculateChange();
    return { subtotal, discount, tax, total };
}

function calculateChange() {
    const totals = calculateTotals();
    const paid = parseFloat(document.getElementById('paidAmount').value) || 0;
    const change = paid - totals.total;

    const changeEl = document.getElementById('changeAmount');
    const statusEl = document.getElementById('paymentStatus');
    const changeBox = document.getElementById('changeBox');
    const statusBox = document.getElementById('statusBox');

    changeEl.textContent = `$${Math.max(0, change).toFixed(2)}`;

    if (paid == 0) {
        changeEl.className = 'text-xl font-bold';
        changeBox.className = 'flex items-center justify-between p-3 rounded-lg border';
        statusBox.className = 'flex items-center justify-between p-3 rounded-lg border';
        statusEl.className = 'text-sm font-semibold text-red-600';
        statusEl.innerHTML = '<i class="fas fa-times-circle mr-1"></i>Unpaid';
    } else if (paid < totals.total) {
        changeEl.className = 'text-xl font-bold text-amber-600';
        changeBox.className = 'flex items-center justify-between p-3 rounded-lg bg-amber-50 border border-amber-200';
        statusBox.className = 'flex items-center justify-between p-3 rounded-lg bg-amber-50 border border-amber-200';
        statusEl.className = 'text-sm font-semibold text-amber-600';
        statusEl.innerHTML = '<i class="fas fa-clock mr-1"></i>Partial';
    } else {
        changeEl.className = 'text-xl font-bold text-emerald-600';
        changeBox.className = 'flex justify-between items-center p-3 rounded-lg bg-emerald-50 border border-emerald-200';
        statusBox.className = 'flex items-center justify-between p-3 rounded-lg bg-emerald-50 border border-emerald-200';
        statusEl.className = 'text-sm font-semibold text-emerald-600';
        statusEl.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Paid';
    }

    document.getElementById('submitBtn').disabled = cart.length === 0;
}

function submitSale() {
    if (cart.length === 0) return;

    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity) - item.discount, 0);
    const discount = parseFloat(document.getElementById('discount').value) || 0;
    const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
    const tax = (subtotal - discount) * (taxRate / 100);
    const total = subtotal - discount + tax;
    const paid = parseFloat(document.getElementById('paidAmount').value) || 0;

    const paymentAccountId = document.getElementById('paymentAccount').value;
    const paymentMethod = document.getElementById('paymentMethod').value;

    if (paymentMethod !== 'none' && !paymentAccountId) {
        alert('Please select a payment account');
        return;
    }

    document.getElementById('formCustomerId').value = document.getElementById('customerSelect').value || '';
    document.getElementById('formDiscount').value = discount.toFixed(2);
    document.getElementById('formTax').value = tax.toFixed(2);
    document.getElementById('formPaymentMethod').value = paymentMethod;
    document.getElementById('formPaymentAccountId').value = paymentMethod === 'none' ? '' : (paymentAccountId || '');
    document.getElementById('formPaidAmount').value = paid.toFixed(2);
    document.getElementById('formNotes').value = document.getElementById('notes').value || '';

    const itemsDiv = document.getElementById('formItems');
    itemsDiv.innerHTML = '';

    for (let i = 0; i < cart.length; i++) {
        const item = cart[i];
        const fields = [
            ['product_id', item.product_id],
            ['quantity', item.quantity],
            ['price', item.price.toFixed(2)],
            ['discount', item.discount.toFixed(2)],
            ['is_promo', item.is_promo ? '1' : '0'],
            ['regular_price', item.regular_price ? item.regular_price.toFixed(2) : '']
        ];
        fields.forEach(([name, value]) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'items[' + i + '][' + name + ']';
            input.value = value;
            itemsDiv.appendChild(input);
        });
    }

    document.getElementById('saleForm').submit();
}
</script>
@endcan
@endsection