@extends('frontEnd.layouts.master')
@section('title','Order Success')
@section('content')
<style>
    .progressbar-track {
        position: relative;
        padding-bottom: 40px;
    }
    .progressbar-track .progressbar {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0rem;
}
.green {
    color: #007965 !important;
}
.progressbar-track .progressbar li {
    font-size: 1.5rem;
    border: 1px solid #333;
    /* padding: 10px 10px; */
    border-radius: 50%;
    background-color: #dddddd;
    z-index: 100;
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progressbar-track .progressbar li.green {
    border: 1px solid #007965;
    background-color: #d5e6e2;
}
.progressbar-track .progressbar li::after {
    position: absolute;
    font-size: 0.9rem;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
}
#step-1::after {
    content: 'Placed';
}
#step-2::after {
    content: 'Accepted';
}
#step-3::after {
    content: 'Packed';
}
#step-4::after {
    content: 'Shipped';
}
#step-5::after {
    content: 'Delivered';
}
#tracker {
    position: absolute;
    border-top: 1px solid #bbb;
    width: 100%;
    top: 25px;
}
.text-info{
    color: #17a2b8 !important;
}
.font-weight-bold{
    font-weight: 700;
}
h3{
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}
</style>
<section class="customer-section" data-order-status="{{$order->order_status}}">

    <div class="container bg-white">
        <div class="row ">
            <div class="col-md-12 text-center p-4">
            <!-- <span class="pb-2 display-5 text-info font-weight-bold"> -->
                {!! $settings['success_page_text'] !!}
                <!-- আপনার অর্ডারটি সফলভাবে সম্পন্ন হয়েছে। <br> <h3 class="text-danger">আমাদের কল সেন্টার থেকে ফোন করে আপনার অর্ডারটি কনফার্ম করা হবে</h3> -->
            <!-- </span> -->
    
                <lord-icon src="https://cdn.lordicon.com/xxdqfhbi.json" trigger="loop" style="width:100px;height:100px;display: inline-block;" class="text-center">
                </lord-icon>

                <h3 class="py-3">অর্ডার নম্বর : {{$order->invoice_id}}<br>
                </h3><h3 class="pb-4 text-danger">অর্ডারের মোট মূল্য <span>  {{$order->amount}}</span> BDT</h3>
                
                <div class="row">
                    <div class="col-12 col-lg-8 offset-lg-2">
                        <div class="progressbar-track">
                            <ul class="progressbar">
                                <li id="step-1" class="text-muted ">
                                    <span class="fas fa-gift"></span>
                                </li>
                                <li id="step-2" class="text-muted">
                                    <span class="fas fa-check"></span>
                                </li>
                                <li id="step-3" class="text-muted">
                                    <span class="fas fa-box"></span>
                                </li>
                                <li id="step-4" class="text-muted">
                                    <span class="fas fa-truck"></span>
                                </li>
                                <li id="step-5" class="text-muted">
                                    <span class="fas fa-box-open"></span>
                                </li>
                            </ul>
                            <div id="tracker"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-8">
                <div class="success-img">
                    <img src="{{asset('public/frontEnd/images/order-success.png')}}" alt="">
                </div>
                <div class="success-title">
                    <h2>আপনার অর্ডারটি আমাদের কাছে সফলভাবে পৌঁছেছে, কিছুক্ষনের মধ্যে আমাদের একজন প্রতিনিধি আপনার নাম্বারে কল করবেন </h2>
                </div>

                <h5 class="my-3">Your Order Details</h5>
                <div class="success-table">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td>
                                    <p>Invoice ID</p>
                                    <p><strong>{{$order->invoice_id}}</strong></p>
                                </td>
                                <td>
                                    <p>Date</p>
                                    <p><strong>{{$order->created_at->format('d-m-y')}}</strong></p>
                                </td>
                                <td>
                                    <p>Phone</p>
                                    <p><strong>{{$order->shipping?$order->shipping->phone:''}}</strong></p>
                                </td>
                                <td>
                                    <p>Total</p>
                                    <p><strong>৳ {{$order->amount}}</strong></p>
                                </td>
                            </tr>
                            <tr>
                                @php 
                                    $payments = App\Models\Payment::where('order_id',$order->id)->first();
                                @endphp
                                <td colspan="4">
                                    <p>Payment Method</p>
                                    <p><strong>{{$payments->payment_method}}</strong></p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
               
                <h5 class="my-4">Pay with cash upon delivery</h5>
                <div class="success-table">
                    <h6 class="mb-3">Order Delivery</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->orderdetails as $key=>$value)
                            <tr>
                                <td>
                                    <p>{{$value->product_name}} x {{$value->qty}}</p>
                                    
                                </td>
                                <td><p><strong>৳ {{$value->sale_price}}</strong></p></td>
                            </tr>
                            @endforeach
                            <tr>
                                <th  class="text-end px-4">Net Total</th>
                                <td><strong id="net_total">৳{{$order->amount-$order->shipping_charge}}</strong></td>
                            </tr>
                            <tr>
                                <th  class="text-end px-4">Shipping Cost</th>
                                <td>
                                    <strong id="cart_shipping_cost">৳{{$order->shipping_charge}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <th  class="text-end px-4">Grand Total</th>
                                <td>
                                    <strong id="grand_total">৳{{$order->amount}}</strong>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td>
                                    <h5 class="my-4">Billing Address</h5>
                                    <p>{{$order->shipping?$order->shipping->name:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->phone:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->address:''}}</p>
                                    <p>{{$order->shipping?$order->shipping->area:''}}</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
               
                <a href="{{route('home')}}" class=" my-5 btn btn-primary">Go To Home</a>
            </div>
        </div>
    </div> -->
</section>
@endsection
@push('script')
<script src="{{asset('public/frontEnd/')}}/js/parsley.min.js"></script>
<script src="{{asset('public/frontEnd/')}}/js/form-validation.init.js"></script>
<script src="https://cdn.lordicon.com/lordicon.js"></script>

@endpush

@push('script')
<script>
window.dataLayer = window.dataLayer || [];
const statusToStep = {
        1: 1,  // Pending
        2: 2,  // Processing
        3: 3,  // On The Way
        5: 4,  // In Courier (ID 5 in your table)
        6: 3,  // Completed
        8: 5   // Delivered (ID 8)
    };
    
    const currentStatusId = parseInt($('.customer-section').data('order-status'));
    // console.log(currentStatusId);
    
    const currentStep = statusToStep[currentStatusId] || 1;
// console.log(currentStep);

    for (let i = 1; i <= currentStep; i++) {
        $(`#step-${i}`).addClass('green');
    }
// Directly push all data to the dataLayer
window.dataLayer.push({
    'event': 'purchaseComplete',
    'pageCategory': 'purchase',
    'userName': '{{ $order->shipping ? $order->shipping->name : 'Guest' }}',
    'phone': '{{ $order->shipping ? $order->shipping->phone : 'N/A' }}',
    'address': '{{ $order->shipping ? $order->shipping->address : 'N/A' }}',
    'orderId': '{{ $order->id }}',
    'price': '{{ $order->amount }}',
    'currency': 'BDT',
    'timestamp': new Date().toISOString(),
    
    // Concatenate all items' data as comma-separated values
    'item_id': [
        @foreach($order->orderdetails as $item)
            "{{ $item->id }}"{!! !$loop->last ? ',' : '' !!}
        @endforeach
    ].join(','),
    
    'item_name': [
        @foreach($order->orderdetails as $item)
            "{{ $item->product_name }}"{!! !$loop->last ? ',' : '' !!}
        @endforeach
    ].join(','),
    
    'item_price': [
        @foreach($order->orderdetails as $item)
            "{{ $item->sale_price }}"{!! !$loop->last ? ',' : '' !!}
        @endforeach
    ].join(','),
    
    'item_category': [
        @foreach($order->orderdetails as $item)
            "{{ $item->category->name ?? 'N/A' }}"{!! !$loop->last ? ',' : '' !!}
        @endforeach
    ].join(',')
});



</script>
@if (session('purchese_event_id'))
    <script>
         function getFbp() {
            return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
        }
        @if($settings['fb_pageview_event'] == 1)
         fbq('track', 'PageView',{}, {
            event_id: "{{ session('purchase_event_id') }}-1",
            fbp: getFbp(),
            pageType: 'Purchase',
            pageName: document.title,
            url: window.location.href,
            path: window.location.pathname,
            referrer: document.referrer || 'direct',
        });
        @endif
        @if($settings['fb_purchase_event'] == 1)
        fbq('track', 'Purchase',{
            currency: 'BDT',
            value: "{{ $order->amount }}",
            content_type: 'product'
        }, {
            eventID: "{{ session('purchase_event_id') }}",
            fbp: getFbp(),
        });
        @endif
        setTimeout(function() {
            @if($settings['fb_purchase_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}',
                    fbp: getFbp(),
                    event_name: "Purchase",
                    page_title: document.title,
                    page_url: window.location.href,
                    custom_data: {
                        content_type: 'product',
                        value: "{{ $order->amount }}",
                        currency: 'BDT'
                    }
                    
                });
            @endif

            @if($settings['fb_pageview_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}-1',
                    fbp: getFbp(),
                    event_name: "PageView",
                    page_title: document.title,
                    page_url: window.location.href,
                });
            @endif
            
        }, 4000);
    </script>
@else
<script>
     function getFbp() {
        return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
    }
    @if($settings['fb_pageview_event'] == 1)
    fbq('track', 'PageView',{}, {
        event_id: "{{ $eventID }}-1",
        fbp: getFbp(),
        pageType: 'Purchase',
        pageName: document.title,
        url: window.location.href,
        path: window.location.pathname,
        referrer: document.referrer || 'direct',
    });
    @endif
    setTimeout(function() {
        @if($settings['fb_pageview_event'] == 1)
            sendEventData({
                event_id: '{{ $eventID }}-1',
                fbp: getFbp(),
                event_name: "PageView",
                page_title: document.title,
                page_url: window.location.href,
            });
        @endif
            
        }, 4000);
</script>
@endif

@endpush