@extends('frontend.partials.master')
@section('content')

<style>
    .thanks_section {
        margin-top: 0px !important;
        gap: 1rem !important;
    }
    .gradient-custom {
        padding-top: 15px;
        padding-bottom: 15px;
    }
</style>
@if(session('sell_id'))
    <div class="container-xl" style="min-height: 800px">
   <section class="h-100 gradient-custom">
        <div class="container py-5" style="clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    background: #003315;">
          <div class="d-flex my-5 justify-content-center flex-wrap flex-column align-items-center gap-5 thanks_section">
            <img src="{{ asset('images/check-mark-1292787_1280.webp')}}" width="70" alt="">
            <h2 class="bold" style="color: #fff;">অভিনন্দন !!!</h2>
            <h2 class="pop bold text-center" style="color: #fff;"> আপনার অর্ডারটি সফলভাবে গৃইীত হয়েছে।</h2>
            <div style="text-align: center; color: red;">
                @if(isset($response))
                   {{ $response }}
                @endif
            </div>
            <h5 class="text-center" style="color: #fff;">কিছুক্ষনের মাঝে আপনাকে মেসেজ অথবা কল করা হবে।</h5>
            <a href="{{ route('home')}}" class="btn btn-warning bold">Shop More</a>
            <a href="{{ route('genInvoice', $order->id) }}" class="btn btn-dark d-none orange-bg bold">Print Invoice</a>
          </div>
        </div>
    </section>
</div>
@endif
@endsection

@push("js")
@if (!session('sell_id'))
    <script>
        window.location.href = "{{ route('home') }}";
    </script>
@endif
<script>

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

        let total = {{ $order->grand_total }};
        let ship_charge = {{ $order->shipping_cost }};
        let first_name = "{{ $order->customer ? $order->customer->name : '' }}";
        let mobile = "{{ $order->customer ? $order->customer->phone_number : '' }}";
        let shipping_address = "{{ $order->customer ? $order->customer->address : '' }}";

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'purchase',
            ecommerce: {
                currency: "BDT",
                value: total,
                shipping: ship_charge,
                transaction_id: transaction_id,
                items: items
            },
            customer: {
                first_name: first_name,
                phone: mobile,
                shipping_address: shipping_address
            }
        });

        //Facebook Piexel Purches
        if (typeof fbq === 'function') {
            fbq('track', 'Purchase', {
                value: total,
                currency: 'BDT',
                contents: items.map(i => ({
                    id: i.item_id,
                    quantity: i.quantity,
                    item_price: i.price
                })),
                content_type: 'product',
                content_ids: items.map(i => i.item_id)
            }, {
                eventID: transaction_id
            });
        }
    }

    // Call the function after the order is confirmed
    generateDataLayer("{{ $order->id }}");
</script>
@endpush