@php
    /*
    |--------------------------------------------------------------------------
    | Order Status
    |--------------------------------------------------------------------------
    */

    $status = $order->status instanceof \BackedEnum
        ? $order->status->value
        : (string) $order->status;


    /*
    |--------------------------------------------------------------------------
    | Order Metadata
    |--------------------------------------------------------------------------
    */

    $orderMetadata = is_array($order->metadata)
        ? $order->metadata
        : [];


    /*
    |--------------------------------------------------------------------------
    | Free Shipping
    |--------------------------------------------------------------------------
    */

    $freeShipping = filter_var(
        data_get(
            $orderMetadata,
            'landing_page_free_shipping',
            data_get(
                $orderMetadata,
                'free_shipping',
                false
            )
        ),
        FILTER_VALIDATE_BOOLEAN
    );


    /*
    |--------------------------------------------------------------------------
    | Order Items
    |--------------------------------------------------------------------------
    */

    $orderItems = collect(
        $order->items ?? []
    );


    /*
    |--------------------------------------------------------------------------
    | Calculate Reliable Totals
    |--------------------------------------------------------------------------
    |
    | DB total_amount কোনো কারণে 0 হলে items থেকে fallback calculate করবে।
    |
    */

    $itemsSubtotal = (float) $orderItems->sum(
        fn ($item) => (float) ($item->line_total ?? 0)
    );

    $storedSubtotal = (float) ($order->subtotal ?? 0);

    $subtotal = $storedSubtotal > 0
        ? $storedSubtotal
        : $itemsSubtotal;

    $discountAmount = max(
        0,
        (float) ($order->discount_amount ?? 0)
    );

    $deliveryCharge = $freeShipping
        ? 0
        : max(
            0,
            (float) ($order->delivery_charge ?? 0)
        );

    $extraCharge = max(
        0,
        (float) ($order->extra_charge ?? 0)
    );

    $storedGrandTotal = (float) ($order->total_amount ?? 0);

    $calculatedGrandTotal = max(
        0,
        $subtotal
        - $discountAmount
        + $deliveryCharge
        + $extraCharge
    );

    $grandTotal = $storedGrandTotal > 0
        ? $storedGrandTotal
        : $calculatedGrandTotal;


    /*
    |--------------------------------------------------------------------------
    | Landing Page / Product
    |--------------------------------------------------------------------------
    */

    $product = $landingPage->product ?? null;

    $productName = $product?->name
        ?: $orderItems->first()?->product_name
        ?: 'Product';

    $productSlug = $product?->slug
        ?: \Illuminate\Support\Str::slug(
            $productName
        );

    $landingPageUrl = $landingPage->public_url
        ?? route(
            'landing-pages.show',
            [
                'slug' => $landingPage->slug,
            ]
        );


    /*
    |--------------------------------------------------------------------------
    | Company + Marketing Settings
    |--------------------------------------------------------------------------
    |
    | এখানে শুধু browser-side IDs load হবে।
    | Facebook/TikTok access token NEVER frontend-এ পাঠানো হচ্ছে না।
    |
    */

    $company = null;
    $facebookPixel = null;
    $tiktokPixel = null;
    $googleTag = null;
    $facebookVerification = null;
    $liveChatCode = null;
    $thirdPartyCode = null;

    try {
        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'company_settings'
            )
        ) {
            $company = \Illuminate\Support\Facades\DB::table(
                'company_settings'
            )
                ->latest('id')
                ->first();
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'facebook_pixels'
            )
        ) {
            $facebookPixel = \Illuminate\Support\Facades\DB::table(
                'facebook_pixels'
            )
                ->where(
                    'is_browser_active',
                    true
                )
                ->latest('id')
                ->first();
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'tiktok_pixels'
            )
        ) {
            $tiktokPixel = \Illuminate\Support\Facades\DB::table(
                'tiktok_pixels'
            )
                ->where(
                    'is_browser_active',
                    true
                )
                ->latest('id')
                ->first();
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'google_tags'
            )
        ) {
            $googleTag = \Illuminate\Support\Facades\DB::table(
                'google_tags'
            )
                ->latest('id')
                ->first();
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'facebook_domain_verifications'
            )
        ) {
            $facebookVerification = \Illuminate\Support\Facades\DB::table(
                'facebook_domain_verifications'
            )
                ->latest('id')
                ->first();
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'live_chat_integrations'
            )
        ) {
            $liveChatCode = \Illuminate\Support\Facades\DB::table(
                'live_chat_integrations'
            )
                ->latest('id')
                ->value(
                    'script_code'
                );
        }

        if (
            \Illuminate\Support\Facades\Schema::hasTable(
                'third_party_integrations'
            )
        ) {
            $thirdPartyCode = \Illuminate\Support\Facades\DB::table(
                'third_party_integrations'
            )
                ->latest('id')
                ->value(
                    'script_code'
                );
        }
    } catch (\Throwable $exception) {
        /*
        |--------------------------------------------------------------------------
        | Marketing configuration error must NEVER break checkout success page.
        |--------------------------------------------------------------------------
        */

        $company = $company ?? null;
    }


    /*
    |--------------------------------------------------------------------------
    | Marketing IDs
    |--------------------------------------------------------------------------
    */

    $facebookPixelId = trim(
        (string) (
            $facebookPixel->dataset_id
            ?? ''
        )
    );

    $tiktokPixelId = trim(
        (string) (
            $tiktokPixel->pixel_id
            ?? ''
        )
    );

    $googleTagId = trim(
        (string) (
            $googleTag->tag_id
            ?? $googleTag->measurement_id
            ?? ''
        )
    );


    /*
    |--------------------------------------------------------------------------
    | Facebook Domain Verification
    |--------------------------------------------------------------------------
    |
    | meta_code field-এ full <meta> tag অথবা শুধু verification value —
    | দুইটাই support করবে।
    |
    */

    $facebookVerificationContent = '';

    $rawVerification = trim(
        (string) (
            $facebookVerification->meta_code
            ?? ''
        )
    );

    if ($rawVerification !== '') {
        if (
            preg_match(
                '/content=["\']([^"\']+)["\']/i',
                $rawVerification,
                $verificationMatch
            )
        ) {
            $facebookVerificationContent = trim(
                (string) (
                    $verificationMatch[1]
                    ?? ''
                )
            );
        } else {
            $facebookVerificationContent = strip_tags(
                $rawVerification
            );
        }
    }


    /*
    |--------------------------------------------------------------------------
    | Marketing Items
    |--------------------------------------------------------------------------
    */

    $marketingItems = $orderItems
        ->map(
            function ($item) {
                return [
                    'item_id' => (string) (
                        $item->product_id
                        ?? $item->sku
                        ?? $item->product_name
                    ),

                    'item_name' => (string) (
                        $item->product_name
                        ?? 'Product'
                    ),

                    'item_variant' => $item->variant_name
                        ?: null,

                    'price' => (float) (
                        $item->unit_price
                        ?? 0
                    ),

                    'quantity' => (int) (
                        $item->quantity
                        ?? 1
                    ),
                ];
            }
        )
        ->values()
        ->all();


    /*
    |--------------------------------------------------------------------------
    | Product IDs for Meta / TikTok
    |--------------------------------------------------------------------------
    */

    $contentIds = $orderItems
        ->map(
            fn ($item) => (string) (
                $item->product_id
                ?? $item->sku
                ?? ''
            )
        )
        ->filter()
        ->values()
        ->all();


    /*
    |--------------------------------------------------------------------------
    | Purchase Event ID
    |--------------------------------------------------------------------------
    |
    | SAME event ID server-side CAPI event-এ ব্যবহার করবেন।
    |
    */

    $purchaseEventId =
        'purchase_'
        .
        (string) $order->order_number;


    /*
    |--------------------------------------------------------------------------
    | Page Bootstrap
    |--------------------------------------------------------------------------
    */

    $successPageData = [
        'orderNumber' => (string) $order->order_number,

        'eventId' => $purchaseEventId,

        'currency' => (string) (
            $order->currency
            ?: 'BDT'
        ),

        'value' => $grandTotal,

        'subtotal' => $subtotal,

        'deliveryCharge' => $deliveryCharge,

        'discountAmount' => $discountAmount,

        'extraCharge' => $extraCharge,

        'productName' => $productName,

        'productSlug' => $productSlug,

        'contentIds' => $contentIds,

        'items' => $marketingItems,
    ];
@endphp

<!doctype html>
<html lang="bn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- ================================================================
        PRIVATE SUCCESS PAGE SEO
    ================================================================= --}}
    <title>অর্ডার সফল — {{ $order->order_number }}</title>
    <meta name="robots" content="noindex,nofollow,noarchive,nosnippet">
    <meta name="googlebot" content="noindex,nofollow,noarchive,nosnippet">
    <meta name="description" content="আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে।">
    <meta property="og:title" content="অর্ডার সফল — {{ $productName }}">
    <meta property="og:type" content="website">

    @if ($facebookVerificationContent !== '')
        <meta name="facebook-domain-verification" content="{{ $facebookVerificationContent }}">
    @endif

    {{-- ================================================================
        Fonts & Icons
    ================================================================= --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    {{-- ================================================================
        Facebook Pixel
    ================================================================= --}}
    @if ($facebookPixelId !== '')
        <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', @json($facebookPixelId));
            fbq('track', 'PageView');
        </script>
        <noscript>
            <img height="1" width="1" style="display:none"
                 src="https://www.facebook.com/tr?id={{ urlencode($facebookPixelId) }}&ev=PageView&noscript=1"/>
        </noscript>
    @endif

    {{-- ================================================================
        TikTok Pixel
    ================================================================= --}}
    @if ($tiktokPixelId !== '')
        <script>
            !function (w, d, t) {
                w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"];ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){var e=ttq._i[t]||[];for(var n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e};ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
                ttq.load(@json($tiktokPixelId));
                ttq.page();
            }(window, document, 'ttq');
        </script>
    @endif

    {{-- ================================================================
        Google Tag / GA4
    ================================================================= --}}
    @if ($googleTagId !== '')
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ urlencode($googleTagId) }}"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', @json($googleTagId));
        </script>
    @endif

    <style>
        /*
        |--------------------------------------------------------------------------
        | Base CSS Design Setup (Based on Image Reference)
        |--------------------------------------------------------------------------
        */
        :root {
            --primary-orange: #fd7b2e;
            --primary-light: #fff2eb;
            --bg-body: #fdf5f0;
            --text-dark: #1e293b;
            --text-gray: #64748b;
            --card-bg: #f8fafc;
            --border-light: #e2e8f0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Hind Siliguri', sans-serif;
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        /*
        |--------------------------------------------------------------------------
        | Main Container
        |--------------------------------------------------------------------------
        */
        .success-card {
            background: #ffffff;
            width: 100%;
            max-width: 650px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
            padding: 40px;
            border-top: 6px solid var(--primary-orange);
            text-align: center;
            position: relative;
        }

        /* Header / Success Icon */
        .icon-container {
            margin-bottom: 20px;
        }
        
        .success-circle {
            width: 70px;
            height: 70px;
            background-color: var(--primary-orange);
            color: #ffffff;
            font-size: 35px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(253, 123, 46, 0.3);
        }

        .status-badge {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary-orange);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .success-title {
            font-size: 32px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 12px;
        }

        .success-subtitle {
            font-size: 16px;
            color: var(--text-gray);
            line-height: 1.6;
            margin-bottom: 35px;
            padding: 0 20px;
        }

        /*
        |--------------------------------------------------------------------------
        | Order Info Grid
        |--------------------------------------------------------------------------
        */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 35px;
            text-align: left;
        }

        .info-box {
            background-color: var(--card-bg);
            border: 1px solid var(--card-bg);
            border-radius: 16px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: 0.3s;
        }

        .info-box.active-box {
            background-color: #fffaf6;
            border-color: #ffd8bf;
        }

        /* Box Icons */
        .box-icon {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .icon-orange-light { background: #ffedd5; color: var(--primary-orange); }
        .icon-orange-solid { background: var(--primary-orange); color: #ffffff; }
        .icon-green-light { background: #dcfce7; color: #16a34a; }
        .icon-blue-light { background: #e0f2fe; color: #0284c7; }

        /* Box Text */
        .box-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .box-text span {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .box-text strong {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            word-break: break-all;
        }

        .box-text strong.text-large {
            font-size: 22px;
            color: var(--primary-orange);
        }

        /*
        |--------------------------------------------------------------------------
        | Action Buttons
        |--------------------------------------------------------------------------
        */
        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 15px 20px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .btn-primary {
            background-color: var(--primary-orange);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(253, 123, 46, 0.25);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(253, 123, 46, 0.35);
        }

        .btn-outline {
            background-color: #ffffff;
            color: var(--text-dark);
            border-color: var(--border-light);
        }

        .btn-outline:hover {
            background-color: #f1f5f9;
        }

        /*
        |--------------------------------------------------------------------------
        | Mobile Responsive
        |--------------------------------------------------------------------------
        */
        @media (max-width: 650px) {
            .success-card {
                padding: 30px 20px;
            }
            .info-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .action-buttons {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .success-title {
                font-size: 26px;
            }
            .success-subtitle {
                font-size: 15px;
                padding: 0;
            }
        }
    </style>
</head>

<body>

    <div class="success-card">
        
        <!-- Header -->
        <div class="icon-container">
            <div class="success-circle">
                <i class="fa-solid fa-check"></i>
            </div>
        </div>
        
        <div class="status-badge">Order Confirmed</div>
        
        <h1 class="success-title">আপনার অর্ডার সফল হয়েছে!</h1>
        <p class="success-subtitle">ধন্যবাদ। আপনার অর্ডারটি সফলভাবে গ্রহণ করা হয়েছে। আমরা খুব শীঘ্রই আপনার সঙ্গে যোগাযোগ করব।</p>

        <!-- Order Info Grid -->
        <div class="info-grid">
            
            <!-- Box 1: Order Number -->
            <div class="info-box">
                <div class="box-icon icon-orange-light">
                    <i class="fa-regular fa-file-lines"></i>
                </div>
                <div class="box-text">
                    <span>Order Number</span>
                    <strong>{{ $order->order_number }}</strong>
                </div>
            </div>

            <!-- Box 2: Total Amount (Highlighted) -->
            <div class="info-box active-box">
                <div class="box-icon icon-orange-solid">
                    <i class="fa-solid fa-bangladeshi-taka-sign"></i>
                </div>
                <div class="box-text">
                    <span>Total Amount</span>
                    <strong class="text-large">৳{{ number_format($grandTotal, 0) }}</strong>
                </div>
            </div>

            <!-- Box 3: Order Status -->
            <div class="info-box">
                <div class="box-icon icon-green-light">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div class="box-text">
                    <span>Order Status</span>
                    <strong>{{ \Illuminate\Support\Str::headline($status) }}</strong>
                </div>
            </div>

            <!-- Box 4: Payment Method -->
            <div class="info-box">
                <div class="box-icon icon-blue-light">
                    <i class="fa-solid fa-bag-shopping" style="font-size: 18px;"></i>
                </div>
                <div class="box-text">
                    <span>Payment</span>
                    <strong>Cash On Delivery</strong>
                </div>
            </div>

        </div>

        <!-- Action Buttons -->
        <div class="action-buttons">
            <a href="{{ $landingPageUrl }}" class="btn btn-primary">
                <i class="fa-solid fa-bag-shopping"></i> আরও পণ্য দেখুন
            </a>
            <a href="{{ url('/') }}" class="btn btn-outline">
                <i class="fa-solid fa-house"></i> হোম পেজ
            </a>
        </div>

    </div>

    {{-- ================================================================
        JS Purchase Payload
    ================================================================ --}}
    <script>
        window.LANDING_PURCHASE_DATA = {{ \Illuminate\Support\Js::from($successPageData) }};
    </script>

    {{-- ================================================================
        Purchase Marketing Events (Facebook, TikTok, GA4)
    ================================================================ --}}
    <script>
    (function () {
        "use strict";

        var data = window.LANDING_PURCHASE_DATA || {};

        /* Browser Refresh Duplicate Guard */
        var storageKey = "landing_purchase_sent:" + String(data.orderNumber || "");
        var alreadySent = false;
        try {
            alreadySent = sessionStorage.getItem(storageKey) === "1";
        } catch (error) {
            alreadySent = false;
        }

        if (alreadySent) {
            return;
        }

        /* Meta Purchase */
        try {
            if (typeof window.fbq === "function") {
                window.fbq("track", "Purchase", {
                    content_ids: Array.isArray(data.contentIds) ? data.contentIds : [],
                    content_type: "product",
                    content_name: data.productName,
                    value: Number(data.value || 0),
                    currency: data.currency || "BDT",
                    num_items: Array.isArray(data.items) ? data.items.reduce(function (total, item) {
                        return total + Number(item.quantity || 0);
                    }, 0) : 0,
                }, { eventID: data.eventId });
            }
        } catch (error) {
            console.warn("Meta Purchase event failed:", error);
        }

        /* TikTok CompletePayment */
        try {
            if (window.ttq && typeof window.ttq.track === "function") {
                window.ttq.track("CompletePayment", {
                    content_ids: Array.isArray(data.contentIds) ? data.contentIds : [],
                    content_type: "product",
                    content_name: data.productName,
                    value: Number(data.value || 0),
                    currency: data.currency || "BDT",
                    quantity: Array.isArray(data.items) ? data.items.reduce(function (total, item) {
                        return total + Number(item.quantity || 0);
                    }, 0) : 0,
                });
            }
        } catch (error) {
            console.warn("TikTok CompletePayment failed:", error);
        }

        /* Google / GA4 Purchase */
        try {
            if (typeof window.gtag === "function") {
                window.gtag("event", "purchase", {
                    transaction_id: String(data.orderNumber || ""),
                    value: Number(data.value || 0),
                    tax: 0,
                    shipping: Number(data.deliveryCharge || 0),
                    currency: data.currency || "BDT",
                    items: Array.isArray(data.items) ? data.items : [],
                });
            }
        } catch (error) {
            console.warn("Google purchase event failed:", error);
        }

        /* dataLayer / GTM Compatible Purchase */
        try {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                event: "purchase",
                ecommerce: {
                    transaction_id: String(data.orderNumber || ""),
                    value: Number(data.value || 0),
                    tax: 0,
                    shipping: Number(data.deliveryCharge || 0),
                    currency: data.currency || "BDT",
                    items: Array.isArray(data.items) ? data.items : [],
                },
            });
        } catch (error) {
            console.warn("dataLayer purchase failed:", error);
        }

        /* Mark Sent */
        try {
            sessionStorage.setItem(storageKey, "1");
        } catch (error) {
            //
        }
    })();
    </script>

    {{-- ================================================================
        Trusted Admin Live Chat Integration
    ================================================================ --}}
    @if (filled($liveChatCode))
        {!! $liveChatCode !!}
    @endif

    {{-- ================================================================
        Trusted Admin Third Party Integration
    ================================================================ --}}
    @if (filled($thirdPartyCode))
        {!! $thirdPartyCode !!}
    @endif

</body>
</html>