<?php $__env->startSection('title', 'Procurement'); ?>

<?php $__env->startSection('content'); ?>
<div x-data="poForm()">
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Procurement</h1>
            <p class="text-sm text-slate-500">Suppliers and purchase orders.</p>
        </div>
        <div class="flex gap-2">
            <button @click="addSupplier = true" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">+ Supplier</button>
            <button @click="addPO = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Purchase order</button>
        </div>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Open POs</p><p class="mt-1 text-2xl font-extrabold text-slate-900"><?php echo e($summary['open']); ?></p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Awaiting approval</p><p class="mt-1 text-2xl font-extrabold text-amber-600"><?php echo e($summary['awaiting_approval']); ?></p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Month spend</p><p class="mt-1 text-xl font-extrabold text-emerald-600"><?php echo e($CUR ?? '₦') . number_format((float) ($summary['month_spend']), 2); ?></p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Suppliers</p><p class="mt-1 text-2xl font-extrabold text-slate-900"><?php echo e($summary['suppliers']); ?></p></div>
    </div>

    
    <h2 class="mb-3 font-extrabold text-slate-900">Purchase orders</h2>
    <div class="space-y-3">
        <?php $__empty_1 = true; $__currentLoopData = $purchaseOrders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $po): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php $badge = ['draft'=>'slate','pending_approval'=>'amber','approved'=>'sky','ordered'=>'violet','received'=>'emerald','cancelled'=>'rose'][$po->status] ?? 'slate'; ?>
            <a href="<?php echo e(route('epelcon.procurement.orders.show', $po)); ?>" class="block rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 hover:ring-indigo-300">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="text-2xl">📦</span>
                    <div class="min-w-0 flex-1">
                        <p class="font-bold text-slate-900"><?php echo e($po->supplier->name); ?> <span class="ml-1 font-mono text-xs font-semibold text-slate-400"><?php echo e($po->code); ?></span></p>
                        <p class="text-xs text-slate-500"><?php echo e($po->items->count()); ?> line<?php echo e($po->items->count() === 1 ? '' : 's'); ?> · ordered <?php echo e($po->order_date?->format('j M')); ?><?php echo e($po->expected_date ? ' · expected ' . $po->expected_date->format('j M') : ''); ?></p>
                    </div>
                    <p class="font-extrabold text-slate-900"><?php echo e($CUR ?? '₦') . number_format((float) ($po->total), 2); ?></p>
                    <span class="rounded-full bg-<?php echo e($badge); ?>-100 px-2.5 py-1 text-[10px] font-bold uppercase text-<?php echo e($badge); ?>-700"><?php echo e(str_replace('_', ' ', $po->status)); ?></span>
                </div>
            </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No purchase orders yet.</div>
        <?php endif; ?>
    </div>
    <div class="mt-4"><?php echo e($purchaseOrders->links()); ?></div>

    
    <h2 class="mb-3 mt-8 font-extrabold text-slate-900">Suppliers</h2>
    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        <?php $__currentLoopData = $suppliers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $supplier): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="font-bold text-slate-900"><?php echo e($supplier->name); ?></p>
                        <p class="text-xs text-slate-500"><?php echo e($supplier->category); ?> · <?php echo e($supplier->purchase_orders_count); ?> PO<?php echo e($supplier->purchase_orders_count === 1 ? '' : 's'); ?> · ★ <?php echo e($supplier->rating); ?></p>
                        <p class="mt-1 text-xs text-slate-400"><?php echo e($supplier->phone); ?><?php echo e($supplier->email ? ' · ' . $supplier->email : ''); ?></p>
                    </div>
                    <span class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase <?php echo e($supplier->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'); ?>"><?php echo e($supplier->status); ?></span>
                </div>
                <button @click='editSupplier = <?php echo e(json_encode($supplier->only(['id','name','contact_person','email','phone','address','category','status']))); ?>'
                        class="mt-3 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-600 hover:bg-indigo-100">Edit</button>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    
    <div x-cloak x-show="addPO" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addPO = false"></div>
        <div x-show="addPO" x-transition class="relative max-h-[92vh] w-full max-w-2xl overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New purchase order</h2>
            <form method="POST" action="<?php echo e(route('epelcon.procurement.orders.store')); ?>" class="space-y-4"><?php echo csrf_field(); ?>
                <input type="hidden" name="items" :value="JSON.stringify(lines)">
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Supplier</span>
                        <select name="supplier_id" required class="w-full rounded-xl border-slate-200 text-sm">
                            <?php $__currentLoopData = $suppliers->where('status', 'active'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $supplier): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($supplier->id); ?>"><?php echo e($supplier->name); ?></option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Expected date</span>
                        <input type="date" name="expected_date" class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>

                <div>
                    <span class="mb-2 block text-xs font-bold uppercase text-slate-500">Line items</span>
                    <div class="space-y-2">
                        <template x-for="(line, i) in lines" :key="i">
                            <div class="flex flex-wrap gap-2 rounded-xl bg-slate-50 p-2.5">
                                <select x-model="line.inventory_item_id" @change="prefill(line)" class="w-full rounded-lg border-slate-200 text-xs sm:flex-1">
                                    <option value="">Free-text item…</option>
                                    <?php $__currentLoopData = $inventoryItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $inv): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($inv->id); ?>" data-name="<?php echo e($inv->name); ?>" data-price="<?php echo e($inv->cost_price); ?>"><?php echo e($inv->name); ?></option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                                <input x-model="line.description" placeholder="Description" class="w-full rounded-lg border-slate-200 text-xs sm:flex-1">
                                <input x-model.number="line.qty" type="number" step="0.01" min="0" placeholder="Qty" class="w-20 rounded-lg border-slate-200 text-xs">
                                <input x-model.number="line.unit_price" type="number" step="0.01" min="0" placeholder="Unit <?php echo e($CUR); ?>" class="w-28 rounded-lg border-slate-200 text-xs">
                                <button type="button" @click="lines.splice(i, 1)" class="px-2 font-bold text-rose-400">✕</button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="lines.push({inventory_item_id: '', description: '', qty: 1, unit_price: 0})" class="mt-2 text-xs font-bold text-indigo-600">+ Add line</button>
                    <p class="mt-2 text-right text-sm font-extrabold text-slate-900">Total: <span x-text="'<?php echo e($CUR); ?>' + lines.reduce((s, l) => s + (l.qty || 0) * (l.unit_price || 0), 0).toLocaleString()"></span></p>
                </div>

                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes</span>
                    <textarea name="notes" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="addPO = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Submit for approval</button>
                </div>
            </form>
        </div>
    </div>

    
    <template x-for="mode in ['add', 'edit']" :key="mode">
        <div x-cloak x-show="(mode === 'add' && addSupplier) || (mode === 'edit' && editSupplier)" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addSupplier = false; editSupplier = null"></div>
            <div x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold" x-text="mode === 'add' ? 'New supplier' : 'Edit supplier'"></h2>
                <form method="POST" :action="mode === 'add' ? '<?php echo e(route('epelcon.procurement.suppliers.store')); ?>' : '<?php echo e(url('epelcon/procurement/suppliers')); ?>/' + editSupplier?.id + '/update'" class="grid grid-cols-2 gap-4"><?php echo csrf_field(); ?>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Company name</span>
                        <input name="name" required :value="mode === 'edit' ? editSupplier?.name : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Contact person</span>
                        <input name="contact_person" :value="mode === 'edit' ? editSupplier?.contact_person : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Category</span>
                        <input name="category" placeholder="Food & Produce" :value="mode === 'edit' ? editSupplier?.category : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                        <input name="phone" :value="mode === 'edit' ? editSupplier?.phone : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email</span>
                        <input type="email" name="email" :value="mode === 'edit' ? editSupplier?.email : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Address</span>
                        <input name="address" :value="mode === 'edit' ? editSupplier?.address : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <template x-if="mode === 'edit'">
                        <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                            <select name="status" class="w-full rounded-xl border-slate-200 text-sm" x-init="editSupplier && ($el.value = editSupplier.status)"><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
                    </template>
                    <div class="col-span-2 flex justify-end gap-2">
                        <button type="button" @click="addSupplier = false; editSupplier = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
function poForm() {
    return {
        addPO: false, addSupplier: false, editSupplier: null,
        lines: [{ inventory_item_id: '', description: '', qty: 1, unit_price: 0 }],
        inv: <?php echo json_encode($inventoryItems->keyBy('id'), 15, 512) ?>,
        prefill(line) {
            const item = this.inv[line.inventory_item_id];
            if (item) { line.description = item.name; line.unit_price = parseFloat(item.cost_price); }
        },
    };
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.epelcon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\hms\resources\views/epelcon/procurement/index.blade.php ENDPATH**/ ?>