@extends('frontEnd.layouts.master')
@section('title','Order Success')
@section('content')
{{-- <section class="customer-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-8">
                <div class="success-img">
                    <img src="{{asset('frontEnd/images/order-success.png')}}" alt="">
                </div>
                <div class="success-title">
                    <h2>আপনার অর্ডারটি আমাদের কাছে সফলভাবে পৌঁছেছে, আমাদের একজন প্রতিনিধি আপনার নাম্বারে কল করে অর্ডারটি কনফার্ম করবেন। </h2>
                </div>

                <h5 class="my-3">Your Order Details</h5>
                <div class="success-table">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td>
                                    <p>Invoice ID</p>
                                    <p><strong>{{$order->invoice_id}}</strong></p>
                                </td>
                                <td>
                                    <p>Date</p>
                                    <p><strong>{{$order->created_at->format('d-m-y')}}</strong></p>
                                </td>
                                <td>
                                    <p>Phone</p>
                                    <p><strong>{{$order->shipping?$order->shipping->phone:''}}</strong></p>
                                </td>
                                <td>
                                    <p>Total</p>
                                    <p><strong>৳ {{$order->amount}}</strong></p>
                                </td>
                            </tr>
                            <tr>
                                @php 
                                    $payments = App\Models\Payment::where('order_id',$order->id)->first();
                                @endphp
                                <td colspan="4">
                                    <p>Payment Method</p>
                                    <p><strong>{{$payments->payment_method}}</strong></p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- success table -->
                <h5 class="my-4">Pay with cash upon delivery</h5>
                <div class="success-table">
                    <h6 class="mb-3">Order Delivery</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->orderdetails as $key=>$value)
                            <tr>
                                <td>
                                    <p>{{$value->product_name}} x {{$value->qty}}</p>
                                    
                                </td>
                                <td><p><strong>৳ {{$value->sale_price}}</strong></p></td>
                            </tr>
                            @endforeach
                            <tr>
                                <th  class="text-end px-4">Net Total</th>
                                <td><strong id="net_total">৳{{$order->amount-$order->shipping_charge}}</strong></td>
                            </tr>
                            <tr>
                                <th  class="text-end px-4">Shipping Cost</th>
                                <td>
                                    <strong id="cart_shipping_cost">৳{{$order->shipping_charge}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <th  class="text-end px-4">Grand Total</th>
                                <td>
                                    <strong id="grand_total">৳{{$order->amount}}</strong>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td>
                                    <h5 class="my-4">Billing Address</h5>
                                    <p>{{$order->shipping?$order->shipping->name:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->phone:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->address:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->area:''}}</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- success table -->
                <a href="{{route('home')}}" class=" my-5 btn btn-primary">Go To Home</a>
            </div>
        </div>
    </div>
</section> --}}


    @push('script')
        <script>
            window.dataLayer = window.dataLayer || [];

            // Clear the previous ecommerce object to ensure clean data
            window.dataLayer.push({ ecommerce: null });

            window.dataLayer.push({
                'event': 'purchase',
                // 1. Proffasional Customer Data Array (Enhanced Conversions)
                'customer_data': {
                    'phone_number': '{{ $order->shipping->phone ?? "" }}',
                    'address': {
                        'first_name': '{{ $order->shipping->name ?? "" }}',
                        'street': '{{ $order->shipping->address ?? "" }}',
                        'city': 'Dhaka', // Adjust dynamic city if available
                        'country': 'Bangladesh'
                    }
                },
                // 2. Ecommerce Purchase Data
                'ecommerce': {
                    'transaction_id': '{{ $order->invoice_id }}',
                    'affiliation': '{{ $generalsetting->name ?? "" }}',
                    'value': {{ (float) $order->amount }},
                    'tax': 0,
                    'shipping': {{ (float) $order->shipping_charge }},
                    'currency': 'BDT',
                    'items': [
                        @foreach($order->orderDetails as $item)
                            @php 
                                                // Fetch brand professionally
                                $productBrand = $item->product && $item->product->brand ? $item->product->brand->name : '';
                            @endphp
                            {
                                'item_id': '{{ $item->product_id }}',
                                'item_name': '{{ $item->product_name }}',
                                'item_brand': '{{ $productBrand }}',
                                'item_variant': '{{ $item->product_size ?? "" }} {{ $item->product_color ?? "" }}',
                                'price': {{ (float) $item->sale_price }},
                                'quantity': {{ (int) $item->qty }}
                            }@if(!$loop->last), @endif
                        @endforeach
                    ]
                }
            });
        </script>
    @endpush
 <main class="max-w-4xl mx-auto px-4 py-16">
        
        <div class="text-center mb-16">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-black text-white mb-6 sharp-edge">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            <h2 class="text-[10px] font-bold uppercase tracking-[0.3em] text-gray-400 mb-2">Order Completed</h2>
            <h3 class="text-3xl font-black uppercase tracking-tighter">Thank you for your purchase.</h3>
            <p class="mt-4 text-gray-500 text-sm">
                Order confirmation has been sent to your contact. Invoice: <strong>#{{ $order->invoice_id }}</strong>
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 border-t border-b border-gray-100 py-12 mb-12">
            
            <!-- Order Info -->
            <div class="space-y-8">
                <div>
                    <h4 class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-4">Summary</h4>
                    <ul class="text-sm space-y-3">
                        <li class="flex justify-between border-b border-gray-50 pb-2">
                            <span class="text-gray-400">Invoice ID:</span>
                            <span class="font-bold">#{{ $order->invoice_id }}</span>
                        </li>
                        <li class="flex justify-between border-b border-gray-50 pb-2">
                            <span class="text-gray-400">Date:</span>
                            <span class="font-bold">{{ $order->created_at->format('M d, Y') }}</span>
                        </li>
                        <li class="flex justify-between border-b border-gray-50 pb-2">
                            <span class="text-gray-400">Payment:</span>
                            <span class="font-bold uppercase">{{ $order->payment->payment_status }}</span>
                        </li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-4">Shipping To</h4>
                    <div class="text-sm leading-relaxed">
                        <p class="font-bold uppercase tracking-tight">{{ $order->shipping->name }}</p>
                        <p class="text-gray-500">{{ $order->shipping->address }}</p>
                        <p class="text-gray-500">Phone: {{ $order->shipping->phone }}</p>
                    </div>
                </div>
            </div>

            <!-- Items -->
            <div>
                <h4 class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-5">Selected Items</h4>
                <div class="space-y-6">
                    @foreach($order->orderDetails as $item)
                    <div class="flex items-center space-x-4">
                        <div class="bg-gray-50 border border-gray-100">
                            <img src="{{ asset($item->product->image->image ?? 'default.jpg') }}" class="w-12 h-16 object-cover grayscale">
                        </div>
                        <div class="flex-1">
                            <h5 class="text-xs font-bold uppercase">{{ $item->product_name }}</h5>
                            <p class="text-[10px] text-gray-400">Qty: {{ $item->qty }}</p>
                        </div>
                        <p class="text-xs font-bold">৳{{ number_format($item->sale_price * $item->qty) }}</p>
                    </div>
                    @endforeach

                    <!-- Final Totals -->
                    <div class="border-t border-gray-100 pt-6 space-y-3">
                        <div class="flex justify-between text-[11px] uppercase tracking-wider">
                            <span class="text-gray-400">Subtotal</span>
                            <span>৳{{ number_format($order->amount - $order->shipping_charge) }}</span>
                        </div>
                        <div class="flex justify-between text-[11px] uppercase tracking-wider">
                            <span class="text-gray-400">Shipping</span>
                            <span>৳{{ number_format($order->shipping_charge) }}</span>
                        </div>
                        <div class="flex justify-between text-base font-black uppercase tracking-widest pt-4 border-t border-gray-50">
                            <span>Total Paid</span>
                            <span class="text-xl">৳{{ number_format($order->amount) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 justify-center mt-12">
            <a href="{{ url('/') }}" class="bg-black text-white px-10 py-5 text-[11px] font-bold uppercase tracking-[0.2em] text-center hover:bg-zinc-800 transition-all sharp-edge">
                Continue Shopping
            </a>
        </div>

    </main>
@endsection