@extends('layouts.app')
@section('title', 'Order ' . $storefrontOrder->order_number)
@section('page-title', 'Order: ' . $storefrontOrder->order_number)

@section('content')
<div class="flex items-center gap-3 mb-5">
    <a href="{{ route('storefront.admin.orders') }}" class="btn-secondary btn-sm">← All Orders</a>
    @if($storefrontOrder->invoice)
    <a href="{{ route('invoices.show', $storefrontOrder->invoice_id) }}" class="btn-secondary btn-sm">📄 View Invoice</a>
    <a href="{{ route('invoices.download', $storefrontOrder->invoice_id) }}" class="btn-secondary btn-sm">⬇ Download PDF</a>
    @endif
    @if($waUrl)
    <a href="{{ $waUrl }}" target="_blank" class="btn-success btn-sm">💬 WhatsApp Customer</a>
    @endif
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

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

        {{-- Items --}}
        <div class="card p-0 overflow-hidden">
            <div class="px-5 py-3 border-b border-slate-100">
                <h3 class="text-sm font-bold text-slate-800">Order Items</h3>
            </div>
            <table class="w-full text-sm">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="table-th">Item</th>
                        <th class="table-th text-right">Qty</th>
                        <th class="table-th text-right">Unit Price</th>
                        <th class="table-th text-right">GST</th>
                        <th class="table-th text-right">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($storefrontOrder->items as $item)
                    <tr>
                        <td class="table-td font-medium">{{ $item->item_name }}</td>
                        <td class="table-td text-right">{{ $item->quantity }} {{ $item->unit }}</td>
                        <td class="table-td text-right">₹{{ number_format($item->unit_price, 2) }}</td>
                        <td class="table-td text-right text-xs text-slate-500">{{ $item->gst_rate }}%<br>₹{{ number_format($item->gst_amount, 2) }}</td>
                        <td class="table-td text-right font-bold">₹{{ number_format($item->total_amount, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-slate-50">
                    <tr>
                        <td colspan="4" class="px-4 py-3 text-right font-bold">Total:</td>
                        <td class="px-4 py-3 text-right font-black text-brand-600 text-base">₹{{ number_format($storefrontOrder->total_amount, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        {{-- Invoice link --}}
        @if($storefrontOrder->invoice)
        <div class="card flex items-center justify-between bg-emerald-50 border-emerald-200">
            <div>
                <p class="font-bold text-emerald-800">Invoice Auto-Generated</p>
                <p class="text-sm text-emerald-700">{{ $storefrontOrder->invoice->invoice_number }} — {{ $storefrontOrder->invoice->invoice_date->format('d M Y') }}</p>
            </div>
            <a href="{{ route('invoices.show', $storefrontOrder->invoice_id) }}" class="btn-success btn-sm">Open Invoice →</a>
        </div>
        @endif
    </div>

    {{-- Right sidebar --}}
    <div class="space-y-5">

        {{-- Customer info --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-3 pb-2 border-b border-slate-100">Customer</h3>
            <div class="space-y-2 text-sm">
                <p class="font-semibold text-slate-800 text-base">{{ $storefrontOrder->customer_name }}</p>
                <p>📞 {{ $storefrontOrder->customer_phone }}</p>
                @if($storefrontOrder->customer_email)<p>📧 {{ $storefrontOrder->customer_email }}</p>@endif
                @if($storefrontOrder->delivery_address)
                <div class="mt-2 pt-2 border-t border-slate-100">
                    <p class="text-xs text-slate-400 font-semibold uppercase mb-1">Delivery Address</p>
                    <p class="text-slate-600">{{ $storefrontOrder->delivery_address }}</p>
                </div>
                @endif
                @if($storefrontOrder->special_instructions)
                <div class="mt-2 pt-2 border-t border-slate-100">
                    <p class="text-xs text-slate-400 font-semibold uppercase mb-1">Special Instructions</p>
                    <p class="text-slate-600 italic">{{ $storefrontOrder->special_instructions }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Order status --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-3 pb-2 border-b border-slate-100">Update Status</h3>
            <form method="POST" action="{{ route('storefront.admin.orders.status', $storefrontOrder) }}">
                @csrf
                <div class="space-y-2">
                    @foreach(['pending','confirmed','preparing','ready','delivered','cancelled'] as $status)
                    <label class="flex items-center gap-3 p-2.5 rounded-xl cursor-pointer {{ $storefrontOrder->status === $status ? 'bg-brand-50 ring-2 ring-brand-200' : 'hover:bg-slate-50' }}">
                        <input type="radio" name="status" value="{{ $status }}" class="text-brand-600"
                               {{ $storefrontOrder->status === $status ? 'checked' : '' }}>
                        <span class="text-sm font-medium capitalize">{{ $status }}</span>
                    </label>
                    @endforeach
                    <button type="submit" class="btn-primary w-full justify-center mt-2">Update Status</button>
                </div>
            </form>
        </div>

        {{-- Payment info --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-3 pb-2 border-b border-slate-100">Payment</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">Mode</span><span class="capitalize font-medium">{{ $storefrontOrder->payment_mode }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">Status</span>
                    <span class="{{ $storefrontOrder->payment_status === 'paid' ? 'badge-green' : 'badge-yellow' }} capitalize">{{ $storefrontOrder->payment_status }}</span>
                </div>
                @if($storefrontOrder->razorpay_payment_id)
                <div class="flex justify-between"><span class="text-slate-400">Razorpay ID</span><span class="font-mono text-xs">{{ $storefrontOrder->razorpay_payment_id }}</span></div>
                @endif
                <div class="flex justify-between font-bold border-t border-slate-100 pt-2">
                    <span>Total</span>
                    <span class="text-brand-600">₹{{ number_format($storefrontOrder->total_amount, 2) }}</span>
                </div>
            </div>
        </div>

        {{-- Notifications --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-3 pb-2 border-b border-slate-100">Notifications Sent</h3>
            <div class="space-y-2 text-sm">
                <div class="flex items-center gap-2 {{ $storefrontOrder->email_sent ? 'text-emerald-700' : 'text-slate-400' }}">
                    {{ $storefrontOrder->email_sent ? '✓' : '○' }} Email invoice
                </div>
                <div class="flex items-center gap-2 {{ $storefrontOrder->whatsapp_sent ? 'text-emerald-700' : 'text-slate-400' }}">
                    {{ $storefrontOrder->whatsapp_sent ? '✓' : '○' }} WhatsApp invoice
                </div>
            </div>
        </div>
    </div>
</div>
@endsection