@extends('layouts.app')
@section('title', 'Thank You!')

@php
$_pixelId = $settings['facebook_pixel_id'] ?? '';
$_eventId = $purchaseEventId ?? '';
$_payload = json_encode([
    'value'        => round((float) $order->total, 2),
    'currency'     => 'BDT',
    'content_type' => 'product',
    'content_ids'  => $order->items->pluck('product_id')->map(fn($id) => (string)(int)$id)->values()->all(),
    'num_items'    => (int) $order->items->sum('quantity'),
    'order_id'     => $order->order_number,
]);
@endphp

@section('head')
@if($_pixelId)
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{{ $_pixelId }}');
fbq('track', 'Purchase', {!! $_payload !!}{{ $_eventId ? ", { eventID: '{$_eventId}' }" : '' }});
</script>
@endif
@endsection

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm text-center p-5">
                <div class="mb-4">
                    <div style="width:90px;height:90px;background:#d4edda;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto">
                        <i class="bi bi-check-lg" style="font-size:48px;color:#28a745"></i>
                    </div>
                </div>
                <h2 class="fw-bold" style="color:var(--dark)">Thank You!</h2>
                <p class="text-muted mt-2">আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে। আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব।</p>

                <div class="card bg-light border-0 mt-4 p-3">
                    <div class="row text-start g-2">
                        <div class="col-sm-6">
                            <small class="text-muted d-block">Order Number</small>
                            <strong style="color:var(--primary)">{{ $order->order_number }}</strong>
                        </div>
                        <div class="col-sm-6">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge bg-warning text-dark">{{ ucfirst($order->status) }}</span>
                        </div>
                        <div class="col-sm-6">
                            <small class="text-muted d-block">Customer</small>
                            <strong>{{ $order->name }}</strong>
                        </div>
                        <div class="col-sm-6">
                            <small class="text-muted d-block">Mobile</small>
                            <strong>{{ $order->mobile }}</strong>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block">Address</small>
                            <strong>{{ $order->address }}</strong>
                        </div>
                        <div class="col-12 mt-2">
                            <small class="text-muted d-block">Total Amount</small>
                            <strong style="font-size:20px;color:var(--primary)">৳{{ number_format($order->total, 0) }}</strong>
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-start">
                    <h6 class="fw-bold mb-3">Ordered Items</h6>
                    @foreach($order->items as $item)
                    <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                        <div>
                            <span>{{ $item->product_name }}</span>
                            @if($item->variation_details)
                            <small class="text-muted d-block">{{ $item->variation_details }}</small>
                            @endif
                        </div>
                        <span>{{ $item->quantity }} × ৳{{ number_format($item->price, 0) }}</span>
                    </div>
                    @endforeach
                </div>

                <div class="alert alert-warning mt-4 text-start" style="font-size:13px">
                    <i class="bi bi-info-circle me-1"></i>
                    অর্ডার ট্র্যাক করতে আপনার <strong>Order Number: {{ $order->order_number }}</strong> এবং মোবাইল নম্বর সংরক্ষণ করুন।
                </div>

                <div class="d-flex gap-3 justify-content-center mt-3 flex-wrap">
                    <a href="{{ route('tracking') }}?order_number={{ $order->order_number }}" class="btn btn-outline-primary px-4">
                        <i class="bi bi-search me-1"></i>Track Order
                    </a>
                    <a href="{{ route('shop') }}" class="btn btn-danger px-4">
                        <i class="bi bi-bag me-1"></i>Continue Shopping
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection