@extends('layouts.app')
@section('title', 'Pharmacy | Procurement')
@section('styles')
<style>.proc-tabs{display:flex;gap:0;border-bottom:2px solid #e5e7eb}.proc-tab{padding:10px 20px;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none}.proc-tab:hover{color:#0069c9}.proc-tab.active{color:#0069c9;border-bottom-color:#0069c9}.proc-panel{display:none}.proc-panel.active{display:block}</style>
@endsection
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Pharmacy Procurement</h1><p class="text-xs text-gray-400">Purchase orders, goods received, suppliers</p></div>
    <div class="flex gap-2">
        <button onclick="document.getElementById('newPOModal').classList.remove('hidden')" class="btn-primary text-xs">+ New Purchase Order</button>
        <button onclick="document.getElementById('newSupplierModal').classList.remove('hidden')" class="btn-success text-xs">+ Add Supplier</button>
    </div>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    <div class="proc-tabs">
        <button class="proc-tab active" onclick="switchProcTab(this,'po')">Purchase Orders</button>
        <button class="proc-tab" onclick="switchProcTab(this,'grn')">Goods Received</button>
        <button class="proc-tab" onclick="switchProcTab(this,'suppliers')">Suppliers</button>
    </div>

    {{-- Purchase Orders --}}
    <div id="proc-po" class="proc-panel active">
        <div class="overflow-x-auto">
            <table class="w-full"><thead><tr class="bg-gray-50"><th class="table-header">PO #</th><th class="table-header">Supplier</th><th class="table-header">Date</th><th class="table-header">Items</th><th class="table-header">Total (KES)</th><th class="table-header">Status</th><th class="table-header">Created By</th><th class="table-header">Actions</th></tr></thead>
            <tbody>
            @forelse($purchaseOrders ?? [] as $po)
            <tr class="border-b border-gray-50"><td class="table-cell font-mono text-xs">{{ $po->po_number ?? $po->id }}</td><td class="table-cell font-medium">{{ $po->supplier->name ?? '' }}</td><td class="table-cell text-xs">{{ $po->created_at->format('d M Y') }}</td><td class="table-cell text-center">{{ $po->items->count() ?? 0 }}</td><td class="table-cell font-semibold">{{ number_format($po->total_amount ?? 0) }}</td><td class="table-cell"><span class="badge {{ $po->status === 'approved' ? 'badge-success' : ($po->status === 'draft' ? 'badge-gray' : 'badge-info') }}">{{ ucfirst($po->status) }}</span></td><td class="table-cell text-xs">{{ $po->creator->name ?? '' }}</td><td class="table-cell"><a href="#" class="text-cr-600 text-xs font-semibold">View</a></td></tr>
            @empty
            <tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No purchase orders.</td></tr>
            @endforelse
            </tbody></table>
        </div>
    </div>

    {{-- Goods Received --}}
    <div id="proc-grn" class="proc-panel">
        <div class="overflow-x-auto">
            <table class="w-full"><thead><tr class="bg-gray-50"><th class="table-header">GRN #</th><th class="table-header">Linked PO</th><th class="table-header">Supplier</th><th class="table-header">Date Received</th><th class="table-header">Invoice #</th><th class="table-header">Status</th></tr></thead>
            <tbody>
            @forelse($goodsReceipts ?? [] as $grn)
            <tr class="border-b border-gray-50"><td class="table-cell font-mono text-xs">{{ $grn->grn_number ?? $grn->id }}</td><td class="table-cell text-xs">{{ $grn->po_number ?? '|' }}</td><td class="table-cell font-medium">{{ $grn->supplier->name ?? '' }}</td><td class="table-cell text-xs">{{ $grn->received_at?->format('d M Y') ?? $grn->created_at->format('d M Y') }}</td><td class="table-cell text-xs">{{ $grn->invoice_number ?? '|' }}</td><td class="table-cell"><span class="badge badge-success">{{ ucfirst($grn->status ?? 'posted') }}</span></td></tr>
            @empty
            <tr><td colspan="6" class="table-cell text-center text-gray-400 py-8">No goods received records.</td></tr>
            @endforelse
            </tbody></table>
        </div>
    </div>

    {{-- Suppliers --}}
    <div id="proc-suppliers" class="proc-panel">
        <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</th><th class="table-header">Phone</th><th class="table-header">Email</th><th class="table-header">KRA PIN</th><th class="table-header">Payment Terms</th><th class="table-header">Status</th></tr></thead>
            <tbody>
            @forelse($suppliers ?? [] as $s)
            <tr class="border-b border-gray-50"><td class="table-cell font-medium">{{ $s->name }}</td><td class="table-cell text-xs">{{ $s->contact_person }}</td><td class="table-cell text-xs">{{ $s->phone }}</td><td class="table-cell text-xs">{{ $s->email }}</td><td class="table-cell font-mono text-xs">{{ $s->kra_pin }}</td><td class="table-cell text-xs">{{ $s->payment_terms_days }} days</td><td class="table-cell">@if($s->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.</td></tr>
            @endforelse
            </tbody></table>
        </div>
    </div>
</div>

{{-- New Supplier Modal --}}
<div id="newSupplierModal" 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">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">Add Supplier</h3><button onclick="document.getElementById('newSupplierModal').classList.add('hidden')" class="text-gray-400">&times;</button></div>
        <form method="POST" action="{{ route('pharmacy.suppliers.store') }}">@csrf
            <div class="grid grid-cols-2 gap-3">
                <div class="col-span-2"><label class="form-label">Supplier Name *</label><input type="text" name="name" required class="form-input"></div>
                <div><label class="form-label">Code *</label><input type="text" name="code" required class="form-input"></div>
                <div><label class="form-label">Contact Person</label><input type="text" name="contact_person" class="form-input"></div>
                <div><label class="form-label">Phone</label><input type="text" name="phone" class="form-input"></div>
                <div><label class="form-label">Email</label><input type="email" name="email" class="form-input"></div>
                <div class="col-span-2"><label class="form-label">Address</label><textarea name="address" class="form-input" rows="2"></textarea></div>
                <div><label class="form-label">KRA PIN</label><input type="text" name="kra_pin" class="form-input"></div>
                <div><label class="form-label">Payment Terms (days)</label><input type="number" name="payment_terms_days" value="30" class="form-input"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('newSupplierModal').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>

{{-- New PO Modal (placeholder) --}}
<div id="newPOModal" 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">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">New Purchase Order</h3><button onclick="document.getElementById('newPOModal').classList.add('hidden')" class="text-gray-400">&times;</button></div>
        <form method="POST" action="{{ route('pharmacy.procurement.store') }}">@csrf
            <div class="space-y-3">
                <div><label class="form-label">Supplier *</label><select name="supplier_id" required class="form-input">@foreach($suppliers ?? [] as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select></div>
                <div><label class="form-label">Expected Delivery</label><input type="date" name="expected_delivery" class="form-input"></div>
                <div><label class="form-label">Notes</label><textarea name="notes" class="form-input" rows="2"></textarea></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('newPOModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Create PO</button></div>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script>
function switchProcTab(btn, id) {
    document.querySelectorAll('.proc-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.proc-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('proc-' + id).classList.add('active');
}
</script>
@endsection