<?php $__env->startSection('title', 'Catering & Bulk Orders'); ?>

<?php $__env->startSection('content'); ?>
<div x-data="catering()">
    <section class="bg-slate-950 py-14 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Events · Parties · Bulk</p>
        <h1 class="mt-2 font-serif text-4xl font-bold">Catering & bulk orders</h1>
        <p class="mx-auto mt-3 max-w-xl px-4 text-slate-300">From 5 litres of egusi to a whole grilled cow — our chefs cater your celebration. Order by the litre, tray, or whole.</p>
    </section>

    <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6">
        
        <form method="GET" class="no-scrollbar mb-6 flex gap-2 overflow-x-auto pb-1">
            <a href="<?php echo e(route('site.catering')); ?>" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold <?php echo e(! request()->hasAny(['chef','category']) ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200'); ?>">All</a>
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('site.catering', ['category' => $cat])); ?>" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold <?php echo e(request('category') === $cat ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200'); ?>"><?php echo e($cat); ?></a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php $__currentLoopData = $chefs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chef): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('site.catering', ['chef' => $chef->id])); ?>" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold <?php echo e(request('chef') == $chef->id ? 'bg-orange-600 text-white' : 'bg-white text-orange-700 ring-1 ring-slate-200'); ?>">👨‍🍳 <?php echo e($chef->name); ?></a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </form>

        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            <?php $__empty_1 = true; $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $package): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
                    <?php if($package->image): ?>
                        <img src="<?php echo e(asset($package->image)); ?>" alt="<?php echo e($package->name); ?>" class="h-44 w-full object-cover">
                    <?php else: ?>
                        <div class="flex h-44 items-center justify-center bg-gradient-to-br from-orange-400 to-rose-600 text-5xl">🍲</div>
                    <?php endif; ?>
                    <div class="p-6">
                        <?php if($package->featured): ?><span class="rounded-full bg-gold-400/20 px-2.5 py-1 text-[10px] font-bold uppercase text-gold-600">Popular</span><?php endif; ?>
                        <h3 class="mt-2 font-serif text-xl font-bold text-slate-900"><?php echo e($package->name); ?></h3>
                        <p class="text-xs text-slate-500"><?php echo e($package->category); ?><?php echo e($package->chef ? ' · by ' . $package->chef->name : ''); ?></p>
                        <?php if($package->description): ?><p class="mt-2 text-sm leading-relaxed text-slate-600"><?php echo e(Str::limit($package->description, 90)); ?></p><?php endif; ?>
                        <div class="mt-3 flex items-end justify-between">
                            <div>
                                <p class="text-2xl font-extrabold text-gold-600"><?php echo e($CUR ?? '₦') . number_format((float) ($package->price_per_unit), 2); ?><span class="text-xs font-medium text-slate-400">/<?php echo e($package->unit); ?></span></p>
                                <p class="text-[11px] text-slate-400">Min <?php echo e($package->min_quantity + 0); ?> <?php echo e($package->unit); ?> · <?php echo e($package->lead_time_hours); ?>h notice</p>
                            </div>
                            <button @click="select(<?php echo e(Illuminate\Support\Js::from($package->only(['id','name','unit','price_per_unit','min_quantity']))); ?>)"
                                    class="rounded-xl bg-slate-950 px-4 py-2.5 text-xs font-bold text-white hover:bg-slate-800">Order →</button>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <p class="col-span-full rounded-3xl bg-white p-10 text-center text-slate-400 ring-1 ring-slate-200">No catering packages match. Try another filter.</p>
            <?php endif; ?>
        </div>

        
        <div id="order" class="mt-12 rounded-3xl bg-slate-950 p-8 text-white sm:p-12">
            <div class="mx-auto max-w-lg text-center">
                <h2 class="font-serif text-3xl font-bold">Place a catering order</h2>
                <p class="mt-2 text-sm text-slate-300" x-text="picked ? ('Ordering: ' + picked.name + ' (' + picked.price + '/' + picked.unit + ')') : 'Select a package above, or choose one below.'"></p>
            </div>
            <form method="POST" action="<?php echo e(route('site.catering.order')); ?>" class="mx-auto mt-6 max-w-lg space-y-4">
                <?php echo csrf_field(); ?>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Package</span>
                    <select name="package_id" x-model="pkgId" @change="syncPicked" required class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white">
                        <option value="" class="text-slate-800">— choose —</option>
                        <?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($p->id); ?>" class="text-slate-800"><?php echo e($p->name); ?> — <?php echo e($CUR); ?><?php echo e(number_format($p->price_per_unit)); ?>/<?php echo e($p->unit); ?></option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select></label>
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Quantity <span x-show="picked" x-text="'(' + picked?.unit + ')'"></span></span>
                        <input type="number" step="0.5" name="quantity" x-model="qty" :min="picked ? picked.min_quantity : 1" required class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Event date</span>
                        <input type="date" name="event_date" min="<?php echo e(now()->addDay()->toDateString()); ?>" required class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Your name</span>
                        <input name="name" value="<?php echo e(auth()->user()->name ?? ''); ?>" required class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Phone</span>
                        <input name="phone" required class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Delivery address (optional)</span>
                        <input name="address" class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-gold-400">Notes</span>
                        <textarea name="notes" rows="2" class="w-full rounded-xl border-white/20 bg-white/10 text-sm text-white"></textarea></label>
                </div>
                <div class="rounded-2xl bg-white/10 p-4 text-center" x-show="picked" x-cloak>
                    <p class="text-xs uppercase text-slate-400">Estimated total</p>
                    <p class="text-2xl font-extrabold text-gold-400" x-text="estimate"></p>
                </div>
                <button class="w-full rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 py-4 text-sm font-extrabold text-slate-950 shadow-lg shadow-gold-500/20 hover:brightness-110">Request catering →</button>
            </form>
        </div>
    </section>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
function catering() {
    return {
        packages: <?php echo e(Illuminate\Support\Js::from($packages->map->only(['id','name','unit','price_per_unit','min_quantity']))); ?>,
        pkgId: '', picked: null, qty: 1,
        select(p) { this.picked = { ...p, price: '<?php echo e($CUR); ?>' + Number(p.price_per_unit).toLocaleString() }; this.pkgId = String(p.id); this.qty = p.min_quantity; document.getElementById('order').scrollIntoView({ behavior: 'smooth' }); },
        syncPicked() { const p = this.packages.find(x => String(x.id) === String(this.pkgId)); if (p) this.select(p); },
        get estimate() { if (!this.picked) return ''; const t = (parseFloat(this.qty) || 0) * parseFloat(this.picked.price_per_unit); return '<?php echo e($CUR); ?>' + t.toLocaleString(undefined, { maximumFractionDigits: 0 }); },
    };
}
</script>
<?php $__env->stopPush(); ?>

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