@extends('frontend.app')
@section('content')
    <style>
        html {
            font-size: 10px;
        }

        body {
            background: #f4f6fb;
            font-family: 'Hind Siliguri', sans-serif;
        }

        /* Card */
        .success-card {
            background: #ffffff;
            border-radius: 22px;
            box-shadow: 0 20px 50px rgba(2, 6, 23, .12);
            padding: 48px 40px;
        }

        /* Icon */
        .success-icon {
            width: 96px;
            height: 96px;

            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            box-shadow: 0 10px 25px oklch(0.62 0.18 355);
        }

        .success-icon svg {
            width: 46px;
            height: 46px;
            color: #fff;
        }

        /* Text */
        .success-title {
            font-size: 3.2rem;
            font-weight: 800;
            color: #0f172a;
        }

        .success-subtitle {
            font-size: 2rem;
            color: #334155;
            margin-top: 8px;
        }

        .success-desc {
            font-size: 1.7rem;
            color: #475569;
            max-width: 560px;
            margin: 18px auto 20px;
            line-height: 1.7;
        }

        /* Call highlight */
        .call-alert {
            background: #fff7ed;
            border: 1px dashed oklch(0.62 0.18 355);
            border-radius: 14px;
            padding: 14px;
            font-size: 1.5rem;
            color: #9a3412;
            margin-bottom: 25px;
        }

        /* Order Info */
        .order-box {
            background: #f8fafc;
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 25px;
        }

        .order-label {
            font-size: 1.4rem;
            color: #64748b;
        }

        .order-number {
            font-size: 2.4rem;
            font-weight: 700;
            color: #2563eb;
        }

        /* Buttons */
        .action-btn {
            padding: 14px 34px;
            border-radius: 999px;
            font-size: 1.7rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: .2s ease;
            text-decoration: none;
        }

        .btn-home {

            box-shadow: 0 10px 25px oklch(0.62 0.18 355);
        }

        .btn-home:hover {
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-invoice {
            border: 2px solid oklch(0.62 0.18 355);
            color: oklch(0.62 0.18 355);
        }

        .btn-invoice:hover {
            background: linear-gradient(135deg, oklch(0.62 0.18 355) 0%, oklch(0.55 0.17 10) 50%, oklch(0.78 0.13 82) 100%);
            color: #fff;
        }

        /* Trust Footer */
        .trust-footer {
            margin-top: 34px;
            font-size: 1.4rem;
            color: #475569;
        }

        .trust-footer span {
            font-weight: 600;
            color: #0f172a;
        }

        @media(max-width:768px) {
            .success-card {
                padding: 36px 22px;
            }

            .success-title {
                font-size: 2.6rem;
            }
        }
    </style>

    <main class="main-wrapper">
        <section class="py-5" style="margin-top:60px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">

                        <div class="success-card text-center">

                            <!-- Icon -->
                            <div class="success-icon hero-bg">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM7 11.414l4.707-4.707-1.414-1.414L7 8.586 5.707 7.293 4.293 8.707 7 11.414z" />
                                </svg>
                            </div>

                            <!-- Text -->
                            <h1 class="success-title">ধন্যবাদ!</h1>
                            <div class="success-subtitle">আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে</div>

                            <p class="success-desc">
                                আমাদের প্রতিনিধি খুব শীঘ্রই আপনার সাথে ফোনে যোগাযোগ করবে অর্ডারটি নিশ্চিত করার জন্য।
                            </p>

                            <div class="call-alert">
                                📞 অনুগ্রহ করে অর্ডার নিশ্চিত করতে আমাদের কলটি রিসিভ করুন।
                            </div>

                            <!-- Order Info -->
                            <div class="order-box">
                                <div class="order-label">আপনার অর্ডার নম্বর</div>
                                <div class="order-number text-primary">
                                    <a href="{{ route('front.orders.show', [$order->id]) }}" target="_blank"
                                        class="text-decoration-none">
                                        #{{ $order->id }}
                                    </a>
                                </div>
                                <div style="font-size:1.4rem; color:#64748b; margin-top:6px;">
                                    ড্যাশবোর্ড থেকে অর্ডারের স্ট্যাটাস দেখতে পারবেন
                                </div>
                            </div>

                            <!-- Dashboard Section -->
                            <div class="order-box" style="background:#fff7ed; border:1px dashed #f59f0a;">
                                <div class="order-label">📦 অর্ডার ট্র্যাক করুন</div>
                                <div style="font-size:1.6rem; color:#334155; margin-top:6px; line-height:1.6;">
                                    আপনি আপনার ড্যাশবোর্ডে লগইন করে যেকোনো সময় অর্ডারের বর্তমান অবস্থা, ডেলিভারি স্ট্যাটাস
                                    এবং ইনভয়েস দেখতে পারবেন।
                                </div>

                                <div style="margin-top:16px;">
                                    <a href="{{ route('front.dashboard.index') }}" class="action-btn btn-home hero-bg"
                                        style="padding:10px 26px; font-size:1.5rem;">
                                        👤 আমার ড্যাশবোর্ডে যান
                                    </a>
                                </div>
                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-center flex-wrap gap-3">
                                <a href="{{ route('front.home') }}" class="action-btn btn-home hero-bg">
                                    🏠 হোমে ফিরে যান
                                </a>
                                <a href="{{ route('front.orders.show', [$order->id]) }}" target="_blank"
                                    class="action-btn btn-invoice">
                                    🧾 ইনভয়েস দেখুন / প্রিন্ট
                                </a>
                            </div>

                            <!-- Trust -->
                            <div class="trust-footer">
                                🔒 <span>নিরাপদ অর্ডার:</span> আপনার তথ্য সম্পূর্ণ গোপন রাখা হয়
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </section>
    </main>

    
<script>
    setTimeout(customerPercentageCheck, 500);

    function customerPercentageCheck() {
        const customerPhone = @json($number);
        const customer_id = @json($order->user_id);
        if (!customerPhone) return;

        $.ajax({
            url: "{{ route('courierPercentage') }}",
            type: "GET",
            data: {
                phone: customerPhone,
                id: customer_id
            },
            success: function(res) {
                console.log('Customer percentage:', res);
            }
        });
    }

    function generateDataLayer(transaction_id) {
        var items = [];
        @foreach ($order->details as $detail)
            items.push({
                item_id: "{{ $detail->product_id }}",
                item_name: "{{ $detail->product->name }}",
                price: {{ $detail->unit_price }},
                quantity: {{ $detail->quantity }}
            });
        @endforeach

        let total = {{ $order->final_amount }};
        let ship_charge = {{ $order->shipping_charge }};

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'order_placed',
            ecommerce: {
                currency: "BDT",
                value: total,
                shipping: ship_charge,
                transaction_id: transaction_id,
                items: items
            }
        });

      if (typeof fbq === 'function') {
    fbq('track', 'OrderPlaced', {
        value: total,
        currency: 'BDT',
        contents: items,
        content_type: 'product'
    });
}
    } 
    setTimeout(() => {
        generateDataLayer("{{ $order->id }}");
    }, 500);
</script>
@endsection