<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;" autocomplete="off">
    <div class="row" style="padding:4px;">
        <input type="hidden" class="form-control" id="branchID" name="branchID" />
        <div class="col-xs-6 col-md-2"style="float:right;">
          <label for="b_name" class="control-label"style="float:right;">اسم الفرع</label>
        </div>
        <div class="col-xs-12 col-md-4"style="float:right;">
          <input type="text" class="form-control" style="float:right;" id="b_name" name="b_name" placeholder="الاسم الذي سيظهر علي العقود و السندات"   style="position: absolute; z-index: 2; background: transparent;"/>
          <div id="b_val" style="display:none"></div>
        </div>
        <div class="col-xs-6 col-md-2"style="float:right;">
          <label for="b_boss" class="control-label"style="float:left;">مدير الفرع</label>
        </div>
        <div class="col-xs-12 col-md-4"style="float:right;">
          <input type="text" style="float:right;" class="form-control" id="b_boss" name="b_boss" placeholder="المدير ">
        </div>
    </div>
  <div class="row" style="padding:4px;">
          <div class="col-xs-6 col-md-2"style="float:right;">
          <label for="phone" class="control-label"style="float:right;">جوال مدير الفرع</label>
          </div>
          <div class="col-xs-12 col-md-4"style="float:right;">
          <input type="tel" class="form-control" style="float:right;" id="phone" name="phone" placeholder="جوال مدير الفرع">
          </div>
          <div class="col-xs-6 col-md-2"style="float:right;">
          <label for="phone2" class="control-label"style="float:left;">جوال2</label>
          </div>
          <div class="col-xs-12 col-md-4"style="float:right;">
          <input type="text" style="float:right;" class="form-control" id="phone2" name="phone2" name="phone" placeholder="جوال مدير الفرع">
          </div>
  </div>
  <div class="row" style="padding:4px;">
        <div class="col-xs-6 col-md-2"style="float:right;">
        <label for="b_boss2" class="control-label "style="float:right;">نائب مدير الفرع</label>
        </div>
        <div class="col-xs-12 col-md-4"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="b_boss2" name="b_boss2" placeholder="النائب">
        </div>
        <div class="col-xs-6 col-md-2"style="float:right;">
        <label for="phoneB2" class="control-label"style="float:left;">جوال النائب</label>
        </div>
        <div class="col-xs-12 col-md-4"style="float:right;">
        <input type="tel" style="float:right;" class="form-control" id="phoneB2" name="phoneB2" placeholder="رقم الجوال">
        </div>
  </div>
<div class="row" style="padding:4px;">
        <div class="col-xs-6 col-md-2"style="float:right;">
        <label for="location" class="control-label"style="float:right;">عنوان الفرع</label>
        </div>
        <div class="col-xs-12 col-md-6"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="location" name="location" placeholder="عنوان الفرع"/>
        </div>
        <div class="col-xs-6 col-md-2"style="float:right;">
        <label for="start_date" class="control-label"style="float:left;">تاريخ  البداية</label>
        </div>
        <script>
          $(function() {
            var calendar = $.calendars.instance();
            $('#start_date').calendarsPicker({calendar: calendar});
            });
        </script>
        <div class="col-xs-12 col-md-2"style="float:right;">
        <input type="text" style="float:right;"  class="form-control" id="start_date" readonly name="start_date"/>
        </div>
</div>
<div class="row" style="padding:4px;">
        <div class="col-xs-3 col-md-2"style="float:right;">
        <label for="comm" class="control-label"style="float:right;">ملاحظات</label>
        </div>
        <div class="col-xs-9 col-md-10"style="float:right;">
        <input type="text" class="form-control" style="float:right;" id="comm" name="comm" placeholder="ملاحظات ">
        </div>
  </div>
  <p><br/></p>
  <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_branch" name="update_branch" 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="10%">حركة</th>
               <th class="text-center" width="20%">اسم الفرع</th>
               <th class="text-center" width="20%">مدير الفرع</th>
               <th class="text-center" width="20%">جوال الفرع</th>
               <th class="text-center" width="20%">جوال مدير الفرع</th>
              </tr>
<?php
include "../actions/dbPDO.php";
$output = array();
    $Branch = $db->prepare("SELECT branchID , b_name FROM branches");
    $Branch->execute();
    $i=0;
    if($Branch->rowCount()>0)
      {
         while($row = $Branch->fetch())
         {
             $output[$i] = array(
                           "value" => $row["b_name"],
                           "data" => $row["branchID"]
                           );
                $i++ ;
           }
        }
    else
    {
         $output[0]= 'لا يوجد فرع بهذا الاسم';
    }
?>
<div><!-- avilable Branches -->
<?php
$output2 = '';
$myCont = $db->prepare('SELECT branchID, b_name , b_boss , phone ,phone2 FROM branches order by branchID DESC');
$myCont->execute();
if($myCont->rowCount()>0)
{
  while($row = $myCont->fetch())
  {
    $id = $row["branchID"];
       $output2 .= '
            <tr>
              <td><input type="button"  idd='.$id.'  name="branch_update" class="btn btn-info btn-xs branch_update" value="تحديث بيانات "/></td>
                 <td class="text-center">' . $row['b_name'] . '</td>
                 <td class="text-center">' . $row['b_boss'] . '</td>
                 <td class="text-center">' . $row['phone'] . '</td>
                 <td class="text-center">' . $row['phone2'] . '</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) ; ?>');
  $('#b_name').autocomplete({
	 lookup: arr,
   maxHeight : 200,
   onSelect: function(suggestion) {
       $('#b_val').html(suggestion.data);
         },
  //  onHint: function (hint) {
  //      $('#supp_name_x').val(hint);
  //  },
   onInvalidateSelection: function() {
       $('#b_val').html('You selected: none');
   }
})// end of autocomplete
$("#add_button").click(function(event){
  event.preventDefault();
  $.ajax({
    url     : "actions/newBranch50data.php",
    method  : "POST",
    data    :$("form").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
  },
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of signup_button ajax code

$(".branch_update").click(function(event){
      event.preventDefault();
  var branch_id = $(this).attr("idd");
    $.ajax({
    url     :"actions/branch_single.php",
    method  :"POST",
    data    :{branch_id:branch_id},
    dataType:"json",
    success :function(data)
    {
      $('#branchID').val(data.branchID);
      $('#b_name').val(data.b_name);
      $('#b_boss').val(data.b_boss);
      $('#phone').val(data.phone);
      $('#phone2').val(data.phone2);
      $('#b_boss2').val(data.b_boss2);
      $('#phoneB2').val(data.phoneB2);
      $('#location').val(data.location);
      $('#start_date').val(data.start_date);
      $('#comm').val(data.comm);
      $('#add_button').attr("type","hidden");
      $('#update_branch').attr("type","button");
    }
  })
});//update contract

$("#update_branch").click(function(event){
  event.preventDefault();
  $.ajax({
    url     : "actions/Branch_update.php",
    method  : "POST",
    data    :$("form").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
  },
    error   :function(result){
      alert(result.statusText);
      }
  })
}); //end of update_branch ajax code ?act='update'
});

</script>
