@extends('layouts.app')
@section('title', 'Pharmacy | Inventory')
@section('styles')
<style>
    .hmis-tab-bar{display:flex;gap:6px;padding:12px 16px;background:linear-gradient(to bottom,#f8fafc,#fff);border-bottom:1px solid #e5e7eb;overflow-x:auto}
    .hmis-tab{padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;color:#64748b;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.04)}
    .hmis-tab:hover{border-color:#94a3b8;color:#334155;box-shadow:0 2px 6px rgba(0,0,0,.06)}
    .hmis-tab.active{color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .hmis-tab .tc{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:700;background:rgba(255,255,255,.25)}
    .hmis-tab:not(.active) .tc{background:#e2e8f0;color:#475569}
    .hmis-tab[data-color="blue"].active{background:linear-gradient(135deg,#3b82f6,#2563eb)}
    .hmis-tab[data-color="teal"].active{background:linear-gradient(135deg,#14b8a6,#0d9488)}
    .hmis-tab[data-color="amber"].active{background:linear-gradient(135deg,#f59e0b,#d97706)}
    .hmis-tab[data-color="indigo"].active{background:linear-gradient(135deg,#6366f1,#4f46e5)}
    .inv-panel{display:none}.inv-panel.active{display:block}
</style>
@endsection
@section('content')
@php
    $authUser   = Auth::user();
    $isFullAccess = $authUser->hasAnyRole('Super Admin','Hospital Admin','Pharmacy User');
    $canEditDrugs = $authUser->hasAnyRole('Super Admin','Hospital Admin');
@endphp

{{-- Page header removed per UI cleanup; sidebar already names the page. --}}

<div class="bg-white rounded-xl border shadow-sm">
    <div class="hmis-tab-bar">
        <button class="hmis-tab active" data-color="blue" onclick="switchInvTab(this,'drugs')">
            <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.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
            Drug Inventory
        </button>
        @if($isFullAccess)
        <button class="hmis-tab" data-color="indigo" onclick="switchInvTab(this,'suppliers')">
            <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 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            Suppliers <span class="tc">{{ ($suppliers ?? collect())->count() }}</span>
        </button>
        <button class="hmis-tab" data-color="purple" onclick="switchInvTab(this,'procurement')">
            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
            Procurement Requests
            @if(isset($procRequests) && $procRequests->total() > 0)<span class="tc">{{ $procRequests->total() }}</span>@endif
        </button>
        <a href="{{ route('pharmacy.stock-take') }}" class="hmis-tab" data-color="amber" style="text-decoration:none;margin-left:auto" title="Opens the Stock Take page (separate workspace)">
            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
            Stock Take
            <svg class="w-3 h-3 ml-1 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
        </a>
        @endif
    </div>

    {{-- Drug Inventory (unified: drug list + stock levels + expiries, with hidden batch drill-down) --}}
    <div id="inv-drugs" class="inv-panel active">
        <div class="px-5 py-3 border-b bg-gray-50/50 flex flex-wrap items-center justify-between gap-2">
            <div class="flex items-center gap-2 flex-wrap">
                <form method="GET" action="{{ route('pharmacy.drugs') }}" class="flex gap-2">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search drugs…" class="form-input w-56 text-xs">
                    <button type="submit" class="btn-primary text-xs">Search</button>
                    @if(request('search'))<a href="{{ route('pharmacy.drugs') }}" class="btn-secondary text-xs">Clear</a>@endif
                </form>
                <span class="text-xs text-gray-400 mx-1">|</span>
                <span class="text-xs text-gray-500">Filter:</span>
                <button type="button" class="inv-filter active" onclick="filterInv(this,'all')">All</button>
                <button type="button" class="inv-filter" onclick="filterInv(this,'low')">Low Stock</button>
                <button type="button" class="inv-filter" onclick="filterInv(this,'out')">Out of Stock</button>
                <button type="button" class="inv-filter" onclick="filterInv(this,'expiry')">Expiring Soon</button>
                <span class="text-xs text-gray-400" id="invFilterCount"></span>
            </div>
            <div class="flex items-center gap-2">
                @if($isFullAccess)
                <button onclick="document.getElementById('addDrugModal').classList.remove('hidden')" class="btn-primary text-xs">+ Add Drug</button>
                @endif
                @if($canEditDrugs)
                <a href="{{ route('pharmacy.drugs.bulk-edit') }}" class="btn-secondary text-xs inline-flex items-center gap-1" title="Admin-only: edit many drugs at once">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                    Bulk Edit
                </a>
                @endif
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full sortable" id="drugInventoryTable"><thead><tr class="bg-gray-50">
                <th class="table-header w-8"></th>
                <th class="table-header" data-sort="string">Drug Name</th>
                <th class="table-header" data-sort="string">Generic</th>
                <th class="table-header" data-sort="number">Stock</th>
                <th class="table-header" data-sort="number">Reorder</th>
                <th class="table-header" data-sort="string">Earliest Expiry</th>
                <th class="table-header" data-sort="number">Price (KES)</th>
                <th class="table-header">Status</th>
                @if($isFullAccess)<th class="table-header"></th>@endif
            </tr></thead>
            <tbody>
            @forelse($drugs ?? [] as $d)
                @php
                    // Active batches = not yet expired, still has quantity
                    $activeBatches = $d->batches->where('expiry_date', '>', now())->where('quantity_remaining', '>', 0)->sortBy('expiry_date');
                    $allBatches    = $d->batches->sortBy('expiry_date');
                    $totalStock    = $activeBatches->sum('quantity_remaining');
                    $earliest      = $activeBatches->first()?->expiry_date;
                    // Status tier (worst-first): out > expired-only > expiring-30 > low > expiring-90 > ok
                    $isOut       = $totalStock <= 0;
                    $isLow       = !$isOut && $totalStock <= $d->reorder_level;
                    $isExp30     = $earliest && $earliest->diffInDays(now(), false) >= 0 && $earliest->lte(now()->addDays(30));
                    $isExp90     = $earliest && !$isExp30 && $earliest->lte(now()->addDays(90));
                    $stockRowClass = $isOut ? 'out' : ($isLow ? 'low' : 'ok');
                    $expiryRowClass = ($isExp30 || $isExp90) ? 'yes' : 'no';
                @endphp
                <tr class="border-b border-gray-50 hover:bg-blue-50/20"
                    data-stock="{{ $stockRowClass }}"
                    data-expiry="{{ $expiryRowClass }}"
                    data-drug-id="{{ $d->id }}">
                    <td class="table-cell">
                        @if($allBatches->count() > 0)
                        <button type="button" onclick="toggleBatchRow({{ $d->id }})" class="text-gray-400 hover:text-blue-600 text-xs" id="batchToggle-{{ $d->id }}" title="Show batches">▸</button>
                        @endif
                    </td>
                    <td class="table-cell font-medium text-xs">{{ $d->name }}</td>
                    <td class="table-cell text-xs text-gray-500">{{ $d->generic_name }}</td>
                    <td class="table-cell">
                        <span class="font-bold text-sm {{ $isOut ? 'text-red-600' : ($isLow ? 'text-amber-600' : 'text-gray-700') }}">{{ $totalStock }}</span>
                    </td>
                    <td class="table-cell text-xs text-gray-500">{{ $d->reorder_level }}</td>
                    <td class="table-cell text-xs {{ $isExp30 ? 'text-red-600 font-bold' : ($isExp90 ? 'text-amber-600 font-semibold' : 'text-gray-500') }}"
                        data-sort-value="{{ $earliest?->format('Y-m-d') ?? '9999-99-99' }}">
                        {{ $earliest?->format('d M Y') ?? '—' }}
                        @if($isExp30)
                            <span class="badge badge-danger ml-1">Near Expiry</span>
                        @elseif($isExp90)
                            <span class="badge badge-warning ml-1">Near Expiry</span>
                        @endif
                    </td>
                    <td class="table-cell font-semibold text-xs">{{ number_format($d->selling_price) }}</td>
                    <td class="table-cell">
                        @if($isOut)<span class="badge badge-danger">Out of Stock</span>
                        @elseif($isExp30)<span class="badge badge-danger">Expiring &lt;30d</span>
                        @elseif($isLow)<span class="badge badge-warning">Low Stock</span>
                        @elseif($isExp90)<span class="badge badge-warning">Expiring</span>
                        @elseif(!$d->is_active)<span class="badge badge-gray">Inactive</span>
                        @else<span class="badge badge-success">OK</span>@endif
                    </td>
                    @if($isFullAccess)
                    <td class="table-cell text-right">
                        @if($canEditDrugs)
                        <button onclick="openEditDrug({{ $d->id }}, {{ json_encode(['name'=>$d->name,'generic_name'=>$d->generic_name,'category'=>$d->category,'strength'=>$d->strength,'unit'=>$d->unit,'selling_price'=>$d->selling_price,'cost_price'=>$d->cost_price,'reorder_level'=>$d->reorder_level,'is_active'=>$d->is_active,'allergy_keywords'=>$d->allergy_keywords,'interacts_with'=> is_array($d->interacts_with) ? implode(', ', $d->interacts_with) : ($d->interacts_with ?? '')]) }} )" class="text-blue-600 hover:text-blue-800 text-xs font-medium mr-2">Edit</button>
                        <form method="POST" action="{{ route('pharmacy.drugs.delete', $d) }}" class="inline" onsubmit="return confirm('Delete {{ addslashes($d->name) }}? This cannot be undone.')">@csrf @method('DELETE')
                            <button type="submit" class="text-red-400 hover:text-red-600 text-xs">Delete</button>
                        </form>
                        @else
                        <button onclick="openEditDrug({{ $d->id }}, {{ json_encode(['name'=>$d->name,'generic_name'=>$d->generic_name,'category'=>$d->category,'strength'=>$d->strength,'unit'=>$d->unit,'selling_price'=>$d->selling_price,'cost_price'=>$d->cost_price,'reorder_level'=>$d->reorder_level,'is_active'=>$d->is_active,'allergy_keywords'=>$d->allergy_keywords,'interacts_with'=> is_array($d->interacts_with) ? implode(', ', $d->interacts_with) : ($d->interacts_with ?? '')]) }} )" class="text-blue-600 hover:text-blue-800 text-xs font-medium">Edit</button>
                        @endif
                    </td>
                    @endif
                </tr>
                @if($allBatches->count() > 0)
                {{-- Hidden batch drill-down row --}}
                <tr id="batchRow-{{ $d->id }}" class="batch-drilldown" style="display:none" data-stock="{{ $stockRowClass }}" data-expiry="{{ $expiryRowClass }}">
                    <td colspan="{{ $isFullAccess ? 9 : 8 }}" class="bg-gray-50 px-8 py-3 border-b">
                        <div class="text-xs font-semibold text-gray-600 mb-2">Batches for {{ $d->name }} ({{ $allBatches->count() }})</div>
                        <table class="w-full text-xs">
                            <thead><tr class="text-gray-500">
                                <th class="text-left py-1 pr-3">Batch #</th>
                                <th class="text-left py-1 pr-3">Expiry</th>
                                <th class="text-left py-1 pr-3">Received</th>
                                <th class="text-right py-1 pr-3">Qty In</th>
                                <th class="text-right py-1 pr-3">Qty Available</th>
                                <th class="text-left py-1 pr-3">Supplier</th>
                                <th class="text-right py-1 pr-3">Cost</th>
                                <th class="text-left py-1">Status</th>
                            </tr></thead>
                            <tbody>
                            @foreach($allBatches as $b)
                                @php
                                    $bExpired = $b->expiry_date && $b->expiry_date->isPast();
                                    $bExp30   = !$bExpired && $b->expiry_date && $b->expiry_date->lte(now()->addDays(30));
                                    $bExp90   = !$bExpired && !$bExp30 && $b->expiry_date && $b->expiry_date->lte(now()->addDays(90));
                                @endphp
                                <tr class="border-t border-gray-200">
                                    <td class="py-1 pr-3 font-mono">{{ $b->batch_number }}</td>
                                    <td class="py-1 pr-3 {{ $bExpired ? 'text-red-600 font-bold' : ($bExp30 ? 'text-red-600' : ($bExp90 ? 'text-amber-600' : '')) }}">{{ $b->expiry_date?->format('d M Y') ?? '—' }}</td>
                                    <td class="py-1 pr-3 text-gray-500">{{ $b->received_at?->format('d M Y') ?? $b->created_at->format('d M Y') }}</td>
                                    <td class="py-1 pr-3 text-right">{{ $b->quantity_received }}</td>
                                    <td class="py-1 pr-3 text-right font-semibold">{{ $b->quantity_remaining }}</td>
                                    <td class="py-1 pr-3">{{ $b->supplier->name ?? '–' }}</td>
                                    <td class="py-1 pr-3 text-right">{{ number_format($b->cost_price) }}</td>
                                    <td class="py-1">
                                        @if($bExpired)<span class="badge badge-danger">Expired</span>
                                        @elseif($b->quantity_remaining <= 0)<span class="badge badge-gray">Depleted</span>
                                        @elseif($bExp30)<span class="badge badge-danger">Expiring &lt;30d</span>
                                        @elseif($bExp90)<span class="badge badge-warning">Expiring</span>
                                        @else<span class="badge badge-success">Active</span>@endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </td>
                </tr>
                @endif
            @empty
            <tr><td colspan="{{ $isFullAccess ? 9 : 8 }}" class="table-cell text-center text-gray-400 py-8">No drugs in catalog.</td></tr>
            @endforelse
            </tbody></table>
        </div>
        @if(isset($drugs) && $drugs->hasPages())<div class="px-4 py-3 border-t">{{ $drugs->links() }}</div>@endif
    </div>

    {{-- Suppliers Panel --}}
    <div id="inv-suppliers" class="inv-panel">
        <div class="p-5">
            <div class="flex items-center justify-between mb-4">
                <p class="text-sm font-semibold text-gray-700">{{ ($suppliers ?? collect())->count() }} supplier(s) registered</p>
                <button type="button" onclick="document.getElementById('addSupplierModal').classList.remove('hidden')" class="btn-primary text-xs flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Add Supplier
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead><tr class="bg-gray-50">
                        <th class="table-header">Name</th>
                        <th class="table-header">Contact Person</th>
                        <th class="table-header">Phone</th>
                        <th class="table-header">Email</th>
                        <th class="table-header">Address</th>
                        <th class="table-header text-center">Drugs</th>
                        <th class="table-header">Status</th>
                    </tr></thead>
                    <tbody>
                    @forelse($suppliers ?? [] as $sup)
                    <tr class="border-b border-gray-50 hover:bg-blue-50/30">
                        <td class="table-cell font-medium">{{ $sup->name }}</td>
                        <td class="table-cell text-xs">{{ $sup->contact_person ?? '-' }}</td>
                        <td class="table-cell text-xs">{{ $sup->phone ?? '-' }}</td>
                        <td class="table-cell text-xs">{{ $sup->email ?? '-' }}</td>
                        <td class="table-cell text-xs truncate max-w-[150px]">{{ $sup->address ?? '-' }}</td>
                        <td class="table-cell text-center"><span class="badge badge-info">{{ $sup->drug_items_count }}</span></td>
                        <td class="table-cell">@if($sup->is_active)<span class="badge badge-success">Active</span>@else<span class="badge badge-gray">Inactive</span>@endif</td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="table-cell text-center text-gray-400 py-8">No suppliers registered. Click "Add Supplier" to create one.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Procurement Requests Panel ─────────────────────────────────────
         Was a separate sidebar entry; now lives here next to the
         inventory it operates on. Scope: Admin sees all requests,
         Pharmacy User sees their own. --}}
    <div id="inv-procurement" class="inv-panel">
        <div class="p-5">
            {{-- New Request button: Admins + Pharmacy User. Admins have
                 full rights — they can create on behalf, approve, edit
                 items, and delete requests entirely. --}}
            <div class="flex justify-end mb-3">
                <a href="{{ route('procurement.requests.create') }}" class="btn-primary text-xs flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    New Request
                </a>
            </div>

            {{-- Suggested reorder alert --}}
            @if(isset($procSuggested) && $procSuggested->count() > 0)
            <div class="mb-4 bg-amber-50 border border-amber-200 rounded-xl p-4">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-amber-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    <div class="flex-1">
                        <p class="text-xs font-bold text-amber-800">{{ $procSuggested->count() }} drug(s) at or below reorder level</p>
                        <p class="text-xs text-amber-600 mt-0.5">
                            @foreach($procSuggested->take(5) as $d)
                                <span class="inline-flex items-center gap-1 mr-2">
                                    <span class="w-2 h-2 rounded-full {{ $d->current_stock <= 0 ? 'bg-red-500' : 'bg-amber-500' }}"></span>
                                    {{ $d->name }} ({{ $d->current_stock }} left)
                                </span>
                            @endforeach
                            @if($procSuggested->count() > 5)<span class="font-semibold">+{{ $procSuggested->count()-5 }} more</span>@endif
                        </p>
                    </div>
                    <a href="{{ route('procurement.requests.create') }}?autofill=1" class="btn-primary text-xs whitespace-nowrap">
                        Create Request
                    </a>
                </div>
            </div>
            @endif

            <div class="bg-white rounded-xl border shadow-sm overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead><tr class="bg-gray-50">
                            <th class="table-header">Request #</th>
                            <th class="table-header">Submitted By</th>
                            <th class="table-header">Date</th>
                            <th class="table-header">Priority</th>
                            <th class="table-header text-center">Items</th>
                            <th class="table-header">Status</th>
                            <th class="table-header">Reviewed By</th>
                            <th class="table-header"></th>
                        </tr></thead>
                        <tbody>
                        @forelse($procRequests ?? [] as $pr)
                        <tr class="border-b border-gray-50 hover:bg-gray-50/50">
                            <td class="table-cell font-mono text-xs font-bold">{{ $pr->request_number }}</td>
                            <td class="table-cell font-medium">{{ $pr->requester?->name ?? '—' }}</td>
                            <td class="table-cell text-xs text-gray-400">{{ $pr->created_at->format('d M Y, H:i') }}</td>
                            <td class="table-cell">
                                @if($pr->urgency === 'urgent')
                                    <span class="badge badge-danger">Urgent</span>
                                @else
                                    <span class="badge badge-gray">Normal</span>
                                @endif
                            </td>
                            <td class="table-cell text-center"><span class="badge badge-info">{{ $pr->activeItems->count() }}</span></td>
                            <td class="table-cell"><span class="badge {{ $pr->status_color }}">{{ $pr->status_label }}</span></td>
                            <td class="table-cell text-xs text-gray-400">{{ $pr->reviewer?->name ?? '—' }}</td>
                            <td class="table-cell text-right">
                                <a href="{{ route('procurement.requests.show', $pr) }}" class="text-purple-600 hover:text-purple-800 text-xs font-semibold">View →</a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="8" class="table-cell text-center text-gray-400 py-10">
                            No procurement requests yet.
                            <a href="{{ route('procurement.requests.create') }}" class="text-purple-600 font-semibold">Create your first one →</a>
                        </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @if(isset($procRequests) && $procRequests->hasPages())
                <div class="px-4 py-3 border-t">{{ $procRequests->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
<div id="addSupplierModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
        <div class="flex justify-between items-center mb-2">
            <h3 class="font-bold text-gray-900">Add Pharmacy Supplier</h3>
            <button onclick="document.getElementById('addSupplierModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>
        <p class="text-xs text-gray-500 mb-4">Tagged as <span class="font-semibold text-purple-700">Pharmaceutical</span>. Also available under Expenses › Suppliers.</p>
        <form method="POST" action="{{ route('pharmacy.suppliers.store') }}">@csrf
            <div class="space-y-3">
                <div><label class="form-label">Supplier Name <span class="text-red-500">*</span></label><input type="text" name="name" required class="form-input" placeholder="e.g. Surgipath Ltd"></div>
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="form-label">Contact Person</label><input type="text" name="contact_person" class="form-input" placeholder="Full name"></div>
                    <div><label class="form-label">Phone</label><input type="tel" name="phone" class="form-input" placeholder="07XX XXX XXX"></div>
                </div>
                <div><label class="form-label">Email</label><input type="email" name="email" class="form-input" placeholder="supplier@example.com"></div>
                <div><label class="form-label">Address</label><input type="text" name="address" class="form-input" placeholder="Physical or postal address"></div>
            </div>
            <div class="flex justify-end gap-2 mt-5 pt-4 border-t">
                <button type="button" onclick="document.getElementById('addSupplierModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Save Supplier</button>
            </div>
        </form>
    </div>
</div>

{{-- Add Drug Modal --}}
<div id="addDrugModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold text-gray-900">Add New Drug</h3><button onclick="document.getElementById('addDrugModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        @if(session('error'))
        <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4 text-xs text-red-800">{{ session('error') }}</div>
        @endif
        <form method="POST" action="{{ route('pharmacy.drugs.store') }}">@csrf
            <div class="grid grid-cols-2 gap-3">
                <div class="col-span-2"><label class="form-label">Drug Name *</label><input type="text" name="name" required class="form-input" value="{{ old('name') }}"></div>
                <div><label class="form-label">Generic Name</label><input type="text" name="generic_name" class="form-input" value="{{ old('generic_name') }}"></div>
                <div><label class="form-label">Category *</label><select name="category" required class="form-input"><option value="">Select Category</option>@foreach(['Analgesics','Antibiotics','Antifungals','Antivirals','Antimalarials','Antiparasitics','Anti-inflammatories','Antihistamines','Antihypertensives','Antidiabetics','Antacids & GI','Cardiovascular','Respiratory','Dermatological','Ophthalmic','ENT','Vitamins & Supplements','IV Fluids & Electrolytes','Hormones & Contraceptives','Psychotropics','Anaesthetics','Vaccines','Surgical & Consumables','Controlled Substances','Other'] as $cat)<option value="{{ $cat }}" {{ old('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>@endforeach</select></div>
                <div><label class="form-label">Strength <span class="text-gray-400 text-xs">(e.g. 500mg, 250mg/5ml)</span></label><input type="text" name="strength" class="form-input" value="{{ old('strength') }}" placeholder="500mg"></div>
                
                <div><label class="form-label">Selling Price (KES) *</label><input type="number" step="0.01" name="selling_price" required class="form-input" value="{{ old('selling_price') }}"></div>
                <div><label class="form-label">Buying Price</label><input type="number" step="0.01" name="cost_price" class="form-input" value="{{ old('cost_price') }}"></div>
                <div><label class="form-label">Reorder Level</label><input type="number" name="reorder_level" value="{{ old('reorder_level', 10) }}" class="form-input"></div>
                <div class="col-span-2"><label class="form-label">Allergy Keywords <span class="text-gray-400 font-normal text-xs">comma-separated</span></label><input type="text" name="allergy_keywords" class="form-input" value="{{ old('allergy_keywords') }}" placeholder="e.g. penicillin, beta-lactam"></div>
                <div class="col-span-2"><label class="form-label">Drug Interactions <span class="text-gray-400 font-normal text-xs">comma-separated</span></label><input type="text" name="interacts_with_input" id="interactsWithInput" class="form-input" value="{{ old('interacts_with_input') }}" placeholder="e.g. warfarin, NSAIDs"><input type="hidden" name="interacts_with" id="interactsWithHidden"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('addDrugModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs" onclick="serializeInteracts()">Save Drug</button></div>
        </form>
    </div>
</div>

{{-- Edit Drug Modal --}}
<div id="editDrugModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold text-gray-900">Edit Drug</h3><button onclick="document.getElementById('editDrugModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" id="editDrugForm" action="">@csrf @method('PUT')
            <div class="grid grid-cols-2 gap-3">
                <div class="col-span-2"><label class="form-label">Drug Name *</label><input type="text" name="name" id="edit_name" required class="form-input"></div>
                <div><label class="form-label">Generic Name</label><input type="text" name="generic_name" id="edit_generic_name" class="form-input"></div>
                <div><label class="form-label">Category *</label><select name="category" id="edit_category" required class="form-input"><option value="">Select</option>@foreach(['Analgesics','Antibiotics','Antifungals','Antivirals','Antimalarials','Antiparasitics','Anti-inflammatories','Antihistamines','Antihypertensives','Antidiabetics','Antacids & GI','Cardiovascular','Respiratory','Dermatological','Ophthalmic','ENT','Vitamins & Supplements','IV Fluids & Electrolytes','Hormones & Contraceptives','Psychotropics','Anaesthetics','Vaccines','Surgical & Consumables','Controlled Substances','Other'] as $cat)<option value="{{ $cat }}">{{ $cat }}</option>@endforeach</select></div>
                <div><label class="form-label">Strength <span class="text-gray-400 text-xs">(e.g. 500mg)</span></label><input type="text" name="strength" id="edit_strength" class="form-input"></div>
                
                <div><label class="form-label">Selling Price (KES) *</label><input type="number" step="0.01" name="selling_price" id="edit_selling_price" required class="form-input"></div>
                <div><label class="form-label">Buying Price</label><input type="number" step="0.01" name="cost_price" id="edit_cost_price" class="form-input"></div>
                <div><label class="form-label">Reorder Level</label><input type="number" name="reorder_level" id="edit_reorder_level" class="form-input"></div>
                <div class="flex items-center gap-2">
                    <label class="form-label mb-0">Active</label>
                    <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="rounded border-gray-300 text-blue-600">
                </div>
                <div class="col-span-2"><label class="form-label">Allergy Keywords</label><input type="text" name="allergy_keywords" id="edit_allergy_keywords" class="form-input"></div>
                <div class="col-span-2"><label class="form-label">Drug Interactions</label><input type="text" id="editInteractsWithInput" class="form-input"><input type="hidden" name="interacts_with" id="editInteractsWithHidden"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="document.getElementById('editDrugModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-success text-xs" onclick="serializeEditInteracts()">Update Drug</button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function serializeInteracts() {
    const raw = document.getElementById('interactsWithInput')?.value || '';
    const arr = raw.split(',').map(s => s.trim()).filter(Boolean);
    const hidden = document.getElementById('interactsWithHidden');
    if (hidden) hidden.value = JSON.stringify(arr);
}
function serializeEditInteracts() {
    const raw = document.getElementById('editInteractsWithInput')?.value || '';
    const arr = raw.split(',').map(s => s.trim()).filter(Boolean);
    const hidden = document.getElementById('editInteractsWithHidden');
    if (hidden) hidden.value = JSON.stringify(arr);
}
function switchInvTab(btn, id) {
    document.querySelectorAll('.hmis-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.inv-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active'); document.getElementById('inv-' + id).classList.add('active');
}

// Toggle the hidden batch drill-down row beneath a drug row
function toggleBatchRow(drugId) {
    const row = document.getElementById('batchRow-' + drugId);
    const btn = document.getElementById('batchToggle-' + drugId);
    if (!row) return;
    const isHidden = row.style.display === 'none' || row.style.display === '';
    row.style.display = isHidden ? 'table-row' : 'none';
    if (btn) {
        btn.textContent = isHidden ? '▾' : '▸';
        btn.classList.toggle('text-blue-600', isHidden);
        btn.classList.toggle('text-gray-400', !isHidden);
    }
}

// Unified Drug Inventory filter: All / Low / Out / Expiring Soon
window._invFilterType = 'all';
function filterInv(btn, type) {
    if (btn) {
        btn.parentElement.querySelectorAll('.inv-filter').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    }
    window._invFilterType = type;
    let visible = 0;
    document.querySelectorAll('#drugInventoryTable tbody tr').forEach(r => {
        // batch drill-down rows always follow their parent's visibility
        if (r.classList.contains('batch-drilldown')) {
            // Hide drill-down when parent filter hides it (and also collapse it)
            const parentVisible = r.previousElementSibling && r.previousElementSibling.style.display !== 'none';
            if (!parentVisible) r.style.display = 'none';
            return;
        }
        let pass = true;
        if (type === 'low')    pass = r.dataset.stock === 'low';
        if (type === 'out')    pass = r.dataset.stock === 'out';
        if (type === 'expiry') pass = r.dataset.expiry === 'yes';
        r.style.display = pass ? '' : 'none';
        // Always collapse any open drill-down when filter changes
        const next = r.nextElementSibling;
        if (next && next.classList.contains('batch-drilldown')) {
            next.style.display = 'none';
            const drugId = r.dataset.drugId;
            const tBtn = drugId ? document.getElementById('batchToggle-' + drugId) : null;
            if (tBtn) { tBtn.textContent = '▸'; tBtn.classList.remove('text-blue-600'); tBtn.classList.add('text-gray-400'); }
        }
        if (pass) visible++;
    });
    const counter = document.getElementById('invFilterCount');
    if (counter) counter.textContent = type === 'all' ? '' : `Showing ${visible} drug(s)`;
}

// Edit Drug Modal
function openEditDrug(id, data) {
    const form = document.getElementById('editDrugForm');
    form.action = '{{ url("pharmacy/drugs") }}/' + id;
    document.getElementById('edit_name').value = data.name || '';
    document.getElementById('edit_generic_name').value = data.generic_name || '';
    document.getElementById('edit_category').value = data.category || '';
    document.getElementById('edit_strength').value = data.strength || '';
        document.getElementById('edit_selling_price').value = data.selling_price || '';
    document.getElementById('edit_cost_price').value = data.cost_price || '';
    document.getElementById('edit_reorder_level').value = data.reorder_level || 10;
    document.getElementById('edit_is_active').checked = data.is_active ? true : false;
    document.getElementById('edit_allergy_keywords').value = data.allergy_keywords || '';
    document.getElementById('editInteractsWithInput').value = data.interacts_with || '';
    document.getElementById('editDrugModal').classList.remove('hidden');
}
</script>
<style>.inv-filter{display:inline-flex;align-items:center;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid #e5e7eb;cursor:pointer;transition:all .12s;background:#fff;color:#4b5563}.inv-filter:hover,.inv-filter.active{background:#0069c9;color:#fff;border-color:#0069c9}</style>

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