@extends('layouts.admin')
@section('body')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>


<div class="table-responsive">
    <h2>นำสินค้าเข้า Stock</h2>
    <form action="/admin/stockin" method="post"  accept-charset="UTF-8"> {{ csrf_field()}}
        <div class="form-group">
            <label for="name">รายการวันที่</label>
            <input type="text" class="date form-control" name="isudt" id="isudt" placeholder="" value="{{ date('Y-m-d') }}" >
        </div>

        <div class="form-group">
            <label for="name">เลขที่ใบสั่งซื้อ</label>
            <input class="form-control" type="text" name="podocno" id="podocno" value="PO-0000001" >
        </div>
        <div class="table-responsive my-2">
        <table class="table" border="2">
          <tr class="table-info">
            <td>รหัสสินค้า</td>
            <td>ราคาต่อหน่วย</td>
            <td>จำนวน</td>
          </tr>
          <tr>
            <td>
              <select class="form-control itmcd" name="itmcd" id="itmcd" >
              <option value="">select item</option>
              @foreach($product as $products)
                  <option value="{{$products->itmcd}}">{{$products->itmcd}} {{$products->name}}</option>
              @endforeach
            </select>
              <input type="hidden" id="name" name="name" value="">
          </td>
          <td><input class="bg-info text-white" readonly type="number" name="price" id="price" value=""></td>
          <td><input type="number" name="delqt" id="delqt" value=""></td>
          </tr>
        </table>
      </div>
        <div class="form-group">
            <button  onclick="addRow('myTable')" type="button" name="additme" class="btn btn-warning" >เพิ่มรายการ</button>
            <button  onclick="deleteRow('myTable')" type="button" name="additme" class="btn btn-warning" >ลบรายการ</button>
        </div>

</div>
<div class="table-responsive my-2">
  <table class="table" id="myTable" name="myTable" >

    <thead class="thead-dark">
      <tr>
        <th scope="col">No.</th>
        <th scope="col">เลขที่ใบสั่งซื้อ</th>
        <th scope="col">รหัสสินค้า</th>
        <th scope="col">ชื่อสินค้า</th>
        <th scope="col">จำนวน</th>
        <th scope="col">ราคาต่อหน่วย</th>
        <th scope="col">ราคารวม</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
<!-- //****************************************** -->
<SCRIPT language="javascript">
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			element1.name="chkbox[]";
			cell1.appendChild(element1);

			var cell2 = row.insertCell(1);
			cell2.innerHTML = rowCount + 1;

			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "txtbox[]";
      element2.value = "ABC";
			cell3.appendChild(element2);


		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}

	</SCRIPT>
</HEAD>
</HTML>
</div>
  <button type="submit" name="submit" class="btn btn-success">บันทึกรายการ</button>
</form>

<script type="text/javascript">

  $('.itmcd').change(function(){
    if($(this).val()!=''){
      var select=$(this).val();
      var _token=$('input[name="_token"]').val();
      $.ajax({
        url:"{{route('dropdown.product_price')}}",
        method:"POST",
        data:{select:select,_token},
        datatype:"json",
        success:function(result){
          document.getElementById('price').value = result["price"];
          document.getElementById('name').value = result['name'];
        }
      })
    }
  })

</script>


@endsection