@extends('admin.layouts.index')



@section('content')
   
<section id="main-content">
	<section class="wrapper">
		<div class="table-agile-info"  style="padding: 4em;">
        <div class="col-lg-4 " style="" >
				<!--<input class="btn btn-success"   type="submit" value="Enroll" name="login">
                <input class="btn btn-danger"   type="submit" value="Import Student" name="login">-->
                <input class="btn btn-warning" data-toggle="modal" data-target="#myModaladdguardian"   type="submit" value="Add New" name="login">
</div>
            <div class="col-lg-4">
            <div class="col-lg-6">
                <div class="form-group">
                               
                               
                                <!--<select class="form-control ">
                                
                                <option>Select Session</option>
                                <option>2022/23 Academic Session</option>
                                 </select>-->
                                </div>
</div><div class="col-lg-6">
                                <div class="form-group">
                               
                               
                                <!--<select class="form-control ">
                                
                                <option>Select Session</option>
                                <option>2022/23 Academic Session</option>
                                 </select>-->
                                </div>
                                </div>
                        </div>


                            <div class="col-lg-4">
                                

                            <ul  class="nav pull-right top-menu p-4">
        <li><lable>Search Guardians</lable>
            <input type="text" class="form-control search" placeholder=" Search">
        </li>

</ul>         
                            </div>
                            </div>
 <div class="panel panel-default" style="margin-top:15px;">
    <div class="panel-heading">
     Application Details
    </div>
    <div>
      <table class="table" ui-jq="footable" ui-options='{
        "paging": {
          "enabled": true
        },
        "filtering": {
          "enabled": true
        },
        "sorting": {
          "enabled": true
        }}'>
        <thead>
          <tr>
            <th >ID</th>
            <th>Full  Name</th>
            <th>Email/Phone</th>
            <th >Class</th>
            <th>Gender</th>
            <th>Status</th>
            <th class="text-center" >Action</th>
          </tr>
        </thead>
        <tbody>
          <tr data-expanded="true">
            <td>520</td>
            <td>Otugo Purity</td>
            <td>pta@gmail.com/</td>
            <td>Basic 3 Love</td>
            <td>Female</td>
            <td>Active</td>
            
            <td class="pull-right" >
            <a  style="padding:3px; border-style: solid; " class="agile-icon bg-info " href="#"><i style="padding:7px;" class="fa fa-user" aria-hidden="true">Profile</i> </a>  
            <a style="padding:3px; border-style: solid;" class="agile-icon  bg-info" href="#"><i style="padding:7px;" class="fa fa-bar-chart" aria-hidden="true">Report Card</i> </a> 
            <a  style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-users" aria-hidden="true">Parent</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-edit" aria-hidden="true">Edit</i> </a><br>
            <a style="padding:3px;  border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-file" aria-hidden="true">Status</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-comment" aria-hidden="true">SMS</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-envelope" aria-hidden="true">Email</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-danger" href="#"><i style="padding:7px;"  class="fa fa-envelope" aria-hidden="true">Delete</i> </a>

           
            
            </td>
          </tr>
          <tr data-expanded="true">
            <td>520</td>
            <td>Otugo Purity</td>
            <td>pta@gmail.com/</td>
            <td>Basic 3 Love</td>
            <td>Female</td>
            <td>Active</td>
            
            <td class="pull-right" >
            <a  style="padding:3px; border-style: solid; " class="agile-icon bg-info " href="#"><i style="padding:7px;" class="fa fa-user" aria-hidden="true">Profile</i> </a>  
            <a style="padding:3px; border-style: solid;" class="agile-icon  bg-info" href="#"><i style="padding:7px;" class="fa fa-bar-chart" aria-hidden="true">Report Card</i> </a> 
            <a  style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-users" aria-hidden="true">Parent</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-edit" aria-hidden="true">Edit</i> </a><br>
            <a style="padding:3px;  border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-file" aria-hidden="true">Status</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-comment" aria-hidden="true">SMS</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-info" href="#"><i style="padding:7px;" class="fa fa-envelope" aria-hidden="true">Email</i> </a>
            <a style="padding:3px; border-style: solid;" class="agile-icon bg-danger" href="#"><i style="padding:7px;"  class="fa fa-envelope" aria-hidden="true">Delete</i> </a>

           
            
            </td>
          </tr> 
          
        </tbody>
      </table>
      <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
    </div>
  </div>
</div>
</section>
<!--modal-->
<div style="z-index: 999999; margin-top: 2%;" class="modal fade" id="myModaladdguardian" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div style="width:900px;" class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	  <h4 class="modal-title" id="myModalLabel" style="margin-right:40px;">Create New Guardian</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		
        <div class="row">
        
                
                        <div class="panel-body">
                        
                        <h2 class ="text-center mx-2 bg-warning">Personal Information</h2>
                            <div class="form " style="margin-top:25px;" >
                                <form class="cmxform form-horizontal" id="signupForm" method="get" action="" >
                                
                                    <div class="form-group ">
                                        <label for="lastname" class="control-label col-lg-4 pull-left">Guardian's Photo:		</label>
                                        <div class="col-lg-8">
                                        <input type="file" for="currrentsession" class="col-lg-12" id="currentsession" name="" value="">
                                        </div>
                                    </div>
                                    
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">First Name:			</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">Last Name:	 <p style="font-size:12px;">(Optional)</p>	</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="">
                                        </div>
                                    </div>
                                    
                                    
                                    <h2 class ="text-center mx-2 bg-warning" style="margin-bottom:20px;">Contact Information</h2>
                                    <div class="form-group ">
                                        <label for="lastname" class="control-label col-lg-4 pull-left">Address:			</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="" value="">
                                        </div>
                                    </div>
                                    
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">City:			</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">State:		</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left"  >Country :	</label>
                                        <div class="col-lg-8">
                                            <select class="form-control ">
                                <option>Zimbabwe</option>
                                <option>Zambia</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">Phone Numnber:				</label>
                                        <div class="col-lg-8">
                                        <input type="text" for="currrentsession" class="col-lg-12" id="currentsession" name="">
                                        </div>
                                    </div>
                                                            
  
</div>
                                    </div>
                                  
                                    

                                    <div class="form-group " >
                                        <div class="col-lg-offset-3 col-lg-6" style="margin-top:15px;">
                                            <button class="btn btn-primary  " type="submit">Create Guardian</button>
                                            <button class="btn btn-default" type="button">Cancel</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>




    </div>
	
      <div style="padding: 10px;" class="modal-body">
        
      </div>
     
    </div>
  </div>
</div>
<!--modal-->
@endsection