@extends($theme.'.layouts.admin')
@section('content')

<form id="place_order">
<div class="container">
<div class="row pt-2">
    <div class="col-lg-8 col-md-12 wow slideInLeft">
        <div class="checkout-step">
            <div class="accordion" id="accordionExample">
                <div class="card checkout-step-two">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <i class="fa fa-map-marker" aria-hidden="true"></i>  Delivery Options
                            </a>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        
                        <div class="myaddress">
                            <div class="address-block">
                                
                                <h6 class="mb-2">Billing Address</h6>
                                <!-- delivery Gateway -->
                                <input type="hidden" name="address" id="address" value="0">
                                @if(!empty($address_list))
                                    @foreach($address_list as $address)
                                    <div class="myaddress myaddress-{{$address->address_id}}">

                                        <div class="address-block radio-address" style="display: flex;">
                                            <div class="custom-control custom- radio" style="vertical-align: top;">
                                                <input id="customer_address_{{$address->address_id}}" class="custom-control-input customer_address " name="customer_address" type="radio" data-address-id="{{ $address->address_id }}" data-mobile="{{$address->mobile_number}}" value="{{ $address->address_id }}">
                                                <label for="customer_address_{{$address->address_id}}" class="checkbox-custom-label"></label>

                                            </div>
                                            <div style="display:inline-block" class="pl-2">
                                                <!-- delivery Gateway -->
                                                <h6>{{ $address->address_type }}</h6>
                                                <!-- delivery Gateway -->
                                                <address>
                                                    <p>
                                                    {!! $address->full_address !!}<br>
                                                    Mobile No : {{ $address->mobile_number }}<br>
                                                    </p>
                                                </address>

                                                <div class="mt-2">
                                                    <a href="javascript:void(0)" data-toggle="address" data-address-id="{{ $address->address_id }}" class="set_deliver_address btn btn-dark btn-sm inline_block mar_r6 deliver_product">
                                                        <i class="fa fa-location-arrow" aria-hidden="true"></i> <label for="customer_address_{{$address->address_id}}" class="checkbox-custom-label m-0">Delivery Here</label></a>
                                                    <a href="#" data-toggle="address" class="btn btn-secondary btn-sm inline_block mar_r6 edit_address ml-2" id="edit_my_address_btn" data-address-id="{{ $address->address_id }}" data-address-type="{{ $address->address_type }}" data-house-no="{{ $address->house_no }}" data-apartment-name="{{ $address->apartment_name }}" data-mobile-number="{{ $address->mobile_number }}" data-landmark="{{ $address->landmark }}" data-contact_person="{{ $address->contact_person }}" data-street="{{ $address->street }}" data-city="{{ $address->city }}" data-pin-number="{{ $address->pin_number }}" data-state="{{ $address->state }}">
                                                        <i class="fa fa-pencil" aria-hidden="true"></i> Edit Address
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6 col-md-6">
                                    <a href="#" data-target="#myModal" class="btn btn-success btn-sm border-none collapsed add_address" data-toggle="modal"><i class="fa fa-1x fa-plus-circle"></i>
                                        Add Address </a>
                                </div>
                                <div class="col-6 col-md-6 text-right pl-0">
                                    <button type="button" data-toggle="collapse" data-target="#shipping-opt" aria-expanded="false" aria-controls="collapseThree" class="btn btn-secondary btn-sm" id="select_shipping">Select Shipping <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card checkout-step-two">
                    <div class="card-header" id="shipping">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" type="button" data-toggle="collapse" data-target="#shipping-opt" aria-expanded="false" aria-controls="collapseTwo">
                                <i class="fa fa-truck" aria-hidden="true"></i> Shipping Options
                            </a>
                        </h5>
                    </div>
                    <div id="shipping-opt" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="p-3">
                            <table class="table table-bordered table-sm table-hover mb-0">
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" id="checkoutShippingStandard" name="shipping" type="radio" value="1">
                                            <label class="custom-control-label text-body text-nowrap" for="checkoutShippingStandard"><strong>Standard Shipping</strong></label>
                                        </div>
                                    </td>
                                    <td>Delivery in 5 - 7 working days</td>
                                
                                </tr>
                                
                          {{--       <tr>
                                    <td style="vertical-align: text-top;">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" id="checkoutShippingExpress" name="shipping" type="radio">
                                            <label class="custom-control-label text-body text-nowrap" for="checkoutShippingExpress"><strong>Delivery Slot</stong></label>
                                        </div>
                                    </td>
                                    <td>
                                        <ul class="no-ul-list">
                                            <li>
                                                <input id="d1" class="checkbox-custom" name="d1" type="radio">
                                                <label for="d1" class="checkbox-custom-label">10-10-2020 [ 10pm - 11 Pm ]</label>
                                            </li>
                                            <li>
                                                <input id="d2" class="checkbox-custom" name="d1" type="radio">
                                                <label for="d2" class="checkbox-custom-label">10-10-2020 [ 11pm - 12 Pm ]</label>
                                            </li>
                                            <li>
                                                <input id="d3" class="checkbox-custom" name="d1" type="radio">
                                                <label for="d3" class="checkbox-custom-label">12-10-2020 [ 10Am - 11 Am ]</label>
                                            </li>
                                            <li>
                                                <input id="d4" class="checkbox-custom" name="d1" type="radio">
                                                <label for="d4" class="checkbox-custom-label">13-10-2020 [ 08pm - 09 Pm ]</label>
                                            </li>
                                            <li>
                                                <input id="d5" class="checkbox-custom" name="d1" type="radio">
                                                <label for="d5" class="checkbox-custom-label">14-10-2020 [ 10pm - 11 Pm ]</label>
                                            </li>
                                    
                                    </td>
                                
                                </tr> --}}
                                
                                <tr>
                                    <td>
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" id="collect_from_store" name="shipping" type="radio" value="2">
                                            <label class="custom-control-label text-body text-nowrap" for="collect_from_store"><strong>Collect From Store</strong></label>
                                        </div>
                                    </td>
                                    <td>
                                        Jayanagar, Bangalore</br>
                                        <p class="mb-0 text-success"></p>
                                    </td>
                                
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        
                        
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                
                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="btn btn-secondary btn-sm">Review Items <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <span class="fa fa-box"></span> Order Items
                            </a>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="p-3">
                            <div class="card cart-table">
                                <div class="table-responsive cart_item">
                                    @include($theme.'.admin.sub_view.order_items_ajax')
                                </div>
                                
                                <!-- <a href="checkout.html"><button class="btn btn-secondary btn-lg btn-block text-left" type="button"><span class="float-left"><i class="mdi mdi-cart-outline"></i> Proceed to Checkout </span><span class="float-right"><strong>Ks 1200.69</strong> <span class="mdi mdi-chevron-right"></span></span></button></a> -->
                            </div>
                            
                            
                            <div class="card-body text-right">
                                <button type="button" data-toggle="collapse" data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour" class="btn btn-success mb-2 btn-md">Make Payment <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <a class="full-width collapsed" type="button" data-toggle="collapse" data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
                                <span class="fa fa fa-credit-card"></span> Payment
                            </a>
                        </h5>
                    </div>
                    <div id="collapsefour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">                            
                            <div class="">
                                <h6 class="mb-4">Choose Payment Type</h6>
                                <div class="list-group list-group-sm mb-5">
                                    
                                    @foreach($paymentModeList as $payment)
                                    <div class="list-group-item ">
                                        <!-- Radio -->
                                        <div class="custom-control custom-radio">
                                            <!-- Input -->
                                            <input class="custom-control-input" id="{{ $payment->id }}" name="payment" type="radio" data-toggle="collapse" data-action="hide" aria-expanded="true" value="{{ $payment->id }}">
                                            <!-- Label -->
                                            <label class="custom-control-label font-size-sm text-body text-nowrap mb-0" for="{{ $payment->id }}">{{ $payment->name_en }}</label>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            
                            </div>
                            
                            <!-- <div class="text-center">
                               <div class="col-lg-10 col-md-10 mx-auto order-done">
                                  <i class="mdi mdi-check-circle-outline text-secondary"></i>
                                  <h4 class="text-success">Congrats! Your Order has been Accepted..</h4>
                                  <p>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis tincidunt est, et euismod purus suscipit quis. Etiam euismod ornare elementum. Sed ex est, Sed ex est, consectetur eget consectetur, Lorem ipsum dolor sit amet...
                                  </p>
                               </div>
                               <div class="text-center">
                                  <a href="shop.html"><button type="submit" class="btn btn-secondary mb-2 btn-lg">Return to store</button></a>
                               </div>
                            </div> -->
                            <button type="submit" class="btn btn-block btn-success mb-2" id="place_order_btn">Place Order</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-12 col-sm-12 col-12 wow slideInRight">
        
        <div class="gift-box">
            <div class="short_products_info_body mb-3 mt-0">
                
               <div class="single_search_boxed card">
                    <div class="widget-boxed-header">
                        <h4><a href="#productinfo" data-toggle="collapse" class="collapsed" aria-expanded="false" role="button"><i class="fa fa-tag"></i> Apply Coupon Code</a></h4>
                    </div>
                    <div class="widget-boxed-body collapse" id="productinfo" data-parent="#productinfo" style="">
                        <div class="side-list no-border">
                            <!-- Single Filter Card -->
                            <div class="single_filter_card">
                                <div class="card-body pt-0">
                                @php
                                    $style = "display:none";
                                    if(!empty($promo_code_value)) {  $style = "display:block"; }
                                @endphp
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" name="promo_code" id="promo_code" placeholder="Enter Coupon code" aria-label="Recipient's username" aria-describedby="basic-addon2" value="{{$promo_code_name}}" @if (!empty($promo_code_value)) readonly @endif>
                                        <div class="input-group-append">
                                            <button  @if (!empty($promo_code_value)) style="display:none" @endif id="apply_promo_code" class="btn btn-warning btn-sm pl-4 pr-4" type="button">Apply</button>
                                            <button @if (empty($promo_code_value)) style="display:none" @endif id="remove_promo_code" class="btn btn-warning btn-sm pl-4 pr-4">@lang('messages.Remove')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
            
            </div>
        </div>
        
        <div class="cart_detail_box card mb-4">
            <div class="card-header">
                
                    <h5 class="mb-0 text-center">Order Summary</h5>
               
            </div>
            <div class="card-body" id="order-summary-div">
                <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">
                    <li class="list-group-item d-flex">
                        <span>Subtotal</span> <span class="ml-auto font-size-sm">{{env('CURRENCY_CODE') .' '. $subtotal }}</span>
                    </li>
                    @if($discount != '0.00') 
                    <li class="list-group-item d-flex">
                        <span>Discount</span> <span class="ml-auto font-size-sm">- {{env('CURRENCY_CODE') .' '. $discount }}</span>
                    </li>
                    @endif
                    @if(!empty($promo_code_value)) 
                     <li class="list-group-item">
                        <p style="display: inline">Promocode <br>
                            <span class="promo_code_div">({{ $promo_code_name}})</span>
                            <strong class="float-right text-success order_promoCode">- {{ env("CURRENCY_CODE") .' '.number_format($promo_code_value,2)}}</strong>
                        </p>
                    </li>
                    @endif
                    @if($delivery_charge != '0.00')
                    <li class="list-group-item d-flex">
                        <span>Delivery Charge</span> <span class="ml-auto font-size-sm">+ {{env('CURRENCY_CODE') .' '. $delivery_charge }}</span>
                    </li>
                    @endif
                    @if($gst_amount != '0.00') 
                    <li class="list-group-item d-flex">
                        <span>GST ({{$gst_percent}}%)</span> <span class="ml-auto font-size-sm">+ {{env('CURRENCY_CODE') .' '. $gst_amount }}</span>
                    </li>
                    @endif
                    <li class="list-group-item d-flex font-size-lg font-weight-bold">
                        <span>Total</span> <span class="ml-auto font-size-sm">{{env('CURRENCY_CODE') .' '. $total }}</span>
                    </li>
                
                </ul>
            </div>
          {{--   <div class="card-footer">
                <small class="text-danger"><i class="fa fa-piggy-bank"></i> You Saved basket value {{ $discount }}</small>
            
            </div> --}}
        </div>
    
    </div>
    
</div>
</div>
</form>

<div id="myModal" class="modal fade add-address-mode" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header text-center" style="background: #f0f0f0;">
                <span class="mod-close" data-dismiss="modal" aria-hidden="true"><i class="ti-close"></i></span>
                <h4 class="modal-title address_title">Add Address</h4>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            <div class="modal-body ">
                <!-- Single Filter Card -->
                <div class="single_filter_card">
                    <div class="card-body pt-0">
                        {!!Form::open(array('class'=>'','id'=>'address_form','files' => true));!!}
                        <div class="address-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">House / Flat No<span class="required">*</span></label>
                                        <input class="form-control border-form-control" id="house_no" name="house_no"  type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Apartment Name</label>
                                        <input class="form-control border-form-control" id="apartment_name" name="apartment_name" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Street Details<span class="required">*</span></label>
                                        <input class="form-control border-form-control" id="street" name="street" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Landmark</label>
                                        <input class="form-control border-form-control" id="landmark" name="landmark" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Phone <span class="required">*</span></label>
                                        <input class="form-control border-form-control" value="" name="phone_number" id="phone_number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;" type="number">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Contact Person<span class="required">*</span></label>
                                        <input class="form-control border-form-control" name="contact_person" id="contact_person" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">City<span class="required">*</span></label>
                                        <input class="form-control border-form-control" name="city" id="city" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">State<span class="required">*</span></label>
                                        <input class="form-control border-form-control" name="state" id="state" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">Pin Code<span class="required">*</span></label>
                                        <input class="form-control border-form-control" name="pin_number" id="pin_number" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <!-- Gender -->
                                    <div class="form-group">
                                        <label class="control-label">Location Type<span class="required">*</span></label>
                                        <select name="address_type" id="address_type" class="form-control border-form-control">
                                            <option>Select Type</option>
                                            <option value="Home">Home</option>
                                            <option value="Work">Work</option>
                                            <option value="Other">Others</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="address_id" name="address_id" class="" value="">
                            <!-- <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">@lang('messages.Address') <span class="required">*</span></label>
                                        <input id="address" type="text" onKeyPress="return disableEnterKey(event)" name="address" value="" placeholder="Search your place and press enter" class="input-text select_place validate-place-map form-control" maxlength="100" />
                                        <div id="map" style=" width: 100%; height:200px;margin-top:10px;float:left;margin-bottom:15px"></div>
                                        <div class="gllpMap"></div>
                                        <input type="hidden" name="latitude" class="gllpLatitude" id="lat" value="">
                                        <input type="hidden" name="longitude" class="gllpLongitude" id="lng" value="">
                                        <input type="hidden" id="address_id" name="address_id" class="" value="">
                                    </div>
                                </div>
                            </div> -->
                            <!-- <div class="custom-control custom-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input" id="customCheckbill">
                                        <label class="custom-control-label" for="customCheckbill">Use my delivery address as my billing address</label>
                            </div> -->
                            <div class="text-right">
                                <button type="submit" name="submit" class="btn btn-dark mb-2 py-2 btn-info address_action">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
                {!!Form::close();!!}
            </div>
        </div>
        <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div> -->
    </div>
</div>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="{{ URL::asset($theme.'/assets/js/vendor/jquery-3.4.1.min.js') }}"></script>

<script>
    $(document).on('click', '.update_cart', function() {
        update_cart(this);
    });
    var timer = '';
    $(document).on('keyup touchend', '.count_new', function() {
        var product = this;
        clearTimeout(timer);
        timer = setTimeout(function() {
            update_cart(product);
        },300);
    });

    function update_cart(product) {
        var parent = $(product).parent();
        var qty = $(parent).find('.count_new').val();
        var clickedBy = $(product).attr('data-clicked-by');
        if(clickedBy == 'plus') {
            qty ++;
        } else if (clickedBy == 'minus') {
            qty --;
        }
        if(qty == '0' || qty == '') {  
            toastr.error('oops! there should be atleast one quantity. please use remove icon if need to remove product from cart'); 
            return false;
        }
        var id = $(parent).attr('data-id');
        var name = $(parent).attr('data-name');
        var image = $(parent).attr('data-image');
        var price = $(parent).attr('data-price');
        var gst_amount = $(parent).attr('data-gst-amount');
        var gst_percent = $(parent).attr('data-gst-percent');
        var discounted_price = $(parent).attr('data-discounted-price');
        var sub_category = $(parent).attr('data-sub-category');
        var product_size = $(parent).attr('data-product-size');
        var group_name_slug = $(parent).attr('data-group-name-slug');
        var token = $('meta[name="csrf-token"]').attr('content');
        var shipping = $('input[name="shipping"]:checked').val();

        var url = '{{ route("cart.update") }}';
        var data = {'qty' : qty, 'id' : id, 'name' : name, 'price' : price, 'discounted_price' : discounted_price, 'sub_category' : sub_category, 'product_size' : product_size, 'image' : image, 'gst_percent' : gst_percent, 'gst_amount' : gst_amount, 'group_name_slug' : group_name_slug, 'from': 'checkout', shipping: shipping};

        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'json',
            beforeSend: function() {
                $('.count_new').attr('disabled', true);
            },
            success: function (resp) {
                if (resp.http_code != 200) {
                    toastr.error(resp.message);
                }
                if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    $('.count_new').attr('disabled', false);
                    $('.'+resp.data.id).html(resp.data.order_item);
                    $('#order-summary-div').html(resp.data.order_summary);
                }
            },
            error: function (err) {

            }
        });

    };

    $(document).on('click', '.remove_cart_checkout', function() {
        var id = $(this).attr('data-id'); 
        var qty = '0';
        var from = 'remove_checkout';
        var token = $('meta[name="csrf-token"]').attr('content');

        var url = '{{ route("cart.update") }}';
        var data = {'qty' : qty, 'id' : id, 'from' : from};

        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function (resp) {
                if (resp.http_code != 200) {
                    toastr.error(err_msg);
                }
                if (resp.http_code == 200) {
                    $('.'+resp.data.id).remove();
                    var product_count = Number($('#'+resp.data.sub_category).attr('data-product-count'));
                    var final_count = product_count-1;
                    if(final_count != '0') {
                        $('#'+resp.data.sub_category).text(final_count+' Item(s)');
                    } else {
                        $('#sub-category-'+resp.data.sub_category).remove();
                    }
                    $('#order-summary-div').html(resp.data.order_summary);  
                }
            },
            error: function (err) {

            }
        });
    });
    $(document).on("submit", "#place_order", function(e) {
        e.preventDefault();
        token = $('meta[name="csrf-token"]').attr('content');
        data = new FormData(this);
        var url = "{{ route('order.placeorder') }}";
        $.ajax({
            url: url,
            headers: {
                "X-CSRF-TOKEN": token,
            },
            data: data,
            type: "POST",
            processData: false,
            contentType: false, 
            beforeSend: function() {
                $('#place_order_btn').html('<i class="fa fa-spinner fa-spin"></i>');
                $('#place_order_btn').addClass('buttonload');
                $('#place_order_btn').attr('disabled',true);
            },
            success: function(resp) {
                if(resp.http_code != 200) {
                    toastr.error(resp.message);
                    $('#place_order_btn').attr('disabled',false);
                    $('#place_order_btn').removeClass('buttonload');
                    $('#place_order_btn').html('Place Order');
                }
                if(resp.data.payment_mode == '7') { 
                    var options = {
                        "key": "{{ session()->get('razorpay_key') }}",
                        "amount": resp.data.amount,
                        "currency": 'INR',
                        "name": 'HITESH',
                        "description": 'HITESH ORDER TRANSACTION',
                        "order_id": resp.data.razorpay_order_id,
                        "handler": function(response) { 
                            process_razorpay_order(response,resp.data.order_number);
                        },
                        "modal": {
                            "ondismiss": function(){
                                failure_razorpay_order('',resp.data.order_number,resp.data.razorpay_order_id);
                            }
                        },
                        "prefill": {
                            "name": resp.data.customer_email,
                            "email": resp.data.customer_email,
                            "contact": resp.data.customer_mobile
                        },
                        "notes": {
                            "address": ''
                        },
                        "theme": {
                            "color": "#3399cc"
                        },
                        "headers": {
                            'X-CSRF-TOKEN': token
                        }
                    };
                    var rzp1 = new Razorpay(options);
                    rzp1.on('payment.failed', function (response){   
                        failure_razorpay_order(response,resp.data.order_number);
                    });
                    rzp1.open();
                    return false;
                }
                if(resp.data.payment_mode == '8') { 
                    $(location).attr("href", resp.data.cashfree_callback_url);
                    return false;
                }
                toastr.success(resp.message);
                $('#place_order_btn').removeClass('buttonload');
                $('#place_order_btn').html('Place order');
                var orderDetail = "{{ url('/orders/view')}}"+'/'+resp.data.order_number;
                $(location).attr("href", orderDetail);
            },
            error: function(err) {},
        });
    });
    $(document).ready(function () {
        $('#collect_from_store').change(function(){
            order_summary_content('collect');
        });
        $('#checkoutShippingStandard').change(function(){
            order_summary_content();
        });
        $('#address_form').submit(function (e) {
            e.preventDefault();
            var token, url, data;
            token = $('meta[name="csrf-token"]').attr('content');
            url = '{{url('/address/store')}}';
            data = new FormData(this);
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: data,
                processData: false,
                contentType: false,
                type: 'POST',
                datatype: 'JSON',
                success: function (resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        toastr.success(resp.message);
                        var loc = "{{ route('order.checkout')}}";
                        $(location).attr('href', loc);
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                },
            });
        });

        $(".add_address").click(function() {
            $(".address_title").text("Add Address");
            $(".address_action").text("Save");
            $("#address_id").val('');
            $("#address_type").val('').change();
            $("#house_no").val('');
            $("#apartment_name").val('');
            $("#mobile_number").val('');
            $("#landmark").val('');
            $("#contact_person").val('');
            $("#address").val('');
            $("#lat").val('');
            $("#lng").val('');
            $("#city").val('');
            $("#state").val('');
            $("#pin_number").val('');
            $('input[name=address_type][value=Home]').prop('checked', true);
        });

        $(".edit_address").click(function() {
            $(".address_title").text("Edit Address");
            $(".address_action").text("Update");
            var address_id = $(this).data('address-id');
            var township_id = $(this).data('township');
            var address_type = $(this).data('address-type');
            var house_no = $(this).data('house-no');
            var apartment = $(this).data('apartment-name');
            var mobile = $(this).data('mobile-number');
            var landmark = $(this).data('landmark');
            var address = $(this).data('address');
            var street = $(this).data('street');
            var contact_person = $(this).data('contact_person');
            var city = $(this).data('city');
            var state = $(this).data('state');
            var pin = $(this).data('pin-number');

            // myInitialize(latitude, longitude);
            $("#address_id").val(address_id);
            $("#address_type").val(address_type);
            $('input[name=address_type][value=' + address_type + ']').prop('checked', true);
            $("#township_id").val(township_id).change();
            $("#house_no").val(house_no);
            $("#apartment_name").val(apartment);
            $("#phone_number").val(mobile);
            $("#street").val(street);
            $("#contact_person").val(contact_person);
            $("#landmark").val(landmark);
            $("#city").val(city);
            $("#state").val(state);
            $("#pin_number").val(pin);
            $('#myModal').modal();
        });

        $(".set_deliver_address").click(function(e) {
            //make all delivery here btn to dark
            $(".set_deliver_address").addClass('btn-dark');
            $(".set_deliver_address").css('background-color', '');
            //add green color for clicked btn
            $(this).css('background-color', 'green');
            //assign address id to addres field (hidden)
            var address_id = $(this).attr('data-address-id');
            $('#address').val(address_id);

            $('#select_shipping').trigger('click');
        });

        $('#apply_promo_code').click(function (e) {
            e.preventDefault();
            token = $('meta[name="csrf-token"]').attr('content');
            url = "{{url('promo-code/apply')}}";
            promo_code = $('#promo_code').val();
            if(promo_code == "") {
                toastr.warning("Please fill promo code");
                return false;
            }
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: {promo_code:promo_code},
                type: 'POST',
                datatype: 'JSON',
                success: function (resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        $("#apply_promo_code").hide();
                        $("#remove_promo_code").show();
                        $('#apply_promo_code_div').show();
                        $('#promo_code').attr('disabled', true);
                        collectFromStore = $('#collect_from_store:checked').val();
                        if(collectFromStore == undefined) {
                            order_summary_content();
                        } else {
                            order_summary_content('collect');
                        }
                        toastr.success(resp.message);
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                },
            });
        });

        $('#remove_promo_code').click(function (e) {
            e.preventDefault();
            var token, url, data;
            token = $('meta[name="csrf-token"]').attr('content');
            url = "{{url('promo-code/remove')}}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                type: 'DELETE',
                datatype: 'JSON',
                success: function (resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        $("#apply_promo_code").show();
                        $("#remove_promo_code").hide();
                        $('#apply_promo_code_div').hide();
                        $('#promo_code').val('');
                        $('#promo_code').attr('disabled', false);
                        $('#promo_code').prop('readonly', false);
                        collectFromStore = $('#collect_from_store:checked').val();
                        if(collectFromStore == undefined) {
                            order_summary_content();
                        } else {
                            order_summary_content('collect');
                        }
                        toastr.success(resp.message);
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                },
            });
        });
    });

    function order_items_content() {
        var token, url;
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('/order-items-content')}}';;
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            type: 'get',
            datatype: 'JSON',
            success: function(resp) {
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    if(resp.data != 'null') { $('.cart_item').html(resp.data); }
                    $(location).attr('href', "{{ route('main.home')}}");
                }
            },
            error: function(err) {
            }
        });
    }

function order_summary_content($collect = '') {
    var token, url, data;
    token = $('meta[name="csrf-token"]').attr('content');
    url = "{{ url('/order-summary-content') }}";
    if($collect != '')
    {
        data = {'action':'collect'}
    }
    $.ajax({
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        type: 'get',
        data:data,
        datatype: 'JSON',
        success: function(resp) {
            if (resp.http_code == 400) {
                toastr.warning(resp.message);
            } else if (resp.http_code == 200) {
                $('#order-summary-div').html(resp.data);
            }
        },
        error: function(err) {
        }
    });
}

    function process_razorpay_order(response, order_id) {
        var data = {
            'razorpay_payment_id': response.razorpay_payment_id,
            'razorpay_order_id': response.razorpay_order_id,
            'razorpay_signature': response.razorpay_signature,
        };
        var token = $('meta[name="csrf-token"]').attr("content");
        $.ajax({
            url: "{{ url('/razor-callback') }}",
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function(resp) {
                if (resp.http_code == 400) {
                    err_msg = resp.message.replace(/, \\n /g, '<br>');
                    toastr.error(err_msg);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+order_id;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 401) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                } else if (resp.http_code == 500) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 501) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                }
            }
        });
    }
    function failure_razorpay_order(response = '', order_id, razorpay_order_id = '') {
        if(response != '')
        {
            var data = {
                'razorpay_payment_id': response.error.metadata.payment_id,
                'razorpay_order_id': response.error.metadata.order_id,
                'razorpay_failed_reason': response.error.reason,
                'order_id': order_id
            }; 
        } else {
            var data = {
                'razorpay_payment_id': '',
                'razorpay_order_id': razorpay_order_id,
                'razorpay_failed_reason': '',
                'order_id': order_id
            }; 
        }
        var token = $('meta[name="csrf-token"]').attr("content");
        $.ajax({
            url: "{{ url('/razor-fail-callback') }}",
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function(resp) {
                if (resp.http_code == 400) {
                    toastr.error(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+resp.data;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+resp.data;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 401) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                } else if (resp.http_code == 500) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 501) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                }
            }
        });
    }

    function process_cashfree_order(response, order_id) {
        var data = {
            // 'cashfree_payment_id': response.cashfree_payment_id,
            'cashfree_order_id': response.cashfree_order_id,
            // 'cashfree_signature': response.cashfree_signature,
        };
        var token = $('meta[name="csrf-token"]').attr("content");
        $.ajax({
            url: "{{ url('/cashfree-callback') }}",
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function(resp) {
                if (resp.http_code == 400) {
                    err_msg = resp.message.replace(/, \\n /g, '<br>');
                    toastr.error(err_msg);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+order_id;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 401) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                } else if (resp.http_code == 500) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 501) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                }
            }
        });
    }
    function failure_cashfree_order(response = '', order_id, cashfree_order_id = '') {
        if(response != '')
        {
            var data = {
                'cashfree_payment_id': response.error.metadata.payment_id,
                'cashfree_order_id': response.error.metadata.order_id,
                'cashfree_failed_reason': response.error.reason,
                'order_id': order_id
            }; 
        } else {
            var data = {
                'cashfree_payment_id': '',
                'cashfree_order_id': cashfree_order_id,
                'cashfree_failed_reason': '',
                'order_id': order_id
            }; 
        }
        var token = $('meta[name="csrf-token"]').attr("content");
        $.ajax({
            url: "{{ url('/razor-fail-callback') }}",
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function(resp) {
                if (resp.http_code == 400) {
                    toastr.error(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+resp.data;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    var orderDetail = "{{ url('/orders/view')}}"+'/'+resp.data;
                    $(location).attr('href', orderDetail);
                } else if (resp.http_code == 401) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                } else if (resp.http_code == 500) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 501) {
                    toastr.warning(resp.message);
                    var home = "{{ url('/')}}";
                    $(location).attr('href', home);
                }
            }
        });
    }
</script>
<style>
   .select2-container{width:100% !important;}

   /*remove arrow in number field*/
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }

</style>
@endsection