@extends("frontend.layouts.app")
@push('style')
    <style>
    .confirmwrap{
        min-height: 53.8vh;
    }
    </style>
@endpush
@section('content')
<div class="confirmwrap">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Confirm Order</li>
                </ol>
            </nav>
        </div>
        <section>
            <div class="container mt-4">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-5">
                        <div class="confirm p-3 border rounded">
                            <div class="d-flex justify-content-start align-items-center gap-2">
                                <div>
                                    <p class="conorder d-flex justify-content-center align-items-center m-0"><i
                                            class="fa-solid fa-check"></i></p>
                                </div>
                                <div>
                                    <p class="m-0 text-start"><span class="pe-2 fs-5 fw-bold">Thank You !</span></p>
                                    <p class="m-0 p-0">We've received your orde</p>
                                </div>
                            </div>

                        </div>
                        <div class="confirmorder p-3 border rounded mt-4">
                            <h5 class="fw-semibold">Order ID: {{ $orders->first()->id ?? '' }}</h5>
                            <div class="orderdetail mt-4">
                                <h5 class="p-0 m-0">Order Details</h5>
                                <div class="condetails mt-2">
                                    <p class="p-0 m-0"><span class="fw-bold">Name: </span>{{ $orders->first()->name }}</p>
                                    <p class="p-0 m-0"><span class="fw-bold">Phone: </span>{{ $orders->first()->phone }}</p>
                                    <p class="p-0 m-0"><span class="fw-bold">Address: </span>{{ $orders->first()->address }}</p>
                                </div>
                                
                            </div>
                            <div class="delivery-type mt-3">
                                <p class="p-0 m-0"><span class="fw-bold">Delivery type: </span> Inside dhaka</p>
                            </div>
                            <div class="delivery-type mt-3">
                                <p class="p-0 m-0"><span class="fw-bold">Payment: </span>Cash On Delivery (COD)</p>
                            </div>
                        </div>

                    </div>

                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                        <div class="confirm p-3 border rounded">
                            <div class="d-flex justify-content-start align-items-center gap-2 p-3">
                                <p class="conorder d-flex justify-content-center align-items-center m-0"><i
                                        class="fa-solid fa-check"></i></p>
                                <p class="text-start m-0">Items</p>
                            </div>

                            <div class="product p-3">
                                @foreach ($orders->first()->orderDetails as $item)
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div class="d-flex">
                                        <div class="pname ps-2">
                                            <p class="p-0 m-0">{{ $item->product->name }}</p>
                                        </div>
                                    </div>
                                    <div class="pname">
                                        <p>Tk {{ $item->price }}</p>
                                    </div>
                                </div>
                                @endforeach
                                
                            </div>

                            <div class="ptotal">
                                <div class="prototal d-flex justify-content-between align-items-center p-3">
                                    <p class="p-0 m-0 tov">TOTAL <span class="fs-6">(included shipping
                                            charge)</span></p>
                                    <p class="p-0 m-0 total">Tk {{ $orders->first()->total_price }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@endsection
@push('style')
    <style>
        .total{
            width: 100px !important;
        }
    </style>
@endpush

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

        (function () {
            const affiliation = @json(config('app.name', 'SEF Card'));
            const order = @json([
                'id'          => $orders->first()->id ?? '',
                'total_price' => (float) ($orders->first()->total_price ?? 0),
            ]);

            const currency = "BDT";

            let items = [];
            @foreach($orders->first()->orderDetails as $index => $item)
                items.push({
                    item_id: "{{ $item->product->id }}",
                    item_name: "{{ $item->product->name }}",
                    affiliation: affiliation,
                    item_brand: affiliation,
                    item_category: "",
                    index: {{ $index }},
                    price: {{ (float) $item->price }},
                    quantity: {{ (int) $item->quantity }}
                });
            @endforeach

            if (order.id && items.length) {
                window.dataLayer.push({ecommerce: null});
                window.dataLayer.push({
                    event: "purchase",
                    ecommerce: {
                        transaction_id: String(order.id),
                        value: order.total_price,
                        tax: 0,
                        shipping: 0,
                        currency: currency,
                        coupon: "",
                        customer_type: "new",
                        items: items
                    }
                });
            }
        })();
    </script>
@endpush