@extends($activeTemplate.'layouts.master')
@section('content')
<div class="col-xl-9 ps-xl-4">
    <div class="row g-2">
        <div class="col-12 text-end">
            <button type="button" class="btn btn--base-outline btn-sm add-btn">
                <i class="las la-plus"></i>@lang('Add New')
            </button>
        </div>
        <div class="col-12">
            <div class="custom--card">
                <div class="card-body p-0">
                    <div class="table-responsive--md">
                        <table class="table custom--table">
                            <thead>
                                <tr>
                                    <th>@lang('Company Name')</th>
                                    <th>@lang('Department')</th>
                                    <th>@lang('Designation')</th>
                                    <th>@lang('Employment Period')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($employments as $employment)
                                    <tr>
                                        <td>{{__($employment->company_name)}}</td>
                                        <td>{{__($employment->department)}}</td>
                                        <td>{{__($employment->designation)}}</td>
                                        <td>{{showDateTime($employment->start_date, 'd M Y')}} -
                                            @if($employment->currently_work)
                                                @lang('Present')
                                            @else
                                                {{showDateTime($employment->end_date, 'd M Y')}}
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button"  data-edit='@json($employment)' class="btn btn--success-outline btn-sm edit-btn">
                                                <i class="las fa-pencil-alt"></i> @lang('Edit')
                                            </button>
                                            <button type="button" class="btn btn--danger-outline btn-sm confirmationBtn"
                                                data-question="@lang('Are you sure to delete this educational qualification')"
                                                data-action="{{ route('user.employment.delete',$employment->id) }}">
                                                <i class="las la-trash-alt"></i> @lang('Delete')
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="100%">@lang('No data found')</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start Education Qualification -->
<div class="modal fade custom--modal" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">@lang('Add Employment History')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{route('user.employment.store')}}" method="POST">
            @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group">
                            <label>@lang('Company Name')</label>
                            <input type="text" name="company_name" class="form--control" value="{{old('company_name')}}" required>
                        </div>
                        <div class="form-group col-sm-6">
                            <label>@lang('Department')</label>
                            <input type="text" name="department" class="form--control" value="{{old('department')}}" required>
                        </div>

                        <div class="form-group col-sm-6">
                            <label>@lang('Designation')</label>
                            <input type="text" name="designation" class="form--control" value="{{old('designation')}}" required>
                        </div>

                        <div class="form-group">
                            <label>@lang('Employment Period')</label>
                            <input type="text" name="start_date" class="form--control date" autocomplete="off" value="{{old('start_date')}}" required>
                        </div>

                        <div class="form-group">
                            <div class="d-flex justify-content-between flex-wrap">
                                <label for="to_date">@lang('To')</label>
                                <label for="currently_work" class="currently_work"><input type="checkbox" name="currently_work" id="currently_work">@lang('Currently Work Here')</label>
                            </div>
                            <input type="text" id="to_date" name="end_date" required autocomplete="off" class="form--control date" value="{{old('end_date')}}" >
                        </div>
                        <div class="form-group">
                            <label>@lang('Responsibilities')</label>
                            <textarea class="form--control"  name="responsibilities" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>
<x-confirmation-modal/>
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{asset('assets/global/css/datepicker.min.css')}}">

@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/datepicker.en.js') }}"></script>
@endpush

@push('script')
    <script>
        "use strict";
        (function ($) {

            let modal=$('#modal');

            $('.edit-btn').on('click', function(){
                let action = "{{route('user.employment.store',':id')}}"
                let data   = $(this).data('edit');
                modal.find('.modal-title').text("@lang('Update Employment History')")
                modal.find('input[name=company_name]').val(data.company_name);
                modal.find('input[name=department]').val(data.department);
                modal.find('input[name=designation]').val(data.designation);
                modal.find('input[name=start_date]').val(data.start_date);
                modal.find('input[name=end_date]').val(data.end_date);
                modal.find('textarea[name=responsibilities]').text(data.responsibilities);
                if(data.currently_work){
                    $("#currently_work").attr('checked',true);
                }else{
                    $("#currently_work").attr('checked',false);
                }
                modal.find('form').attr('action',action.replace(':id',data.id))
                modal.modal('show');
            });

            $('.add-btn').on('click',function(e){
                let action = "{{route('user.employment.store')}}";
                modal.find('.modal-title').text("@lang('Add Employment History')");
                modal.find('form').trigger('reset');
                modal.find('form').attr('action',action);
                modal.modal('show');
            });

            $('.date').datepicker({
                language  : 'en',
                dateFormat: 'yyyy-mm-dd',
                maxDate:new Date()
            });

            $("#currently_work").on('change',function (e) {
                if(e.target.checked){
                    let date=new Date().toISOString().slice(0, 10);
                    $('#to_date').val(date);
                    $('#to_date').attr('readonly',true);
                    $('#to_date').attr('required',false);
                }else{
                    $('#to_date').val('');
                    $('#to_date').attr('readonly',false);
                    $('#to_date').attr('required',true);
                }
             });
        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .datepickers-container {
            z-index: 9999999;
        }
        label.currently_work.required::after {
            display: none !important;
        }
    </style>
@endpush