@extends('layouts.app')
@section('title', 'Receive Products')
@section('content')
<div class="flex items-center gap-3 mb-5">
    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
    </div>
    <div>
        <h1 class="text-lg font-bold text-gray-900">Receive Products</h1>
        <p class="text-xs text-gray-400">Record new stock received from supplier</p>
    </div>
</div>

<form method="POST" action="{{ route('pharmacy.receive.store') }}" id="receiveForm" onsubmit="return validateReceiveForm()">
@csrf

<div class="bg-white rounded-xl border shadow-sm p-5 mb-5">
    <h3 class="text-sm font-bold text-gray-800 mb-4">Order Information</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="form-label">Supplier *</label>
            <select name="supplier_id" required class="form-input">
                <option value="">Select supplier…</option>
                @foreach($suppliers ?? [] as $s)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Date Received *</label>
            <input type="date" name="date_received" value="{{ date('Y-m-d') }}" required class="form-input">
        </div>
        <div>
            <label class="form-label">Storeroom</label>
            <select name="storeroom" class="form-input">
                <option value="main">Clara Rosa Hospital</option>
                <option value="pharmacy">Pharmacy Store</option>
            </select>
        </div>
    </div>
</div>

{{-- Products Table --}}
<div class="bg-white rounded-xl border shadow-sm">
    <div class="px-5 py-3 border-b flex justify-between items-center">
        <h3 class="text-sm font-bold text-gray-800">Products</h3>
        <button type="button" onclick="addProductRow()" class="btn-primary text-xs">+ Add Product</button>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full" id="productsTable">
            <thead><tr class="bg-gray-50">
                <th class="table-header" style="min-width:240px">Name</th>
                <th class="table-header" style="width:100px">Quantity Received</th>
                <th class="table-header" style="width:130px">Unit Buying Price</th>
                <th class="table-header" style="width:130px">Total Paid</th>
                <th class="table-header" style="width:150px">Expiration Date</th>
                <th class="table-header" style="width:50px"></th>
            </tr></thead>
            <tbody id="productRows">
                {{-- First row pre-added --}}
                <tr class="product-row border-b border-gray-50" data-index="0">
                    <td class="table-cell">
                        <div class="relative">
                            <input type="text" class="form-input text-xs drug-search-input" placeholder="Search drug…" data-index="0" autocomplete="off">
                            <div class="drug-dropdown hidden absolute z-50 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto"></div>
                            <input type="hidden" name="products[0][drug_item_id]" class="drug-id-input">
                            <input type="hidden" name="products[0][selling_price]" class="selling-price-input">
                        </div>
                    </td>
                    <td class="table-cell"><input type="number" name="products[0][quantity]" min="1" class="form-input text-xs qty-input" placeholder="0" oninput="calcRowTotal(this)"></td>
                    <td class="table-cell"><input type="number" step="0.01" name="products[0][unit_cost]" min="0" class="form-input text-xs cost-input" placeholder="0.00" oninput="calcRowTotal(this)"></td>
                    <td class="table-cell"><span class="row-total text-sm font-semibold text-gray-700">KES 0</span></td>
                    <td class="table-cell"><input type="date" name="products[0][expiry_date]" class="form-input text-xs"></td>
                    <td class="table-cell text-center"><button type="button" onclick="removeProductRow(this)" class="text-red-400 hover:text-red-600"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="px-5 py-3 border-t flex justify-between items-center bg-gray-50/50">
        <button type="button" onclick="addProductRow()" class="text-cr-600 text-xs font-semibold hover:underline">+ Add another product</button>
        <div class="text-sm font-bold">Total: <span id="tableTotal" class="text-green-600">KES 0</span></div>
    </div>
</div>

{{-- Payment --}}
<div class="bg-white rounded-xl border shadow-sm mb-5 p-5">
    <h3 class="text-sm font-bold text-gray-800 mb-4">Payments</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="form-label">Payment Method *</label>
            <select name="payment_method" required class="form-input">
                <option value="">Select a payment method…</option>
                <option value="cash">Cash</option>
                <option value="mobile_money">Mobile Money</option>
                <option value="credit_card">Credit or Debit Card</option>
                <option value="debit_card">Debit Card</option>
                <option value="cheque">Cheque</option>
            </select>
        </div>
        <div>
            <label class="form-label">Reference / Receipt #</label>
            <input type="text" name="payment_reference" class="form-input" placeholder="e.g. cheque no., M-Pesa code…">
        </div>
        <div>
            <label class="form-label">Grand Total</label>
            <div class="form-input bg-gray-50 text-lg font-bold text-green-600" id="grandTotal">KES 0</div>
        </div>
    </div>
</div>

<div class="flex justify-end gap-3 mt-5">
    <a href="{{ route('pharmacy.drugs') }}" class="btn-secondary">Cancel</a>
    <button type="submit" class="btn-success text-sm px-6 py-2.5">Receive Products</button>
</div>
</form>
@endsection

@section('scripts')
<script>
let rowIndex = 1;

function addProductRow() {
    const i = rowIndex++;
    const row = document.createElement('tr');
    row.className = 'product-row border-b border-gray-50';
    row.dataset.index = i;
    row.innerHTML = `
        <td class="table-cell">
            <div class="relative">
                <input type="text" class="form-input text-xs drug-search-input" placeholder="Search drug…" data-index="${i}" autocomplete="off">
                <div class="drug-dropdown hidden absolute z-50 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto"></div>
                <input type="hidden" name="products[${i}][drug_item_id]" class="drug-id-input">
                <input type="hidden" name="products[${i}][selling_price]" class="selling-price-input">
            </div>
        </td>
        <td class="table-cell"><input type="number" name="products[${i}][quantity]" min="1" class="form-input text-xs qty-input" placeholder="0" oninput="calcRowTotal(this)"></td>
        <td class="table-cell"><input type="number" step="0.01" name="products[${i}][unit_cost]" min="0" class="form-input text-xs cost-input" placeholder="0.00" oninput="calcRowTotal(this)"></td>
        <td class="table-cell"><span class="row-total text-sm font-semibold text-gray-700">KES 0</span></td>
        <td class="table-cell"><input type="date" name="products[${i}][expiry_date]" class="form-input text-xs"></td>
        <td class="table-cell text-center"><button type="button" onclick="removeProductRow(this)" class="text-red-400 hover:text-red-600"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></td>`;
    document.getElementById('productRows').appendChild(row);
    initDrugSearch(row.querySelector('.drug-search-input'));
}

function removeProductRow(btn) {
    const rows = document.querySelectorAll('.product-row');
    if (rows.length <= 1) return; // keep at least one row
    btn.closest('tr').remove();
    recalcGrandTotal();
}

function calcRowTotal(input) {
    const row = input.closest('tr');
    const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;
    const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
    const total = qty * cost;
    row.querySelector('.row-total').textContent = 'KES ' + total.toLocaleString();
    recalcGrandTotal();
}

function recalcGrandTotal() {
    let grand = 0;
    document.querySelectorAll('.product-row').forEach(row => {
        const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;
        const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
        grand += qty * cost;
    });
    document.getElementById('grandTotal').textContent = 'KES ' + grand.toLocaleString();
    document.getElementById('tableTotal').textContent = 'KES ' + grand.toLocaleString();
}

// Drug search with auto-populate
function initDrugSearch(input) {
    const wrapper = input.closest('.relative');
    const dropdown = wrapper.querySelector('.drug-dropdown');
    let debounce;

    input.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        if (q.length < 2) { dropdown.classList.add('hidden'); return; }
        debounce = setTimeout(() => {
            fetch(`${window.HMIS_BASE}/pharmacy/drugs-search?q=${encodeURIComponent(q)}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                }
            })
            .then(r => {
                if (!r.ok) throw new Error('Network error');
                return r.json();
            })
            .then(drugs => {
                if (!drugs.length) {
                    dropdown.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">No drugs found</div>';
                } else {
                    dropdown.innerHTML = drugs.map(d => `
                        <div class="px-3 py-2 hover:bg-blue-50 cursor-pointer border-b border-gray-50 drug-option"
                             data-id="${d.id}" data-name="${d.name}" data-price="${d.selling_price}">
                            <p class="text-xs font-medium text-gray-800">${d.name}</p>
                            <p class="text-xs text-gray-400">${d.generic_name || ''} · ${d.form || ''} · ${d.strength || ''} · Sell: KES ${Number(d.selling_price).toLocaleString()}</p>
                        </div>
                    `).join('');
                }
                dropdown.classList.remove('hidden');

                dropdown.querySelectorAll('.drug-option').forEach(opt => {
                    opt.addEventListener('click', () => {
                        input.value = opt.dataset.name;
                        wrapper.querySelector('.drug-id-input').value = opt.dataset.id;
                        wrapper.querySelector('.selling-price-input').value = opt.dataset.price;
                        input.classList.add('border-green-400', 'bg-green-50');
                        dropdown.classList.add('hidden');
                    });
                });
            }).catch(err => { console.error('Drug search error:', err); });
        }, 300);
    });

    document.addEventListener('click', e => {
        if (!wrapper.contains(e.target)) dropdown.classList.add('hidden');
    });
}

// Init first row search
document.querySelectorAll('.drug-search-input').forEach(initDrugSearch);

// ── Client-side validation | highlight errors, do NOT clear form ──
function validateReceiveForm() {
    let valid = true;
    // Clear previous errors
    document.querySelectorAll('.field-error').forEach(el => el.classList.remove('field-error', 'border-red-500', 'bg-red-50'));
    document.querySelectorAll('.error-msg').forEach(el => el.remove());

    function markError(input, msg) {
        input.classList.add('border-red-500', 'bg-red-50', 'field-error');
        const err = document.createElement('p');
        err.className = 'error-msg text-xs text-red-600 mt-0.5';
        err.textContent = msg;
        input.parentElement.appendChild(err);
        valid = false;
    }

    // Validate supplier
    const supplier = document.querySelector('[name="supplier_id"]');
    if (!supplier.value) markError(supplier, 'Supplier is required');

    // Validate date
    const dateRcv = document.querySelector('[name="date_received"]');
    if (!dateRcv.value) markError(dateRcv, 'Date is required');

    // Validate payment
    const payMethod = document.querySelector('[name="payment_method"]');
    if (!payMethod.value) markError(payMethod, 'Payment method is required');

    // Validate each product row
    document.querySelectorAll('.product-row').forEach((row, i) => {
        const drugId = row.querySelector('.drug-id-input');
        const drugSearch = row.querySelector('.drug-search-input');
        const qty = row.querySelector('.qty-input');
        const cost = row.querySelector('.cost-input');
        const expiry = row.querySelector('[name*="expiry_date"]');

        if (!drugId || !drugId.value) markError(drugSearch, 'Select a drug');
        if (!qty.value || parseInt(qty.value) < 1) markError(qty, 'Required');
        if (!cost.value || parseFloat(cost.value) < 0) markError(cost, 'Required');
        if (!expiry.value) markError(expiry, 'Expiry date required');
        else {
            const exp = new Date(expiry.value);
            if (exp <= new Date()) markError(expiry, 'Must be a future date');
        }
    });

    if (!valid) {
        // Scroll to first error
        const firstErr = document.querySelector('.field-error');
        if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    return valid;
}
</script>
@endsection