@extends('layouts.main')

@section('content')
  <section class="users-list-wrapper">
<meta name="csrf-token" content="{{ csrf_token() }}" />

        <div class="users-list-table">
            <div class="card">
                <!-- ********** ALERT MESSAGE START******* -->
                <div class="card-header">
              <!-- right column -->
                  <div class="col-md-12">
                     <!-- Horizontal Form -->
                     <div class="box box-info " >
                           <input type="hidden"  id="hidden_update_userId" name="hidden_update_userId">
                           <input type="hidden"  id="hidden_update_addressId" name="hidden_update_addressId">
                           <input type="hidden"  id="hidden_update_OrderId" name="hidden_update_OrderId">
                           <input type="hidden"  id="hidden_update_itemQuantity" name="hidden_update_itemQuantity">
                        </div>  
                        <h4 class="box-title text-info">Address Details : </h4>
                <div class="card-content">
                    <div class="card-body">
                         <div class="row">
                                <div class="col-md-4">
                                  <div class="form-group">
                                        <div class="controls">
                                            <label>Name <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" placeholder="Name" name="name" id="customer_name"
                                                data-validation-required-message="This Name field is required"
                                                required>
                                        </div>
                                    </div>
                                      <div class="form-group">
                                        <div class="controls">
                                            <label>Address <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" placeholder="Address" name="address" id="address"
                                                data-validation-required-message="This Address field is required"
                                                required>
                                        </div>
                                    </div>
                           </div>
                              <div class="col-md-4">
                                  <div class="form-group">
                                        <div class="controls">
                                            <label>Landmark <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" placeholder="landmark"  name="landmark" id="landmark"
                                                data-validation-required-message="This landmark field is required"
                                                required>
                                                
                                        </div>
                                    </div>
                                     <div class="form-group">
                                        <div class="controls">
                                            <label>Mobile Number <span class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" placeholder="Mobile Number" name="mobilenumber" id="mobile_number"
                                                data-validation-required-message="This Mobile Number field is required"
                                                required>
                                                 <label></label>
                                            <button type="button" id="addAddress" class="btn btn-warning float-right" onclick="sendOtp()">Verify Otp</button>
                                        </div>
                                    </div>
                                   
                           </div>
                            <div class="col-md-4">
                                  <div class="form-group">
                                        <div class="controls">
                                             <label for="">Select City</label>
                                             <select name="adminCity" class="form-control input-lg dynamic" id="adminCity">
                                                <option value="all" {{ request()->type == null ? 'selected' : '' }}>All</option>
                                                @if(isset($cities)) 
                                                    @forelse($cities as $city)
                                                        <option value="{{ $city->id }}">
                                                            {{ $city->name }}</option>
                                                    @empty
                                                    @endforelse       
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                     <div class="form-group">
                                        <div class="controls">
                                           <label></label>
                                            <button type="button" id="save_address" class="btn btn-warning float-right" onclick="save_addressManual_order()">Save Address</button>
                                        </div>
                                    </div>
                                    </div>
                           </div>
                           </div></div>
                             <div class="modal" tabindex="-1" role="dialog" id="modalverify_otp">
                              <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                    <div class="alert alert-danger" style="display:none"></div>
                                    <div class="modal-header">
                                       <h5 class="modal-title">
                                           Verify OTP</h5>
                                       <button type="button" class="close" id="close_addVehicleModal" name="close_addVehicleModal" data-dismiss="modal" aria-label="frame_Close">
                                       <span aria-hidden="true">&times;</span>
                                       </button>
                                    </div>
                                    <div class="modal-body">
                                       <div class="row">
                             <div class="form-group">
                                        <div class="controls">
                                            <label for="">Verify Otp</label>
                                 <input type="text" class="form-control" name="verifyOtp" id="verifyOtp" required >
                                  </div></div>     
                                   <div class="modal-footer">
                                  <button type="submit" onclick="verify_otpMo()" class="btn btn-primary">Verify Otp</button></div> 
                             
        </div></div> </div>
        </div></div>
                           <!-- /.box-body -->
                           <hr>
                           <div class="row">
                              <div class="col-lg-12 ">
                                 <div class="col-lg-12">
                                    <div class="box box-info">
                                       <!-- /.box-header -->
                                       <div class="box-body ">

                                        <h4 class="box-title text-info">Cart Details : </h4>
                                        <div class="row">
                                        <div class="col-md-4">
                                                    <label for="">Select User</label><br/>
                                                    <select name="user_name" id="user_name" onChange="updateUser_id()"
                                                        class="form-control select2">
                                                        <option value="0" >Select User</option>
                                                        @forelse($users as $user)
                                                            <option value="{{ $user->id }}" >
                                                                {{ $user->display_name }}</option>
                                                        @empty
                                                        @endforelse
                                                    </select>
                                                    Address : <label id="lblAddress" ></label>
                                            </div>
                                          <div class="col-md-4">
                                                    <label for="">Select Shop</label><br/>
                                                    <select name="shop_name" id="shop_name" onChange="getshopsProductsWithPrice()"
                                                        class="form-control select2">
                                                        <option value="0" >Select Shop</option>
                                                        @forelse($shops as $shop)
                                                            <option value="{{ $shop->id }}" {{ request()->shop == $shop->id ? 'selected' : '' }}>
                                                                {{ $shop->name }}</option>
                                                        @empty
                                                        @endforelse
                                                    </select>
                                            </div>
                                            
                                            <div class="col-md-4">
                                             
                                               <label>Search</label><br/>
                                                <select class="select2 form-control" id="shop_product_stocklst" name="shop_product_stockList"  onChange="getProductWithPrice()"
                                                  data-placeholder="--Products -- Stocks..." required>
                                                   
                                              
                                                </select>
                                             
                                            </div>
                                           </div>
                                  <div class="card-content">
                                    <div class="card-body">
                                        <!-- datatable start -->
                                        <div class="table-responsive">
                                            <table id="cart_data" class="table zero-configuration">
                                                <thead>
                                                    <tr>
                                                    <th scope="col" class="card-title">Cart Id</th>
                                                    <th scope="col" class="card-title">Product Id</th>
                                                    <th scope="col" class="card-title">Product Name</th>
                                                    <th scope="col" class="card-title text-center">Purchase Price(₹)</th>
                                                    <th scope="col" class="card-title text-center"></th>
                                                    <th scope="col" class="card-title text-center">Item</th>
                                                    <th scope="col" class="card-title text-center"></th>
                                                    <th scope="col" class="card-title text-center">Total Amount(₹)</th>
                                                    <th scope="col" class="card-title text-center" style="display:none;">Stock id</th>
                                                </tr>
                                             </thead>
                                             <tbody>
                                               <tr>
                                                   
                                               </tr>
                                             </tbody>
                                          </table>
                                       </div></div>
                                       <!-- /.box-body -->
                                    </div> </div>
                                 </div>
                                 <!-- /.box -->
                              </div>
                              
                                                          
                              <div class="col-md-12">
                                 <div class="row">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                           
                                          <table  class="col-md-12">
                                             <tr>
                                                <th class="text-right" style="font-size: 17px;">Subtotal</th>
                                                <th class="text-right" style="padding-left:10%;font-size: 17px;">
                                                     <h4>
                                                  ₹ <b id = "subtotal_amt" >0
    </b>        </h4>
                                                           
                                                </th>
                                             </tr>
                                             <tr>
                                                <th class="text-right" style="font-size: 17px;">GST Charges</th>
                                                <th class="text-right" style="padding-left:10%;font-size: 17px;">
                                                   <h4>
                                                    ₹ <b id="gstcharges" name="gstcharges">0.00</b>                                                  </h4>
                                                </th>
                                             </tr>
                                               <tr>
                                                <th class="text-right" style="font-size: 17px;">Delivery Charges</th>
                                                <th class="text-right" style="padding-left:10%;font-size: 17px;">
                                                   <h4>
                                                    ₹ <input type="number" id="delivery_charge" name="delivery_charge" onchange="addDelivery_charge()" value="0.00" />                                                  </h4>
                                                </th>
                                             </tr>
                                             <tr style="display: none;">
                                                <th class="text-right" style="font-size: 17px;">Round Off                                                  
                                                    <i class="hover-q " data-container="body" data-toggle="popover" data-placement="top" data-content="Go to Site Settings-> Site -> Disable the Round Off(Checkbox)." data-html="true" data-trigger="hover" data-original-title="" title="Do you wants to Disable Round Off ?">
                                                      <i class="fa fa-info-circle text-maroon text-black hover-q"></i>
                                                    </i>
                                                  
                                                </th>
                                                <th class="text-right" style="padding-left:10%;font-size: 17px;">
                                                   <h4>
                                                    ₹ <b id="round_off_amt" name="tot_round_off_amt">0.00</b></h4>
                                                </th>
                                             </tr>
                                             <tr>
                                                <th class="text-right" style="font-size: 17px;">Grand Total</th>
                                                <th class="text-right" style="padding-left:10%;font-size: 17px;">
                                                   <h4>
                                                    ₹ <b id="total_amt" name="total_amt">0.00</b></h4>
                                                </th>
                                             </tr>
                                          </table>
                                       </div>
                                       <div class="d-flex justify-content-between">
                                               <div claas="my-3">
                                                   <label for="">Delivery Reference Location :</label><br/>
                                                   <input placeholder="Referece Location" type="text" id="maualdelivery" class="form-control">
                                               </div>
                                               <div>
                                                   <label for="">Instruction :</label><br/>
                                                   <textarea class="form-control" id="instruction" placeholder="Enter Instruction" rows="4" cols="50"></textarea>
                                           </div>
                                    
                                       </div>
                                          <div><button type="submit" style="float:right;" onclick="add_tocart()" class="btn btn-primary">Add To Cart</button></div>
                                    </div>
                                    
                                 </div>
                              </div>
                               

  <hr>
                              <div class="col-xs-12 ">
                                 <div class="col-sm-12">
                                       <div class="box-body ">

                                          <div class="col-md-12 payments_div payments_div_">
                                            <h4 class="box-title text-info">Make Payment : </h4>
                                          <div class="box box-solid bg-gray">
                                            <div class="box-body">
                                              <div class="row">
                                         
                                                <div class="col-md-6">
                                                  <div class="">
                                                  <label for="amount">Amount</label>
                                                    <input type="text" class="form-control text-right paid_amt only_currency" id="pay_amount" name="pay_amount" placeholder="" >
                                                      <span id="amount_msg" style="display:none" class="text-danger"></span>
                                                </div>
                                               </div>
                                                <div class="col-md-6">
                                                  <div class="">
                                                    <label for="payment_type">Payment Type</label>
                                                    <select class="form-control select2" id='payment_type' name="payment_type">
                                                      <option value=''>-Select-</option><option value='0'>Cash</option><option value='1'>Paytm</option><option value='2'>Google Pay</option><option value='3'>Phonepay</option>                                            </select>
                                                    <span id="payment_type_msg" style="display:none" class="text-danger"></span>
                                                  </div>
                                                </div>
                                            <div class="clearfix"></div>
                                        </div>  
                                        <div class="row">
                                               <div class="col-md-12">
                                                  <div class="">
                                                    <label for="payment_note">Payment Note</label>
                                                    <textarea type="text" class="form-control" id="payment_note" name="payment_note" placeholder="" ></textarea>
                                                    <span id="payment_note_msg" style="display:none" class="text-danger"></span>
                                                  </div>
                                               </div>
                                                
                                            <div class="clearfix">
                                                <button type="submit" style="float:right;" onclick="make_payment()" class="btn btn-primary">Make Payment</button>
                                            </div>
                                        </div>   
                                        </div>
                                        </div>
                                        </div><!-- col-md-12 -->
                                       </div>
                                       <!-- /.box-body -->
                                    </div>
                                 <!-- /.box -->
                              </div>

                              
  </div>
                           </div></div>
                     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                     <script>
                      $("#close_addVehicleModal").click(function(){
                       
                           $("#modalverify_otp").modal('hide'); 
                       });
                       
                       function addDelivery_charge()
                       {
                          var delivery_charge =  $('#delivery_charge').val() == '' ? 0 :  $('#delivery_charge').val();
                          var grand_total = (parseInt($('#subtotal_amt').html()) + parseInt($('#gstcharges').html()) + parseInt(delivery_charge));
                          $('#total_amt').html(grand_total);
                       }
                       
                         function sendOtp()
                         {
                             $.ajax({
                               type:'POST',
                               url:"{{ route('send_manualOrderOtp') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{mobile:$("#mobile_number").val()},
                               success: function(data) {
                                   if(data.status == true)
                                   {
                                        $('#modalverify_otp').modal('show');
                                   }
                                   else
                                   {
                                       alert('Invalid OTP!');
                                   }
                               }
                           });
                         }
                         
                         
                        function verify_otpMo(){
                             $.ajax({
                               type:'POST',
                               url:"{{ route('verifyOtp_manualorder') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{mobile_number:$("#mobile_number").val(),otp:$("#verifyOtp").val()},
                               success: function(data) {
                                   if(data.status == true)
                                   {
                                       alert('Otp Verified!');
                                       $('#modalverify_otp').modal('hide');
                                       $('#hidden_update_userId').val(data.userId);
                                   }
                                   else
                                   {
                                       alert('Invalid OTP!');
                                   }
                               }
                           });
                        }
                        function save_addressManual_order()
                        {
                             $.ajax({
                               type:'POST',
                               url:"{{ route('addAddress_manualOrder') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{user_id:$('#hidden_update_userId').val(),name:$("#customer_name").val(),landmark:$("#landmark").val(),city:$("#adminCity option:selected").text(),address:$("#address").val(),mobile_number:$("#mobile_number").val()},
                               success: function(data) {
                                   if(data.status == true)
                                   {
                                       alert('Address Added!');
                                       $('#hidden_update_userId').val(data.userId);
                                       $('#hidden_update_addressId').val(data.address_id);
                                       $("#customer_name").val('');
                                       $("#landmark").val('');
                                       $("#adminCity option").remove();
                                       $("#address").val('');
                                       $("#mobile_number").val('');
                                       window.location.reload();
                                   }
                                   else
                                   {
                                       alert('Try Again!');
                                   }
                               }
                           });
                        }
                        function getshopsProductsWithPrice()
                        {
                             $.ajax({
                               type:'POST',
                               url:"{{ route('getShopsProduct_withPrice') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{shop_id:$('#shop_name').val(),user_id:$('#hidden_update_userId').val()},
                               success: function(data) {
                                   //alert(data.stocks_shopDtl);
                                    $("#shop_product_stocklst option").remove();
                                    $('#cart_data tbody').empty();
                                    $('#delivery_charge').val(0);
                                    $('#subtotal_amt').html(0);
                                    $('#gstcharges').html(0);
                                    $('#total_amt').html(0);
                                    $('#pay_amount').val('');
                                    $(new Option('Select Products', '0')).appendTo('#shop_product_stocklst');
                                     $.each(data.stocks_shopDtl, function (){
                                        
                                        $("#shop_product_stocklst").append($("<option     />").val(this.id).text(this.shop_product_stockList));
                                    });
                               }
                           });
                        }
                        function getProductWithPrice()
                        {
                            var sub_total = 0;
                           // alert($("#shop_product_stocklst").val());
                            $.ajax({
                               type:'POST',
                               url:"{{ route('getProduct_withPrice') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{user_id:$('#hidden_update_userId').val(),stock_id:$("#shop_product_stocklst").val()},
                               success: function(data) {
                                   //alert(data.product_dtl.name);
                                   var product_name = data.product_dtl.name;
                                   var price = data.product_dtl.price;
                                   var product_id = data.product_dtl.product_id;
                                   var cart_id = data.cart_id;
                                   var dc = parseInt(data.delivery_charge);
                                   var gst_charge = parseInt(data.gst);

                                    var data="<tr><td>"+ cart_id +"</td><td>"+ product_id +"</td>";
                                    data +="<td>"+ product_name +"</td><td>" + price + "</td><td> <button type='submit' class='btn-outline-info' data-icon='warning-alt' onclick='add_item("+ product_id +")'>"
                        + " <i class='bx bx-add'></i>+</button></td><td>1</td><td><button type='submit' class='btn-outline-info' data-icon='warning-alt' onclick='remove_item("+ product_id +")'><i class='bx bx-add' ></i>-</button></td><td>"+ price +"</td><td style='display:none;'>"+ $("#shop_product_stocklst").val() +"</td></tr>";
                                    
                                     $('#cart_data').append(data);
                                     sub_total = parseInt(parseInt($('#subtotal_amt').html())) + parseInt(price); //alert(sub_total);
                                     $('#delivery_charge').val(dc);
                                     $('#subtotal_amt').html(sub_total);
                                     $('#gstcharges').html(gst_charge);
                                    //  console.log(sub_total , gst_charge , dc)
                                     $('#total_amt').html(sub_total + gst_charge + dc);
                                     $('#pay_amount').val(sub_total + gst_charge + dc);
                               }
                           });
                        }
                       function add_item(selected_productId)
                       {
                          // alert(product_id);
                          $('#delivery_charge').val(0);
                           var sum = 0; var cart_id = 0; var item_quantity = 0; var product_total = 0; var stockId =0;var item_price = 0;
                           var user_id = $('#hidden_update_userId').val();
                           
                               $("#cart_data tr").each(function () {
                                    var self = $(this);
                                    var productId = self.find("td:eq(1)").text().trim();
                                    
                                    
                                    if(productId == selected_productId)
                                    {
                                        cart_id = self.find("td:eq(0)").text().trim();
                                        //alert(parseInt(self.find("td:eq(2)").text().trim()) + parseInt(self.find("td:eq(2)").text().trim()));
                                        item_quantity =  parseInt(self.find("td:eq(5)").text().trim()) + 1;
                                        self.find("td:eq(5)").text(item_quantity);
                                        item_price =  parseInt(self.find("td:eq(3)").text().trim()) * item_quantity;
                                       //alert(item_price);
                                       stockId = self.find("td:eq(8)").text();
                                        self.find("td:eq(7)").text(item_price);
                                    }
                                    if($.isNumeric(self.find("td:eq(7)").text())){
                                        sum += parseFloat(self.find("td:eq(7)").text());
                                        
                                        product_total = sum;
                                        var gst_charge = 0;
                                        var dc = parseInt($('#delivery_charge').val());
                                        $('#subtotal_amt').html(sum);
                                        $('#gstcharges').html(gst_charge);
                                        $('#total_amt').html(sum + gst_charge +dc);
                                        $('#pay_amount').val(sum + gst_charge +dc);
                                     }
                                    
                               });
                               
                            $.ajax({
                               type:'POST',
                               url:"{{ route('add_toCartItems') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{cart_id:cart_id,item_quantity:item_quantity,subtotal_amt:product_total,stock_id:stockId,user_id:user_id,item_price:item_price},
                               success: function(data) {
                                   
                               }
                            });
                           
                       }
                       let item_price;
                       
                       function remove_item(selected_productId)
                       {
                        //   console.log("yes");
                           $('#delivery_charge').val(0);
                           //alert(product_id);
                            var sum = 0; var cart_id = 0; var item_quantity = 0; var product_total = 0;var stockId =0;
                               $("#cart_data tr").each(function () {
                                    var self = $(this);
                                    var productId = self.find("td:eq(1)").text().trim();
                                    if(productId == selected_productId)
                                    {
                                        if(parseInt(self.find("td:eq(5)").text().trim()) == 1)
                                        {
                                            self.remove();
                                        }
                                        cart_id = self.find("td:eq(0)").text().trim();
                                        //alert(parseInt(self.find("td:eq(2)").text().trim()) + parseInt(self.find("td:eq(2)").text().trim()));
                                        item_quantity =  parseInt(self.find("td:eq(5)").text().trim()) - 1;
                                        self.find("td:eq(5)").text(item_quantity);
                                         item_price =  parseInt(self.find("td:eq(3)").text().trim()) * item_quantity;
                                        console.log(item_price);
                                        stockId = self.find("td:eq(8)").text();
                                        self.find("td:eq(7)").text(item_price);
                                    }
                                    if($.isNumeric(self.find("td:eq(7)").text())){
                                        sum += parseFloat(self.find("td:eq(7)").text());
                                        product_total = sum;
                                        var gst_charge = parseInt(sum*5/100);
                                        var dc = parseInt($('#delivery_charge').val());
                                        $('#subtotal_amt').html(sum);
                                        $('#gstcharges').html(gst_charge);
                                        $('#total_amt').html(sum + gst_charge +dc);
                                        $('#pay_amount').val(sum + gst_charge +dc);
                                     }
                               });
                          $.ajax({
                               type:'POST',
                               url:"{{ route('remove_toCartItems') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{cart_id:cart_id,item_quantity:item_quantity,subtotal_amt:product_total,stock_id:stockId,item_price:item_price},
                               success: function(data) {
                                   
                               }
                            });
                       }
                       function add_tocart()
                       {
                          
                           var gst = $('#gstcharges').html();
                           var delivery_charge = $('#delivery_charge').val();
                           var user_id = $('#hidden_update_userId').val();
                           var address_id = $('#hidden_update_addressId').val();
                           var subtotal_amt = $('#subtotal_amt').html();
                           var total_amount = $('#total_amt').html();
                           var instruction =$("#instruction").val();
                           var manualorder =$("#maualdelivery").val();
                          $.ajax({
                              type:'POST',
                              url:"{{ route('add_toCart') }}",
                              headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                              data:{gst:gst,user_id:user_id,address_id:address_id,delivery_charge:delivery_charge,total_amount:total_amount,subtotal_amt:subtotal_amt,instruction:instruction,manualorder:manualorder},
                              success: function(data) {
                                  if(data.status == true)
                                  {
                                      alert('Cart data updated.');
                                      $('#hidden_update_OrderId').val(data.order_id);
                                      window.location.reload();
                                  } else{
                                      alert(data.message)
                                       
                                  }
                                   
                              }
                            });
                       }
                       
                       function make_payment()
                       {
                           var payment_type = $('#payment_type').val();
                            $.ajax({
                               type:'POST',
                               url:"{{ route('payment_initiate') }}",
                               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                               data:{order_id:$('#hidden_update_OrderId').val(),payment_type:payment_type},
                               success: function(data) {
                                  alert(data.message);
                                  alert("Your Paytm MerchantId is "+ data.mid);
                               }
                            });
                       }
                       
                       function updateUser_id()
                       {
                          $('#hidden_update_userId').val($('#user_name').val());
                            $.ajax({
                              type:'POST',
                              url:"{{ route('getAddressDetailsofUser') }}",
                              headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                              data:{user_id:$('#hidden_update_userId').val()},
                              success: function(data) {
                                  // alert(data.address);
                                  if(data.address == '')
                                  {
                                      console.log("use");
                                     alert('Address Not Found To this User Please Select Another One')  
                                     window.location.reload();
                                    $('#lblAddress').html('');
                                  }
                                  else
                                  {
                                     $('#lblAddress').html(data.address);
                                     $('#hidden_update_addressId').val(data.id);
                                  }
                              }
                            });
                       }
                     </script>
    </section>
@endsection