@extends('admin.include.main')
@section('content')
        
    <div class="wrapper wrapper-content">
     
            <div class="row">
                    <div class="col-lg-12">
                    <div class="panel-body">

                                    <form action="{{route('student.update',$student->id)}}" method="POST" enctype="multipart/form-data">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">

                                     <div class="ibox-content">
                                       <h3 class="font-weight-bold">Update Student Information</h3>
                                        <hr>
                                        <div class="row">
                                        <div class="col-md-4">
                                                <div class="form-group">
                                                        <h5> Select Parent: </h5>
                                                        <select class="form-control m-b" name="parent_id">
                                                            <option value="" selected disabled>Select Parent name</option>                              
                                                           @foreach($parent as $per)
                                                            <option @if($student->parent_id== $per->id) selected @endif  value="{{$per->id}}">{{$per->father_name}} @if(is_null($per->father_name)) {{$per->mother_name}} @endif  </option>             
                                                            @endforeach  

                                                        </select>
                                                    </div>
                                                </div>  
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5> Full Name<span class="text-danger">*</span></h5>
                                                    <div class="controls">
                                                        <input type="text" name="name" value="{{$student->name}}" id="name" class="form-control" data-validation-required-message="Name is required" >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5>Address:<span class="text-danger">*</span></h5>
                                                    <div class="controls">
                                                        <input type="text" name="address" id="address" value="{{$student->address}}" class="form-control" data-validation-required-message="Address is required" >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5> Date of birth:<span class="text-danger">*</span></h5>
                                                    <div class="controls">
                                                        <input type="date" name="dob" id="dob" class="form-control" value="{{$student->dob}}" data-validation-required-message="DOB is required" >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                        <h5> Phone number:</h5>
                                                        <div class="controls">
                                                            <input type="number" name="phone_no" id="phone_no" value="{{$student->phone_no}}" class="form-control" data-validation-required-message=" Phone Number is required" >
                                                        </div>
                                                    </div>
                                            </div>
                                            
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                        <h5> Gender:<span class="text-danger">*</span></h5>
                                                        <div class="form-check-inline">
                                                                <label class="form-check-label">
                                                                    <input type="radio" name="gender" @if($student->gender == "male") checked @endif class="form-check-input" value="male">Male
                                                                </label>
                                                        </div>
                                                        <div class="form-check-inline">
                                                            <label class="form-check-label">
                                                                <input type="radio" name="gender" @if($student->gender == "female") checked @endif class="form-check-input" value="female">Female
                                                            </label>
                                                        </div>
                                                        <div class="form-check-inline">
                                                            <label class="form-check-label">
                                                                <input type="radio" name="gender" @if($student->gender == "others") checked @endif class="form-check-input" value="others">Others
                                                            </label>
                                                        </div>

                                                    </div>
                                                </div>
                                             <div class="col-md-4">
                                                <div class="form-group">
                                                        <h5> Blood Group:  </h5>
                                                        <select class="form-control m-b" id="modalfeename" name="blood_group">
                                                            <option value="" selected disabled>Select Blood Group</option>                              
                                                            <option @if($student->blood_group == "A+") selected @endif value="A+">A+</option>             
                                                            <option @if($student->blood_group == "A-") selected @endif value="A-">A-</option>  
                                                            <option @if($student->blood_group == "B+") selected @endif value="B+">B+</option>  
                                                            <option @if($student->blood_group == "B-") selected @endif value="B-">B-</option>  
                                                            <option @if($student->blood_group == "AB+") selected @endif value="AB+">AB+</option>  
                                                            <option @if($student->blood_group == "AB-") selected @endif value="AB-">AB-</option>  
                                                            <option @if($student->blood_group == "O+") selected @endif value="O+">O+</option>  
                                                            <option @if($student->blood_group == "O-") selected @endif value="O-">O-</option>  

                                                        </select>
                                                    </div>
                                                </div>  
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                            <h5> Email:</h5>
                                                            <div class="controls">
                                                                <input type="email" name="email" id="email" value="{{$student->email}}" class="form-control" >
                                                            </div>
                                                    </div>
                                                 </div>  
                                                 <div class="col-md-4">
                                                    <div class="form-group">
                                                            <h5> Nationality:</h5>
                                                            <div class="controls">
                                                                <input type="text" name="nationality" id="nationality" value="{{$student->nationality}}" class="form-control" >
                                                            </div>
                                                    </div>
                                                 </div>
                                                 <div class="col-md-4">
                                                    <div class="form-group">
                                                            <h5> Religion:</h5>
                                                            <div class="controls">
                                                                <input type="text" name="religion" id="religion" value="{{$student->religion}}" class="form-control" >
                                                            </div>
                                                    </div>
                                                 </div>  
                                                 
                                                 <input type="hidden" name="status" value="{{$student->status}}">

                                            </div>
                                        </div>
                                    <div class="ibox-content">
                                        <h3 class="text-info">Admission Information</h3>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                        <h5> Admission Date:<span class="text-danger">*</span></h5>
                                                        <div class="controls">
                                                            <input type="date" name="admission_date" value="{{$student->admission_date}}" id="admission_date" class="form-control" data-validation-required-message="Admission Date is required" >
                                                        </div>
                                                    </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5> Class<span class="text-danger">*</span></h5>
                                                    <select class="form-control m-b" id="modalclass" name="class_id" onchange="showadmissionfee()">
                                                            <option value="" selected disabled>Select Class</option>            
                                                            @foreach($class as $cl)                  
                                                            <option @if($student->class_id == $cl->id) selected @endif value="{{$cl->id}}">{{$cl->class_name}}</option>      
                                                            @endforeach       
                                          
                                                            
                                                        </select>
                                                </div>  
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5> Section<span class="text-danger">*</span></h5>
                                                    <select class="form-control m-b" id="section_value" name="section_id" onchange="showsectionfee()">
                                                            <option value="" selected id="section_name" disabled>Select Class First</option>                              
                                                                         
                                                            
                                                        </select>
                                                </div>
                                            </div>
                                        </div>
                                     </div><div class="ibox-content">
                                        <h3 class="text-info">Upload Image</h3>
                                        <hr>
                                        <div class="row">
                                        <div class="col-md-6">
                                            <h4>Profile image</h4>
                                            <div class="text-center"><img src="{{asset($student->photo)}}" id="current_image" width="200px" height="200px"></div><br>
                                            <div>
                                                    <div class="controls">
                                                        <input type="file" id="image" name="image" class="form-control btn btn-success" > </div><br>
                                                        <!-- <img src="" id="current_image" width="100px"> -->
                                                </label>
                                            </div>
                                        </div>

                                            
                                        </div>
                                     </div>
                                     <div class="ibox-content">
                                        <h3 class="text-info">Account Information</h3>
                                        

                                        <hr>
                                        <div class="row">
                                              @foreach($fee_info as $key => $value)
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                <h5> {{$key}}:<span class="text-danger">*</span></h5>
                                                        <div class="controls">
                                                            <input type="text" name="other_fees[{{$key}}]" value="{{$value}}" id="other_fees" class="form-control" data-validation-required-message="Admission Date is required" >
                                                        </div>
                                                    </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <h5> Installment Type:<span class="text-danger">*</span></h5>

                                                             <div class="form-check-inline">
                                                                <label class="form-check-label">
                                                                    <input type="radio" @if($installment[$key] == "yearly") checked @endif name="installment[{{$key}}]" checked class="form-check-input" value="yearly">Yearly
                                                                </label>
                                                            </div>
                                                          <div class="form-check-inline">
                                                                <label class="form-check-label">
                                                                    <input type="radio" @if($installment[$key] == "monthly") checked @endif name="installment[{{$key}}]" class="form-check-input" value="monthly">Monthly
                                                                </label>
                                                            </div>
                                                                <div class="form-check-inline">
                                                                    <label class="form-check-label">
                                                                        <input type="radio" @if($installment[$key] == "half-yearly") checked @endif name="installment[{{$key}}]" class="form-check-input" value="half-yearly">Half Yearly
                                                                    </label>
                                                                </div>
                                                                    <div class="form-check-inline">
                                                                        <label class="form-check-label">
                                                                            <input type="radio" @if($installment[$key] == "quaterly") checked @endif name="installment[{{$key}}]" class="form-check-input" value="quaterly">Quaterly
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check-inline">
                                                                            <label class="form-check-label">
                                                                                <input type="radio" @if($installment[$key] == "once") checked @endif name="installment[{{$key}}]" class="form-check-input" value="once">Once
                                                                            </label>
                                                                        </div>
                                                                </div>
                                                            </div>
                                            @endforeach
                                         </div>

                                         <div class="row" id="additional_field">
          
                                            
                                         </div>
                                        
                                        <button type="button" name="add" id="btn-add-fee" class="btn btn-success" data-toggle="modal" data-target="#feemodal" id="btnfeemodal">Add Extra Fee</button>

                                        <button type="submit" class="btn btn-success">Update Student Info</button>
                                        </div> 
                                     </div>
                               </form>
                                
                            </div>
                    </div>

             <div class="modal" id="feemodal">
                <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                    <h4 class="modal-title">Addition of Fee</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">

                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">Select Fee Type<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                            <div class="controls">
                                <input type="text" name="other_fee" id="other_fee" class="form-control" data-validation-required-message="Admission Date is required" >
                            </div>  
                            </div>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="addstudentfee(this)" >Submit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
                </div>
            </div>
            </div>

   

  <script type="text/javascript">
          
  
      function showadmissionfee(){
 
              var datas = document.getElementById('modalclass').value;
              document.getElementById('section_value').innerHTML="Select Section";
  
              var section_url = '{{ route("section_info", ":id") }}';
                    section_url = section_url.replace(':id', datas);
  
              $.ajax({
                  url: section_url,
                  type: "GET",
                  success: function (data){ 
                      //  debugger; 
                      
                       var x = JSON.parse(data);
                       var selectHTML = '';
                       for (i=0; i< x.length; i++)
                          {
                              selectHTML +='<option value="'+x[i]['id']+'">'+x[i]['section_name']+'</option>';
                          }
                          $('#section_value').append(selectHTML);           
                },
                  
                  error: function (err) {
                      debugger;
                      console.log("error:", err);
                      var t = '<p>Something went wrong!!</p>';
                      
                      $('#feedetails').append(t);
                  }
              });
           
  
      }
      function showsectionfee(){
              debugger;
              // document.getElementById('section_field').innerHTML="";
              var sec_id = document.getElementById('section_value').value;      
      
              var sec_url = '{{ route("section_fee", ":id") }}';
                    sec_url = sec_url.replace(':id', sec_id);
      
                $.ajax({
                  url: sec_url,
                  type: "GET",
                  success: function (data){ 
                     debugger;
                     if(data != ""){
                           document.getElementById('section_fee_title').style.display = 'block'; 
  
                     }
                      var x = data;
                      
                      for (var key in x) {
                          if (x.hasOwnProperty(key)) {
                       var detaildisplay=document.getElementById('section_field').innerHTML +='<div class="col-md-4" id="extra_div"><div class="form-group"><h5>'+key+'<span class="text-danger">*</span></h5><div class="controls text-dark"><input type="number" value="'+x[key]+'" name="other_fees['+key+']" id="registeration" class="form-control"  /></div></div> </div>';
                              
                          }
                      }                  
                },
                  
                  error: function (err) {
                      debugger;
                      console.log("error:", err);
                      var t = '<p>Something went wrong!!</p>';
                      
                      $('#feedetails').append(t);
                  }
              });
              
           
  
      }
  
      function addstudentfee(val){
        //   document.getElementById('additional_fee_title').style.display = 'block'; 
          var ad=document.getElementById('other_fee').value;
          debugger;
          var xy = ad.toLowerCase()
          .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
          .replace(/\s+/g, '_') // collapse whitespace and replace by -
          .replace(/-+/g, '_');
          // alert(x);
          var detaildisplay=document.getElementById('additional_field').innerHTML +='<div class="col-md-6" id="extra_div"><div class="form-group"><h5>'+ad+'<span class="text-danger">*</span></h5><div class="controls text-dark"><input type="number" name="other_fees['+xy+']" id="registeration" class="form-control"  /></div></div> </div><div class="col-md-6"><div class="form-group"><h5> Installment Type:<span class="text-danger">*</span></h5><div class="form-check-inline"><label class="form-check-label"><input type="radio" name="installment['+xy+']" checked class="form-check-input" value="yearly">Yearly</label></div><div class="form-check-inline"><label class="form-check-label"><input type="radio" name="installment['+xy+']" class="form-check-input" value="monthly">Monthly</label></div><div class="form-check-inline"><label class="form-check-label"><input type="radio" name="installment['+xy+']" class="form-check-input" value="half-yearly">Half Yearly</label></div><div class="form-check-inline"><label class="form-check-label"><input type="radio" name="installment['+xy+']" class="form-check-input" value="quaterly">Quaterly</label></div><div class="form-check-inline"><label class="form-check-label"><input type="radio" name="installment['+xy+']" class="form-check-input" value="once">Once</label></div></div></div>';
          // <span><i class="fa fa-trash " ></i></span>
  
          debugger;
      }

      function readURL(input) {
                  if (input.files && input.files[0]) {
                      var reader = new FileReader();
  
                      reader.onload = function (e) {
                          $('#current_image').attr('src', e.target.result);
                      }
                      reader.readAsDataURL(input.files[0]);
                  }
              }
              $("#image").change(function(){
                  readURL(this);
              });
  
     
     
  </script>
  
@endsection