@extends('layouts.app')
@section('title', 'Storefront Menu')
@section('page-title', 'Manage Store Menu')

@section('content')
<div class="flex items-center justify-between mb-5">
    <p class="text-sm text-slate-500">Toggle which products appear on your public store</p>
    <a href="{{ route('storefront.admin.index') }}" class="btn-secondary btn-sm">← Back to Store</a>
</div>

<div class="card p-0 overflow-hidden">
    <div class="px-5 py-3 border-b border-slate-100 bg-amber-50">
        <p class="text-sm text-amber-800">
            <strong>Tip:</strong> Toggle items to show/hide them on your public menu. Set a badge like "🔥 Popular" or "New" to highlight items.
        </p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="table-th">Product</th>
                    <th class="table-th">Category</th>
                    <th class="table-th text-right">Price (incl GST)</th>
                    <th class="table-th">Badge</th>
                    <th class="table-th">Order</th>
                    <th class="table-th text-center">Available</th>
                    <th class="table-th text-center">Show on Store</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($products as $product)
                <tr class="hover:bg-slate-50 transition-colors" x-data="{ saving: false }">
                    <td class="table-td">
                        <div class="flex items-center gap-3">
                            @if($product->image)
                            <img src="{{ $product->image_url }}" class="w-10 h-10 rounded-xl object-cover">
                            @else
                            <div class="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center text-lg">
                                {{ $product->type === 'service' ? '🔧' : '📦' }}
                            </div>
                            @endif
                            <div>
                                <p class="font-medium text-slate-800">{{ $product->name }}</p>
                                <p class="text-xs text-slate-400">{{ $product->sku ?: $product->type }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="table-td text-slate-500">{{ $product->category?->name ?? '—' }}</td>
                    <td class="table-td text-right font-semibold">₹{{ number_format($product->price_including_gst, 2) }}</td>
                    <td class="table-td">
                        <input type="text"
                               value="{{ $product->storefront_badge }}"
                               placeholder="🔥 Popular"
                               class="form-input text-xs py-1.5 w-28"
                               @change.debounce.500ms="
                                   saving=true;
                                   fetch('{{ route('storefront.admin.menu.toggle', $product) }}', {
                                       method:'POST',
                                       headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                                       body: JSON.stringify({show_on_storefront: {{ $product->show_on_storefront ? 'true':'false' }}, storefront_badge: $event.target.value, display_order: {{ $product->display_order ?? 0 }}})
                                   }).then(()=>saving=false)
                               ">
                    </td>
                    <td class="table-td">
                        <input type="number" value="{{ $product->display_order ?? 0 }}"
                               class="form-input text-xs py-1.5 w-16"
                               @change.debounce.500ms="
                                   fetch('{{ route('storefront.admin.menu.toggle', $product) }}', {
                                       method:'POST',
                                       headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                                       body: JSON.stringify({show_on_storefront: {{ $product->show_on_storefront ? 'true':'false' }}, display_order: parseInt($event.target.value)})
                                   })
                               ">
                    </td>
                    <td class="table-td text-center">
                        <input type="checkbox" {{ $product->is_available ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-slate-300 text-emerald-600 cursor-pointer"
                               @change="
                                   fetch('{{ route('storefront.admin.menu.toggle', $product) }}', {
                                       method:'POST',
                                       headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                                       body: JSON.stringify({is_available: $event.target.checked, show_on_storefront: {{ $product->show_on_storefront ? 'true':'false' }}})
                                   })
                               ">
                    </td>
                    <td class="table-td text-center">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" {{ $product->show_on_storefront ? 'checked' : '' }}
                                   class="sr-only peer"
                                   @change="
                                       fetch('{{ route('storefront.admin.menu.toggle', $product) }}', {
                                           method:'POST',
                                           headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                                           body: JSON.stringify({show_on_storefront: $event.target.checked})
                                       })
                                   ">
                            <div class="w-10 h-5 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="py-12 text-center text-slate-400">
                    No products found. <a href="{{ route('products.create') }}" class="text-brand-600 hover:underline">Add products first</a>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($products->hasPages())
    <div class="p-4 border-t border-slate-100">{{ $products->links() }}</div>
    @endif
</div>
@endsection