@extends('layouts.app')

@section('title', 'New Purchase - Pharmacy Management')

@section('content')
@can('create_purchases')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">New Purchase</h1>
    <a href="{{ route('purchases.index') }}" class="text-sm text-brand-600 hover:text-brand-800">&larr; Back to Purchases</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-4 border-b border-gray-200">
            <select id="medicineSelect" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm" onchange="addPurchaseItem(this.value)">
                <option value="">Select product to add...</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}" data-price="{{ $product->cost_price }}">{{ $product->name }} ({{ $product->category->name }})</option>
                @endforeach
            </select>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost Price</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qty</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Subtotal</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase"></th>
                    </tr>
                </thead>
                <tbody id="purchaseItems" class="divide-y divide-gray-200">
                    <tr id="emptyPurchase">
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            <i class="fas fa-boxes-stacked text-3xl mb-2 text-gray-300"></i>
                            <p>Select products to add</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Purchase Summary</h3>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Supplier *</label>
                <select id="supplierId" name="supplier_id" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                    <option value="">Select Supplier</option>
                    @foreach($suppliers as $supplier)
                        <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Purchase Date *</label>
                <input type="date" id="purchaseDate" value="{{ now()->format('Y-m-d') }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
            </div>

            <div class="space-y-3 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Subtotal</span>
                    <span class="font-medium" id="subtotal">$0.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Discount</span>
                    <div class="flex items-center gap-1">
                        <input type="number" id="discount" value="0" min="0" step="0.01"
                            class="w-20 rounded border border-gray-300 px-2 py-1 text-sm text-right" oninput="calculateTotals()">
                    </div>
                </div>
                <div class="border-t border-gray-200 pt-3 flex justify-between">
                    <span class="text-lg font-bold text-gray-900">Total</span>
                    <span class="text-lg font-bold text-blue-600" id="total">$0.00</span>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Payment Status</label>
                <select id="paymentStatus"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                    <option value="pending">Pending</option>
                    <option value="partial">Partial</option>
                    <option value="paid">Paid</option>
                </select>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                <select id="paymentMethod" onchange="updatePurchaseAccounts()"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                    <option value="none" selected>None</option>
                    @foreach($paymentMethods as $method)
                        <option value="{{ $method->code }}">{{ $method->name }}</option>
                    @endforeach
                </select>
            </div>

            <div id="paymentAccountWrapper" class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Payment Account</label>
                <select id="paymentAccount" onchange="updatePurchaseBalance()"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                </select>
                <p id="purchaseAccountBalance" class="text-xs font-medium text-gray-500 mt-1"></p>
                <p id="purchaseFundsWarning" class="text-xs font-medium mt-1"></p>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Paid Amount</label>
                <input type="number" id="paidAmount" value="0" min="0" step="0.01"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-lg font-medium" oninput="updatePurchaseBalance()">
            </div>

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

            <form id="purchaseForm" method="POST" action="{{ route('purchases.store') }}">
                @csrf
                <input type="hidden" name="supplier_id" id="formSupplierId">
                <input type="hidden" name="purchase_date" id="formPurchaseDate">
                <input type="hidden" name="discount" id="formDiscount">
                <input type="hidden" name="payment_status" id="formPaymentStatus">
                <input type="hidden" name="payment_account_id" id="formPaymentAccountId">
                <input type="hidden" name="paid_amount" id="formPaidAmount">
                <input type="hidden" name="notes" id="formNotes">
                <div id="formItems"></div>

                <button type="button" id="submitBtn" disabled onclick="submitPurchase()"
                    class="w-full mt-4 bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-semibold disabled:bg-gray-400 disabled:cursor-not-allowed">
                    <i class="fas fa-check-circle mr-2"></i> Record Purchase
                </button>
            </form>
        </div>
    </div>
</div>

<script>
let items = [];
const purchasePaymentMethods = @json($paymentMethods);

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

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

    wrapper.style.display = 'block';
    accountSelect.disabled = false;
    const method = purchasePaymentMethods.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('purchaseAccountBalance').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);
    });
    document.getElementById('formPaymentAccountId').value = accountSelect.value;
    updatePurchaseBalance();
}

function updatePurchaseBalance() {
    const accountSelect = document.getElementById('paymentAccount');
    const selected = accountSelect.options[accountSelect.selectedIndex];
    const balance = parseFloat(selected?.dataset?.balance || 0);
    const paid = parseFloat(document.getElementById('paidAmount').value) || 0;
    const balEl = document.getElementById('purchaseAccountBalance');
    const warnEl = document.getElementById('purchaseFundsWarning');

    if (accountSelect.value) {
        balEl.textContent = 'Balance: $' + balance.toFixed(2);
        balEl.className = balance <= 0 ? 'text-xs font-medium text-red-500 mt-1' : 'text-xs font-medium text-gray-500 mt-1';

        if (paid > balance) {
            warnEl.className = 'text-xs font-medium text-red-500 mt-1';
            warnEl.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i>Insufficient funds';
        } else {
            warnEl.innerHTML = '';
        }
    } else {
        balEl.textContent = '';
        warnEl.innerHTML = '';
    }
}

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

updatePurchaseAccounts();

function addPurchaseItem(medicineId) {
    if (!medicineId) return;
    const select = document.getElementById('medicineSelect');
    const option = select.options[select.selectedIndex];
    const price = parseFloat(option.dataset.price) || 0;
    const name = option.text;

    const existing = items.find(i => i.product_id == medicineId);
    if (existing) {
        existing.quantity++;
    } else {
        items.push({ product_id: medicineId, name, cost_price: price, quantity: 1 });
    }
    select.value = '';
    renderItems();
}

function renderItems() {
    const tbody = document.getElementById('purchaseItems');
    if (items.length === 0) {
        tbody.innerHTML = '<tr id="emptyPurchase"><td colspan="5" class="px-4 py-8 text-center text-gray-500"><i class="fas fa-boxes-stacked text-3xl mb-2 text-gray-300"></i><p>Select products to add</p></td></tr>';
        document.getElementById('submitBtn').disabled = true;
        calculateTotals();
        return;
    }
    tbody.innerHTML = '';
    items.forEach((item, index) => {
        const subtotal = item.cost_price * item.quantity;
        tbody.innerHTML += `
            <tr>
                <td class="px-4 py-3 text-sm font-medium">${item.name}</td>
                <td class="px-4 py-3 text-sm text-right">
                    <input type="number" value="${item.cost_price.toFixed(2)}" min="0" step="0.01"
                        onchange="updateCostPrice(${index}, this.value)"
                        class="w-24 rounded border border-gray-300 px-2 py-1 text-sm text-right">
                </td>
                <td class="px-4 py-3 text-center">
                    <input type="number" value="${item.quantity}" min="1" onchange="updateQty(${index}, this.value)" class="w-16 rounded border border-gray-300 px-2 py-1 text-sm text-center">
                </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="removeItem(${index})" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
        `;
    });
    document.getElementById('submitBtn').disabled = false;
    calculateTotals();
}

function updateCostPrice(index, val) { items[index].cost_price = parseFloat(val) || 0; renderItems(); }
function updateQty(index, val) { items[index].quantity = parseInt(val) || 1; renderItems(); }
function removeItem(index) { items.splice(index, 1); renderItems(); }

function calculateTotals() {
    const subtotal = items.reduce((sum, item) => sum + (item.cost_price * item.quantity), 0);
    const discount = parseFloat(document.getElementById('discount').value) || 0;
    const total = subtotal - discount;
    document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('total').textContent = `$${total.toFixed(2)}`;
}

function submitPurchase() {
    if (items.length === 0) return;

    const paymentAccountId = document.getElementById('paymentAccount').value;
    if (!paymentAccountId) {
        alert('Please select a payment account');
        return;
    }

    const paid = parseFloat(document.getElementById('paidAmount').value) || 0;
    const accountSelect = document.getElementById('paymentAccount');
    const selected = accountSelect.options[accountSelect.selectedIndex];
    const balance = parseFloat(selected?.dataset?.balance || 0);

    if (paid > balance) {
        alert('Insufficient funds. ' + selected.textContent.split(' — ')[0] + ' has $' + balance.toFixed(2) + ' but $' + paid.toFixed(2) + ' is required.');
        return;
    }

    document.getElementById('formSupplierId').value = document.getElementById('supplierId').value;
    document.getElementById('formPurchaseDate').value = document.getElementById('purchaseDate').value;
    document.getElementById('formDiscount').value = document.getElementById('discount').value;
    document.getElementById('formPaymentStatus').value = document.getElementById('paymentStatus').value;
    document.getElementById('formPaymentAccountId').value = paymentAccountId;
    document.getElementById('formPaidAmount').value = document.getElementById('paidAmount').value;
    document.getElementById('formNotes').value = document.getElementById('notes').value || '';

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

    for (let i = 0; i < items.length; i++) {
        const item = items[i];

        const inputProduct = document.createElement('input');
        inputProduct.type = 'hidden';
        inputProduct.name = 'items[' + i + '][product_id]';
        inputProduct.value = item.product_id;
        itemsDiv.appendChild(inputProduct);

        const inputQty = document.createElement('input');
        inputQty.type = 'hidden';
        inputQty.name = 'items[' + i + '][quantity]';
        inputQty.value = item.quantity;
        itemsDiv.appendChild(inputQty);

        const inputPrice = document.createElement('input');
        inputPrice.type = 'hidden';
        inputPrice.name = 'items[' + i + '][cost_price]';
        inputPrice.value = item.cost_price.toFixed(2);
        itemsDiv.appendChild(inputPrice);
    }

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