@extends('layouts.app')
@section('title', 'My Online Store')
@section('page-title', 'Online Store')
@section('breadcrumb', 'Manage your public-facing storefront')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Left: Settings --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Store status --}}
        @if($settings->is_enabled ?? false)
        <div class="flex items-center justify-between p-4 bg-emerald-50 border border-emerald-200 rounded-2xl">
            <div class="flex items-center gap-3">
                <span class="w-3 h-3 bg-emerald-500 rounded-full animate-pulse"></span>
                <div>
                    <p class="font-bold text-emerald-800">Your store is LIVE</p>
                    <p class="text-sm text-emerald-700 font-mono">{{ route('storefront.show', $tenant->slug) }}</p>
                </div>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('storefront.show', $tenant->slug) }}" target="_blank" class="btn-success btn-sm">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    Open Store
                </a>
                <a href="{{ route('storefront.admin.orders') }}" class="btn-secondary btn-sm">📦 Orders ({{ $stats['total_orders'] }})</a>
            </div>
        </div>
        @else
        <div class="p-4 bg-amber-50 border border-amber-200 rounded-2xl">
            <p class="font-bold text-amber-800">⚠ Your store is currently offline</p>
            <p class="text-sm text-amber-700 mt-1">Enable it below to start accepting orders</p>
        </div>
        @endif

        {{-- Stats --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            @foreach([
                ['label'=>'Total Orders','value'=>$stats['total_orders'],'icon'=>'📦'],
                ['label'=>'Pending','value'=>$stats['pending_orders'],'icon'=>'⏳'],
                ['label'=>'Today','value'=>$stats['today_orders'],'icon'=>'📅'],
                ['label'=>"Today's Revenue",'value'=>'₹'.number_format($stats['today_revenue'],0),'icon'=>'💰'],
            ] as $s)
            <div class="card-sm text-center">
                <div class="text-2xl mb-1">{{ $s['icon'] }}</div>
                <p class="text-lg font-bold text-slate-800">{{ $s['value'] }}</p>
                <p class="text-xs text-slate-400">{{ $s['label'] }}</p>
            </div>
            @endforeach
        </div>

        {{-- Settings form --}}
        <div class="card">
            <h2 class="text-sm font-bold text-slate-800 mb-5 pb-2 border-b border-slate-100">Store Settings</h2>
            <form method="POST" action="{{ route('storefront.admin.settings') }}" enctype="multipart/form-data" class="space-y-5">
                @csrf

                {{-- Enable toggle --}}
                <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                    <div>
                        <p class="font-semibold text-slate-800 text-sm">Store Active</p>
                        <p class="text-xs text-slate-400">Toggle to enable/disable your public store</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="is_enabled" value="0">
                        <input type="checkbox" name="is_enabled" value="1" class="sr-only peer"
                               {{ $settings->is_enabled ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-indigo-300 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-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                    </label>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Store Name <span class="text-red-500">*</span></label>
                        <input type="text" name="store_name" value="{{ old('store_name', $settings->store_name ?? '') }}"
                               class="form-input" required placeholder="e.g. The Grand Restaurant">
                    </div>
                    <div>
                        <label class="form-label">Tagline</label>
                        <input type="text" name="tagline" value="{{ old('tagline', $settings->tagline ?? '') }}"
                               class="form-input" placeholder="e.g. Fresh & Delicious">
                    </div>
                    <div>
                        <label class="form-label">WhatsApp Number</label>
                        <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $settings->whatsapp_number ?? '') }}"
                               class="form-input" placeholder="91XXXXXXXXXX">
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Store Description</label>
                        <textarea name="description" rows="2" class="form-input" placeholder="Tell customers about your store">{{ old('description', $settings->description ?? '') }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">Minimum Order (₹)</label>
                        <input type="number" name="minimum_order" value="{{ old('minimum_order', $settings->minimum_order ?? 0) }}"
                               class="form-input" step="0.01" min="0">
                    </div>
                    <div>
                        <label class="form-label">Delivery Charge (₹)</label>
                        <input type="number" name="delivery_charge" value="{{ old('delivery_charge', $settings->delivery_charge ?? 0) }}"
                               class="form-input" step="0.01" min="0">
                    </div>
                </div>

                {{-- Order options --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    @foreach([
                        ['name'=>'allow_orders','label'=>'Accept Orders','checked'=>$settings->allow_orders ?? true],
                        ['name'=>'show_prices','label'=>'Show Prices','checked'=>$settings->show_prices ?? true],
                        ['name'=>'delivery_enabled','label'=>'Delivery','checked'=>$settings->delivery_enabled ?? true],
                        ['name'=>'pickup_enabled','label'=>'Pickup','checked'=>$settings->pickup_enabled ?? true],
                        ['name'=>'accept_cod','label'=>'Accept COD','checked'=>$settings->accept_cod ?? true],
                        ['name'=>'accept_razorpay','label'=>'Accept Online Pay','checked'=>$settings->accept_razorpay ?? false],
                        ['name'=>'auto_whatsapp','label'=>'WhatsApp Invoice','checked'=>$settings->auto_whatsapp ?? false],
                        ['name'=>'auto_email','label'=>'Email Invoice','checked'=>$settings->auto_email ?? true],
                    ] as $opt)
                    <label class="flex items-center gap-2 cursor-pointer p-2 bg-slate-50 rounded-xl">
                        <input type="hidden" name="{{ $opt['name'] }}" value="0">
                        <input type="checkbox" name="{{ $opt['name'] }}" value="1"
                               {{ $opt['checked'] ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-slate-300 text-brand-600">
                        <span class="text-xs font-medium text-slate-700">{{ $opt['label'] }}</span>
                    </label>
                    @endforeach
                </div>

                {{-- Banner --}}
                <div>
                    <label class="form-label">Banner Image</label>
                    @if($settings->banner_image)
                    <div class="mb-2">
                        <img src="{{ $settings->banner_url }}" class="h-24 w-full object-cover rounded-xl">
                    </div>
                    @endif
                    <input type="file" name="banner_image" accept="image/*" class="form-input text-sm py-2">
                    <p class="text-xs text-slate-400 mt-1">Recommended: 1200×400px, max 3MB</p>
                </div>

                <button type="submit" class="btn-primary w-full justify-center">
                    Save Store Settings
                </button>
            </form>
        </div>
    </div>

    {{-- Right: Quick links + recent orders --}}
    <div class="space-y-5">

        {{-- Quick actions --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-3 pb-2 border-b border-slate-100">Quick Actions</h3>
            <div class="space-y-2">
                <a href="{{ route('storefront.admin.menu') }}" class="flex items-center gap-3 p-3 bg-slate-50 hover:bg-slate-100 rounded-xl transition-colors text-sm font-medium">
                    🍽️ <span>Manage Menu / Products</span>
                </a>
                <a href="{{ route('storefront.admin.orders') }}" class="flex items-center gap-3 p-3 bg-slate-50 hover:bg-slate-100 rounded-xl transition-colors text-sm font-medium">
                    📦 <span>View All Orders</span>
                </a>
                @if($settings->is_enabled)
                <a href="{{ route('storefront.show', $tenant->slug) }}" target="_blank"
                   class="flex items-center gap-3 p-3 bg-indigo-50 hover:bg-indigo-100 rounded-xl transition-colors text-sm font-medium text-indigo-700">
                    🌐 <span>View Public Store</span>
                </a>
                @endif
            </div>
        </div>

        {{-- QR Code --}}
        @if($settings->is_enabled)
        <div class="card text-center">
            <h3 class="text-sm font-bold text-slate-700 mb-3">Store QR Code</h3>
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data={{ urlencode(route('storefront.show', $tenant->slug)) }}"
                 class="mx-auto rounded-xl mb-2" alt="QR Code">
            <p class="text-xs text-slate-400">Scan to open your store</p>
            <a href="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data={{ urlencode(route('storefront.show', $tenant->slug)) }}"
               download="store-qr.png" class="btn-secondary btn-sm mt-2 mx-auto">
                Download QR
            </a>
        </div>
        @endif

        {{-- Recent orders --}}
        <div class="card p-0 overflow-hidden">
            <div class="px-4 py-3 border-b border-slate-100 flex justify-between items-center">
                <h3 class="text-sm font-bold text-slate-700">Recent Orders</h3>
                <a href="{{ route('storefront.admin.orders') }}" class="text-xs text-brand-600">View all →</a>
            </div>
            <div class="divide-y divide-slate-50">
                @forelse($recentOrders as $order)
                <div class="px-4 py-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <a href="{{ route('storefront.admin.orders.show', $order) }}" class="text-sm font-semibold text-slate-800 hover:text-brand-600">{{ $order->order_number }}</a>
                            <p class="text-xs text-slate-400">{{ $order->customer_name }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold">₹{{ number_format($order->total_amount, 0) }}</p>
                            <span class="badge-{{ $order->status === 'delivered' ? 'green' : ($order->status === 'cancelled' ? 'red' : 'yellow') }} text-xs">{{ ucfirst($order->status) }}</span>
                        </div>
                    </div>
                </div>
                @empty
                <div class="px-4 py-6 text-center text-slate-400 text-sm">No orders yet</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection