@extends('layouts.epelcon')
@section('title', 'Dietary Plans')

@section('content')
<div x-data="{ add: false, edit: null }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Dietary plans</h1>
            <p class="text-sm text-slate-500">Curated nutrition programmes offered to guests and members.</p>
        </div>
        <button @click="add = 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">+ New plan</button>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($plans as $plan)
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 {{ $plan->status !== 'active' ? 'opacity-60' : '' }}">
                <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-100 text-xl">🥗</div>
                <h3 class="mt-3 font-extrabold text-slate-900">{{ $plan->name }}</h3>
                <p class="text-xs font-bold uppercase tracking-wide text-emerald-600">{{ $plan->goal }}</p>
                <p class="mt-2 text-xs leading-relaxed text-slate-500">{{ Str::limit($plan->description, 100) }}</p>
                <dl class="mt-3 space-y-1 text-xs text-slate-600">
                    <div class="flex justify-between"><dt>Daily calories</dt><dd class="font-bold">{{ number_format($plan->daily_calories) }} kcal</dd></div>
                    <div class="flex justify-between"><dt>Duration</dt><dd class="font-bold">{{ $plan->duration_days }} days</dd></div>
                    <div class="flex justify-between"><dt>Price</dt><dd class="font-extrabold text-indigo-600">@money($plan->price)</dd></div>
                </dl>
                <button @click='edit = {{ json_encode($plan->only(['id','name','description','goal','daily_calories','price','duration_days','status'])) }}'
                        class="mt-3 w-full rounded-xl bg-indigo-50 py-2 text-xs font-bold text-indigo-600 hover:bg-indigo-100">Edit plan</button>
            </div>
        @endforeach
    </div>

    <template x-for="mode in ['add', 'edit']" :key="mode">
        <div x-cloak x-show="(mode === 'add' && add) || (mode === 'edit' && edit)" 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="add = false; edit = 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 dietary plan' : 'Edit dietary plan'"></h2>
                <form method="POST" :action="mode === 'add' ? '{{ route('epelcon.dietary.store') }}' : '{{ url('epelcon/dietary-plans') }}/' + edit?.id + '/update'" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                        <input name="name" required :value="mode === 'edit' ? edit?.name : ''" 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">Goal</span>
                        <input name="goal" placeholder="Weight management" :value="mode === 'edit' ? edit?.goal : ''" 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">Daily calories</span>
                        <input type="number" name="daily_calories" :value="mode === 'edit' ? edit?.daily_calories : 1800" 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">Duration (days)</span>
                        <input type="number" name="duration_days" min="1" required :value="mode === 'edit' ? edit?.duration_days : 7" 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">Price ({{ $CUR }})</span>
                        <input type="number" step="0.01" name="price" required :value="mode === 'edit' ? edit?.price : ''" 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">Description</span>
                        <textarea name="description" rows="3" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && edit && ($el.value = edit.description ?? '')"></textarea></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="edit && ($el.value = edit.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="add = false; edit = 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 plan</button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection
