@extends('master')
@section('content')

<section>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-fluid">
            <div class="card">
               

                <div class="card-header border-0 pt-5 p-0">
                    <div class="container-fluid"><span id="general_result"></span></div>
                    <div class="container-fluid mt-3 text-end">
                        <button type="button" class="btn btn-sm btn-primary" id="createButton"><i class="fa fa-plus"></i> {{__('Add New')}}</button>
                        
                    </div>
                </div>

                <div class="card-body py-4">
                    <div class="table-responsive hr-bg">
                        <table id="appraisalTable" class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                            <thead>
                                <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                    <th class="not-exported">#</th>
                                    <th>{{trans('Company')}}</th>
                                    <th>{{trans('Employee')}}</th>
                                    <th>{{trans('Department')}}</th>
                                    <th>{{trans('Designation')}}</th>
                                    <th>@lang('Appraisal Date')</th>
                                    <th class="not-exported">{{trans('action')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!--begin::Modal - Create Appraisal-->
<div class="modal fade" id="createModalForm" data-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-850px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Form-->
            <form class="form" id="submitForm" method="POST">
                @csrf
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2 id="createModalLabel">{{__('Give Performance Appraisal')}}</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div id="closeModalBtn" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="black" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="black" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->

                <span id="alertMessage"></span>

                <!--begin::Modal body-->
                <div class="modal-body py-10 px-lg-17">
                    <div class="row mb-5">
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{__('Company')}}</label>
                            <select name="company_id" id="companyId" data-dropdown-parent="#createModalForm" data-control="select2" class="form-select form-select-solid  dynamic"
                                data-live-search="true" data-live-search-style="contains" data-first_name="first_name"
                                data-last_name="last_name" data-placeholder="Select Company" title='{{__('Selecting',['key'=>trans('Company')])}}'>
                                <option value=""></option>
                                @foreach ($companies as $item)
                                <option value="{{$item->id}}">{{$item->company_name}}</option>
                                @endforeach
                            </select>
                        </div> 

                      
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{__('Employee')}}</label>
                            <select name="employee_id" id="employeeId" data-dropdown-parent="#createModalForm" data-control="select2" class="form-select form-select-solid"
                                data-live-search="true" data-live-search-style="contains" data-first_name="first_name" data-last_name="last_name" data-placeholder="Select Employee"
                                data-last_name="last_name" title='{{__('Selecting',['key'=>trans('Employee')])}}'>
                            </select>
                        </div>

                        <div class="col-md-12 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{__('Select Date')}}</label>
                            <input type="text" class="form-control form-control-solid flatpickr-date" name="date" id="date" placeholder="Select Date" autocomplete="off">
                        </div>

                        <div class="col-md-6 fv-row">
                          <div class="mb-3">
                          <h5 class="fw-bold bg-light-dark p-3">{{__('Technical Competencies')}}</h5>
                          </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Customer Experience')}}</label>
                                <select name="customer_experience" id="customerExperience" data-dropdown-parent="#createModalForm"  data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Marketing')}}</label> 
                                <select name="marketing" id="marketing" data-dropdown-parent="#createModalForm"  data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Administration')}}</label>
                                <select name="administration" id="administration" data-dropdown-parent="#createModalForm"  data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6 fv-row">
                          <div class="mb-3">
                          <h5 class="fw-bold bg-light-dark p-3">{{__('Organizational Competencies')}}</h5>
                          </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Professionalism')}}</label>
                                <select name="professionalism" id="professionalism" data-dropdown-parent="#createModalForm"  data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Integrity')}}</label>
                                <select name="integrity" id="integrity" data-dropdown-parent="#createModalForm"  data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>

                            <div class="mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Attendance')}}</label>
                                <select name="attendance" id="attendance" data-dropdown-parent="#createModalForm" data-control="select2" class="form-select form-select-solid">
                                    <option value="None" selected>None</option>
                                    <option value="Beginner">Beginner</option>
                                    <option value="Intermidiate">Intermidiate</option>
                                    <option value="Advanced">Advanced</option>
                                    <option value="Expert/Leader">Expert/Leader</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{__('Remarks')}}</label>
                            <textarea name="remarks" id="remarks" rows="5" class="form-control form-control-solid" placeholder="Remarks"></textarea>
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->

                <!--begin::Modal footer-->
                <div class="modal-footer flex-center">
                    <!--begin::Button-->
                    <button type="button" id="save-button" class="btn btn-primary">
                        <span class="indicator-label">{{trans('Save')}}</span>
                    </button>
                    <!--end::Button-->
                    <!--begin::Button-->
                    <button type="button" id="closeModalBtn" class="btn btn-light" data-bs-dismiss="modal">{{trans('Close')}}</button>
                    <!--end::Button-->
                </div>
                <!--end::Modal footer-->
            </form>
            <!--end::Form-->
        </div>
    </div>
</div>
<!--end::Modal - Create Appraisal-->


@include('hr.performance.appraisal.edit-modal')
@include('hr.performance.indicator.delete-modal')
@include('hr.performance.goal-type.delete-checkbox-confirm-modal')

@endsection
@section('page_script')
<script nonce="{{ $cspNonce }}">

    $(document).ready(function(){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.flatpickr-date').flatpickr({
        dateFormat: "Y-m-d"
    });

        var table = $('#appraisalTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('performance.appraisal.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'company_name', name: 'company_name'},
                {data: 'employee_name', name: 'employee_name'},
                {data: 'department_name', name: 'department_name'},
                {data: 'designation_name', name: 'designation_name'},
                {data: 'date', name: 'date'},
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                },
            ],

            //----- Start Checkbox ----
            'columnDefs': [
                {
                    "orderable": false,
                    'targets': [0]
                },
            
            ],
            'select': {style: 'multi', selector: 'td:first-child'},
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
            //------ End Checkbox ------


            "order": [],
            'language': {
                'lengthMenu': '_MENU_ {{__("records per page")}}',
                "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
                "search": '{{trans("Search")}}',
                'paginate': {
                    'previous': '{{trans("Previous")}}',
                    'next': '{{trans("Next")}}'
                }
            },

            dom: '<"row"lfB>rtip',
            buttons: [
                {
                    extend: 'pdf',
                    text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'csv',
                    text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'print',
                    text: '<i title="print" class="fa fa-print"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                }
            ]
        });

    // });

        //after selecting Company then Designation will be loaded
        $('#companyId').change(function() {
            var companyId = $(this).val();
            if (companyId){
                $.get("{{route('performance.appraisal.get-employee')}}",{company_id:companyId}, function (data){
                    // $('#designationId').empty().html(data);

                    let all_employees = '';
                    $.each(data.employees, function (index, value) {
                        all_employees += '<option value=' + value['id'] + '>' + value['first_name'] + ' ' + value['last_name'] + '</option>';
                    });
                  
                    $('#employeeId').empty().append(all_employees);
                    $('#employeeId').trigger('change');
                    
                });
            }else{
                $('#employeeId').empty().html('<option value=""></option>');
            }
        });


        //----------Insert Data----------------------
        $("#save-button").on("click",function(e){
            e.preventDefault();

            $.ajax({
                url: "{{route('performance.appraisal.store')}}",
                type: "POST",
                data: $('#submitForm').serialize(),
                success: function(data){
                    
                    if (data.errors) {
                        $("#alertMessage").addClass('bg-danger text-center text-light p-1').html(data.errors) //Check in create modal
                    }
                    else if(data.success){
                    toastr.success(data.success, "Success!");
                    setTimeout(function () {
                        $("#createModalForm").modal('hide');
                        $('#submitForm')[0].reset();
                        table.draw();
                        $('select').select2('val', '');
                        $("#alertMessage").removeClass('bg-danger text-center text-light p-1');
                    }, 1000);
                   
                    }
                }
            });
        });

        // --------------------- Edit ------------------
        $(document).on("click",".edit",function(e){
            e.preventDefault();
            // $('#EditformModal').modal('show');
            var appraisalId = $(this).data("id");
            var element = this;
            console.log(appraisalId)

            $.ajax({
                url: "{{route('performance.appraisal.edit')}}",
                type: "GET",
                data: {id:appraisalId},
                success: function(data){
                    console.log(data)
                    $('#appraisalIdEdit').val(data.appraisal.id);
                    $('#companyIdEdit').val(data.appraisal.company_id).trigger('change');

                    let all_employees = '';
                    $.each(data.employees, function (index, value) {
                        all_employees += '<option value=' + value['id'] + '>' + value['first_name'] + value['last_name'] + '</option>';
                    });
                    $('#employeeIdEdit').empty().append(all_employees);
                    $('#employeeIdEdit').val(data.appraisal.employee_id).trigger('change');
                    $('#dateEdit').val(data.appraisal.date);
                    $('#customerExperienceEdit').val(data.appraisal.customer_experience).trigger('change');
                    $('#marketingEdit').val(data.appraisal.marketing).trigger('change');
                    $('#administrationEdit').val(data.appraisal.administration).trigger('change');
                    $('#professionalismEdit').val(data.appraisal.professionalism).trigger('change');
                    $('#integrityEdit').val(data.appraisal.integrity).trigger('change');
                    $('#attendanceEdit').val(data.appraisal.attendance).trigger('change');
                    $('#remarksEdit').val(data.appraisal.remarks);
                    $('#EditformModal').modal('show');
                }
            });
        });


        // --------------------- EDit ------------------



        // ---------- Update by Id----------
        $("#update-button").on("click",function(e){
            e.preventDefault();

            $.ajax({
                url: "{{route('performance.appraisal.update')}}",
                type: "POST",
                data: $('#updatetForm').serialize(),
                success: function(data){
                    console.log(data);
                    if(data.success)
                    {
                        toastr.success(data.success, "Success!");
                        $('#EditformModal').modal('hide');
                        table.draw();
                        $('#updatetForm')[0].reset();
                        $('select').select2('val', '');
                    }
                }
            });
        });

        //---------- Delete Data ----------
        $(document).on("click",".delete",function(e){

            $('#confirmDeleteModal').modal('show');
            var appraisalIdDelete = $(this).data("id");
            var element = this;
            // console.log(goalTypeIdDelete);

            $("#deleteSubmit").on("click",function(e){
                $.ajax({
                    url: "{{route('performance.appraisal.delete')}}",
                    type: "GET",
                    data: {appraisal_id:appraisalIdDelete},
                    success: function(data){
                        console.log(data);
                        if(data.success)
                        {
                            table.draw();
                            $("#confirmDeleteModal").modal('hide');
                            $('#success_alert').fadeIn("slow"); //Check in top in this blade
                            $('#success_alert').addClass('alert alert-success').html(data.success);
                            setTimeout(function() {
                                $('#success_alert').fadeOut("slow");
                            }, 3000);
                        }
                    }
                });
            });
        });

        // Multiple Data Delete using checkbox
        $("#bulk_delete").on("click",function(){
            var allCheckboxId = [];
            let table = $('#appraisalTable').DataTable();
            allCheckboxId = table.rows({selected: true}).ids().toArray();
            console.log(allCheckboxId);


            if(allCheckboxId.length == 0){
                alert("Please Select at least one checkbox.");
            }
            else{
                $('#confirmDeleteCheckboxModal').modal('show');
                $("#deleteCheckboxSubmit").on("click",function(e){
                    $.ajax({
                        url : "{{route('performance.appraisal.delete.checkbox')}}",
                        type : "GET",
                        data : {all_checkbox_id : allCheckboxId},
                        success : function(data){
                            console.log(data);
                            if(data.success)
                            {
                                table.ajax.reload();
                                table.rows('.selected').deselect();
                                $("#confirmDeleteCheckboxModal").modal('hide');
                                $('#success_alert').fadeIn("slow"); //Check in top in this blade
                                $('#success_alert').addClass('alert alert-success').html(data.success);
                                setTimeout(function() {
                                    $('#success_alert').fadeOut("slow");
                                }, 3000);
                            }
                        }
                    });
                });
            }
        });

        $('#createButton').on('click', function() {
            $('#createModalForm').modal('show');
            formReset();
            $("#companyId").val(null).trigger('change');
            $("#employeeId").val(null).trigger('change');
            $("#customerExperience").val('None').trigger('change');
            $("#marketing").val('None').trigger('change'); 
            $("#administration").val('None').trigger('change');
            $("#professionalism").val('None').trigger('change');
            $("#integrity").val('None').trigger('change');
            $("#attendance").val('None').trigger('change');
            $('#submitForm')[0].reset();
            
        });

        // Reset form when closing modal
        $('#closeModalBtn, [data-bs-dismiss="modal"]').on('click', function() {
          
            $('#createModalForm').modal('hide');
        });

        $('#createModalForm').modal({
            backdrop: 'static',
            keyboard: false,
            show: false
        });

    });

</script>
@endsection