<div  class="panel panel-primary" id="koki">
  <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="store_form" autocomplete="off">
    <div class="row" style="padding:4px;">
        <input type="hidden" class="form-control" id="store_id" name="store_id" />
        <div class="col-md-2"style="float:right;">
          <label for="store_name" class="control-label"style="float:right;">اسم المخزن</label>
        </div>
        <div class="col-md-4"style="float:right;">
          <input type="text" class="form-control" style="float:right;" id="store_name" name="store_name" placeholder="اسم المخزن"   style="position: absolute; z-index: 2; background: transparent;"/>
          <div id="b_val" style="display:none"></div>
        </div>
        <div class="col-md-2"style="float:right;">
          <label for="spaceM2" class="control-label"style="float:left;">المساحة</label>
        </div>
        <div class="col-md-2"style="float:right;">
          <input type="number" style="float:right;" class="form-control" id="spaceM2" name="spaceM2" placeholder="بالمتر المربع"/>
        </div>
    </div>
    <div class="row" style="padding:4px;">
        <div class="col-md-2"style="float:right;">
        <label for="area" class="control-label"style="float:right;">مكان المخزن</label>
        </div>
        <div class="col-md-9"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="area" name="area" placeholder="موقع او عنوان المخزن"/>
        </div>
</div>
    <div class="form-group">
    <div class="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_store" name="update_store" 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="14%">اسم المخزن</th>
               <th class="text-center" width="65%">عنوان و مكان المخزن</th>
               <th class="text-center" width="8%">المساحة</th>
              </tr>
<?php
include "../actions/dbPDO.php";
$output = array();
    $item_sr = $db->prepare("SELECT store_id , store_name FROM store");
    $item_sr->execute();
    $i=0;
    if($item_sr->rowCount()>0)
      {
         while($row = $item_sr->fetch())
         {
             $output[$i] = array(
                           "value" => $row["store_name"],
                           "data" => $row["store_id"]
                           );
                $i++ ;
           }
        }
    else
    {
         $output[0]= 'لا يوجد فرع بهذا الاسم';
    }
?>
<div><!-- avilable Branches -->
<?php
$output2 = '';
$myItem = $db->prepare('SELECT store_id, store_name , area , spaceM2 FROM store order by store_id DESC');
$myItem->execute();
if($myItem->rowCount()>0)
{
  while($row = $myItem->fetch())
  {
    $id = $row["store_id"];
       $output2 .= '
            <tr>
              <td><input type="button"  idd='.$id.'  name="store_update" class="btn btn-info btn-xs store_update" value="تعديل"/></td>
                 <td class="text-center">' . $row['store_name'] . '</td>
                 <td class="text-center">' . $row['area'] . '</td>
                 <td class="text-center">' . $row['spaceM2'] . '</td>
              </tr>';
      }}
else
{
  $output2 .= '<tr>
                      <td colspan="4">لا يوجد سجلات ...</td>
                 </tr>';
}
echo $output2;
?>
</table>
  </div>
</div><!-- end of avilable conratcts -->
<script>
$(document).ready(function(){
  var arr=  JSON.parse('<?php echo json_encode($output) ; ?>');
  $('#store_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/new62Store.php",
    method  : "POST",
    data    :$("#store_form").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
    $('#store_form')[0].reset();
    $("#signup_msg").delay(1000).slideUp(function()
    {  $("#signup_msg").html('');
    $('#site').load("wh/newStore.php");
  });},
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of signup_button ajax code

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

function one_item(store_id){
  $.ajax({
  url:"wh/store_single.php",
  method:"POST",
  data:{store_id:store_id},
  dataType:"json",
  success:function(data)
  {
    $('#store_id').val(data.store_id);
    $('#store_name').val(data.store_name);
    $('#spaceM2').val(data.spaceM2);
    $('#area').val(data.area);
    $('#add_button').attr("type","hidden");
    $('#update_store').attr("type","button");
  }
});
}

$("#update_store").click(function(event){
  event.preventDefault();
  $.ajax({
    url     : "wh/store_update.php",
    method  : "POST",
    data    :$("#store_form").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
    $("#signup_msg").delay(1000).slideUp(function()
    {  $("#signup_msg").html('');
    $('#site').load("wh/newStore.php");});
  },
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of update_branch ajax code ?act='update'
});

</script>
