@extends('layouts.app')
@section('title', 'Pharmacy | Edit ' . $receipt->receipt_number)

@section('content')
<div class="flex items-center gap-3 mb-4">
    <a href="{{ route('pharmacy.receipts.show', $receipt->id) }}" class="text-gray-400 hover:text-gray-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <div>
        <div class="flex items-center gap-2">
            <h1 class="text-lg font-bold text-gray-900">Edit Draft</h1>
            <span class="font-mono text-sm text-gray-500">{{ $receipt->receipt_number }}</span>
            <span class="badge badge-warning">Draft</span>
        </div>
        <p class="text-xs text-gray-500 mt-0.5">Changes will not affect stock until you complete the GRN</p>
    </div>
</div>

@if($errors->any())
<div class="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-4 text-sm text-red-700">
    <strong>Please fix the following:</strong>
    <ul class="mt-1 list-disc list-inside space-y-0.5">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
    <p class="mt-2 text-xs italic">Your entries have been preserved. Scroll down to see highlighted fields.</p>
</div>
@endif

<form method="POST" action="{{ route('pharmacy.receipts.update', $receipt->id) }}" id="grnForm">
@csrf
@method('PUT')

{{-- Order Information --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
    <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" id="supplierSelect">
                <option value="">Select supplier...</option>
                @foreach($suppliers as $s)
                <option value="{{ $s->id }}" {{ old('supplier_id', $receipt->supplier_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Date Received *</label>
            <input type="date" name="date_received" value="{{ old('date_received', $receipt->date_received->format('Y-m-d')) }}" required class="form-input">
        </div>
        <div>
            <label class="form-label">Notes</label>
            <input type="text" name="notes" value="{{ old('notes', $receipt->notes) }}" placeholder="Optional notes..." class="form-input">
        </div>
    </div>
</div>

{{-- Products --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-bold text-gray-800">Products</h3>
        <button type="button" onclick="addRow()" class="btn-primary text-xs">+ Add Product</button>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm" id="itemsTable">
            <thead>
                <tr class="bg-gray-50 border-b">
                    <th class="table-header w-64">Drug Name</th>
                    <th class="table-header w-24 text-center">Qty Received</th>
                    <th class="table-header w-28 text-right">Unit Buying (KES)</th>
                    <th class="table-header w-28 text-right">Selling Price (KES)</th>
                    <th class="table-header w-32 text-right">Line Total (KES)</th>
                    <th class="table-header w-32">Expiry Date</th>
                    <th class="table-header w-8"></th>
                </tr>
            </thead>
            <tbody id="itemsBody">
                @php
                    // If old() has items (validation error), use those. Otherwise use saved items.
                    $sourceItems = old('items');
                    if (!$sourceItems) {
                        $sourceItems = $receipt->items->map(function($item) {
                            return [
                                'drug_item_id'  => $item->drug_item_id,
                                'batch_number'  => $item->batch_number,
                                'quantity'      => $item->quantity,
                                'unit_cost'     => $item->unit_cost,
                                'selling_price' => $item->selling_price,
                                'expiry_date'   => optional($item->expiry_date)->format('Y-m-d'),
                                'drug_display'  => ($item->drugItem->name ?? '') . ($item->drugItem->generic_name ? ' – ' . $item->drugItem->generic_name : ''),
                            ];
                        })->toArray();
                    }
                @endphp
                @foreach($sourceItems as $idx => $it)
                @php
                    $drugId = $it['drug_item_id'] ?? '';
                    $drugDisplay = $it['drug_display'] ?? '';
                    if (!$drugDisplay && $drugId && isset($drugLookup[$drugId])) {
                        $info = $drugLookup[$drugId];
                        $drugDisplay = $info['name'] . ($info['generic_name'] ? ' – ' . $info['generic_name'] : '');
                    }
                @endphp
                <tr class="item-row border-b last:border-0">
                    <td class="table-cell">
                        <div class="relative">
                            <input type="text" class="form-input text-xs drug-search" placeholder="Search drug..." autocomplete="off" value="{{ $drugDisplay }}">
                            <input type="hidden" name="items[{{ $idx }}][drug_item_id]" class="drug-id-input" value="{{ $drugId }}">
                            <input type="hidden" name="items[{{ $idx }}][batch_number]" value="{{ $it['batch_number'] ?? '' }}">
                            <div class="drug-dropdown absolute z-20 left-0 right-0 bg-white border rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto hidden"></div>
                        </div>
                    </td>
                    <td class="table-cell">
                        <input type="number" name="items[{{ $idx }}][quantity]" value="{{ $it['quantity'] ?? '' }}" min="1" class="form-input text-xs text-center qty-input" oninput="calcRow(this)">
                    </td>
                    <td class="table-cell">
                        <input type="number" step="0.01" name="items[{{ $idx }}][unit_cost]" value="{{ $it['unit_cost'] ?? '' }}" min="0" class="form-input text-xs text-right cost-input" oninput="calcRow(this)">
                    </td>
                    <td class="table-cell">
                        <input type="number" step="0.01" name="items[{{ $idx }}][selling_price]" value="{{ $it['selling_price'] ?? '' }}" min="0" class="form-input text-xs text-right selling-input">
                    </td>
                    <td class="table-cell text-right font-semibold text-sm line-total">KES 0</td>
                    <td class="table-cell">
                        <input type="date" name="items[{{ $idx }}][expiry_date]" value="{{ $it['expiry_date'] ?? '' }}" class="form-input text-xs expiry-input">
                    </td>
                    <td class="table-cell">
                        <button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 p-1">
                            <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>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="flex justify-end mt-3 pt-3 border-t">
        <span class="text-sm text-gray-500 mr-3">Grand Total:</span>
        <span class="text-lg font-bold text-green-600" id="grandTotal">KES {{ number_format($receipt->grand_total, 2) }}</span>
    </div>
</div>

{{-- Payment --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-5">
    <h3 class="text-sm font-bold text-gray-800 mb-4">Payment Details</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" id="paymentMethodSelect">
                <option value="">Select method...</option>
                @foreach(['cash'=>'Cash','cheque'=>'Cheque','mpesa'=>'M-Pesa','credit'=>'Credit / Invoice','bank_transfer'=>'Bank Transfer'] as $val => $label)
                <option value="{{ $val }}" {{ old('payment_method', $receipt->payment_method) === $val ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Reference / Receipt #</label>
            <input type="text" name="payment_reference" value="{{ old('payment_reference', $receipt->payment_reference) }}" placeholder="e.g. cheque no., M-Pesa code..." class="form-input">
        </div>
        <div>
            <label class="form-label">Grand Total</label>
            <div class="form-input bg-gray-50 text-lg font-bold text-green-600" id="grandTotalDisplay">KES {{ number_format($receipt->grand_total, 2) }}</div>
        </div>
    </div>
</div>

{{-- Actions --}}
<div class="flex items-center justify-between">
    <a href="{{ route('pharmacy.receipts.show', $receipt->id) }}" class="btn-secondary">Cancel</a>
    <div class="flex gap-3">
        <button type="submit" name="action" value="draft" class="btn-secondary" id="saveDraftBtn">Save Changes</button>
        <button type="submit" name="action" value="complete" class="btn-primary" id="completeBtn">Complete &amp; Add to Stock</button>
    </div>
</div>

</form>

<script>
let rowIndex = {{ count($sourceItems) }};

function validateBeforeComplete(e, action) {
    if (action !== 'complete') return true;

    const errors = [];
    const rows = document.querySelectorAll('.item-row');
    const today = new Date().toISOString().split('T')[0];

    document.querySelectorAll('.validation-error').forEach(el => {
        el.classList.remove('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
    });

    let firstErrorEl = null;
    rows.forEach((row, idx) => {
        const rowNum = idx + 1;
        const drugId = row.querySelector('.drug-id-input')?.value;
        const drugSearch = row.querySelector('.drug-search');
        const qty    = row.querySelector('.qty-input');
        const cost   = row.querySelector('.cost-input');
        const sell   = row.querySelector('.selling-input');
        const expiry = row.querySelector('.expiry-input');

        const markError = (el) => {
            if (!el) return;
            el.classList.add('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
            if (!firstErrorEl) firstErrorEl = el;
        };

        if (!drugId) { errors.push('Row ' + rowNum + ': select a drug.'); markError(drugSearch); }
        if (!qty.value || parseInt(qty.value) < 1) { errors.push('Row ' + rowNum + ': quantity required.'); markError(qty); }
        if (cost.value === '' || parseFloat(cost.value) < 0) { errors.push('Row ' + rowNum + ': buying price required.'); markError(cost); }
        if (sell.value === '' || parseFloat(sell.value) < 0) { errors.push('Row ' + rowNum + ': selling price required.'); markError(sell); }
        if (!expiry.value) { errors.push('Row ' + rowNum + ': expiry date required.'); markError(expiry); }
        else if (expiry.value < today) { errors.push('Row ' + rowNum + ': expiry must be today or future.'); markError(expiry); }
    });

    if (errors.length > 0) {
        e.preventDefault();
        const msg = 'Please fix these issues before completing:\n\n• ' + errors.slice(0, 10).join('\n• ') +
                    (errors.length > 10 ? '\n\n...and ' + (errors.length - 10) + ' more.' : '') +
                    '\n\nTip: Use "Save Changes" to keep your edits and finish later.';
        alert(msg);
        if (firstErrorEl) {
            firstErrorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            setTimeout(() => firstErrorEl.focus(), 400);
        }
        return false;
    }
    return confirm('Complete this GRN? This will add all items to stock and cannot be undone.');
}

document.getElementById('completeBtn')?.addEventListener('click', function(e) {
    if (!validateBeforeComplete(e, 'complete')) e.preventDefault();
});

function addRow() {
    const i = rowIndex++;
    const tbody = document.getElementById('itemsBody');
    const tr = document.createElement('tr');
    tr.className = 'item-row border-b last:border-0';
    tr.innerHTML = `
        <td class="table-cell">
            <div class="relative">
                <input type="text" class="form-input text-xs drug-search" placeholder="Search drug..." autocomplete="off">
                <input type="hidden" name="items[${i}][drug_item_id]" class="drug-id-input">
                <div class="drug-dropdown absolute z-20 left-0 right-0 bg-white border rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto hidden"></div>
            </div>
        </td>
        <td class="table-cell"><input type="number" name="items[${i}][quantity]" min="1" class="form-input text-xs text-center qty-input" placeholder="0" oninput="calcRow(this)"></td>
        <td class="table-cell"><input type="number" step="0.01" name="items[${i}][unit_cost]" min="0" class="form-input text-xs text-right cost-input" placeholder="0.00" oninput="calcRow(this)"></td>
        <td class="table-cell"><input type="number" step="0.01" name="items[${i}][selling_price]" min="0" class="form-input text-xs text-right selling-input" placeholder="0.00"></td>
        <td class="table-cell text-right font-semibold text-sm line-total">KES 0</td>
        <td class="table-cell"><input type="date" name="items[${i}][expiry_date]" class="form-input text-xs expiry-input"></td>
        <td class="table-cell"><button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 p-1"><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>`;
    tbody.appendChild(tr);
    initDrugSearch(tr.querySelector('.drug-search'));
}

function removeRow(btn) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length <= 1) { alert('At least one product is required.'); return; }
    btn.closest('tr').remove();
    calcGrandTotal();
}

function calcRow(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('.line-total').textContent = 'KES ' + total.toLocaleString('en-KE', {minimumFractionDigits:2});
    calcGrandTotal();
}

function calcGrandTotal() {
    let total = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty  = parseFloat(row.querySelector('.qty-input')?.value)  || 0;
        const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
        total += qty * cost;
    });
    const fmt = 'KES ' + total.toLocaleString('en-KE', {minimumFractionDigits:2});
    document.getElementById('grandTotal').textContent = fmt;
    document.getElementById('grandTotalDisplay').textContent = fmt;
}

function initDrugSearch(input) {
    if (!input) return;
    const dropdown = input.nextElementSibling.nextElementSibling;
    const hiddenId  = input.nextElementSibling;
    let debounce;

    dropdown.style.position = 'fixed';
    dropdown.style.zIndex   = '9999';
    function positionDropdown() {
        if (dropdown.classList.contains('hidden')) return;
        const r = input.getBoundingClientRect();
        dropdown.style.left  = r.left + 'px';
        dropdown.style.top   = (r.bottom + 2) + 'px';
        dropdown.style.width = r.width + 'px';
    }
    window.addEventListener('scroll', positionDropdown, { passive: true, capture: true });
    window.addEventListener('resize', positionDropdown);
    function openDropdown() { dropdown.classList.remove('hidden'); positionDropdown(); }

    input.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        hiddenId.value = '';
        if (q.length < 2) { dropdown.classList.add('hidden'); return; }

        dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400 italic">Searching…</div>';
        openDropdown();

        debounce = setTimeout(() => {
            fetch(`/pharmacy/drugs-search?q=${encodeURIComponent(q)}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            })
                .then(r => {
                    if (!r.ok) throw new Error('HTTP ' + r.status + ' ' + r.statusText);
                    const ct = r.headers.get('content-type') || '';
                    if (!ct.includes('application/json')) {
                        throw new Error('Server did not return JSON (got ' + ct + '). You may need to log in again.');
                    }
                    return r.json();
                })
                .then(drugs => {
                    dropdown.innerHTML = '';
                    if (!drugs.length) {
                        dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400">No drugs match \u201C' + q.replace(/</g,'&lt;') + '\u201D</div>';
                    } else {
                        drugs.forEach(d => {
                            const div = document.createElement('div');
                            div.className = 'px-3 py-2 text-xs cursor-pointer hover:bg-blue-50 border-b last:border-0';
                            div.innerHTML = `<span class="font-medium">${d.name}</span> <span class="text-gray-400">${d.generic_name ?? ''}</span><br><span class="text-gray-400 font-mono">${d.code}</span>`;
                            div.addEventListener('mousedown', e => {
                                e.preventDefault();
                                input.value = d.name + (d.generic_name ? ' – ' + d.generic_name : '');
                                hiddenId.value = d.id;
                                const row = input.closest('tr');
                                const sp = row.querySelector('.selling-input');
                                if (sp && !sp.value) sp.value = d.selling_price ?? '';
                                dropdown.classList.add('hidden');
                                input.classList.remove('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
                            });
                            dropdown.appendChild(div);
                        });
                    }
                    openDropdown();
                })
                .catch(err => {
                    console.error('Drug search failed:', err);
                    dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-red-600">Search error: ' + (err.message || 'unknown') + '. Try refreshing the page.</div>';
                    openDropdown();
                });
        }, 250);
    });
    input.addEventListener('blur', () => setTimeout(() => dropdown.classList.add('hidden'), 200));
}

document.querySelectorAll('.drug-search').forEach(initDrugSearch);
// Recalculate on load
document.querySelectorAll('.item-row').forEach(row => {
    const qty  = parseFloat(row.querySelector('.qty-input')?.value)  || 0;
    const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
    row.querySelector('.line-total').textContent = 'KES ' + (qty*cost).toLocaleString('en-KE',{minimumFractionDigits:2});
});
calcGrandTotal();
</script>

<style>
.validation-error { background-color: #fef2f2; }
</style>
@endsection