@extends('frontEnd.layouts.master') @section('title', 'Customer Checkout') @push('css')
<link rel="stylesheet" href="{{ asset('public/frontEnd/css/select2.min.css') }}" />
@endpush @section('content')
<section class="chheckout-section">
    @php
        $subtotal = Cart::instance('shopping')->subtotal();
        $subtotal = str_replace(',', '', $subtotal);
        $subtotal = str_replace('.00', '', $subtotal);
        $shipping = Session::get('shipping') ? Session::get('shipping') : 0;
    @endphp
    <div class="container">
        
        <div class="row">
            <div class="col-sm-6 cus-order-2">
                <div class="checkout-shipping">
                    <form action="{{ route('customer.ordersave') }}" method="POST" data-parsley-validate="" id="user-checkout">
                        @csrf
                        <div class="card">
                           <div class="card-header">
                                <h6><span class="text-danger">*</span> অর্ডার করতে আপনার সম্পূর্ণ নাম, মোবাইল নম্বর ও ঠিকানা লিখে <br> <span style="color: var(--primary-color);"> অর্ডার কনফার্ম করুন </span> বাটন এ ক্লিক করুন 
                                <!-- অথবা ফোনে অর্ডার করতে এই নাম্বার <a href="tel:01740015800">01740015800</a> এর উপরে ক্লিক করুন।    -->
                            </h6>
                                
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group mb-1">
                                            <label for="name">আপনার নাম <span class="text-danger">*</span> </label>
                                            <input type="text" id="name" placeholder="আপনার সম্পূর্ণ নাম লিখুন"
                                                class="form-control @error('name') is-invalid @enderror" name="name"
                                                value="{{ old('name') }}"
                                                data-parsley-required-message="আপনার সম্পূর্ণ নাম লিখুন"
                                                required
                                                />
                                            @error('name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>আপনার সম্পূর্ণ নাম লিখুন</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- col-end -->
                                    <div class="col-sm-12">
                                        <div class="form-group mb-1">
                                            <label for="phone">আপনার নাম্বার <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text" style="line-height: 2;">+88</div>
                                                </div>
                                                <input type="text" minlength="11" id="number" maxlength="11"
                                                placeholder="১১ ডিজিটের মোবাইল নম্বার লিখুন"
                                                pattern="^(০[০-৯]{10}|0[0-9]{10})$"
                                                title="please enter number only and 0 must first character"
                                                title="Please enter an 11-digit number." id="phone"
                                                class="form-control @error('phone') is-invalid @enderror" name="phone"
                                                value="{{ old('phone') }}"
                                                data-parsley-required-message="আপনার সঠিক ১১ ডিজিটের মোবাইল নম্বার লিখুন"
                                                data-parsley-minlength="11"
                                                data-parsley-minlength-message="আপনার সঠিক ১১ ডিজিটের মোবাইল নম্বার লিখুন"
                                                data-parsley-errors-container=".parsley-phone-errors"
                                                required/>
                                            </div>
                                            <div class="parsley-phone-errors text-danger mt-1"></div>
                                            
                                            @error('phone')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- col-end -->
                                    <div class="col-sm-12">
                                        <div class="form-group mb-1">
                                            <label for="address">আপনার ঠিকানা <span class="text-danger">*</span></label>
                                            <textarea class="form-control  @error('address') is-invalid @enderror" placeholder="আপনার সম্পূর্ণ ঠিকানা যেমন গ্রাম , থানা , বিভাগ লিখুন " name="address" id="address" rows="2" style="height: 74px;" required data-parsley-required-message="আপনার সম্পূর্ণ ঠিকানা যেমন গ্রাম , থানা , বিভাগ লিখুন">{{ old('address') }}</textarea>
                                            <!-- <input type="address" id="address"
                                                class="form-control @error('address') is-invalid @enderror"
                                                name="address"
                                                value="{{ old('address') }}"
                                                required/> -->
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>




                                    <div class="col-lg-12 mb-1 shipping_charge_div">
                                        @if($shipping != 0)
                                        @foreach ($shippingcharge as $key => $value)
                                            <div class="form-check mb-1">
                                                <input class="form-check-input @error('area') is-invalid @enderror" 
                                                    value="{{ $value->id }}" 
                                                    type="radio" 
                                                    name="area" 
                                                    id="area{{ $value->id }}" 
                                                    {{ $key === 0 ? 'checked' : '' }}
                                                    required>
                                                <label class="form-check-label delivery-checkbox" for="area{{ $value->id }}">
                                                    {{ $value->name }}
                                                </label>
                                            </div>
                                        @endforeach

                                        @error('area')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        @else
                                        <p class="bg-success-subtle" style="
                                            padding: 12px 10px;
                                            border-radius: 4px;
                                            font-size: 16px;
                                            line-height: 24px;
                                            font-weight: 700;
                                        ">ফ্রি ডেলিভারি</p>
                                        @endif
                                    </div>
                                    <!-- col-end -->

                                    <!-------------------->
                                    <!-- col-end -->
                                    <div class="col-sm-12 d-none">

                                        <div class="radio_payment">
                                            <label id="payment_method">পেমেন্ট মেথড</label>
                                            <div class="payment_option">
                                                
                                            </div>
                                        </div>
                                        <div class="payment-methods">
                                            
                                            <div class="form-check p_cash">
                                                <input class="form-check-input" type="radio" name="payment_method"
                                                id="inlineRadio1" value="Cash On Delivery" checked required />
                                                <label class="form-check-label" for="inlineRadio1">
                                                    Cash On Delivery
                                                </label>
                                            </div>
                                            @if($bkash_gateway)
                                            <div class="form-check p_bkash">
                                                <input class="form-check-input" type="radio" name="payment_method"
                                                id="inlineRadio2" value="bkash" required/>
                                                <label class="form-check-label" for="inlineRadio2">
                                                    Bkash
                                                </label>
                                            </div>
                                            @endif
                                            
                                            @if($shurjopay_gateway)
                                            <div class="form-check p_shurjo">
                                                <input class="form-check-input" type="radio" name="payment_method"
                                                id="inlineRadio3" value="shurjopay" required/>
                                                <label class="form-check-label" for="inlineRadio3">
                                                    Shurjopay
                                               </label>
                                            </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-------------------->
                                    <div class="col-sm-12">
                                        <div class="custom-control custom-checkbox py-1">
                                            <input type="checkbox" class="custom-control-input" checked="" disabled="" id="customCheck3">
                                            <label class="custom-control-label ml-1" for="customCheck3"> I agree with the
                                                <a href="#">Terms and Conditions</a>
                                            </label> <br>
                                        </div>

                                        <div class="form-group">
                                            <button class="order_place btn-jump" type="submit">অর্ডার কনফার্ম করুন</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card end -->




                    </form>
                </div>
            </div>
            <!-- col end -->
            <div class="col-sm-6 cust-order-1">
                <div class="cart_details">
                    <div class="card">
                        <div class="card-header">
                            <h5>আপনার অর্ডার</h5>
                        </div>
                        <div class="card-body cartlist">
                            <table class="cart_table table table-bordered table-striped text-center mb-0">
                                <thead>
                                    <tr>
                                    <th style="width: 0%;"></th>
                                    <th style="width: 40%;">Product</th>
                                    <th style="width: 20%;">Quantity</th>
                                    <th style="width: 20%;">Subtotal</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach (Cart::instance('shopping')->content() as $value)
                                    <tr>
                                        <td style="vertical-align: middle;">
                                        <a class="cart_remove" data-id="{{$value->rowId}}"><i class="fas fa-trash text-danger"></i></a>
                                        </td>
                                        <td class="text-left cart_product_details">
                                        <a href="{{route('product',$value->options->slug)}}"> <img src="{{asset($value->options->image)}}"  /></a>
                                        <div class="details">
                                                <p>{{Str::limit($value->name,20)}}</p>
                                                <!-- <div class="p_options">
                                                    @if($value->options->product_size)
                                                        <p>Size: {{$value->options->product_size}}</p>
                                                    @endif
                                                    @if($value->options->product_color)
                                                        , <p>Color: {{ $value->options->product_color }}</p>
                                                    @endif
                                                </div> -->
                                                <div class="price_details">
                                                    <p>{{$value->qty}}xTK{{$value->price}}</p>
                                                </div>
                                        </div>
                                        
                                        
                                        </td>
                                        <td class="cart_qty">
                                        <div class="qty-cart vcart-qty">
                                            <div class="quantity">
                                            <button class="minus cart_decrement" data-id="{{$value->rowId}}" style="background-color: #28a745; color: #fff; border: 0px;">-</button>
                                            <input type="text" value="{{$value->qty}}" readonly />
                                            <button class="plus cart_increment" data-id="{{$value->rowId}}" style="background-color: #28a745; color: #fff; border: 0px;">+</button>
                                            </div>
                                        </div>
                                        </td>
                                        <td style="vertical-align: middle;"><span class="">TK </span><strong>{{$value->price * $value->qty}}</strong></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="order-summary-middle">
                                <ul>
                                    <li>Subtotal <h4>Tk {{ $subtotal }}</h4>
                                    </li>
                                    <li>Shipping <h4><span class="price">Tk {{ $shipping }}</span></h4>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-summary-bottom">
                                <h4>Total <span>Tk {{ $subtotal + $shipping }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- col end -->
        </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="{{ asset('public/frontEnd/') }}/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $(".select2").select2();
    });
</script>
<script>
    // $("#area").on("change", function() {
    //     var id = $(this).val();
    //     $.ajax({
    //         type: "GET",
    //         data: {
    //             id: id
    //         },
    //         url: "{{ route('shipping.charge') }}",
    //         dataType: "html",
    //         success: function(response) {
    //             $(".cartlist").html(response);
    //         },
    //     });
    // });
    $('input[name="area"]').on('change', function() {
        var id = $(this).val();
        
        $.ajax({
            type: "GET",
            data: { id: id },
            url: "{{ route('shipping.charge') }}",
            dataType: "html",
            success: function(response) {
                $(".cartlist").html(response);
            },
            error: function(xhr) {
                console.error("Error:", xhr.responseText);
            }
        });
    });
    if ($('input[name="area"]:checked').length) {
        $('input[name="area"]:checked').trigger('change');
    }
</script>
<script type="text/javascript">
    // dataLayer.push({ event: "clear_previous_data" }); // Clear any previous data

    // @foreach (Cart::instance('shopping')->content() as $item)
    //     dataLayer.push({
    //         event: "add_to_cart",
    //         pageCategory: "checkout",
    //         item_id: "{{ $item->id }}",
    //         item_name: "{{ $item->name }}",
    //         price: "{{ $item->price }}",
    //         currency: "BDT",
    //         item_brand: "Tailor Birds BD",
    //         item_category: "{{ $item->options->category ?? 'N/A' }}",
    //         item_size: "{{ $item->options->product_size ?? 'N/A' }}",
    //         item_color: "{{ $item->options->product_color ?? 'N/A' }}",
    //         quantity: "{{ $item->qty }}",
    //     });
    // @endforeach

    // // Send total price including shipping
    // dataLayer.push({
    //     event: "checkout",
    //     totalValue: "{{ $subtotal + $shipping }}"
    // });
    @php
        $cartData = [
            'content_ids' => Cart::instance('shopping')->content()->pluck('id'),
            'contents' => Cart::instance('shopping')->content()->map(function($item) {
                return [
                    'id' => $item->id,
                    'quantity' => $item->qty,
                    'item_price' => $item->price
                ];
            }),
            'total' => Cart::instance('shopping')->total(),
            'count' => Cart::instance('shopping')->count()
        ];
    @endphp




    $(document).ready(function() {
        function getFbp() {
            return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
        }
   
        fbq('track', 'InitiateCheckout',{
            content_ids: "{!! json_encode($cartData['content_ids']) !!}",
            currency: 'BDT',
            value: "{{ $subtotal + $shipping }}",
            num_items: "{{ $cartData['count'] }}",
            payment_methods: 'Cash On Delivery',
        }, {

            event_id: '{{ $eventID }}',
            fbp: getFbp(),
            url: window.location.href,
            pageName: document.title,
            pageType: 'Checkout',
            referrer: document.referrer || 'direct',
        });
       
        @if($settings['fb_add_to_cart_event'] == 1)
        fbq('track', 'AddToCart',{
            content_ids: "{!! json_encode($cartData['content_ids']) !!}",
            currency: 'BDT',
            value: "{{ $subtotal + $shipping }}",
            content_type: 'product',
        }, {

            event_id: '{{ $eventID }}-1',
            url: window.location.href,
            pageName: document.title,
            pageType: 'Checkout',
            referrer: document.referrer || 'direct',
        });
        @endif
        @if($settings['fb_pageview_event'] == 1)
        fbq('track', 'PageView',{}, {
            event_id: '{{ $eventID }}-2',
            pageType: 'Checkout',
            pageName: document.title,
            url: window.location.href,
            path: window.location.pathname,
            referrer: document.referrer || 'direct',
        });
        @endif
        setTimeout(function() {
            @if($settings['fb_checkout_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}',
                    fbp: getFbp(),
                    event_name: "InitiateCheckout",
                    page_title: document.title,
                    page_url: window.location.href,
                    custom_data: {
                        content_ids: "{!! json_encode($cartData['content_ids']) !!}",
                        content_type: 'Checkout',
                        value: "{{ $subtotal + $shipping }}",
                        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

            @if($settings['fb_add_to_cart_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}-2',
                    fbp: getFbp(),
                    event_name: "AddToCart",
                    page_title: document.title,
                    page_url: window.location.href,
                    custom_data: {
                        content_ids: "{!! json_encode($cartData['content_ids']) !!}",
                        content_type: 'Checkout',
                        value: "{{ $subtotal + $shipping }}",
                        currency: 'BDT'
                    }
                });
            @endif
            
        }, 4000);

        let debounceTimer;
        const debounceDelay = 3000; // 3 second delay
    
        function saveIncompleteOrder() {
            clearTimeout(debounceTimer);
            
            let formData = $('#user-checkout').serializeArray();
            let formDataJson = {};
            formData.forEach(function(field) {
                formDataJson[field.name] = field.value;
            });
            
            let guestCode = "{{ session('guest_code') }}";
            
            $.ajax({
                url: "{{ route('saveIncompleteOrder') }}",
                method: 'POST',
                data: {
                    guest_id: guestCode,
                    form_data: JSON.stringify(formDataJson)
                },
                success: function(response) {
                    console.log('Auto-saved successfully', response);
                },
                error: function(response) {
                    console.error('Auto-save failed', response);
                }
            });
        }
        $('#user-checkout').on('blur', 'input, select, textarea', function() {
            saveIncompleteOrder();
        });
        $('#user-checkout').on('input', 'input, textarea', function() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(saveIncompleteOrder, debounceDelay);
        });
        $('#user-checkout').on('change', 'select', function() {
            saveIncompleteOrder();
        });

    });
</script>

@endpush