@extends('app')
@push('css')
<style>
    .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: 12px;
            font-weight: bold;
            padding: 2px !important;
        }

        
        .form-control.quantity {
            padding: 0 7px;
            width: 25px !important;
        }
        .cartBody {
            padding: 0;
        }
        
        .text-end, .prices{
            font-size: 14px;
        }
        .table>:not(caption)>*>* {
            padding: .1rem .1rem;
        }
        .d-flex.mb-4.align-items-start{
            display: block !important;
            margin-bottom: 0 !important;
        }
        .form-outline{
            margin-left: 8px;
            margin-top: 3px;
        }
        .d-flex.mb-4.align-items-start button {
            display: inline-grid;
            text-align: center;
            margin-left: 8px;
            padding: 0 5px;
        }
    }
    
</style>
@endpush
@section('content')

@php
//use App\Models\EcommerceSetting;
//$cart_price=EcommerceSetting::first()->cart_price;

$item = Cache::get('site_status');
$ecomm_setting = $item ? json_decode($item) : null;
$cart_price = $ecomm_setting->cart_price ?? 0;

$payment_options=DB::table('pos_setting')->first()->payment_options;
@endphp

<div class="container-xl my-5">
    <div class="row g-5">
        @php
            $total=0;
        @endphp

        @foreach($cart as $key=>$item)
            @php
                $sub_total=$item['price']*$item['quantity'];
                $total +=$sub_total;
            @endphp
        @endforeach
        
        <div class="col-md-12 col-lg-6 order-md-last order-last">
            @include('partials.checkoutTable')
        </div>
          
        
            <div class="col-md-6 col-lg-6">
                <div class="card">
            <div class="card-header"><h4 class="mb-3">Billing address</h4></div>
            <div class="card-body">
              <form class="needs-validation" action="{{ route('checkouts.store')}}" method="post">
                @csrf
                <div class="row g-3">
                    <div class="col-sm-12">
                        <label for="firstName" class="form-label">{{ BanglaText('name') }}</label>
                        <input type="text" class="form-control p-2" placeholder="{{ BanglaText('placeholder_name') }}" value="{{ old('name')}}" name="name">
                        @if($errors->has('mobile'))
                            <div class="error">{{ $errors->first('name') }}</div>
                        @endif
                     </div>
                     
                    <div class="col-sm-12">
                        <label for="firstName" class="form-label">{{ BanglaText('mobile') }}</label>
                        <input type="tel" class="form-control" placeholder="{{ BanglaText('placeholder_mobile') }}" maxlength="11" minlength="11" value="{{ old('mobile')}}" name="mobile">
                        @if($errors->has('mobile'))
                            <div class="error">{{ $errors->first('mobile') }}</div>
                        @endif
                     </div>
     
                    <div class="col-12">
                        <label for="address" class="form-label">{{ BanglaText('address') }}</label>
                        <input type="text" class="form-control p-4" placeholder="{{ BanglaText('placeholder_address') }}" name="address" value="{{ old('address')}}" >
                        @if($errors->has('address'))
                            <div class="error">{{ $errors->first('address') }}</div>
                        @endif
                    </div>
                    
                    <div class="col-12">
                        <label for="shipping_charge" class="form-label">{{BanglaText('shipping_charge')}}</label>
                        <select class="form-select shadow-none" id="shipping_charge" name="shipping_charge">
                            @if($total >= $cart_price)
                                  <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,'cash') || 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
                
                <button class="w-100 btn btn-warning orange-bg text-white btn-lg sub_btn" type="submit">{{BanglaText('confirm_order')}}</button>
              </form>
            </div>
            </div>
            </div>
      </div>
    </div>
</div>
<div class="container">
    <form method="GET" wire:submit.prevent="save" class="content" id="orderForm">
        <!--[if BLOCK]><![endif]-->            <h3 class="text-center">Order Details</h3>

            <div class="products">
                                <!--[if BLOCK]><![endif]-->                    
                    <div class="product">
                        <div class="left">
                            <div class="img">
                                <img src="https://naturobd.com/storage/zdIsAtfSmd8Nx6QuhwvKE8wrDwhoKuXMN7w6L4zJ.jpg" alt="" loading="lazy">
                            </div>
                            <div class="title">
                                <h6 class="product-title">Arai Mithai Combo</h6>
                                <div class="qty">
                                    3.3 Kg
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div>
                                <div class="input quantity">
                                    <div class="input-group">
                                        <button wire:click="subItem(72)" class="input-group-text sub-product" type="button">
                                            <span class="material-icons-outlined">
                                                remove
                                            </span>
                                        </button>
                                        <input type="text" wire:model.live="carts.72" class="form-control" id="quantity">
                                        <button wire:click="addItem(72)" class="input-group-text add-product" type="button">
                                            <span class="material-icons-outlined">
                                                add
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="price">
                                    Price
                                    <b>
                                        Tk1,450
                                    </b>
                                </div>
                            </div>

                            <script>
                                fbq('track', 'Lead', {
                                    'content_name': "Arai Mithai Combo",
                                    'content_ids': ['72'],
                                    'content_category': 'single-order',
                                    'content_type': 'product',
                                    'value': "1450",
                                    'currency': 'BDT',
                                    'product_weight': " 3.3 Kg" // Additional product detail
                                });

                                fbq('track', 'Purchase', {
                                    'currency': 'BDT',
                                    'value': "1450",
                                });
                            </script>
                            <button type="button" wire:click="removeProduct(72)" class="btn cancel-btn">
                                <span class="material-icons-outlined">
                                    close
                                </span>
                            </button>
                        </div>
                    </div>
                <!--[if ENDBLOCK]><![endif]-->
            </div>

            <div class="row row-cols-1 row-cols-md-2 gx-3 gy-2">
                <div>
                    <label for="">পূর্ণ নাম(Full Name)</label>
                    <input name="name" wire:model="name" type="text" class="form-control ">
                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                </div>
                <div>
                    <label for=""> মোবাইল নাম্বার (Number)</label>
                    <input name="billing_phone" wire:model="billing_phone" type="text" class="form-control ">
                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                    <small class="text-danger">মোবাইল নম্বরটি অবশ্যই শূন্য থেকে শুরু হবে</small>
                </div>


                <div>
                    <strong><label for="">শিপিং এরিয়া (Shipping Area)</label></strong>
                    <div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="1" wire:model.live="city" id="dhakaCity">
                            <label class="form-check-label" for="dhakaCity">
                                ঢাকার মধ্যে (Dhaka)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="2" wire:model.live="city" id="otherCity">
                            <label class="form-check-label" for="otherCity">
                                ঢাকার বাইরে (Outside of Dhaka)
                            </label>
                        </div>
                    </div>
                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                </div>
                

                
                <div>
                    <label for="">ডেলিভারি ঠিকানা (Delivery Address)*</label>
                    <textarea wire:model="delivery_location" name="delivery_location" class="form-control "></textarea>
                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                </div>
            </div>
            <div class="summery">
                <div class="item-row">
                    <div class="item-col">Subtotal</div>
                    <div class="item-col">Tk1,450</div>
                </div>

                <div class="item-row">
                    <div class="item-col">Delivery Charge</div>
                    <div class="item-col">Tk100</div>
                </div>

                <div class="item-row total">
                    <div class="item-col">Subtotal</div>
                    <div class="item-col">Tk1,550</div>
                </div>
            </div>

            <button wire:loading.attr="disabled" class="btn btn-submit" style="background-color: #df1717;">Plase Order
                Tk1,550</button>
        <!--[if ENDBLOCK]><![endif]-->
    </form>
</div>
            
@endsection
@push('js')
<script>
    $(document).ready(function(){
        $('#shipping_charge').change(function(){
            getShippingCost();
            
        });
        getShippingCost();
        
        function getShippingCost(){
            
            let amount=Number('{{$total}}');
            let charge=Number($('#shipping_charge').find('option:selected').val());
            $(document).find('#shipping_cost').text(charge);
            $(document).find('p#total_amount').text(amount+charge);
            console.log(amount+charge);
        }
        
        
        generateDataLayers();
        
        function generateDataLayers() {
            var items = [];
            $('.cart-item-data').each(function() {
                var product_id = $(this).data('product-id');
                var product_name = $(this).data('product-name');
                var price = parseFloat($(this).data('price'));
                var quantity = parseFloat($(this).data('quantity'));
                items.push({
                    item_id: product_id,
                    item_name: product_name,
                    price: price,
                    quantity: quantity
                });
            });
            let total = $('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
                }
            });
        }
        
        
        
        
        
        
        
        
        
        
        $(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);
    		                
                            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