@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('assets/web/css/user-panel.css') }}">
@endsection
@section('content')
<section>
    <div class="main-wrapper" style="min-height: calc(100vh - 516px);">
        <div class="pt-50 pb-50 section--bg">
            <div class="container">
                <div class="row justify-content-center gy-4">
                    <div class="col-xl-3 col-lg-6 col-md-8">
                        @include('include.side-nav')
                    </div>
                    <div class="col-xl-9 ps-xl-4">
                        <div class="custom--card mt-4">
                            <div class="card-header bg--dark d-flex justify-content-between align-items-center">
                                <h5 class="text-white me-3">Employment History</h5>
                                <button type="button" class="text--base p-0 bg-transparent" data-toggle="modal" data-target="#addEducation"><i class="las la-plus"></i> Add New</button>

                            </div>
                            <div class="card-body">
                                <div class="table-responsive--md">
                                    <table class="table custom--table">
                                        <thead>
                                            <tr>
                                                <th>Company Name</th>
                                                <th>Department</th>
                                                <th>Designation</th>
                                                <th>Employment Period</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($employmentHistory as $item)
                                                <tr>
                                                    <td data-label="Company Name">{{ $item->company_name }}</td>
                                                    <td data-label="Department">{{ $item->department }}</td>
                                                    <td data-label="Designation">{{ $item->designation }}</td>
                                                    <td data-label="Employment Period">{{ $item->created_at }} -
                                                        {{ $item->currently_work == 1 ? 'currently working': $item->end_date }}
                                                    </td>
                                                    <td data-label="Action">
                                                        <a href="javascript:void(0)"
                                                            class="icon-btn bg--primary updateEmploymentHistory"
                                                            data-toggle="modal" data-target="#updateEmployment"
                                                            data-id="{{$item->id}}" data-company_name="{{ $item->company_name }}" data-designation="{{ $item->designation }}"
                                                            data-department="{{$item->department}}" data-start_date="2022-06-01"
                                                            data-end_date="{{$item->created_at}}" data-currently_work="0"
                                                            data-responsibilities="{{ $item->responsibilities }}"></i></a>
                                                        <a href="javascript:void(0)" data-id="{{ $item->id }}" data-toggle="modal"
                                                            data-target="#employmentDelete"
                                                            class="icon-btn bg--danger deleteEmploymentHistory"><i
                                                                class="las la-trash-alt"></i></a>
                                                    </td>
                                                </tr>                                                
                                            @empty
                                                <p>NO DATA</p>
                                            @endforelse
                                            

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div id="addEducation" class="modal fade pt-100 custom--modal" role="dialog">
    <div class="modal-dialog">  
      <!-- Modal content-->
        <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="addEducation">Add Employment History</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              {{-- <form action="{{ url('/update/user/employment-history') }}" method="POST"> --}}
                 @csrf
                  <div class="modal-body">
                    <div class="form-group">
                        <label for="level">Company Name</label>
                        <input type="text" name="company_name" id="company_name" class="form--control" value="" required="" placeholder="Enter Company Name">
                    </div>
                    <div class="form-group">
                        <label for="department">Department</label>
                        <input type="text" name="department" id="department" class="form--control" value="" required="" placeholder="Enter Department">
                    </div>          
                    <div class="form-group">
                        <label for="designation">Designation</label>
                        <input type="text" name="designation" id="designation" class="form--control" value="" required="" placeholder="Enter Designation">
                    </div>                  
                    <div class="form-group">
                        <label for="start_date">Employment Period</label>
                        <input type="date" name="start_date" id="start_date" class="form--control" value="" required="" placeholder="mm/dd/yyyy">
                    </div>
                    <div class="form-group">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <label for="end_date">To</label>
                            <div class="form-check custom--checkbox style--two text-end">
                              <input class="form-check-input" type="checkbox" name="currently_work" value="1" id="currently_work">
                              <label class="form-check-label fs--12px font-weight-bold" for="flexCheckDefault">Currently Work</label>
                            </div>
                        </div>
                        <input type="date" name="end_date" id="end_date" class="form--control" value="" placeholder="mm/dd/yyyy">
                    </div>
                    <div class="form-group">
                        <label for="responsibilities">Responsibilities</label>
                        <textarea class="form--control" id="responsibilities" name="responsibilities" placeholder="Write Job Responsibilities" required=""></textarea>
                    </div>  
                  </div>  
                  <div class="modal-footer">
                      <button type="button" class="btn btn--secondary btn-sm" data-dismiss="modal">Close</button>
                      <button id="submit" class="btn btn--success btn-sm" data-bs-dismiss="modal">Submit</button>
                  </div>
              {{-- </form> --}}
          </div>  
    </div>
</div>  

<div class="modal fade custom--modal" id="updateEmployment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">@lang('Update Employment History')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{url('/employment/update')}}" method="POST">
                @csrf
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group">
                            <label for="company_name">@lang('Company Name')</label>
                            <input type="text" name="company_name" id="company_name" class="form--control" value="" required="" placeholder="@lang('Enter Company Name')">
                        </div>

                         <div class="form-group">
                            <label for="department">@lang('Department')</label>
                            <input type="text" name="department" id="department" class="form--control" value="" required="" placeholder="@lang('Enter Department')">
                        </div>
              
                        <div class="form-group">
                            <label for="designation">@lang('Designation')</label>
                            <input type="text" name="designation" id="designation" class="form--control" value="" required="" placeholder="@lang('Enter Designation')">
                        </div>
                      
                        <div class="form-group">
                            <label for="start_date">@lang('Employment Period')</label>
                            <input type="date" name="start_date" id="start_date" class="form--control" value="" required="" placeholder="@lang('mm/dd/yyyy')">
                        </div>

                        <div class="form-group">
                            <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <label for="end_date">@lang('To')</label>
                                <div class="form-check custom--checkbox style--two text-end">
                                  <input class="form-check-input" type="checkbox" name="currently_work" value="1" id="flexCheckDefault">
                                  <label class="form-check-label fs--12px font-weight-bold" for="flexCheckDefault">
                                        @lang('Currently Work')
                                  </label>
                                </div>
                            </div>
                            <input type="date" name="end_date" id="end_date" class="form--control" value="" placeholder="@lang('mm/dd/yyyy')">
                        </div>

                        <div class="form-group">
                            <label for="responsibilities">@lang('Responsibilities')</label>
                            <textarea class="form--control" id="responsibilities" name="responsibilities" placeholder="@lang('Write Job Responsibilities')" required=""></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn--secondary btn-sm" data-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn--success btn-sm">@lang('Submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade custom--modal" id="employmentDelete" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{url('/employment/delete')}}">
                @csrf
                <input type="hidden" name="id">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang('Delete Confirmation')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @lang('Are you sure you want to delete this employment history?')
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--secondary btn-sm" data-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn--primary btn-sm">@lang('Confirm')</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>

    $(document).on('click','#submit',function(e){
        var company_name = $('#company_name').val();
        var department = $('#department').val();
        var designation = $('#designation').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        if($('#currently_work').is(":checked")){
            var currently_work = 1;
        }else{
            var currently_work = 0;
        }
        var responsibilities = $('#responsibilities').val();
        
        var data = {
            company_name :company_name,
            department :department ,
            designation :designation, 
            start_date :start_date, 
            end_date :end_date,
            end_date:end_date,
            currently_work:currently_work,
            responsibilities:responsibilities
        };

        _ajax.post('/update/user/employment-history',data,function(response){
            if(response.success){
                    alert(response.message);
            }
        });
    });

    $('.updateEmploymentHistory').on('click', function(){
        var modal = $('#updateEmployment');
        modal.find('input[name=id]').val($(this).data('id'));
        modal.find('input[name=company_name]').val($(this).data('company_name'));
        modal.find('input[name=designation]').val($(this).data('designation'));
        modal.find('input[name=department]').val($(this).data('department'));
        modal.find('input[name=start_date]').val($(this).data('start_date'));
        modal.find('input[name=end_date]').val($(this).data('end_date'));
        var data = $(this).data('currently_work');
        if(data == 1){
            modal.find('input[name=currently_work]').attr('checked', true);
        }else{
            modal.find('input[name=currently_work]').attr('checked', false);
        }
        modal.find('textarea[name=responsibilities]').val($(this).data('responsibilities'));
        modal.show();
    });

    $('.deleteEmploymentHistory').on('click', function(){
        var modal = $('#employmentDelete');
        modal.find('input[name=id]').val($(this).data('id'));
        modal.show();
    });

</script>
@endsection