@extends('layouts.app')
@section('title', 'Lab Consumables')
@section('content')

{{-- Page header removed per UI cleanup; sidebar already names the page. --}}
<div class="flex justify-end gap-2 mb-4">
    <a href="{{ route('lab.catalogue') }}" class="btn-secondary text-xs">Lab Catalogue</a>
    <a href="{{ route('lab.index') }}" class="btn-secondary text-xs">← Back to Lab</a>
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg mb-4 text-sm">{{ session('success') }}</div>
@endif
@if(session('error'))
<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-4 text-sm">{{ session('error') }}</div>
@endif

{{-- Tabs --}}
<div class="flex gap-1 mb-4 border-b border-gray-200">
    <button onclick="showTab('stock')"   id="tab-stock"   data-tab-id="stock"   class="hmis-tab px-4 py-2 text-sm font-medium border-b-2 border-cr-400 text-cr-600">Stock Levels</button>
    <button onclick="showTab('receive')" id="tab-receive" data-tab-id="receive" class="hmis-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">Receive Stock</button>
    <button onclick="showTab('link')"    id="tab-link"    data-tab-id="link"    class="hmis-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">Link to Tests</button>
    <button onclick="showTab('add')"     id="tab-add"     data-tab-id="add"     class="hmis-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">+ Add Item</button>
</div>

{{-- TAB 1: Stock Levels --}}
<div id="panel-stock">
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <table class="w-full sortable">
            <thead class="bg-gray-50"><tr>
                <th class="table-header" data-sort="string">Code</th>
                <th class="table-header" data-sort="string">Consumable</th>
                <th class="table-header" data-sort="string">Category</th>
                <th class="table-header text-center" data-sort="number">In Hand</th>
                <th class="table-header text-center" data-sort="number">Reorder At</th>
                <th class="table-header text-right" data-sort="number">Unit Cost</th>
                <th class="table-header">Linked Tests</th>
                <th class="table-header" data-sort="string">Status</th>
                <th class="table-header"></th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @forelse($consumables as $item)
            <tr class="hover:bg-gray-50 {{ $item->quantity_in_hand <= $item->reorder_level ? 'bg-red-50' : '' }}">
                <td class="table-cell font-mono text-xs">{{ $item->code }}</td>
                <td class="table-cell font-medium">{{ $item->name }}</td>
                <td class="table-cell text-xs">{{ $item->category }}</td>
                <td class="table-cell text-center font-bold {{ $item->quantity_in_hand <= 0 ? 'text-red-600' : ($item->quantity_in_hand <= $item->reorder_level ? 'text-amber-600' : 'text-green-600') }}">
                    {{ $item->quantity_in_hand }}
                </td>
                <td class="table-cell text-center text-gray-500">{{ $item->reorder_level }}</td>
                <td class="table-cell text-right">{{ $item->unit_cost > 0 ? number_format($item->unit_cost) : '|' }}</td>
                <td class="table-cell text-xs">
                    @php $linked = $linkedTestNames[$item->id] ?? []; @endphp
                    @if(count($linked))
                        <span class="text-cr-600" title="{{ implode(', ', $linked) }}">{{ count($linked) }} test{{ count($linked) > 1 ? 's' : '' }}</span>
                    @else
                        <span class="text-gray-400">None</span>
                    @endif
                </td>
                <td class="table-cell">
                    @if($item->quantity_in_hand <= 0)
                        <span class="badge badge-danger">Out of Stock</span>
                    @elseif($item->quantity_in_hand <= $item->reorder_level)
                        <span class="badge badge-warning">Low Stock</span>
                    @else
                        <span class="badge badge-success">OK</span>
                    @endif
                </td>
                <td class="table-cell text-right">
                    @if(Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Hospital Admin'))
                    <form method="POST" action="{{ route('lab.consumables.delete', $item) }}" class="inline" onsubmit="return confirm('Delete {{ addslashes($item->name) }}? This cannot be undone.')">@csrf @method('DELETE')
                        <button type="submit" class="text-red-400 hover:text-red-600 text-xs">Delete</button>
                    </form>
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="9" class="table-cell text-center text-gray-400 py-8">No consumables found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- TAB 2: Receive Stock --}}
<div id="panel-receive" class="hidden">
    <div class="bg-white rounded-xl border border-gray-200 p-6 max-w-xl">
        <h3 class="text-sm font-bold text-gray-900 mb-4">Receive Consumable Stock</h3>
        <form method="POST" action="{{ route('lab.consumables.receive') }}">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">Consumable Item *</label>
                    <select name="stock_item_id" required class="form-input w-full">
                        <option value="">| Select |</option>
                        @foreach($consumables as $item)
                            <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->code }}) | In hand: {{ $item->quantity_in_hand }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Quantity Received *</label>
                        <input type="number" name="quantity" min="1" required class="form-input w-full" placeholder="e.g. 100">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Unit Cost (KES)</label>
                        <input type="number" name="unit_cost" step="0.01" min="0" class="form-input w-full" placeholder="e.g. 15">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Supplier / Source</label>
                        <input type="text" name="reference" class="form-input w-full" placeholder="e.g. Revital Healthcare">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Batch / Invoice No.</label>
                        <input type="text" name="batch_number" class="form-input w-full" placeholder="e.g. INV-2026-045">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">Notes</label>
                    <input type="text" name="notes" class="form-input w-full" placeholder="Optional notes">
                </div>
                <button type="submit" class="btn-primary w-full">Receive Stock</button>
            </div>
        </form>
    </div>
</div>

{{-- TAB 3: Link Consumables to Tests --}}
<div id="panel-link" class="hidden">
    <div class="bg-white rounded-xl border border-gray-200 p-6 max-w-2xl">
        <h3 class="text-sm font-bold text-gray-900 mb-1">Link Consumable to Lab Test</h3>
        <p class="text-xs text-gray-500 mb-4">When a linked test result is verified, the system auto-deducts the specified quantity from stock.</p>
        <form method="POST" action="{{ route('lab.consumables.link') }}">
            @csrf
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Lab Test *</label>
                        <select name="lab_test_id" required class="form-input w-full">
                            <option value="">| Select Test |</option>
                            @foreach($allTests as $test)
                                <option value="{{ $test->id }}">{{ $test->name }} {{ $test->consumable_stock_item_id ? '✓ linked' : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Consumable Item *</label>
                        <select name="consumable_stock_item_id" required class="form-input w-full">
                            <option value="">| Select Consumable |</option>
                            @foreach($consumables as $item)
                                <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->code }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="max-w-xs">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Qty Deducted Per Test</label>
                    <input type="number" name="consumable_qty" value="1" min="1" class="form-input w-full">
                    <p class="text-xs text-gray-400 mt-1">Usually 1 (one strip, one kit, etc.)</p>
                </div>
                <button type="submit" class="btn-primary">Save Link</button>
            </div>
        </form>

        {{-- Current links table --}}
        <h4 class="text-sm font-bold text-gray-900 mt-8 mb-3">Current Links</h4>
        <div class="border border-gray-200 rounded-lg overflow-hidden">
            <table class="w-full text-xs">
                <thead class="bg-gray-50"><tr>
                    <th class="table-header">Lab Test</th>
                    <th class="table-header">Consumable</th>
                    <th class="table-header text-center">Qty/Test</th>
                    <th class="table-header"></th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                @forelse($linkedList as $test)
                <tr class="hover:bg-gray-50">
                    <td class="table-cell">{{ $test->name }}</td>
                    <td class="table-cell">{{ $test->consumableItem->name ?? '|' }}</td>
                    <td class="table-cell text-center">{{ $test->consumable_qty }}</td>
                    <td class="table-cell text-right">
                        <form method="POST" action="{{ route('lab.consumables.unlink', $test) }}" class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 text-xs" onclick="return confirm('Remove this link?')">Unlink</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="table-cell text-center text-gray-400 py-4">No links configured yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- TAB 4: Add New Item --}}
<div id="panel-add" class="hidden">
    <div class="bg-white rounded-xl border border-gray-200 p-6 max-w-xl">
        <h3 class="text-sm font-bold text-gray-900 mb-4">Add New Consumable Item</h3>
        <form method="POST" action="{{ route('lab.consumables.store') }}">
            @csrf
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Name *</label>
                        <input type="text" name="name" required class="form-input w-full" placeholder="e.g. Glucose Test Strips">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Code *</label>
                        <input type="text" name="code" required class="form-input w-full" placeholder="e.g. CSM025">
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Category *</label>
                        <select name="category" required class="form-input w-full">
                            <option value="Lab Consumable">Lab Consumable</option>
                            <option value="FP Consumable">FP Consumable</option>
                            <option value="Reagent">Reagent</option>
                            <option value="General Supply">General Supply</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Unit *</label>
                        <select name="unit" required class="form-input w-full">
                            <option value="strip">Strip</option>
                            <option value="test">Test/Kit</option>
                            <option value="piece">Piece</option>
                            <option value="bottle">Bottle</option>
                            <option value="box">Box</option>
                            <option value="vial">Vial</option>
                            <option value="tube">Tube</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Reorder Level *</label>
                        <input type="number" name="reorder_level" value="20" min="0" required class="form-input w-full">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">Department</label>
                    <select name="department_id" class="form-input w-full">
                        @include('partials._department-options', ['matchCode' => 'LAB'])
                    </select>
                </div>
                <button type="submit" class="btn-primary w-full">Add Consumable</button>
            </div>
        </form>
    </div>
</div>

<script>
function showTab(name) {
    ['stock','receive','link','add'].forEach(t => {
        document.getElementById('panel-' + t).classList.toggle('hidden', t !== name);
        const tab = document.getElementById('tab-' + t);
        tab.classList.toggle('border-cr-400', t === name);
        tab.classList.toggle('text-cr-600', t === name);
        tab.classList.toggle('border-transparent', t !== name);
        tab.classList.toggle('text-gray-500', t !== name);
    });
}
</script>

@include('partials._tab-state-helper', ['defaultTab' => 'stock'])
@endsection