@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">Work Experience</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">Work Experience</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.work_experience_action', ['id' => $user->id]) }}" method="post">
                      @csrf
                        <table class="table table-bordered" id="load_company_table">
                            <thead>
                            <tr>
                                <th>Company Name</th>
                                <th>Job Titile</th>
                                <th>From</th>
                                <th>To</th>
                                <th>Remarks</th>

                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(isset($employee->experience) && $employee->experience()->exists())
                                @foreach($employee->experience as $experience)
                                    <tr>
                                        <td>{{ $experience->company_name ?? '' }}</td>
                                        <td>{{ $experience->job_title ?? '' }}</td>
                                        <td>{{ $experience->from_date ?? '' }}</td>
                                        <td>{{ $experience->to_date ?? '' }}</td>
                                        <td>{{ $experience->remarks ?? '' }}</td>
                                        <td>
                                        @if(Auth::user()->user_type == "HR")
                                            <a onclick="remove_experience({{ $experience->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">
                        <button id="more_company_btn" class="btn btn-success float-right"><i class="fa fa-plus"></i>
                        </button>
                    </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">

    //Experience
    var count = 1;
    $(document).on('click', "#more_company_btn", function (e) {
        e.preventDefault();
        var html = '';
        html = html +
            '<tr id="loaded_tr_' + count + '">' +
            '<td><input   type="text"  name="company_name[]" class="form-control"></td>' +
            '<td><input type="text"  name="job_title[]" class="form-control"></td>' +
            '<td><input type="date"  name="from_date[]" class="form-control "></td>' +
            '<td><input  type="date"  name="to_date[]" class="form-control  "></td>' +
            '<td><textarea  name="remarks[]" class="form-control"></textarea></td>' +
            '<td><button onclick="remove_job(' + count + ')" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></button></td>' +
            '</tr>';
        count++;
        $('#load_company_table').append(html);
    });
    function remove_job(id) {
        event.preventDefault();
        id = '#loaded_tr_' + id;
        $(id).remove();
    }

    
    function remove_experience(id){
        $.ajax({
            type: "POST",
            url: '{{ url("employee/experience/destroy")}}/'+id, // This is what I have updated
            data: {
                "_token": "{{ csrf_token() }}"
                }
            
        }).done(function( msg ) {
            location.reload();
        });
    }
    $(document).ready(function () {               
        setTimeout(function() {
            $('#mydiv').fadeOut('fast');
        }, 3000);

    });


  </script>
@endsection