@extends('app')
@push('css')
<style>
    
    .form-label{
        font-weight: bold;
        color: #000;
    }
    .fontSize {
        font-weight: bold;
    }
    .error{
        color:red;
    }
    
    .sub_btn{
        font-size: 25px;
        font-weight: 700;
    }
    .deleteCart{
        position: absolute;
    }
    .deleteCart:hover{
        background: red;
    }
    div.quantity_box button[type="button"] {
        padding: 0 5px;
        min-width: 25px;
        min-height: unset;
        height: 42px;
        border: 2px solid rgb(211, 211, 211);
        background: white;
        box-shadow: none;
        color: black;
        border-radius: 0;
    }
    .product_dismiss{
        margin-right: 25px;
    }
    @media only screen and (min-width: 320px) and (max-width: 768px) {
        .fontSize {
            font-size: 16px;
            font-weight: bold;
            padding: 2px !important;
        }

        
        .form-control.quantity {
            padding: 0 7px;
            width: 25px !important;
        }
        .cartBody {
            padding: 0 7px;
        }
        
        .text-end, .prices{
            font-size: 16px;
        }
        .table>:not(caption)>*>* {
            padding: .1rem .1rem;
        }
        .quantity_box_checkout button {
            text-align: center;
            padding: 0 5px;
        }
        .button_sticky{
            position: sticky;
            bottom: 0;
            left: 0;
        }
    }
    .active {
        color: #fff !important;
        background-color: #f44336 !important;
    }
    
@media (max-width: 767px) {
    .placeholder-control::placeholder {
        color: transparent; /* Placeholder অদৃশ্য হবে */
    }
    .col-sm-12 {
        padding: 0 5px;
        margin: 0;
    }
    .order-md-last{
        margin: 0;
    }
    
    .col-md-6.col-lg-6.p-1.px-lg-2.p-0{
        margin-top: 30px;
    }
    .fw-normal{
        width: 65px;
    }
}


    
    
</style>
@endpush
@section('content')

@php
$ecomm_setting = DB::table('ecommerce_settings')->first();
$cart_price = $ecomm_setting->cart_price ?? 0;
$payment_options=DB::table('pos_setting')->first()->payment_options;
@endphp

<div class="container-xl my-3">
    <div class="row g-5 mx-1">
        @php
            $total=0;
            $coupon=isset(getCouponDiscount()['amount'])?getCouponDiscount()['amount']:0;
            $is_free = 1; 
        @endphp

        @foreach($cart as $key=>$item)
            @php
                $sub_total=$item['price']*$item['quantity'];
                $total +=$sub_total;
                if ($item['free_ship'] != 1) {
                    $is_free = 0;
                }
            @endphp
        @endforeach
        
        <div class="col-md-12 col-lg-6 order-md-last order-last p-0">
            @include('partials.checkoutTable')
        </div>
          
        
            <div class="col-md-6 col-lg-6 p-1 px-lg-2 p-0">
                @if(session('message'))
                    <div class="alert alert-danger">{{ session('message') }}</div>
                @endif
                <div class="card">
            <div class="card-header"><h5 class="mb-0 text-center">
                 অর্ডার কনফার্ম করতে আপনার নাম, ঠিকানা ও মোবাইল নাম্বার দিয়ে "অর্ডার কনফার্ম করুন" বাটনে ক্লিক করুন।
            </h5></div>
            <div class="card-body">
              <form class="needs-validation" action="{{ route('checkouts.store')}}" id="checkout_form" method="post">
                @csrf
                <div class="row g-3">
                    <div class="col-sm-12">
                        <fieldset class="border border-secondary rounded-3 p-0 px-2">
                            <legend class="float-none w-auto mb-0 px-3 bangla" >{{ BanglaText('name') }}</legend>
                            <input type="text" class="form-control p-2 border-0 bangla placeholder-control" id="name" placeholder="{{ BanglaText('placeholder_name') }}" 
                               name="name" value="{{ old('name', auth()->user()->name ?? '') }}"
                               @if(auth()->check()) readonly @endif >
                            @error('name')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </fieldset>
                    </div>
                    
                    <div class="col-sm-12">
                        <fieldset class="border border-secondary rounded-3 p-0 px-2">
                            <legend class="float-none w-auto mb-0 px-3 bangla" >{{ BanglaText('mobile') }}</legend>
                            <input type="text" class="form-control border-0 bangla placeholder-control" oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,11)" id="mobile"
                            placeholder="{{ BanglaText('placeholder_mobile') }}" maxlength="11" name="mobile" inputmode="numeric" pattern="[0-9]{11}"
                               value="{{ old('mobile', auth()->user()->phone ?? '') }}"
                               @if(auth()->check()) readonly @endif>
                            @error('mobile')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </fieldset>
                    </div>
                    
                    <div class="col-sm-12">
                        <fieldset class="border border-secondary rounded-3 p-0 px-2">
                            <legend class="float-none w-auto mb-0 px-3 bangla" >{{ BanglaText('address') }}</legend>
                            <input type="text" class="form-control bangla border-0 p-2" id="address" placeholder="{{ BanglaText('placeholder_address') }}" 
                               name="address" value="{{ old('address', auth()->user()->address ?? '') }}">
                                @error('address')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                        </fieldset>
                    </div>

                    <div class="col-12">
                        @error('shipping_charge')
                            <div class="alert alert-danger text-center py-2">
                                {{ $message }}
                            </div>
                        @enderror
                        
                        <div class="d-flex flex-wrap justify-content-center gap-3 shipping_charges">
                            @if($total >= $cart_price || $is_free)
                                <button type="button" class="btn btn-outline-success active shipping-option" data-value="0">
                                    Free Shipping
                                </button>
                            @else
                                @foreach($charges as $charge)
                                    <button type="button" 
                                            class="btn btn-outline-warning text-dark shipping-option rounded-5 bangla" 
                                            data-value="{{ $charge->shipping_charge }}">
                                        {{ $charge->shipping_title }} -  {{ $charge->shipping_charge }}
                                    </button>
                                @endforeach
                            @endif
                        </div>
                        
                        {{-- Hidden input to store selected charge --}}
                        <input type="hidden" name="shipping_charge" id="shipping_charge" value="{{ ($total >= $cart_price || $is_free) ? 0 : '' }}">

                        <!--<select class="form-select shadow-none" id="shipping_charge" name="shipping_charge">-->
                            
                        <!--    @if($total >= $cart_price || $is_free)-->
                        <!--          <option value="0">Free Shipping</option>-->
                        <!--    @else-->
                        <!--        @foreach($charges as $charge)    -->
                        <!--          <option value="{{ $charge->shipping_charge }}">{{ $charge->shipping_title }} ({{ $charge->shipping_charge }})</option>-->
                        <!--        @endforeach-->
                        <!--    @endif-->
                        <!--</select>-->
                    </div>
                    @if( str_contains($payment_options,'bkash') || str_contains($payment_options,'sslcommerz'))
                    <div class="col-12 ">
                        <label for="state" class="form-label">Payment Method</label>
                        @if(str_contains($payment_options,'cash'))
                        <div class="form-check">
                          <input class="form-check-input" type="radio" name="paying_method" id="cash_on_delivery" value="cash_on_delivery" checked>
                            <label class="form-check-label" for="cash_on_delivery">
                                Cash On Delivery
                            </label>
                        </div>
                        @endif
                        
                        @if(str_contains($payment_options,'bkash'))
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="paying_method" id="bkash" value="bkash" >
                            <label class="form-check-label" for="bkash">
                                Bkash
                            </label>
                        </div>
                        @endif
                        
                        @if(str_contains($payment_options,'sslcommerz'))
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="paying_method" id="sslcommerz" value="sslcommerz" >
                            <label class="form-check-label" for="sslcommerz">
                                SSLCommerz
                            </label>
                        </div>
                        @endif
    
                    </div>
      
                <hr class="my-4">
                @endif
                <div class="d-flex gap-2 flex-wrap align-items-center bangla d-none">
                    <span class="bangla mb-0" style="font-size: 18px;">অর্ডার করতে সমস্যা হলে</span><i class="fas fa-arrow-right"></i>
                    <a href="https://wa.me/+88{{$ecomm_setting->whats_num}}" class="btn btn-warning orange-bg mt-lg-1  semi text-capitalize rounded-5 add_to_cart btn_design" style="background: #4ec95c;color: #ffffff;border: none;"> WhatsApp</a>
                    <a href="tel: {{ $ecomm_setting->contact }}" class="btn btn-warning orange-bg mt-lg-1 semi text-capitalize add_to_cart rounded-5 btn_design" style="background: linear-gradient(to top right, #00a5ff, #00a5ff);color: #ffffff;border: none;">Call Us</a>
                    
                </div>
                
                
                <button class="w-100 btn btn-warning orange-bg text-white btn-lg sub_btn d-none d-lg-block" type="submit">অর্ডার কনফার্ম করুন</button>
              </form>
            </div>
            </div>
            </div>
      </div>
    </div>
</div>
@php
    $eventId = 'IC_' . now()->format('YmdHi'); 
@endphp
            
@endsection
@push('js')
<script>

    function serversideTracking(productId) {
        $.ajax({
            url: '/initiate-checkout/server-side',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                console.log('Server-side tracking:', response.message);
            },
            error: function(xhr, status, error) {
                console.error('Server-side tracking error:', error);
            }
        });
    }



    $(document).ready(function(){
        setTimeout(() => {
            serversideTracking();
        }, 500);
        
        $(document).on('change','#mobile', function (e) {
            e.preventDefault();
            let mobile = $(this).val();
            let name = $('#name').val();
            let url = "{{ route('incompleteStore') }}";
            
            var constantValue=1;
            if (!mobile || mobile.length < 11 || mobile.length > 11   ) {
                constantValue = 0;
            }

            if(constantValue==1){
                console.log(url);
                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data:{'mobile': mobile,'name':name},
                    success: function (response) {
                        //  alert(response.message);
                        console.log(response.message);
                    },
                    error: function (xhr) {
                        var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An error occurred';
                        // alert(errorMessage);
                        console.log(errorMessage);
                    }
                });
            }
        });
        
        
        
        
        
        
        $('#shipping_charge').change(function(){
            getShippingCost();
            
        });
        if(!$("#shipping_charge").val()){
            let lastBtn = $(".shipping-option").last();
            lastBtn.removeClass("btn-outline-primary").addClass("active btn-primary");
            $("#shipping_charge").val(lastBtn.data("value"));
        }
        // Handle button click
        $(".shipping-option").on("click", function(){
            // Remove active state from all
            $(".shipping-option").removeClass("active btn-primary").addClass("btn-outline-primary");
            
            // Add active state to clicked button
            $(this).removeClass("btn-outline-primary").addClass("active btn-primary");

            // Save value in hidden input
            let value = $(this).data("value");
            $("#shipping_charge").val(value);

            // Recalculate totals
            getShippingCost();
        });

        // Run once on page load (default value)
        getShippingCost();

        // Function to calculate shipping + total
        function getShippingCost(){
            let amountText = $('td#subTotal').text();
            let amount = parseFloat(amountText.replace(/[^\d.]/g, ''));

            let couponDis= Number('{{ $coupon }}');  // coupon discount
            let charge   = Number($("#shipping_charge").val() || 0); // selected shipping

            // Update UI
            $(document).find('#shipping_cost').text(charge + ' ৳');
            var total = amount + charge - couponDis;
            $(document).find('p#total_amount').text(total + ' ৳');

            console.log("Total Payable: " + (total));
        }
        
        setTimeout(() => {
            generateDataLayers();
        }, 500);
        
        function generateDataLayers() {
            var items = [];
            $('.cart-item-data').each(function() {
                var product_id = $(this).data('product-id').toString();
                var product_name = $(this).data('product-name');
                var product_variant = $(this).data('product-variant');
                var price = parseFloat($(this).data('price'));
                var quantity = parseInt($(this).data('quantity'));
                items.push({
                    item_id: product_id,
                    item_name: product_name,
                    price: price,
                    quantity: quantity
                });
            });
            let total = parseFloat($('input[name="total_cart_price"]').val());
    
            // Push data to data layer
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                event: 'begin_checkout',
                ecommerce: {
                    currency: "BDT",
                    value: total, 
                    items: items
                }
            });
            
            if (typeof fbq === 'function') { 
                const eventID = "{{ $eventId }}";
            
                fbq('track', 'InitiateCheckout', {
                        value: total,
                        currency: 'BDT',
                        contents: items.map(i => ({
                            id: i.item_id,
                            name: i.item_name,
                            variant: i.product_variant || '',
                            variant_type: i.product_variant ? "variable" : "single",
                            quantity: i.quantity,
                            item_price: i.price
                        })),
                        content_type: 'product',
                        content_ids: items.map(i => i.item_id),
                        visitor_ip: '{{ request()->ip() }}'
                    }, {
                    eventID: eventID
                });
            
                console.log("InitiateCheckout EventID:", eventID);
            }
        }
        
        
        $(document).on('click','button.qtybtn', function() {
            var $button = $(this);
    
            var oldValue = $button.parent().find('input.quantity').val();
            if ($button.hasClass('plus')) {
                var newVal = parseFloat(oldValue) + 1;
            } else {
                // Don't allow decrementing below zero
                if (oldValue > 1) {
                    var newVal = parseFloat(oldValue) - 1;
                } else {
                    newVal = 1;
                }
            }
            $button.parent().find('input.quantity').val(newVal);
    
            let url=$button.closest('div').attr('data-href');
    	    if (typeof url !== "undefined") {
    		    $.ajax({
    		        url: url,
    		        method: "GET",
    		        data: {quantity:newVal},
    		        success: function (res) {
    		            if (res.success) {
    		                toastr.success(res.msg);
    		                $('.order-md-last').empty().append(res.cart);
    		                setTimeout(function() {
    		                    let shiping = $('.shipping-option.active').data('value');
                                let amountText = $('td#subTotal').text();
                                let amount = parseFloat(amountText.replace(/[^\d.]/g, ''));
                                $(document).find('#shipping_cost').text(shiping + ' ৳');
                                $('p#total_amount').text((shiping + amount) + ' ৳');
                            }, 10);
                            
    		            }else{
    		                toastr.error(res.msg);
    		            }
    		           
    		        }
    		    });
    		}
    
        });
        
        
        $(document).on('click','.couponButton', function() {
            let url="{{route('couponApply')}}";
            var couponCode = $('.couponCode').val();
            var status=true;
            if ($('.couponCode').prop('readonly')) {
                couponCode = null;
            }else{
                if(couponCode){
                    
                }else{
                    status=false;
                    alert('Please input you coupon Code!')
                }
            }
            
            if(typeof url == "undefined"){
               status=false; 
            }
         
    	    if (status) {
    		    $.ajax({
    		        url: url,
    		        method: "GET",
    		        data: {couponCode:couponCode},
    		        success: function (res) {
    		            if (res.success) {
    		                toastr.success(res.msg);
                        window.location.reload();
    		            }else{
    		                toastr.error(res.msg);
    		            }
    		        }
    		    });
    		}
    
        });
        
        $(document).on('change','input.quantity', function() {
            var $input = $(this);
    
            var oldValue = $input.val();
            if(1>oldValue){
                return false;
            }
    
            let url=$input.closest('div.align-items-start').attr('data-href');
    	    if (typeof url !== "undefined") {
    		    $.ajax({
    		        url: url,
    		        method: "GET",
    		        data: {quantity:oldValue},
    		        success: function (res) {
    		            if (res.success) {
    		                toastr.success(res.msg);
    		                
                            window.location.reload();
                            
    		            }else{
    		                toastr.error(res.msg);
    		            }
    		           
    		        }
    		    });
    		}
    
        });
        
    
    
    });
</script>
@endpush