@extends('backend.layouts.app')

@section('content')
<style>
#message {
  background-color: #d9edf7 !important;
  border-color: #bce8f1 !important;
  color: #31708f !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  border: 1px solid transparent !important;
}
</style>
  {!! Html::script('expand_theme/js/jquery.validate.min.js') !!}



<script>
  // When the browser is ready...
  $(function() {
  
  
	   
  $(".edit_form").validate({
  rules: {
     /*  cnt_cell_phone: {
      required: true,
      phoneUS: true
     } */
	 cnt_email: {
        required: true,
        validEmail: true
    },
	extra_emails: {
         validEmail: true
    }
	
   }
  });
  
    $(".fadd_form").validate({
  rules: {
   /*    st_cell: {
      required: true,
      phoneUS: true
     } */
	 st_email: {
        validEmail: true
    }
   }
  });
  
      $(".fedit_form").validate({
  rules: {
  	  st_email: {
        validEmail: true
    }
   }
  });
  
    $(".family_add_form").validate({
	  rules: {
    
	 	email: {
         validEmail: true
    }
	
   }
   });
    $(".fmly_edit_form").validate({
	   rules: {
    
	 	email: {
         validEmail: true
    }
	
   }
   });
   
    $('#st_cell').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});
  
  	$('#cnt_home_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
		$('#cnt_cell_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
		$('#cnt_work_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
		$('#emergency_cnt_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
	
		$('#fcnt_home_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
		$('#fcnt_work_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
		$('#fcnt_mobile_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
	
	$('#fecnt_home_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
		$('#fecnt_work_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
		$('#fecnt_mobile_phone').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'));
	 if(($(this).val().length)>12){
	    e.preventDefault();
        return false;
	 }
	});	
	
	
	
	$.validator.addMethod("validEmail", function(value, element) 
{
    if(value == '') 
        return true;
    var temp1;
    temp1 = true;
    var ind = value.indexOf('@');
    var str2=value.substr(ind+1);
    var str3=str2.substr(0,str2.indexOf('.'));
    if(str3.lastIndexOf('-')==(str3.length-1)||(str3.indexOf('-')!=str3.lastIndexOf('-')))
        return false;
    var str1=value.substr(0,ind);
    if((str1.lastIndexOf('_')==(str1.length-1))||(str1.lastIndexOf('.')==(str1.length-1))||(str1.lastIndexOf('-')==(str1.length-1)))
        return false;
    str = /(^[a-zA-Z0-9]+[\._-]{0,1})+([a-zA-Z0-9]+[_]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
    temp1 = str.test(value);
    return temp1;
}, "Please enter valid email.");


/*      $.validator.addMethod("phoneUS", function (phone_number, element) {
            phone_number = phone_number.replace(/\s+/g, "");
            return this.optional(element) || phone_number.length > 9 &&
                  phone_number.match(/\(?[\d\s]{3}\)[\d\s]{3}-[\d\s]{4}$/);
        }, "Invalid phone number"); */
  });
  
  $(document).ready(function()
{   
  //hide the all of the element with class msg_body
  $("#ajaxmaterialeditform").hide();
 
  //toggle the componenet with class msg_body
  $("#ajaxmaterialchange").click(function()
  {
    $("#ajaxmaterialeditform").slideToggle(900);
     $("#ajaxmaterialdisplayform").slideToggle(900);     
  });

  $("#ajaxmaterialcancel").click(function()
  {
     $("#ajaxmaterialdisplayform").slideToggle(900);     
     $("#ajaxmaterialeditform").slideToggle(900);    
  });

  $("#ajaxpartnercreateform").hide();
});
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}	
</script>

 @if (session()->has('success_message'))
            <div class="alert alert-success">
                {{ session()->get('success_message') }}
            </div>
        @endif


@if(Session::has('message'))
<div class="callout callout-success">
                <h6>{{ Session::get('message')}}</h6>
              </div>
@endif

@if(Session::has('error_message'))
<div class="callout callout-danger">
                <h6>{{ Session::get('error_message')}}</h6>
              </div>
@endif


@if (count($errors) > 0)
    <div class="callout callout-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif



	<script>
	$(document).ready(function()
    {
	 // $("#ajaxmaterialeditform").show();
	//  $("#ajaxmaterialdisplayform").hide();
    }); 

	</script>
<script>
    $(document).ready(function() {
	});
		function deleteContact(id,fid) {
              if (confirm('Are you sure you want to delete?')) {
                                       $.ajax({
                                           type: "GET",
                                           url: "{{ URL::to('admin/family_contact/delete') }}" + "/" + id,
                                           success: function(message) {
                                           window.location.reload();
										   //window.location.href = "{{ URL::to('admin/families/') }}"+ "/" +fid;
                                           }
                                        });
				}
                        
              
       }
	   function deleteStudent(id,fid) {
              if (confirm('Are you sure you want to delete?')) {
                                       $.ajax({
                                           type: "GET",
                                           url: "{{ URL::to('admin/family_student/delete') }}" + "/" + id,
                                           success: function(message) {
                                       	   //window.location.href = "{{ URL::to('admin/families/') }}"+ "/" +fid;
                                           window.location.reload();
                                           }
                                        });
				}
                        
              
       }
	   
	
</script>

   	
      <div class="modal fade" id="modal-add">
          <div class="modal-dialog" style="width:70% !important;">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h4 class="modal-title">Add Contact - {{$families->fmly_name}}</h4>
                </div>
          {!! Form::open(array('url' => 'admin/family_contact/create', 'class' => 'form-horizontal family_add_form', 'files' => true )) !!}
		  <input type="hidden" name="fmly_id" value="{{$families->fmly_id}}">
		  <input type="hidden" name="org_id" value="{{$families->org_id}}">
		  <input type="hidden" name="loc_id" value="{{$families->loc_id}}">
					<div class="modal-body">
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"><div class="col-md-5">

					<label class="flright">Contact First Name <span class="required" aria-required="true">* </span></label>  
					</div>
					<div class="col-md-7">
					<input type="text" name="cnt_firstname" id="cnt_firstname" class="form-control required" value="{{ old('cnt_firstname') }}">
					</div></div>
					<div class="col-md-6">	<div class="col-md-5">
					<label class="flright">Contact Last Name
					<span class="required" aria-required="true">* </span>
					</label>  
					
					</div><div class="col-md-7 input_container">
					<input type="text" name="cnt_lastname" id="cnt_lastname" class="form-control required" value="{{$families->fmly_name}}">
					</div></div>
					</div><br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6">
					<div class="col-md-5">
					<label class="flright">Relation to the student
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<select class="form-control required" name="cnt_type">
					<option></option>
										</select>
					</div>
					</div>	<!--<div class="col-md-6"><div class="col-md-7">
					<div class="checkbox">
					<label>
					<input type="checkbox" name="billing_contact">
					Billing Contact
					</label>
					</div>
                   	</div></div>--><div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"></div>
					<div class="col-md-6"><div class="col-md-5"></div><div class="col-md-7">
					<div class="checkbox">
					<label>
					<input type="checkbox" name="pickup_stu">
					Authorized to pick up student
					</label>
					</div>

				</div></div>
					</div>
					</div>
               		<!--<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"></div>
					<div class="col-md-6"><div class="col-md-7">
					<div class="checkbox">
					<label>
					<input type="checkbox" name="pickup_stu">
					Authorized to pick up student
					</label>
					</div>

				</div></div>
					</div>--><br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"><div class="col-md-5">
					<label class="flright">Street address, Apt., suite, bldg.

					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<!--<input type="text" name="address1" id="address1" class="form-control required" value="{{ old('address1') }}">-->
					<textarea name="address1" id="address1" class="form-control required"></textarea>
					</div></div>
					</div>
					<br />
						<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"><div class="col-md-5">
					<label class="flright">City
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="city" id="city" class="form-control required" value="{{ @$org_settings->default_city }}">
					</div></div><div class="col-md-6">	<div class="col-md-5">
					<label class="flright">State
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="state" id="state" class="form-control required" value="{{ @$org_settings->default_state }}">
					</div></div>
					</div>  <br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6"><div class="col-md-5">
					<label class="flright">Zip
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="zip" id="zip" class="form-control required" value="{{ @$org_settings->default_zip }}" onkeypress="return isNumber(event)" maxlength="5">
					</div></div><div class="col-md-6"><div class="col-md-5">
					<label class="flright">Country
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<!--<select name="country" id="country" class="form-control required">
					<option value="">-- Select Country --</option>
					<option value="1" selected>United States</option>
					</select>-->
					<input type="text" name="country_name" id="country_name" class="form-control required" value="{{ @$org_settings->country_name }}">
					</div></div>
					</div>
					<br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					
					<div class="col-md-6">					<div class="col-md-5">
					<label class="flright">Home Phone
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="home_phone" id="fcnt_home_phone" class="form-control" value="{{ old('home_phone') }}" onkeypress="return isNumber(event)" maxlength="12">
					</div></div>
					</div><br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-6">		<div class="col-md-5">
					<label class="flright">Work Phone
					
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="work_phone" id="fcnt_work_phone" class="form-control" value="{{ old('work_phone') }}" onkeypress="return isNumber(event)" maxlength="12">
					</div> </div>
					<div class="col-md-6">	<div class="col-md-5">
					<label class="flright">Mobile Phone
					<span class="required" aria-required="true">* </span>
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="cell_phone" id="fcnt_mobile_phone" class="form-control required" value="{{ old('cell_phone') }}" onkeypress="return isNumber(event)" maxlength="12">
					</div> </div>
					</div>  
                     <br />
					 <div class="row" style="margin:0px 0px 0px 0px !important;">
					 <div class="col-md-6">	<div class="col-md-5">
					<label class="flright">Email			
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="email" id="email" class="form-control" value="{{ old('email') }}">
					</div></div>
					<!-- <div class="col-md-6"><div class="col-md-7 input_container">
					<div class="checkbox">
                    <label>
                      <input type="checkbox" name="email_opt"> Mass Email Opt-Out
                    </label>
                  </div>
					</div></div>-->
					</div><br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					 <div class="col-md-6"><div class="col-md-5">
					<label class="flright">Employer
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="cnt_employer" id="cnt_employer" class="form-control" placeholder="" value="{{ old('cnt_employer') }}">
					</div></div> <div class="col-md-6"><div class="col-md-5">
					<label class="flright">Employee Title
					</label>  
					</div><div class="col-md-7 input_container">
					<input type="text" name="cnt_emp_title" id="cnt_emp_title" class="form-control" placeholder="" value="{{ old('cnt_emp_title') }}">
					</div></div>
					</div><br>
					<div class="row">
					<div class="col-md-3">
					<p>&nbsp; </p>
					</div>
					<div class="col-md-9"> {!! Form::submit('Save', ['class' => 'btn btn-info']) !!}

					&nbsp; <a href="#" class="btn btn-default btn-cancel" data-dismiss="modal" aria-hidden="true">Cancel</a> </div>
					</div>
					</div>
					</div>
                {!! Form::close() !!} </div></div>
           
		
		<!-- Add Student popup modal-->
		     <div class="modal fade" id="fmodal-add">
          <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h4 class="modal-title">Add Student - {{ $families->fmly_name }}</h4>
				  
                </div>
            {!! Form::open(array('url' => 'admin/students/create', 'class' => 'form-horizontal fadd_form', 'files' => true )) !!}
					<div class="modal-body">
					
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-4">

					<label class="flright">First Name <span class="required" aria-required="true">* </span></label>  
					</div>
					<div class="col-md-6">
					<input type="text" name="st_fname" id="st_fname" class="form-control required" value="{{ old('st_fname') }}">
					</div></div>
				    <br />
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-4">

					<label class="flright">Last Name <span class="required" aria-required="true">* </span></label>  
					</div>
					<div class="col-md-6">
					<input type="text" name="st_lname" id="st_lname" class="form-control required" value="{{$families->fmly_name}}">
					</div></div><br>
					<input type="hidden" name="fmly_id" value="{{ $families->fmly_id }}">
					 <input type="hidden" name="loc_id" value="{{$families->loc_id}}">
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-4">

					<label class="flright">Gender<span class="required" aria-required="true">* </span></label>  
					</div>
					<div class="col-md-6">
						 
   <input type="radio" name="st_gender" value="M" checked>&nbsp;Male
   <input type="radio" name="st_gender" value="F">&nbsp;Female

					</div></div><br>
					<div class="row" style="margin:0px 0px 0px 0px !important;">
					<div class="col-md-4">

					<label class="flright">Date of Birth<span class="required" aria-required="true">* </span></label>  
					</div>
					<div class="col-md-6">
					<!--<input type="text" name="st_dob" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="">-->
				  <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" name="st_dob" class="form-control required" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" onblur="my_birth_date()" id="st_dob">
                </div>
                <!-- /.input group -->
              
 <!--<input type="text" name="st_dob" id="f_st_dob" class="form-control required" value="{{ old('st_dob') }}">-->
				<!--<input type="text" name="st_dob" placeholder="MM-DD-YYYY" class="form-control required" value="{{ old('st_dob') }}">	-->
					</div></div><br>
					
					<div class="row" style="margin:0px 0px 0px 0px !important;">
				 <div class="col-md-4">
      <label class="flright">Grade Level<span class="required" aria-required="true">* </span>
	  </label>  
  </div><div class="col-md-6 input_container">
  <select name="st_grade_lvl" id="st_grade_lvl" class="form-control required">
  <option></option>
  @foreach($sgrade_levels as $grade)
  <option value="{{ $grade->grade_id }}">{{ $grade->grade_name }}</option>
  @endforeach
  </select>
  </div> 
  </div><br>
  <div class="row" style="margin:0px 0px 0px 0px !important;">
<div class="col-md-2"></div>
					<div class="col-md-10" style="padding: 0px;">
					
					<div class="checkbox">
                    <label>
                      <input type="checkbox" name="allow_photo"> Yes, I authorize Idea Lab to use photos of my child for marketing/promotional purposes.
                    </label>
                  </div>
				</div>
					</div> 
				    <br />
  
  
  
					<div class="row">
					<div class="col-md-3">
					<p>&nbsp; </p>
					</div>
					<div class="col-md-9"> {!! Form::submit('Save', ['class' => 'btn btn-primary']) !!}

					&nbsp; <a href="#" class="btn btn-default btn red" data-dismiss="modal" aria-hidden="true">Cancel</a> </div>
					</div>
					</div>
                {!! Form::close() !!} </div>
            </div>
          <!-- /.modal-dialog -->
        </div>
		<!-- Add Student popup ends here -->
		
		
		
	<section class="content-header">
      <h1>
        <i class="fa fa-fw fa-user"></i> Family: {{ ucfirst($families->fmly_name) }}
      </h1>
	  
      <ol class="breadcrumb" style="padding: 0px 5px !important;">
        <li><a href="{{ url('admin/families/'.$families->fmlyhashid.'/update')}}" class="btn btn-default" style="float:right;"><i class="fa fa-pencil"></i> Edit Families</a></li>
           </ol>
    </section>	
		
	<section class="content">	
<div class="row" id="ajaxmaterialdisplayform">

	<div class="col-md-8">
	        <div class="box">
		  <div class="box-header with-border">
            <h3 class="box-title" style="margin-top:10px;">Contacts</h3>
			 <div class="box-tools"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add" style="float:right;">
                <i class="fa fa-plus"></i>&nbsp;Add Contact
              </button></div>
            </div>
             <div class="box-body table-responsive no-padding"> <table class="table table-hover" >
            <thead>
                <tr>
                   
					<th width="20%">Contact Name</th>
					<th width="20%">Family Name</th>
                   	 <th width="15%">Relation to the student</th>
					 <th width="20%">Email</th>
					 <th width="10%">Pick up student</th>
					 <th width="10%">Status</th>
					<th width="10%">Action</th>
                </tr>
            </thead>
            <tbody style="font-size:13px;">
               @foreach ($contact_details as $contact)  
                <tr>
                    <td><a href="" data-toggle="modal" data-target="#family_viewstack{{ $contact->fcnt_d }}" >{{ ucwords($contact->cnt_firstname) }} {{ ucwords($contact->cnt_lastname) }}</a></td>
					<td><a href="{{ url('admin/families/'.$families->fmlyhashid) }}">{{ ucwords($families->fmly_name)}}</a></td>
					<td>