@extends('layouts.app')

@section('title', 'Order Receipt #' . $order->order_number)

@section('content')

<div class="max-w-3xl mx-auto">

    <!-- Top Success Header -->
    <div class="text-center mb-8">
        <div class="w-16 h-16 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-3xl mx-auto mb-3 border border-emerald-500/30 shadow-glow">
            ✓
        </div>
        <h1 class="font-display font-black text-2xl sm:text-3xl text-white">Order Confirmed!</h1>
        <p class="text-xs sm:text-sm text-slate-400 mt-1">Thank you for your order. We are preparing your footwear drop for dispatch.</p>
    </div>

    <!-- Main Receipt Card -->
    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 sm:p-10 shadow-2xl space-y-8">
        
        <!-- Receipt Top Brand Bar -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-white/10 pb-6">
            <div class="flex items-center gap-3">
                <img src="{{ asset('images/logo.jpg') }}" class="h-12 w-12 rounded-full object-cover ring-2 ring-brand-light">
                <div>
                    <span class="font-display font-black text-lg text-white">2BROTHER<span class="text-brand-light">.HUB</span></span>
                    <p class="text-[11px] text-slate-400">{{ config('company.tagline', 'Step Into Style') }}</p>
                    <p class="text-[10px] text-slate-500">{{ config('company.address') }}</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('orders.show', $order) }}" class="bg-brand/20 text-brand-light border border-brand/30 text-xs font-bold px-4 py-2 rounded-full hover:bg-brand/30 transition flex items-center gap-1.5">
                    <span>📦 Track Order</span>
                </a>
                <a href="{{ route('orders.receipt.download', $order) }}" class="bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white text-xs font-bold px-4 py-2 rounded-full transition shadow-glow flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    <span>Download PDF</span>
                </a>
            </div>
        </div>

        <!-- Order Meta Grid -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-2xl bg-ink border border-white/5 text-xs">
            <div>
                <span class="text-slate-500 block text-[10px] uppercase font-bold">Order Number</span>
                <span class="font-mono font-bold text-white">{{ $order->order_number }}</span>
            </div>
            <div>
                <span class="text-slate-500 block text-[10px] uppercase font-bold">Order Date</span>
                <span class="font-semibold text-slate-200">{{ $order->created_at->format('d M Y, h:i A') }}</span>
            </div>
            <div>
                <span class="text-slate-500 block text-[10px] uppercase font-bold">Payment Method</span>
                <span class="font-semibold text-brand-light uppercase">{{ $order->payment_method }}</span>
            </div>
            <div>
                <span class="text-slate-500 block text-[10px] uppercase font-bold">Payment Status</span>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $order->payment_badge_classes }}">
                    {{ $order->payment_status }}
                </span>
            </div>
        </div>

        <!-- Customer & Shipping Details -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-xs text-slate-300">
            <div>
                <h3 class="font-heading font-bold text-white mb-1.5 uppercase text-[11px] tracking-wider">Shipping Address</h3>
                <p class="font-bold text-white">{{ $order->shipping_name }}</p>
                <p class="text-slate-400">{{ $order->shipping_address }}</p>
                <p class="text-slate-400">{{ $order->shipping_city }} - {{ $order->shipping_pincode }}</p>
                <p class="text-slate-400 mt-1">Phone: {{ $order->shipping_phone }}</p>
            </div>
            <div>
                <h3 class="font-heading font-bold text-white mb-1.5 uppercase text-[11px] tracking-wider">Delivery & Courier</h3>
                <p class="text-slate-300 font-medium">Status: <span class="font-bold text-brand-light">{{ $order->status_label }}</span></p>
                @if($order->courier_name)
                    <p class="text-slate-400 mt-1">Courier: {{ $order->courier_name }}</p>
                @endif
                @if($order->tracking_number)
                    <p class="text-slate-400 font-mono">Tracking ID: {{ $order->tracking_number }}</p>
                @endif
                <p class="text-[11px] text-emerald-400 mt-2 font-medium">Estimated Delivery: Within 3-5 Business Days</p>
            </div>
        </div>

        <!-- Line Items Table -->
        <div>
            <h3 class="font-heading font-bold text-white mb-3 uppercase text-[11px] tracking-wider">Purchased Items</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-xs text-left border-collapse">
                    <thead>
                        <tr class="text-slate-400 border-b border-white/10 pb-2">
                            <th class="py-2.5 font-bold">Item Description</th>
                            <th class="py-2.5 text-center font-bold">Qty</th>
                            <th class="py-2.5 text-right font-bold">Unit Price</th>
                            <th class="py-2.5 text-right font-bold">Tax (GST)</th>
                            <th class="py-2.5 text-right font-bold">Total</th>
                        </tr>
                    </thead>
                    <tbody class="text-slate-300">
                        @foreach($order->items as $item)
                            <tr class="border-b border-white/5">
                                <td class="py-3 font-semibold text-white">
                                    {{ $item->product_name }}
                                    @if($item->size || $item->color)
                                        <span class="text-slate-400 font-normal block text-[11px]">
                                            @if($item->size) Size: {{ $item->size }} @endif
                                            @if($item->color) &middot; Color: {{ $item->color }} @endif
                                        </span>
                                    @endif
                                </td>
                                <td class="py-3 text-center">{{ $item->quantity }}</td>
                                <td class="py-3 text-right">₹{{ number_format($item->unit_price, 2) }}</td>
                                <td class="py-3 text-right text-slate-400">₹{{ number_format($item->tax_amount, 2) }}</td>
                                <td class="py-3 text-right font-bold text-white">₹{{ number_format($item->line_total, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Summary Calculation Box -->
        <div class="ml-auto max-w-xs space-y-2 text-xs border-t border-white/10 pt-4">
            <div class="flex justify-between text-slate-400">
                <span>Subtotal</span>
                <span class="text-white font-semibold">₹{{ number_format($order->subtotal, 2) }}</span>
            </div>
            @if($order->discount_total > 0)
                <div class="flex justify-between text-emerald-400">
                    <span>Discount Saved</span>
                    <span>-₹{{ number_format($order->discount_total, 2) }}</span>
                </div>
            @endif
            @if($order->coupon_discount > 0)
                <div class="flex justify-between text-brand-light font-bold">
                    <span>Coupon Voucher ({{ $order->coupon_code }})</span>
                    <span>-₹{{ number_format($order->coupon_discount, 2) }}</span>
                </div>
            @endif
            <div class="flex justify-between text-slate-400">
                <span>Total Tax (GST)</span>
                <span class="text-white font-semibold">₹{{ number_format($order->tax_total, 2) }}</span>
            </div>
            <div class="border-t border-white/10 pt-2 flex justify-between font-heading font-black text-sm text-white">
                <span>Grand Total Paid</span>
                <span class="text-base text-brand-light">₹{{ number_format($order->grand_total, 2) }}</span>
            </div>
        </div>

        <!-- Action Footer -->
        <div class="border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
            <a href="{{ route('products.index') }}" class="text-slate-400 hover:text-white font-semibold">
                &larr; Continue Shopping
            </a>
            <a href="{{ route('orders.index') }}" class="bg-white/5 hover:bg-white/10 text-brand-light border border-white/10 px-6 py-2.5 rounded-full font-bold transition">
                View All My Orders
            </a>
        </div>

    </div>
</div>

@endsection