@extends('layouts.employee')
@section('content')
<div class="container-fluid">
          <!-- start page title -->
          <div class="row">
            <div class="col-12">
              <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Education </h4>

                <div class="page-title-right">
                  <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                    <li class="breadcrumb-item active">Education </li>
                  </ol>
                </div>

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

        <div class="row">
          <div class="col-lg-10 mx-auto">
              @if(session('alert-green'))
                  <div  id="mydiv" class="alert alert-success mt-3 text-center">
                      {{ session('alert-green') }}
                  </div>
              @endif

              @if(session('alert-danger'))
                  <div id="mydiv" class="alert alert-danger mt-3 text-center">
                      {{ session('alert-danger') }}
                  </div>
              @endif
              @if($errors->any())
                  <div id="mydiv" class="row">
                      <div class="col-md-12 mb-5">
                          @foreach ($errors->all() as $error)
                          <div class="text-danger small mb-1">* {{$error}}</div>
                          @endforeach
                      </div>
                  </div>
              @endif
          </div>
      </div>
          <!-- end page title -->
          <div class="row">
            <div class="col-lg-12">
              <div class="card"> 
                <div class="card-body p-4">                                 
                    <form action="{{ route('employee.education_action', ['id' => $user->id]) }}" method="post">
                      @csrf
                        <table class="table table-bordered" id="load_education_table">
                            <thead>
                            <tr>
                                <th>Level</th>
                                <th>Year</th>
                                <th>Result</th>
                                <th>Institution</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                              
                            @if(isset($employee->education) && $employee->education()->exists())
                                @foreach($employee->education as $education)
                                    <tr>
                                        <td>{{ $education->education_level ?? '' }}</td>
                                        <td>{{ $education->year ?? '' }}</td>
                                        <td>{{ $education->result ?? '' }}</td>
                                        <td>{{ $education->institution ?? '' }}</td>
                                        <td>
                                        @if(Auth::user()->user_type == "HR")
                                            <a onclick="remove_education_data({{ $education->id ?? '' }})" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></a>
                                        @endif
                                        </td>
                                    </tr>
                                @endforeach

                            @endif         
                            </tbody>
                        </table>
                        <div class="form-group">
                            <a id="more_education_btn" class="btn btn-success float-right">
                            <i class="fa fa-plus"></i></a>
                        </div>

                        <div class="col-lg-12">
                          <div class="row">
                            <!-- end col -->
                            <div class="col-lg-12 text-end">
                              <button type="submit" class="btn btn-outline-primary w-sm me-2">Reset</button>
                              <button type="submit" class="btn btn-primary w-sm">Submit</button>
                            </div>
                          </div>
                        </div>

                    </form>
                   
                </div>                
                <!-- end card body -->
              </div>
              <!-- end card -->
            </div>
          </div>
        </div>
@endsection
@section('script')
<script type="text/javascript">  

    //education
    var count_2 = 1;
    $(document).on('click', "#more_education_btn", function (e) {
        e.preventDefault();
        var html = '';
        html = html +
            '<tr id="loaded_edu_tr_' + count_2 + '">' +
            '<td><input   type="text"  name="education_level[]" class="form-control"></td>' +
            '<td><input   type="text"  name="year[]" class="form-control"></td>' +
            '<td><input   type="text"  name="result[]" class="form-control"></td>' +
            '<td><input   type="text"  name="institution[]" class="form-control"></td>' +
            '<td><button onclick="remove_education(' + count_2 + ')" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></button></td>' +
            '</tr>';
        count_2++;
        $('#load_education_table').append(html);
    });
    
    function remove_education(id) {
        event.preventDefault();
        id = '#loaded_edu_tr_' + id;
        $(id).remove();
    }

    function remove_education_data(id){
        //alert(id);
        $.ajax({
            type: "POST",
            url: '{{ url("employee/education/destroy")}}/'+id, // This is what I have updated
            data: {
                "_token": "{{ csrf_token() }}"
                }
            
        }).done(function( msg ) {
            location.reload();
        });
    }

    $( ".date_of_birth" ).datepicker({
          dateFormat: "yy-mm-dd",
          changeMonths: "true",
          changeYear: "true"
        });
  
    $(document).ready(function () {               
        setTimeout(function() {
            $('#mydiv').fadeOut('fast');
        }, 3000);

    });
    
</script>
@endsection