@extends('frontend.partials.master')
@push('css')
<style>
    #order-detail .content {
	 background-color: transparent;
	 padding: 8px 16px;
	 max-width: 800px;
	 margin-left: auto;
	 margin-right: auto;
}
 #order-detail .content .products .product {
	 overflow: hidden;
	 position: relative;
	 border: 0;
	 padding: 16px 0;
	 width: 100%;
	 display: flex;
	 justify-content: space-between;
}
 #order-detail .content .products .product self:not(&:last-child) {
	 border-bottom: 1px solid #a9dbbe;
}
 #order-detail .content .products .product .left {
	 display: flex;
	 margin-right: 4px;
}
 #order-detail .content .products .product .left .img {
	 margin-right: 12px;
}
 #order-detail .content .products .product .left .img img {
	 width: 55px;
	 height: 55px;
}
 #order-detail .content .products .product .left .title .product-title {
	 color: #052e16;
	 font-size: 15px;
	 font-weight: 600;
	 margin: 0;
}
 #order-detail .content .products .product .left .title .qty {
	 color: #052e16;
	 font-size: 13px;
	 font-weight: 400;
}
 #order-detail .content .products .product .right {
	 display: flex;
}
 #order-detail .content .products .product .right .input {
	 width: 90px;
	 margin-left: auto;
	 margin-bottom: 5px;
}
 #order-detail .content .products .product .right .input .input-group {
	 border-radius: 0;
	 border: 0;
	 background-color: transparent;
}
 #order-detail .content .products .product .right .input .input-group .input-group-text {
	 border-radius: 0;
	 border: 0;
	 background-color: white;
	 width: 30px;
}
 #order-detail .content .products .product .right .input .input-group .input-group-text .material-icons-outlined {
	 font-size: 17px;
}
 #order-detail .content .products .product .right .input .input-group .form-control {
	 border: 0;
	 text-align: center;
	 color: #052e16;
	 font-size: 14px;
	 font-weight: 600;
	 border-left: 1px solid #e8f5ed;
	 border-right: 1px solid #e8f5ed;
	 padding: 2px;
}
 #order-detail .content .products .product .right .price {
	 margin-left: 7px;
	 color: #166534;
	 font-size: 14px;
	 font-weight: 400;
}
 #order-detail .content .products .product .right .price b {
	 color: #052e16;
	 font-weight: 700;
}
 #order-detail .content .products .product .cancel-btn {
	 width: 25px;
	 height: 100%;
	 margin-left: 8px;
	 background: #a9dbbe;
	 border-radius: 0;
}
 #order-detail .content .products .product .cancel-btn:hover {
	 background-color: red;
	 color: white;
}
 #order-detail .content .products .product .cancel-btn .material-icons-outlined {
	 font-size: 16px;
}
 #order-detail .content .delivery-fee {
	 margin-top: 15px;
}
 #order-detail .content .delivery-fee .fee {
	 display: flex;
	 margin-bottom: 10px;
}
 #order-detail .content .delivery-fee .fee .material-icons-outlined {
	 width: 30px;
}
 #order-detail .content .delivery-fee .delivery-area {
	 line-height: 1;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 #order-detail .content .delivery-fee .delivery-area .form-check-input:checked[type="radio"] {
	 --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
 #order-detail .content .delivery-fee .delivery-area self:not(&:last-child) {
	 margin-bottom: 10px;
}
 #order-detail .content .delivery-fee .delivery-area .form-check-input {
	 margin-top: 0;
	 height: 20px;
	 width: 20px;
	 border-radius: 50%;
	 margin-right: 10px;
}
 #order-detail .content .delivery-fee .delivery-area .form-check-input:focus {
	 box-shadow: none;
}
 #order-detail .content .delivery-fee .delivery-area .label {
	 color: #052e16;
	 font-weight: 500;
}
 #order-detail .content .delivery-fee .delivery-area .price {
	 border-radius: 1000px;
	 background: #16a34a;
	 color: #f0fdf4;
	 font-weight: 700;
	 font-size: 14px;
	 padding: 3px 6px;
	 line-height: 1;
}
 #order-detail .content .summery {
	 margin-top: 30px;
	 background: #dff2e7;
	 padding: 24px;
}
 #order-detail .content .summery .item-row {
	 color: #166534;
	 font-size: 14px;
	 font-weight: 500;
	 display: flex;
	 justify-content: space-between;
	 padding-bottom: 8px;
}
 #order-detail .content .summery .item-row.total {
	 color: #052e16;
	 font-weight: 700;
	 padding-top: 8px;
	 border-top: 1px dashed #166534;
}
 #order-detail .content .btn-submit {
	 color: #fff;
	 font-size: 14px;
	 font-weight: 700;
	 background: #15803d;
	 padding: 12px;
	 border-radius: 0;
	 width: 100%;
	 margin-top: 16px;
}
.remove{
    position: absolute;
}

 @media (max-width: 400px) {
	 #cartOffcanvas .offcanvas-body {
		 padding: 8px 10px;
	}
	 #cartOffcanvas .offcanvas-body .products .product .left {
		 margin-right: 2px;
	}
	 #cartOffcanvas .offcanvas-body .products .product .left .img img {
		 width: 50px;
		 height: 50px;
	}
	 #cartOffcanvas .offcanvas-body .summery {
		 padding: 15px;
	}
}
 
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }

  button.otpBtn {
    background-color: blue;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    display: block;
  }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
@endpush
@section('content')

@php
    $item = Cache::get('site_status');
    $ecomm_setting = $item ? json_decode($item) : null;
    $payment_options=DB::table('pos_setting')->first()->payment_options;
@endphp

<div class="container-xl my-5">
    <div class="row g-5">
        @php
            $total=0;
            $user = Auth::user();
        @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" id="submit-form">
                @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" id="mobile" 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($productIdCount === $productCount)
                                  <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
                
                <button class="w-100 btn btn-success orange-bg text-white btn-lg sub_btn" type="submit">{{BanglaText('confirm_order')}}</button>
              </form>
            </div>
            </div>
            </div>
      </div>
    </div>
    
    <!-- Success Modal -->
    <div class="modal fade" id="successModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="center">
                  <form id="otpForm" action="" method="POST">
                    @csrf
                    <div class="form-group">
                      <label for="verify">OTP Code</label>
                      <input type="number" id="verify" name="verify" class="form-control" placeholder="Enter 6-digit OTP" required>
                      <span class="error" id="verifyError"></span>
                    </div>
                    <button class="otpBtn" type="submit">Verify</button>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>
    $(document).ready(function(){
        $(document).on('change','#mobile', function (e) {
            e.preventDefault();
            let mobile = $(this).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},
                    success: function (response) {
                         console.log(response.message);
                    },
                    error: function (xhr) {
                        var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An error occurred';
                        console.log(errorMessage);
                        
                    }
                });
            }
        });
        
        
        
        $('#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').toString();
                var product_name = $(this).data('product-name');
                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
                }
            });
            
            // Direct Meta Pixel InitiateCheckout
            if (typeof fbq === 'function') {
                fbq('track', 'InitiateCheckout', {
                    value: total,
                    currency: 'BDT',
                    contents: items.map(i => ({
                        id: i.item_id,
                        quantity: i.quantity,
                        item_price: i.price
                    })),
                    content_type: 'product',
                    content_ids: items.map(i => i.item_id)
                });
            }
        }
        
        
        
        
        
        
        
        
        
        
        $(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