<div  class="panel panel-primary" id="main_supp">
  <div class="panel-heading"style="font-size:1.2em;">ادخال و تعديل الموردين</div>
  <div class="panel-body"style="background-color:#00324d;color:#cce5ff;">
<form method="post" class="form-horizontal" style="float:center;" id="newSupp" autocomplete="off">
    <div class="row" style="padding:4px;">
        <input type="hidden" class="form-control" id="mat_supp_id" name="mat_supp_id" />
        <div class="col-xs-1"style="padding:2px;float:right;">
          <label for="mat_name" class="control-label"style="float:right;">اسم المورد</label>
        </div>
        <div class="col-xs-4"style="float:right;">
          <input type="text" class="form-control" style="float:right;" id="mat_name" name="mat_name" placeholder="مورد قطع غيار او ورشة او خامات"   style="position: absolute; z-index: 2; background: transparent;"/>
          <div id="b_val" style="display:none"></div>
        </div>
        <div class="col-xs-1"style="float:right;">
          <label for="phone" class="control-label"style="float:left;">جوال</label>
        </div>
        <div class="col-xs-2"style="float:right;">
          <input type="number" style="float:right;" class="form-control" id="phone" name="phone" onchange="ten('phone')" placeholder="جوال"/>
        </div>
        <div class="col-xs-2"style="float:right;">
        <input type="number" class="form-control" style="float:right;" id="phone2" name="phone2" onchange="ten('phone2')" placeholder="جوال2"/>
        </div>
    </div>
  <div class="row" style="padding:4px;">
          <div class="col-xs-1"style="padding:2px; float:right;">
          <label for="vat_no" class="control-label"style="float:right;">الرقم الضريبي</label>
          </div>
          <div class="col-md-3"style="float:right;">
          <input type="text" class="form-control" style="float:right;" id="vat_no" name="vat_no" onchange="vat('vat_no')" placeholder="الرقم الضريبي 15 رقم"/>
          </div>
          <div class="col-md-2"style="float:right;">
          <label for="spcial" class="control-label"style="float:left;">تخصص</label>
          </div>
          <div class="col-xs-12 col-md-3"style="float:right;">
          <input type="text" style="float:right;" class="form-control" id="spcial" name="spcial" name="spcial" placeholder="مجموعة"/>
          </div>
  </div>
  <div class="row" style="padding:4px;">
        <div class="col-xs-1"style="float:right;">
        <label for="address" class="control-label"style="float:right;">العنوان</label>
        </div>
        <div class="col-xs-9"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="address" name="address" placeholder="عنوان المورد او الورشة"/>
        </div>
</div>
  <div class="row" style="padding:4px;">
        <div class="col-xs-1"style="float:right;">
        <label for="comm" class="control-label"style="float:right;">تعليق</label>
        </div>
        <div class="col-xs-9"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="comm" name="comm" placeholder="ملاحظات"/>
        </div>
</div>
    <div class="form-group">
    <div class="col-xs-12 col-md-12">
      <input style="float:right ;" type="button" id="add_button" name="add_button" class="btn btn-success" value="حفظ"/>
      <input style="float:right ;" type="hidden" id="update_mat_supp" name="update_mat_supp" class="btn btn-info" value="تحديث بيانات "/>
    </div>
  </div>
</form>
</div>
</div><!-- panel body style -->
<div class="table-responsive">
     <table style="color:#FAFAFA ;" class="table table-bordered table-hover">
          <tr>
               <th class="text-center" width="5%">حركة</th>
               <th class="text-center" width="20%">اسم المورد</th>
               <th class="text-center" width="15%">الجوال</th>
               <th class="text-center" width="45%">العنوان</th>
               <th class="text-center" width="15%">الرقم الضريبي</th>
              </tr>
<?php
include "../actions/dbPDO.php";
$output = array();
    $item_sr = $db->prepare("SELECT mat_supp_id , mat_name FROM material_supp");
    $item_sr->execute();
    $i=0;
    if($item_sr->rowCount()>0)
      {
         while($row = $item_sr->fetch())
         {
             $output[$i] = array(
                           "value" => $row["mat_name"],
                           "data" => $row["mat_supp_id"]
                           );  $i++ ;         }
        }
    else
    {
         $output[0]= 'لا يوجد ';
    }
?>
<div><!-- avilable Branches -->
<?php
$output2 = '';
$myItem = $db->prepare('SELECT mat_supp_id, mat_name , phone , address , vat_no FROM material_supp order by mat_supp_id DESC');
$myItem->execute();
if($myItem->rowCount()>0)
{
  while($row = $myItem->fetch())
  {
    $id = $row["mat_supp_id"];
       $output2 .= '
            <tr>
              <td><input type="button"  idd='.$id.'  name="mat_supp_update" class="btn btn-info btn-xs mat_supp_update" value="تعديل"/></td>
                 <td class="text-center">' . $row['mat_name'] . '</td>
                 <td class="text-center">' . $row['phone'] . '</td>
                 <td class="text-center">' . $row['address'] . '</td>
                 <td class="text-center">' . $row['vat_no'] . '</td>
              </tr>';
      }}
else
{
  $output2 .= '<tr><td colspan="5">لا يوجد سجلات ...</td></tr>';
}
echo $output2;
?>
</table>
  </div>
</div><!-- end of avilable conratcts -->
<script>
$(document).ready(function(){
  var arr=  JSON.parse('<?php echo json_encode($output) ; ?>');
  $('#mat_name').autocomplete({
	 lookup: arr,
   maxHeight : 200,
   onSelect: function(suggestion) {
      //  $('#b_val').html(suggestion.data);
       one_item(suggestion.data);
         },
  //  onHint: function (hint) {
  //      $('#supp_name_x').val(hint);
  //  },
   onInvalidateSelection: function() {
       $('#b_val').html('You selected: none');
   }
})
$("#add_button").click(function(event){
  event.preventDefault();
  $.ajax({
    url     : "wh/new47supp.php",
    method  : "POST",
    data    :$("#newSupp").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
    $("#signup_msg").delay(1000).slideUp(function()
    {  $("#signup_msg").html('');
    $('#site').load("wh/newMat_supp.php");
  });

  },
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of signup_button ajax code

$(".mat_supp_update").click(function(event){
      event.preventDefault();
  var mat_supp_id = $(this).attr("idd");
    one_item(mat_supp_id);
});//update item

function one_item(mat_supp_id){
  $.ajax({
  url:"wh/supp_single.php",
  method:"POST",
  data:{mat_supp_id:mat_supp_id},
  dataType:"json",
  success:function(data)
  {
    $('#mat_supp_id').val(data.mat_supp_id);
    $('#mat_name').val(data.mat_name);
    $('#phone2').val(data.phone2);
    $('#spcial').val(data.spcial);
    $('#phone').val(data.phone);
    $('#address').val(data.address);
    $('#vat_no').val(data.vat_no);
    $('#comm').val(data.comm);
    $('#add_button').attr("type","hidden");
    $('#update_mat_supp').attr("type","button");
  }
});
}

$("#update_mat_supp").click(function(event){
  event.preventDefault();
  $.ajax({
    url     : "wh/supp_update.php",
    method  : "POST",
    data    :$("form").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
    $("#signup_msg").delay(1000).slideUp(function(){
       $("#signup_msg").html('');
       $('#site').load("wh/newMat_supp.php");
     });
  },
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of update_branch ajax code ?act='update'
});
function vat(dd){
  var a = $("#"+ dd).val();
   if(a.length != 15){$("#"+ dd).css( "background-color", "#FF6B46");}else{ $("#"+ dd).css( "background-color", "");}
};
function ten(dd){
  var a = $("#"+ dd).val();
   if(a.length != 10){$("#"+ dd).css( "background-color", "#FF6B46");}else{ $("#"+ dd).css( "background-color", "");}
};
</script>
