<?php
   $db = new Model_UserType;
   $allPosition = $db->getAllTypesDrop();
   $listMembersPosition =  json_encode($allPosition->toArray());
   
   $db = new Model_Positions;
   $allPos = $db->getAll();
   $listPosition =  json_encode($allPos->toArray());
   
   ?> 
<!--LEFT SIDE BAR--> 
<div class="col-md-3">
   <!--PROFILE BLOCK--> 
    <?php
               echo $this->partial('/others/userprofile.phtml',array("UserID"=>$this->UserDetails["UserID"] ));
                ?>
   <!--END PROFILE BLOCK--> 
   <!--NOTICFICATION--> 
   <div class="panel panel-default form-horizontal">
      <div class="panel-body">
         <h3 class="push-up-0">Hey <?= $this->UserDetails['FirstName']?></h3>
         Did you know that you can securely store your team's documents on Teamer? Registration forms, waivers etc. can be uploaded for team members.
      </div>
   </div>
   <!--END NOTICFICATION--> 
</div>
<!--END LEFT SIDE BAR--> 
<div class="col-md-9">
   <!--	NEW NAVABAR	-->
   <div class="panel panel-default">
      <div class="panel-body fix-navabar-height">
         <h2 class="pull-left"><b>Members</b></h2>
         <div class="btn-group squadType pull-right">
            <button class="btn btn-default dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span id="GetDataDropDownText">Player</span> 
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
               <?php 
                  foreach($this->DropDown as $DropDown){
                     echo '<li><a  sid="'.$DropDown["ID"].'" onclick="getSquadToLoad(this)">'.$DropDown["Text"].'</a></li>';
                  }
                  ?>                                                
            </ul>
         </div>
         <div class="pull-right"><a class="btn  btn-default btn-m" style="cursor: pointer" data-toggle="tooltip" data-placement="bottom" title="Add member."><span class="hidden-Mobile" data-toggle="modal" data-target="#modal_create_member">Add Member </span><i class="fa fa-plus-circle"></i></a></div>
      </div>
   </div>
   <!--	END NEW NAVABAR	-->
   <!--MEMBERS TABLE-->
   <div class="panel panel-default">
      <div class="panel-heading">
         <h3 class="panel-title" id="TableTitle">Players</h3>
         <ul class="panel-controls">
            <li><a href="#"data-toggle="modal" data-target="#modal_edit"  ><span data-toggle="tooltip" data-placement="bottom" title="Update profile." class="fa fa-pencil"></span></a></li>
            <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="View profile."><span class="fa fa-search"></span></a></li>
            <li><a href="/union/members/profile/id/" data-toggle="tooltip" data-placement="bottom" title="Profile."><span class="fa fa-picture-o"></span></a></li>
            <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Delete profile."><span class="fa fa-trash-o"></span></a></li>
            <li>
            </li>
         </ul>
      </div>
      <div class="panel-body">
         <div class="table-responsive">
            <table width="100%"  class="table" id="MembersTable">
               <thead>
                  <tr>
                     <th width="1%">#</th>
                     <th width="1%">Status</th>
                     <th width="1%"></th>
                     <th width="31%">Name</th>
                     <th width="20%" id="PositionTitle">Position</th>
                     <th width="9%">Ethnicity</th>
                     <th width="9%">Height</th>
                     <th width="9%">Weight</th>
                     <th width="9%">Caps</th>
                     <th width="10%">Actions</th>
                  </tr>
               </thead>
               <tbody class="">
               </tbody>
            </table>
         </div>
      </div>
   </div>
   <!--END MEMBERS TABLE--> 
</div>
<!--MODAL FOR CREATING A MEMBER--> 
<div class="modal" id="modal_create_member" tabindex="-1" role="dialog" aria-labelledby="defModalHead" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="defModalHead"><b>Create</b> Member</h4>
         </div>
         <div class="modal-body">
            <!-- TABS WIDGET -->
            <div class="panel panel-default tabs" style="border:0px;">
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a href="#tab001" data-toggle="tab">Step 1</a></li>
                  <li><a href="#tab002" data-toggle="tab">Step 2</a></li>
               </ul>
               <div class = "tab-content">
                  <div class="tab-pane active" id="tab001" style="">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="text-center border-style" id="user_image">
                           <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                           <img class="createSquadPic" src="/img/Slogo.png" style="width:100px">
                           <a id="uploadlogo"  data-toggle="modal" data-target="#modal_change_photo_member"><span class="fa fa-camera"></span> Upload</a>
                           <h4 class="modal-title" id="smallModalHead"><span class="theSquad" style=""></span></h4>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Member Type</label>
                           </div>
                           <div  class="col-md-9">
                              <select name="data[Title]" class="form-control select">
                                 <option value="" >--- Please Select Member Type ---</option>
                                 <option value="" >Personnel</option>
                                 <option value="" >Players</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Given Name(s)</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[FirstName]" id="fname" value="" type="text" class="form-control"/>
                              <span class="help-block">If more than one given name, please use a space to separate names. Example: John William.</span>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Last Name</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[LastName]" id="lname" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Known As</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[NickName]" value="" type="text" class="form-control"/>
                              <span class="help-block">The name you are recognised, well known or generally known by.</span>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Mobile</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[Mobile]" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Email Address</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[Email]" id="AddEmail" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Ethnicity</label>
                           </div>
                           <div class="col-md-9">
                              <select name="data[Ethnicity]" class="form-control select">
                                 <option value="" >--- Please Select Ethnicity ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>ID Number</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[IDNumber]" value="" type="text" class="form-control" id="idNum"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-bottom">
                           <div class="col-md-3">
                              <label>Birth Place</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[BirthPlace]" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="tab-pane" id="tab002">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="col-md-12 site-padding">
                           <div class="col-md-3">
                              <label>Birth Date</label>
                           </div>
                           <div class="col-md-3 padding-zero" style="padding-left:11px;">
                              <select name="birth[day]" class="form-control select">
                                 <option value="" >Day</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                           <div class="col-md-3 padding-zero padding-left">
                              <select name="birth[month]" class="form-control select">
                                 <option value="" >Month</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                           <div class="col-md-3 padding-zero padding-left" style="padding-right:11px;">
                              <select name="birth[year]" class="form-control select">
                                 <option value="" >Year</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Primary Position</label>
                           </div>
                           <div class="col-md-9">
                              <select id="p_pos" name="data[Player_Prim_Pos]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Job Category</label>
                           </div>
                           <div class="col-md-9">
                              <select id="JobType" name="data[JobType]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Job Title</label>
                           </div>
                           <div class="col-md-9">
                              <select id="" name="data[JobTitle]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Gender</label>
                           </div>
                           <div class="col-md-9">
                              <select id="" name="data[sex]" class="form-control select">
                                 <option value="" >--- Please Select Gender ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Height</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[height]" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Weight</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[weight]" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Organization Type</label>
                           </div>
                           <div class="col-md-9">
                              <select id="UnionType" name="data[UnionType]" class="form-control select">
                                 <option value=""  >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding borders-top-bottom " >
                           <div class="col-md-3">
                              <label>Institution / Organization</label>
                           </div>
                           <div class="col-md-9">
                              <select id="InstitutionOrganization" name="data[UnionID]" class="form-control select">
                                 <option value="" >--- Please Select Relationship Status ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
            <!-- END TABS WIDGET -->
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>  
            <button type="button" class="btn btn-default  pull-right" >Create Member</button>                      
         </div>
      </div>
   </div>
</div>
<!--END MODAL FOR CREATING A MEMBER--> 
<!--MODAL FOR CHANGING A PHOTO--> 
<div class="modal animated fadeIn" id="modal_change_photo_member" tabindex="-1" role="dialog" aria-labelledby="smallModalHead" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="smallModalHead"><b>Upload</b> Member Photo</h4>
         </div>
         <form id="cp_crop" method="post" action="assets/crop_image.php">
            <div class="modal-body">
               <div class="text-center" id="cp_target">Use form below to upload file. Only .jpg files.</div>
               <input type="hidden" name="cp_img_path" id="cp_img_path"/>
               <input type="hidden" name="ic_x" id="ic_x"/>
               <input type="hidden" name="ic_y" id="ic_y"/>
               <input type="hidden" name="ic_w" id="ic_w"/>
               <input type="hidden" name="ic_h" id="ic_h"/>                        
            </div>
         </form>
         <form id="cp_upload" method="post" enctype="multipart/form-data" action="assets/upload_image.php">
            <div class="modal-body form-horizontal form-group-separated">
               <div class="form-group">
                  <label class="col-md-4 control-label">New Photo</label>
                  <div class="col-md-4">
                     <input type="file" class="btn-info" name="file" id="cp_photo" data-filename-placement="inside" title="Select file"/>
                  </div>
               </div>
            </div>
         </form>
         <div class="modal-footer">
            <button type="button" class="btn btn-default disabled" id="cp_accept">Accept</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<!--END MODAL FOR CHANGING A PHOTO--> 
<!--MODAL FOR UPDATNG A MEMBER--> 
<div class="modal" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="largeModalHead" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="largeModalHead"><b>Update</b> Profile<span class="profile-name">John Doe</span></h4>
         </div>
         <div class="modal-body">
            <!-- TABS WIDGET -->
            <div class="panel panel-default tabs border-zero">
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a href="#tab01" data-toggle="tab">Profile</a></li>
                  <li><a href="#tab02" data-toggle="tab">Personal</a></li>
                  <li><a href="#tab03" data-toggle="tab">Organization</a></li>
                  <li><a href="#tab04" data-toggle="tab">Address</a></li>
                  <li><a href="#tab05" data-toggle="tab">Contact</a></li>
               </ul>
               <div class=" tab-content" >
                  <div class="tab-pane active" id="tab01">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="col-md-12 site-padding borders-top-bottom">
                           <div class="col-md-3">
                              <label>Title</label>
                           </div>
                           <div class="col-md-9">
                              <select value="" name="data[Title]" class="form-control select">
                                 <option value="" >--- Please Select a Title ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding">
                              <div class="col-md-3">
                                 <label>Given Name(s)</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[FirstName]" value="" type="text" class="form-control"/>
                                 <span class="help-block">If more than one given name, please use a space to separate names. Example: John William</span>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Last Name</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[LastName]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Known As</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[NickName]" value="" type="text" class="form-control"/>
                                 <span class="help-block">The name you are recognised, well known or generally known by.</span>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>South African Citizen</label>
                              </div>
                              <div class="col-md-9">
                                 <label class="check"><input type="checkbox" id="SouthAfricanCitizen" value="" name="data[SouthAfricanCitizen]" checked="checked"/> Only check this box if you are a south african citizen</label>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>ID Number</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[IDNumber]" value="" type="text" id="idNum" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Passport Number</label>
                              </div>
                              <div class="col-md-2">
                                 <input type="text" id="passNum" value="" name="data[PassportNumber]" class="form-control"/>
                              </div>
                              <div class="col-md-2 padding-zero" style="margin-top:6px;">
                                 <label>Passport Expiry Date:</label>
                              </div>
                              <div class="col-md-5">
                                 <div class="col-md-4" style="padding:2px;">
                                    <select name="birth[exday]" class="form-control select">
                                       <option value="" >Day:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                                 <div class="col-md-4" style="padding:2px;">
                                    <select  name="birth[month]" class="form-control select">
                                       <option value="" >Months:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                                 <div class="col-md-4" style="padding:2px;">
                                    <select  name="birth[exyear]" class="form-control select">
                                       <option value="" >Year:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>SA Rugby Player No</label>
                              </div>
                              <div  class="col-md-9">
                                 <input name="data[SARugbyPlayerNo]" value="" id="SARugbyPlayerNo" type="text" class="form-control"/>
                                 <span class="help-block">Only enter if an official SARU player number has been assigned or known.</span>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Email Address</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[Email]" value="" id="AddEmail" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding borders-top-bottom">
                              <div class="col-md-3">
                                 <label>Birth Date</label>
                              </div>
                              <div class="col-md-9" style="margin-left:-1px;">
                                 <div class="col-md-4 padding-zero">
                                    <select  name="birth[day]" class="form-control select">
                                       <option value="" >Day:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                                 <div class="col-md-4 padding-zero padding-left">
                                    <select  name="birth[month]" class="form-control select">
                                       <option value="" >Months:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                                 <div class="col-md-4 padding-zero padding-left">
                                    <select name="birth[year]" class="form-control select">
                                       <option value="" >Year:</option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                       <option value="" ></option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="tab-pane" id="tab02">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="col-md-12 site-padding borders-top-bottom">
                           <div class="col-md-3">
                              <label>Scouted Players</label>
                           </div>
                           <div class="col-md-9">
                              <label class="check">
                              <input type="checkbox" value="" name="data[Scouted]" checked="checked"/> Only tick box if the player was scouted and the Scout APP was NOT used.
                              </label>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding">
                           <div class="col-md-3">
                              <label>Primary Code</label>
                           </div>
                           <div class="col-md-9">
                              <select id="p_code" name="data[p_code]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Secondary Code</label>
                           </div>
                           <div class="col-md-9">
                              <select id="s_code" name="data[s_code]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Primary Position</label>
                           </div>
                           <div class="col-md-9">
                              <select id="p_pos" name="data[Player_Prim_Pos]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Secondary Position</label>
                           </div>
                           <div class="col-md-9">
                              <select id="s_pos" name="data[Player_Sec_Pos]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Birth Place</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[BirthPlace]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Country of Birth</label>
                           </div>
                           <div class="col-md-9">
                              <select id="BirthCountry" name="data[BirthCountry]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Gender</label>
                           </div>
                           <div class="col-md-9">
                              <select name="data[Sex]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Ethnicity</label>
                           </div>
                           <div class="col-md-9">
                              <select name="data[Ethnicity]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Height</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[height]" value="" type="text" class="form-control"/>
                                 <span class="help-block">Please enter Height in centimeters. (cm)</span>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Weight</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[weight]" value="" type="text" class="form-control"/>
                                 <span class="help-block">Please enter Weight in kilograms. (kg)</span>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Disabled?</label>
                              </div>
                              <div class="col-md-9">
                                 <label class="check"><input type="checkbox" value="Yes" name="data[Disabled]" checked="checked"/> Only tick if the player is part of Deaf or Wheelchair Rugby.</label>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Relationship Status</label>
                           </div>
                           <div class="col-md-9">
                              <select name="data[rel_status]" class="form-control select">
                                 <option value="" >--- Please Select Relationship Status ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Favourite Food</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[FavouriteFood]" value="" id="idNum" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Favourite Film</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[FavouriteFilm]" value="" id="idNum" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group" >
                           <div class="col-md-12 site-padding borders-top-bottom">
                              <div class="col-md-3">
                                 <label>Favourite Music</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[FavouriteMusic]" value="" id="idNum" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="tab-pane" id="tab03">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="col-md-12 site-padding borders-top-bottom" style="margin-top:15px;">
                           <div class="col-md-3">
                              <label>Organization Type</label>
                           </div>
                           <div class="col-md-9">
                              <select id="UnionType" name="data[UnionType]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding">
                           <div class="col-md-3">
                              <label>Institution / Organization</label>
                           </div>
                           <div class="col-md-9">
                              <select id="InstitutionOrganization" name="data[UnionID]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                              </select>
                              <span class="help-block">Select the name of the organization you are currently registered with or part of.</span>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Primary School</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[PrimarySchool]" value="" type="text" class="form-control" id=""/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Secondary School</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[SecondarySchool]" value="" type="text" class="form-control" id=""/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Tertiary Institution</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[TertiaryInstitution]" id="Tertiary Institution" type="text" value="" class="form-control"/>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Job Category</label>
                           </div>
                           <div class="col-md-9">
                              <select id="JobType" name="data[JobType]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding site-border-top">
                           <div class="col-md-3">
                              <label>Job Title</label>
                           </div>
                           <div class="col-md-9">
                              <select id="JobTitle" name="data[JobTitle]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding borders-top-bottom">
                           <div class="col-md-3">
                              <label>Accreditation</label>
                           </div>
                           <div class="col-md-9">
                              <select id="Accreditation" name="data[Accreditation]" class="form-control select">
                                 <option value="" >--- Select Option ---</option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                                 <option value=""></option>
                              </select>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="tab-pane" id="tab04">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="form-group">
                           <div class="col-md-12 site-padding borders-top-bottom">
                              <div class="col-md-3">
                                 <label>Street Name</label>
                              </div>
                              <div  class="col-md-9">
                                 <input name="data[address]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group" >
                           <div class="col-md-12 site-padding">
                              <div class="col-md-3">
                                 <label>Suburb</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[suburb]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>City</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[city]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Postal Code</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[postal]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Country</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[country]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding borders-top-bottom">
                           <div class="col-md-3">
                              <label>Province</label>
                           </div>
                           <div class="col-md-9">
                              <input name="data[Province]" value="" type="text" class="form-control"/>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="tab-pane" id="tab05">
                     <form class="form-group" action="" method="post" width="100%">
                        <div class="form-group">
                           <div class="col-md-12 site-padding borders-top-bottom">
                              <div class="col-md-3">
                                 <label>Mobile</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[Mobile]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <div class="col-md-12 site-padding">
                              <div class="col-md-3">
                                 <label>Telephone</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[alt_mobile]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <!--
                           <div class="form-group">
                                                     <div class="col-md-12 site-padding site-border-top">
                                                        <span style="margin-left:13px;"><b>Alternate Contact</b></span>
                                                     </div>
                                                  </div>-->
                        <div class="form-group">
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Alternate Contact Name</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[alt_name]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="form-group" >
                           <div class="col-md-12 site-padding site-border-top">
                              <div class="col-md-3">
                                 <label>Contact Number</label>
                              </div>
                              <div class="col-md-9">
                                 <input name="data[altcon]" value="" type="text" class="form-control"/>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12 site-padding borders-top-bottom">
                           <div class="col-md-3">
                              <label>Relationship</label>
                           </div>
                           <div class="col-md-9">
                              <select  name="data[relation]" class="form-control select">
                                 <option value="" >--- Please Select Relationship ---</option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                                 <option value="" ></option>
                              </select>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
            <!-- END TABS WIDGET -->
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>    
         </div>
      </div>
   </div>
</div>
<!--END MODAL FOR UPDATNG A MEMBER--> 
<!--  MODAL FOR CHANGING PHOTO -->
<div class="modal animated fadeIn" id="modal_change_photo_update" tabindex="-1" role="dialog" aria-labelledby="smallModalHead" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="smallModalHead">Change photo</h4>
         </div>
         <form id="cp_crop" method="post" action="assets/crop_image.php">
            <div class="modal-body">
               <div class="text-center" id="cp_target">Use form below to upload file. Only .jpg files.</div>
               <input type="hidden" name="cp_img_path" id="cp_img_path"/>
               <input type="hidden" name="ic_x" id="ic_x"/>
               <input type="hidden" name="ic_y" id="ic_y"/>
               <input type="hidden" name="ic_w" id="ic_w"/>
               <input type="hidden" name="ic_h" id="ic_h"/>                        
            </div>
         </form>
         <form id="cp_upload" method="post" enctype="multipart/form-data" action="assets/upload_image.php">
            <div class="modal-body form-horizontal form-group-separated">
               <div class="form-group">
                  <label class="col-md-4 control-label">New Photo</label>
                  <div class="col-md-4">
                     <input type="file" class="btn-info" name="file" id="cp_photo" data-filename-placement="inside" title="Select file"/>
                  </div>
               </div>
            </div>
         </form>
         <div class="modal-footer">
            <button type="button" class="btn btn-default disabled" id="cp_accept">Accept</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<!-- END MODAL FOR CHANGING PHOTO -->
<script type="text/javascript" src="/js/plugins/datatables/jquery.dataTables.min.js"></script>   
<script>
   var dataTable ;
   
   $(function(){
   
   
   
   var ulrl = "/union/members/gettable/type/1";
   
    dataTable = $('#MembersTable').DataTable( {
          "processing": true,
   	    "language": {
   	        "processing": "Hang on. Waiting for response..." //add a loading image,simply putting <img src="loader.gif" /> tag.
   	    },
          "serverSide": true,
          "columnDefs": [ {
                "targets": 0,
                "orderable": false,
                "searchable": false
                  
              } ],
          "ajax":{
              url :ulrl, // json datasource
              type: "post",  // method  , by default get
              error: function(){  // error handling
                  $(".employee-grid-error").html("");
                  $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                  $("#employee-grid_processing").css("display","none");
                   
              }
          }
      } );
   
   
   
    $(".refreshDataTable").click(function(){
      	
      });
   
   
   
   
   });
   
   
   
   
   function getSquadToLoad(e){
        	var type = $(e).attr("sid");
        	var text = $(e).text();
        	$("#GetDataDropDownText").text(text);
        	
        	
        	if(type==1){
        		$("#PositionTitle").text("Position");
        		$("#TableTitle").text("Players");
        	}else{
        		$("#PositionTitle").text("Job Title");
        		$("#TableTitle").text("Personnel");
        	}
        	
        		var ulrl = "/union/members/gettable/type/"+type;
        	dataTable.ajax.url( ulrl ).load();
        }
    
     
   
</script>