@extends('layouts.app')
@section('title', 'New Procurement Request')
@section('content')

<div class="max-w-4xl mx-auto">
    <div class="flex items-center gap-3 mb-5">
        <a href="{{ route('procurement.requests.index') }}" 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>
            <h1 class="text-lg font-bold text-gray-900">New Procurement Request</h1>
            <p class="text-xs text-gray-400">Add drugs you need to restock. Admin will review and approve.</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">
        <ul class="list-disc list-inside space-y-0.5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
    @endif

    <form method="POST" action="{{ route('procurement.requests.store') }}" id="prForm">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

            <div class="lg:col-span-2 space-y-4">

                @if($suggested->count() > 0)
                <div class="bg-white rounded-xl border shadow-sm p-4">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-bold text-gray-800 text-sm">Suggested — Below Reorder Level</h3>
                        <button type="button" onclick="addAllSuggested()" class="text-xs text-purple-600 font-semibold hover:text-purple-800">Add All →</button>
                    </div>
                    <div class="space-y-2">
                        @foreach($suggested as $d)
                        <div class="flex items-center justify-between p-2.5 rounded-lg border {{ $d->current_stock <= 0 ? 'border-red-200 bg-red-50/30' : 'border-amber-200 bg-amber-50/30' }} gap-3">
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-gray-800 text-xs truncate">{{ $d->name }}</p>
                                <p class="text-xs text-gray-400">
                                    Stock: <span class="{{ $d->current_stock <= 0 ? 'text-red-600 font-bold' : 'text-amber-600 font-bold' }}">{{ $d->current_stock }}</span>
                                    &nbsp;| Reorder: {{ $d->reorder_level }}
                                </p>
                            </div>
                            <button type="button"
                                onclick="addSuggestedDrug({{ $d->id }}, {{ json_encode($d->name) }}, '', {{ $d->reorder_level }}, {{ $d->current_stock }})"
                                class="btn-primary text-xs whitespace-nowrap"
                                id="sugg-btn-{{ $d->id }}">
                                + Add
                            </button>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <div class="bg-white rounded-xl border shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50">
                        <h3 class="font-bold text-gray-800 text-sm">Drugs to Request</h3>
                        <button type="button" onclick="toggleAddPanel()" class="btn-success text-xs">+ Add Drug</button>
                    </div>

                    {{-- Inline add panel - no fixed positioning --}}
                    <div id="addDrugPanel" class="hidden border-b bg-blue-50/40 p-4">
                        <p class="text-xs font-bold text-gray-700 mb-3">Search and add a drug</p>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div class="sm:col-span-3 relative">
                                <label class="form-label">Drug Name *</label>
                                <input type="text" id="drugSearch" class="form-input" placeholder="Type drug name to search…" oninput="filterDrugs(this.value)" autocomplete="off">
                                <div id="drugDropdown" class="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>
                            <div id="selectedDrugInfo" class="hidden sm:col-span-3 p-2.5 bg-blue-100 rounded-lg text-xs text-blue-800"></div>
                            <div>
                                <label class="form-label">Quantity *</label>
                                <input type="number" id="modalQty" class="form-input" min="1" value="1" placeholder="e.g. 100">
                            </div>
                            <div>
                                <label class="form-label">Note <span class="text-gray-400">(optional)</span></label>
                                <input type="text" id="modalNote" class="form-input" placeholder="e.g. brand preference">
                            </div>
                            <div class="flex items-end gap-2">
                                <button type="button" onclick="confirmAddDrug()" class="btn-primary text-xs flex-1">Add to List</button>
                                <button type="button" onclick="toggleAddPanel()" class="btn-secondary text-xs">Cancel</button>
                            </div>
                        </div>
                    </div>

                    <div id="itemsContainer"></div>
                    <div id="emptyMsg" class="px-4 py-8 text-center text-gray-400 text-xs">
                        No drugs added yet. Use the suggestions above or click "+ Add Drug".
                    </div>
                </div>
            </div>

            <div class="space-y-4">
                <div class="bg-white rounded-xl border shadow-sm p-4 space-y-4">
                    <h3 class="font-bold text-gray-800 text-sm">Request Details</h3>
                    <div>
                        <label class="form-label">Priority *</label>
                        <select name="urgency" required class="form-input">
                            <option value="normal">Normal</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Notes <span class="text-gray-400">(optional)</span></label>
                        <textarea name="notes" class="form-input" rows="3" placeholder="Any additional context for the admin…"></textarea>
                    </div>
                    <div class="pt-2 border-t space-y-2">
                        <button type="submit" name="submit_action" value="draft" class="w-full btn-secondary text-xs">Save as Draft</button>
                        <button type="button" onclick="submitForApproval()" class="w-full btn-primary text-xs">Submit for Approval</button>
                    </div>
                </div>

                <div class="bg-purple-50 border border-purple-100 rounded-xl p-4 text-xs text-purple-700 space-y-1.5">
                    <p class="font-bold text-purple-800">How this works</p>
                    <p>1. Add drugs that need restocking</p>
                    <p>2. Submit to admin for approval</p>
                    <p>3. Admin reviews, adjusts quantities, and approves</p>
                    <p>4. You receive a notification when approved</p>
                </div>
            </div>
        </div>

        <input type="hidden" name="submit_action" id="submitAction" value="draft">
    </form>
</div>

@php
$drugsForJs = $drugs->map(fn($d) => [
    'id'      => $d->id,
    'name'    => $d->name,
    'reorder' => (int)$d->reorder_level,
    'stock'   => (int)$d->current_stock,
])->values()->toArray();
@endphp

{{-- IMPORTANT: close content before opening scripts. Without this
     @endsection the 'content' section silently swallowed everything
     including the @section('scripts') block, which broke the page
     layout — sidebar rendered at the bottom because the main flex
     container got pushed below the content somehow. --}}
@endsection

@section('scripts')
<script>
const ALL_DRUGS = @json($drugsForJs);
let itemCount = 0;
let selectedDrugId = null;
const addedDrugIds = new Set();

function toggleAddPanel() {
    const panel = document.getElementById('addDrugPanel');
    const opening = panel.classList.contains('hidden');
    panel.classList.toggle('hidden', !opening);
    if (opening) {
        selectedDrugId = null;
        document.getElementById('drugSearch').value = '';
        document.getElementById('modalQty').value = '1';
        document.getElementById('modalNote').value = '';
        document.getElementById('drugDropdown').classList.add('hidden');
        document.getElementById('selectedDrugInfo').classList.add('hidden');
        setTimeout(() => document.getElementById('drugSearch').focus(), 50);
    }
}

function renderItems() {
    document.getElementById('emptyMsg').style.display =
        document.querySelectorAll('.pr-item-row').length ? 'none' : '';
}

function addItemRow(drugId, drugName, drugMeta, reorder, stock, qty, note) {
    if (addedDrugIds.has(drugId)) { alert(drugName + ' is already in the list.'); return; }
    addedDrugIds.add(drugId);
    const sugBtn = document.getElementById('sugg-btn-' + drugId);
    if (sugBtn) { sugBtn.disabled = true; sugBtn.textContent = '✓ Added'; sugBtn.className = 'text-xs px-3 py-1 rounded-lg bg-green-100 text-green-700 font-semibold'; }
    const defaultQty = qty || Math.max(reorder * 2, 10);
    const idx = itemCount++;
    const container = document.getElementById('itemsContainer');
    const row = document.createElement('div');
    row.className = 'pr-item-row flex items-center gap-3 px-4 py-3 border-b border-gray-50 hover:bg-gray-50/50';
    row.id = 'row-' + drugId;
    const sc = stock <= 0 ? 'text-red-600 font-bold' : stock <= reorder ? 'text-amber-600 font-bold' : 'text-gray-500';
    row.innerHTML = `
        <input type="hidden" name="items[${idx}][drug_id]" value="${drugId}">
        <div class="flex-1 min-w-0">
            <p class="font-semibold text-gray-800 text-xs">${drugName}</p>
            <p class="text-xs text-gray-400">${drugMeta||''} &nbsp;·&nbsp; Stock: <span class="${sc}">${stock}</span> &nbsp;·&nbsp; Reorder: ${reorder}</p>
        </div>
        <div class="flex items-center gap-1.5 flex-shrink-0">
            <label class="text-xs text-gray-500">Qty:</label>
            <input type="number" name="items[${idx}][qty]" value="${defaultQty}" min="1" required class="w-20 form-input text-center font-bold text-sm py-1">
        </div>
        <input type="text" name="items[${idx}][notes]" value="${note||''}" class="w-32 form-input text-xs py-1" placeholder="Note…">
        <button type="button" onclick="removeRow(${drugId},'row-${drugId}')" class="text-red-400 hover:text-red-600 p-1 flex-shrink-0">
            <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="M6 18L18 6M6 6l12 12"/></svg>
        </button>`;
    container.appendChild(row);
    renderItems();
}

function removeRow(drugId, rowId) {
    document.getElementById(rowId)?.remove();
    addedDrugIds.delete(drugId);
    const sugBtn = document.getElementById('sugg-btn-' + drugId);
    if (sugBtn) { sugBtn.disabled = false; sugBtn.textContent = '+ Add'; sugBtn.className = 'btn-primary text-xs whitespace-nowrap'; }
    renderItems();
}

function addSuggestedDrug(id, name, meta, reorder, stock) { addItemRow(id, name, meta, reorder, stock); }

function addAllSuggested() {
    @foreach($suggested as $d)
    addItemRow({{ $d->id }}, {{ json_encode($d->name) }}, '', {{ $d->reorder_level }}, {{ $d->current_stock }});
    @endforeach
}

function filterDrugs(q) {
    const dd = document.getElementById('drugDropdown');
    if (!q || q.length < 2) { dd.classList.add('hidden'); return; }
    const matches = ALL_DRUGS.filter(d => d.name.toLowerCase().includes(q.toLowerCase())).slice(0, 12);
    if (!matches.length) { dd.innerHTML = '<p class="p-3 text-xs text-gray-400">No drugs found</p>'; dd.classList.remove('hidden'); return; }
    dd.innerHTML = matches.map(d =>
        `<button type="button" onclick="selectDrug(${d.id})" class="w-full text-left px-3 py-2 hover:bg-purple-50 text-xs border-b border-gray-50 last:border-0">
            <span class="font-semibold">${d.name}</span>
            <span class="float-right ${d.stock<=0?'text-red-600':d.stock<=d.reorder?'text-amber-600':'text-green-600'} font-bold">Stock: ${d.stock}</span>
        </button>`
    ).join('');
    dd.classList.remove('hidden');
}

function selectDrug(id) {
    const d = ALL_DRUGS.find(x => x.id === id);
    if (!d) return;
    selectedDrugId = id;
    document.getElementById('drugSearch').value = d.name;
    document.getElementById('drugDropdown').classList.add('hidden');
    document.getElementById('modalQty').value = Math.max(d.reorder * 2, 10);
    const sc = d.stock <= 0 ? 'text-red-600' : d.stock <= d.reorder ? 'text-amber-600' : 'text-green-600';
    const info = document.getElementById('selectedDrugInfo');
    info.innerHTML = `<strong>${d.name}</strong> &nbsp;|&nbsp; Stock: <strong class="${sc}">${d.stock}</strong> &nbsp;|&nbsp; Reorder: ${d.reorder}`;
    info.classList.remove('hidden');
}

function confirmAddDrug() {
    if (!selectedDrugId) { alert('Please select a drug from the list first.'); return; }
    const d = ALL_DRUGS.find(x => x.id === selectedDrugId);
    const qty = parseInt(document.getElementById('modalQty').value);
    if (!qty || qty < 1) { alert('Enter a valid quantity.'); return; }
    addItemRow(d.id, d.name, '', d.reorder, d.stock, qty, document.getElementById('modalNote').value);
    toggleAddPanel();
}

function submitForApproval() {
    if (!document.querySelectorAll('.pr-item-row').length) { alert('Please add at least one drug before submitting.'); return; }
    if (!confirm('Submit this request for admin approval?')) return;
    document.getElementById('submitAction').value = 'submit';
    document.getElementById('prForm').submit();
}

document.addEventListener('click', function(e) {
    if (!e.target.closest('#drugSearch') && !e.target.closest('#drugDropdown')) {
        document.getElementById('drugDropdown')?.classList.add('hidden');
    }
});

@if(request('autofill'))
window.addEventListener('DOMContentLoaded', () => addAllSuggested());
@endif
</script>
@endsection