<div class="modal fade" id="createDependant" role="dialog" >
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" id="dependant-heading">Dependants</h4>
        </div>
        <div class="modal-body" >
            <form id="dependants" method="post" action="{{ route('dependants.store') }}" class="form-inline" style="padding-top:10px;"> 
            {{ csrf_field() }}
            <div class=row style="padding:0px 5px 5px 10px;"> 
                          
              <div class=form-group style="padding-left:20px;width=20%">     
              <p>Name<span>*</span></p>	
                  <input name="name" type="text"  class="form-control" id="dependant_name" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 30px;float: left;padding: 0px 15px;"
                            required>
              </div>
              <div class=form-group style="padding-left:20px;width=40%">     
              <p>Year of Birth <span>*</span></p>	
              <input name="dateofBirth" type="date" class="form-control" id="dependant_yearofbirth" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 30px;float: left;padding: 0px 15px;">
              </div>
            </div>           
            <div class=row style="padding:0px 5px 5px 10px;">       
            <div class=form-group style="padding-left:20px;width=20%;height:80px;" >     
              <p>Relation<span>*</span></p>	
              <select class="form-control" name="relation" id="dependantrelation"style="width:15em">
              <option value="">Select Relation</option>
                <option value="partner">Spouse</option>
                <option value="child">Child</option>
                <option value="grandchild">Grand child</option>
                <option value="grand-parent">Grand parent</option>
                <option value="ex-spouse">Ex-Spouse</option>
              </select>
              </div> 

            </div><!-- End of third row -->            

            </form> 
        </div>
        <div class="modal-footer">
        <button type="button" value="create" onclick="dependant()" class="edit btn btn-primary" id="btn-save">Save </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
      
  </div>
</div>

<!-- Modal form to edit a form -->

<div id="editDependantModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                    <div class="form-group" style="display:none">
                            <label class="control-label col-sm-2" for="dependant_id">Dependant ID:</label>
                            <div class="col-sm-10">
                                <input type="text" value= ""class="form-control" id="dependant_id" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="dependant_name">Name:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="dependant_name" autofocus>
                                <p class="errordependantName text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="dependant_yearofbirth">Year of Birth:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="dependant_yearofbirth" autofocus>
                                <p class="errordependantYearofBirth text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                         <p>Relation<span>*</span></p>	
                          <select class="form-control" name="relation" id="dependantrelation"style="width:15em">
                          <option value="">Select Relation</option>
                            <option value="partner">Spouse</option>
                            <option value="child">Child</option>
                            <option value="grandchild">Grand child</option>
                            <option value="grand-parent">Grand parent</option>
                            <option value="ex-spouse">Ex-Spouse</option>
                          </select>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary edit" data-dismiss="modal">
                            <span class='glyphicon glyphicon-check'></span> Edit
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
function dependant() {
  document.getElementById("dependants").submit();
 }
 $(document).on('click', '.edit-dependantmodal', function() {
            $('.modal-title').text('Edit');
            $('#dependant_id').val($(this).data('id'));
            $('#dependant_name').val($(this).data('name'));
            $('#dependant_yearofbirth').val($(this).data('dateofBirth'));
            $('#dependantrelation').val($(this).data('relation'));
            id = $('#dependant_id').val();
            $('#editDependantModal').modal('show');
        });
        $('.modal-footer').on('click', '.edit', function() {
            $.ajax({
                type: 'PUT',
                url: 'dependants/' + id,
                data: {
                    '_token': $('input[name=_token]').val(),
                    'dependant_name': $('#dependant_name').val(),
                    'dependant_yearofBirth': $('#dependant_yearofbirth').val(),
                    'dependant_relation': $('#dependantrelation').val(),
                },
                success: function(data) {
                    $('.errordependantName').addClass('hidden');
                    $('.errordependantYearofBirth').addClass('hidden');
                   

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#editDependantModal').modal('show');
                            toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                         if (data.errors.business_unit_code) {
                            $('.errordependantName').removeClass('hidden');
                            $('.errordependantName').text(data.errors.business_unit_code);
                        }
                        if (data.errors.business_unit) {
                            $('.errordependantYearofBirth').removeClass('hidden');
                            $('.errordependantYearofBirth').text(data.errors.business_unit);
                        }
                       
                    } else {
                        toastr.success('Successfully added BusinessUnit!', 'Success Alert', {timeOut: 5000});
                        $('.dependant' + data.id).replaceWith("<tr class='dependant" + data.id + "'><td>" + data.name + "</td><td>" + data.dateofBirth + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-dependant_name='" + data.name + "' data-dependant_yearofBirth='" + data.dateofbirth + "' data-dependant_relation='" + data.relation + "><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-business_unit_code='" + data.business_unit_code + "' data-business_unit='" + data.business_unit + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
                    }
                }
            });
        });
</script>
