@extends('layouts.main')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}" />
<section class="invoice-view-wrapper">
    <div class="row">
      <!-- invoice view page -->
      <div class="col-xl-12 col-md-12 col-12">
        <div class="card invoice-print-area">
          <div class="card-content">
            <div class="card-body pb-0 mx-25">
              <!-- header section -->
              <div class="row">
                <div class="col-xl-4 col-md-12">
                  <span class="invoice-number mr-50">Shop referel no :</span>
                  <span>#5876432{{$shop->id}}</span>
                </div>
                <div class="col-xl-8 col-md-12">
                  <div class="d-flex align-items-center justify-content-xl-end flex-wrap">
                    <div class="mr-3">
                      <small class="text-muted">Created Date:</small>
                      <span>{{\Carbon\Carbon::parse($shop->created_at)->format('d-m-Y H:i')}}</span>
                    </div>
                    <div>
                      <small class="text-muted">Status:</small>
                      <span class="{{$shop->active == 1 ? 'text-success' : 'text-danger'}}">( {{$shop->active == 1 ? 'Active' : 'Inactive'}} - </span>
                      <span class="{{$shop->opened == 1 ? 'text-success' : 'text-danger'}}">{{$shop->opened == 1 ? 'Opened' : "Closed"}} )</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- logo and title -->
              <div class="row my-3">
                <div class="col-6">
                  <h4 class="text-primary">{{$shop->name}}</h4>
                  <span>{{$shop->email}}</span><br>
                  <span>{{$shop->mobile}}</span>
                </div>
                <div class="col-6 d-flex justify-content-end">
                  <img src="{{$shop->image}}" alt="" width="30%">
                </div>
              </div>
              <hr>
              <!-- invoice address and contact -->
              <div class="row invoice-info">
                <div class="col-md-4 mt-1">
                  <h6 class="invoice-from card-title">Shop Address</h6>
                  <div class="">
                    <span>{{$shop->name}}</span>
                  </div>
                  <div class="">
                    <span>{{$shop->street}},</span>
                    <span>{{$shop->area}},</span><br>
                    <span>{{$shop->city}}</span><br>
                  </div>
              </div>
              <hr>
            </div>
            <!-- product details table-->  </div>
      </div>
            
         <div class="row">
             <div class="col-5" style="overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;">
                <h4 class="text-center">Shop Products</h4>
              <table class="table table-borderless mb-0">
                <thead>
                  <tr class="border-0">
                      <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">Add Item</th>
                  </tr>
                </thead>
                <tbody>
                    @forelse ($product_dtl as $item)
                    <tr>
                        <td>{{$item->id}}</td>
                        <td>{{$item->name}}</td>
                        <td class="text-center">
                                <button type="submit" class="btn-outline-info" onclick="cart_itemAdd({{$item->id}})" data-icon="warning-alt">Add
                                </button>
                        </td>
                      </tr>
                    @empty
                      <tr>
                          <td>No Items</td>
                      </tr>
                    @endforelse

                </tbody>
              </table>

          </div>
          <hr/>
                  <div class="col-5" style="overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;">
                       <h4 class="text-center">Selected Products</h4>
             <table class="table table-borderless mb-0" id="cart_data">
                <thead>
                  <tr class="border-0">
                      <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"></th>
                    <th scope="col" class="card-title text-center">Item</th>
                    <th scope="col" class="card-title text-center"></th>
                  </tr>
                </thead>
                <tbody>
                    @forelse ($products as $item)
                    <tr>
                        <td>{{$item->id}}</td>
                        <td>{{$item->name}}</td>
                        <td><button type="submit" class="btn-outline-info" data-icon="warning-alt" onclick="add_item({{$item->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({{$item->id}})"><i class="bx bx-add"></i>-</button></td>
                      </tr>
                    @empty
                      <tr>
                          <td>No Items</td>
                      </tr>
                    @endforelse

                </tbody>
              </table>
            </div>
          </div>
 <hr>
        <div class="col-md-12 mt-1"  id="dv_sendOtp" style="float:right; margin-left:60%;">
             <label for="Vehicle_name">Mobile Number:</label>
                             <input type="text" class="form-control" name="mobile_number" id="txtmobile_number" required style="
    width: 30%;
">
                             
                              <button type="submit" onclick="sendOtp_mo()" class="btn btn-primary">Send Manual-Order Otp</button>
         
        </div>
         <div class="col-md-12 mt-1"  id="dv_verifyOtp"  style="display:none;float:right; margin-left:60%;">
             <input type="text" class="form-control" name="verifyOtp" id="verifyOtp" required style="
                    width: 30%;
                ">
                             
                  <button type="submit" onclick="verify_otpMo()" class="btn btn-primary">Verify Otp</button>
             </div>
             
             <div class="col-md-12 mt-1"  id="dv_cartData"  style="display:none;float:right; margin-left:90%;">
                 <button type="submit"  class="btn btn-primary">Add To Cart</button>
                 </div>
        <br/><br/>
      
        </div>
      </div></div>
  </section>

@push('scripts')
<script src="{{ asset('app-assets/js/scripts/pages/app-invoice.min.js') }}"></script>
<script>
   function cart_itemAdd(product_id)
   {
       //alert(product_id);
       var isDuplicate = 0;
        $("#cart_data tr").each(function () {
            var self = $(this);
            var productId = self.find("td:eq(0)").text().trim();
            if(productId == product_id)
            {
                isDuplicate = 1;
            }
        });
        if(isDuplicate == 0)
        {
            $.ajax({
                   type:'POST',
                   url:"{{ route('getProductsdata') }}",
                   headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                   data:{id:product_id},
                   success: function(data) {
                       var product_name = data[0].name;
                       var product_id = data[0].id;
                        var data="<tr><td>"+ product_id +"</td>";
                        data +="<td>"+ product_name +"</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></tr>";
                        $('#cart_data').append(data);
                       // $('#deliveryBoyId').html(data.html);
                       // $('#personsModal').modal('show');
                   }
           });
        }
         
   }
   
    
   function add_item(selected_productId)
   {
       //alert(product_id);
           $("#cart_data tr").each(function () {
                var self = $(this);
                var productId = self.find("td:eq(0)").text().trim();
                if(productId == selected_productId)
                {
                    var item_quantity =  parseInt(self.find("td:eq(3)").text().trim()) + 1;
                    self.find("td:eq(3)").text(item_quantity);
                  
                }
           });
       
   }
   
   function remove_item(selected_productId)
   {
       //alert(product_id);
           $("#cart_data tr").each(function () {
                var self = $(this);
                var productId = self.find("td:eq(0)").text().trim();
                if(productId == selected_productId)
                {
                    if(parseInt(self.find("td:eq(3)").text().trim()) == 1)
                    {
                        self.remove();
                    }
                    var item_quantity =  parseInt(self.find("td:eq(3)").text().trim()) - 1;
                    self.find("td:eq(3)").text(item_quantity);
                  
                  
                }
           });
   }
   
    function sendOtp_mo(){
         $.ajax({
           type:'POST',
           url:"{{ route('sendOtp_manualOrder') }}",
           headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
           data:{mobile_number:$("#txtmobile_number").val()},
           success: function(data) {
               if(data == true)
               {
                   $("#dv_sendOtp").hide();
                   $("#dv_verifyOtp").show();
               }
               else
               {
                   alert('OTP send Failed!. Please try again.');
                   $("#dv_sendOtp").hide();
                   $("#dv_verifyOtp").show();
               }
           }
       });
    }
    
    function verify_otpMo(){
         $.ajax({
           type:'POST',
           url:"{{ route('verifyOtp_manualOrder') }}",
           headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
           data:{mobile_number:$("#txtmobile_number").val(),otp:$("#verifyOtp").val()},
           success: function(data) {
               if(data == true)
               {
                   $("#dv_sendOtp").hide();
                   $("#dv_verifyOtp").hide();
                   $("#dv_cartData").show();
               }
               else
               {
                   alert('Invalid OTP!');
                   $("#dv_sendOtp").hide();
                   $("#dv_verifyOtp").hide();
                   $("#dv_cartData").show();
               }
           }
       });
    }
</script>
@endpush
@endsection