@extends('front.layouts.main')


@section('content')
 
  <div class="container-fluid">
    <form action="{{route('de-insert-product')}}" method="post">
      @csrf
      <br>
      <br>
      <div class="form-row">
        <div class="form-group col-md-12">
          <label for="inputEmail4">Product Code</label>
          <input type="text" class="form-control" id="code" name="name" placeholder="Enter Code">
          <div class="form-group search-info">
									<input type="text" class="form-control" id="search" placeholder="Search Product Name!">
									<div class="dropdown-menu" style="margin-top: -20px; width:99.4%; margin-left:5px;"  id="drop" aria-labelledby="dropdownMenuLink">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
									</div>
								</div>
        </div>
      </div>
      <!--<button type="submit" class="btn btn-primary">Add</button>-->
    </form>
  </div>
  <form action="{{ route('agent-place-order') }}" method="POST">
    @csrf
    <div id="adds">
    <div class="row justify-content-center" style="margin-top: 50px;">
      <div class="col-md-5" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <span> <b>Product Name</b> </span>
      </div>
      <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <span> <b>Unit Price</b> </span>
      </div>
      <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <span> <b>Quantity</b> </span>
      </div>
      <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <span> <b>Remove</b> </span>
      </div>
    </div>
    </div>
    <div class="row justify-content-center" style="margin-top: 0px;">
      <div class="col-md-9" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <b>Total Cost</b>
      </div>
      <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;color: #000;padding: 5px 0px;background: #fff">
        <span> <b id="total">0</b> </span>
        <input type="hidden" id="totall" name="total" value="">
      </div>
    </div>
    <input type="hidden" id="index" value="0">
    <div class="row justify-content-center" style="margin-top: 50px;">
      <div class="col-md-5">
        <label for="">Agent Name</label>
        <input id="customer_name" type="text" name="customer_name" class="form-control" required>
      </div>
      <div class="col-md-5">
        <label for="">Agent email (optional)</label>
        <input id="customer_email" type="text" name="customer_email" class="form-control">
      </div>
     
      <div class="col-md-5">
        <label for="">Agent Phone</label>
        <input type="text" name="customer_phone" id="customer_phone" class="form-control" required>
      </div>
      <div class="col-md-5">
        <label for="">Due</label>
        <input type="text" name="due" value="0" class="form-control" value="0">
      </div> 
   
       
      <!-- <div class="col-md-5">
        <label for="">Previous Due</label>
        <input type="text" name="previous_due" id="customer_due" value="0" class="form-control" value="0">
      </div>
      <div class="col-md-5">
        <label for="">Due</label>
        <input type="text" name="due" value="0" class="form-control" value="0">
      </div> -->
      <div class="col-md-8" style="margin-top: 60px;">
        <input type="submit" value="Submit" style="width:100%" class="btn btn-success">
      </div>
    </div>
  </div>
  </form>



@endsection

@section('js')
<script>
  $('#code').on('input', function(){
    var code = $('#code').val();

    var length = code.length;

    console.log(length);

    if( length == 13)
    {
      $.ajax({
        url: "/data-entry/de-add-product/"+code,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            html = `<div class="row">
                      <div class="col-md-6">
                        <label> Name </label>
                        <input type="text" class="form-control" value="`+res.name+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Brand </label>
                        <input type="text" class="form-control" value="`+res.brand.brand+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Unit </label>
                        <input type="text" class="form-control" value="`+res.unit+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Price </label>
                        <input type="text" class="form-control" value="`+res.price+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label>Available Quantity </label>
                        <input type="text" class="form-control" value="`+res.quantity+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Quantity </label>
                        <input id="quantity" type="text" class="form-control" >
                      </div>
                    </div>`;

              $('.modal-body').html(html);
              $('.modal').modal('show');
        }
    });
    }

    
  });
</script>

<script>
  $('#percentage').on('input', function(){
    
    val =  $('#percentage').val();

    total = $('#totall').val();

    devided = total/100;

    output = $('#fee').val(devided * val);

  });
</script>

<script>
  function add_prod(){

    var index = document.getElementById('index').value;

    index = index +1;

    var code = $('#code').val();

    var quantity = $('#quantity').val();

    $.ajax({
        url: "/data-entry/de-add/"+code,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            var product_name = res.data.name+`-`+res.brand.brand;
            var html2 = `<div class="row justify-content-center">
                          <div class="col-md-5" style="border: 1px solid #000;text-align: center;font-size: 17px;padding: 5px 0px;background: #fff">
                          <input type="hidden" name="product[`+index+`][id]" value="`+res.data.id+`">
                          <input type="text" name="product_name" value="`+product_name.replace(/\s/g,'-')+`" class="form-control name" readonly>
                         </div>
                         <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;padding: 5px 0px;background: #fff">
                          <span>`+res.data.price+`</span>
                          <input type="hidden" name="product_price" value="`+res.data.price+`">
                         </div>
                         <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;padding: 5px 0px;background: #fff">
                          <input type="hidden" name="quantity" value="`+quantity+`">
                          <input type="text" value="`+quantity+`" name="product[`+index+`][quantity]" class="form-control" readonly>
                         </div>
                         <div class="col-md-2" style="border: 1px solid #000;text-align: center;font-size: 17px;padding: 5px 0px;background: #fff">
                          <a class="btn btn-danger trash" href="#">delete</a>
                         </div>
                         </div>`;
            $('#adds').append(html2);

            $('.modal').modal('hide');

             var pre = $('#total').text();

             var prev = parseInt(pre);

             console.log(prev);

             var to = res.data.price * quantity;

             prev = prev + to;

             document.getElementById('index').value = index;

             $('#total').html(prev);
             $('#totall').val(prev);
             $('.dropdown-menu').hide();

        }
    });
  };
</script>

<script>
  $("#adds").on('click','.trash', function () {
    var name = $(this).closest('.row').find("input[name=product_name]").val();
    var quantity = $(this).closest('.row').find("input[name=quantity]").val();
    var price = $(this).closest('.row').find("input[name=product_price]").val();
    var total = $('#total').html();
    
    console.log(name);
    console.log(quantity);
    console.log(price);
    console.log(total);
    
    var minus = price * quantity;
    $('#total').html(total - minus);
    $('#totall').val(total - minus);
    $('#'+name).empty();
		$(this).closest('.row').remove();
    
		return false;
    });
</script>

<script>
    $('#search').on('input',function(){
	var input = $('#search').val();
	$('#span').hide();
	$('#drop').show();
	if(input == ''){
		$('#span').show();
		$('#drop').empty();
		$('#drop').hide();
	}
	$.ajax({
        url: "/data-entry/get-product/"+input,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
			$('#drop').empty();

			var datas = res.length;


			res.forEach(function(item){
			var specialities = `<a class="dropdown-item" onclick="getclicked('`+item.m_barcode+`')" href="#">`+item.name+`</a>`;
			$('#drop').append(specialities);
			});




        }
    });
});
</script>

<script>
function getclicked(id){
	$.ajax({
        url: "/data-entry/de-add-product/"+id,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            html = `<div class="row">
                      <div class="col-md-6">
                        <label> Name </label>
                        <input type="text" class="form-control" value="`+res.name+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Brand </label>
                        <input type="text" class="form-control" value="`+res.brand.brand+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Price </label>
                        <input type="text" class="form-control" value="`+res.price+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label>Available Quantity </label>
                        <input type="text" class="form-control" value="`+res.quantity+`" readonly>
                      </div>
                      <div class="col-md-6">
                        <label> Quantity </label>
                        <input id="quantity" type="text" class="form-control" >
                      </div>
                    </div>`;

              $('.modal-body').html(html);
              $('#code').val(res.m_barcode);
              $('.modal').modal('show');
        }
    });
};
</script>

<script>
    $('#customer_phone').on('input',function(){
	var input = $('#customer_phone').val();
	$.ajax({
        url: "/data-entry/get-info/"+input,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
			console.log(res)
            var email = $('#customer_email');
            
            email.val(res.email);
            
            var name = $('#customer_name');
            
            name.val(res.name);
            
            var dob = $('#customer_dob');
            
            dob.val(res.dob);
            
            var due = $('#customer_due');
            
            due.val(res.due);

        }
    });
});
</script>
@endsection

@section('modal')
    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Product Detail</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" onclick="add_prod()" class="btn btn-primary">Add To Cart</button>
          </div>
        </div>
      </div>
    </div>
@endsection