@extends('member-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('emprecords/warning.ratings')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{!! $alias !!}/compliance/rating">{{trans('emprecords/warning.ratings')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{!! $alias !!}/compliance/rating/team-members">{{trans('common/common.team_members')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($rating) && ($rating->id))
                    {{trans('emprecords/warning.edit_rating')}}
                    @else
                    {{trans('emprecords/warning.add_rating')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($rating, ['method' => 'post', 'files' => 'true']) !!}
 <input type="hidden" name="organization_id" value="{{$organization->id}}">
 <section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <!-- <div class="card-header">
                    <h4 class="card-title">Multiple Column</h4>
                </div> -->
                <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('type') ? 'has-error' : '' }}}">
                                    <label for="type" class="required">{{trans('emprecords/healthrecords.type')}}<span class="mendatory-field text-danger">*</span></label>
                                    @if(isset($currEmp) && (($currEmp->employee_type=="employee") || ($currEmp->employee_type=="workman") ))
                                    <select class="form-control" id="type" name="type" disabled>
                                    @else
                                    <select class="form-control select2" id="type" name="type">
                                    @endif
                                        <option value="" selected>{{trans('emprecords/healthrecords.select_type')}}</option>
                                        <option value="department"  @if((old('type') == 'department' )) selected @endif>Department</option>   
                                        <option value="employee"  @if((old('type') == 'employee' ) || ($currEmp->employee_type == 'employee')) selected @endif>Employee</option>                                                        
                                        <option value="workman"  @if((old('type') == 'workman' ) || ($currEmp->employee_type == 'workman')) selected @endif>Workman</option>                                                       
                                        </select>
                                    {!! $errors->first('type', '<label class="control-label error" for="type">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-6 mb-1" id="department-div" style="display: @if((old('type'))=='department' || ($currEmp->employee_type == 'department')) block @else none @endif;">
                                <label for="department_id" class="required">{{ trans('common/filter.department') }}<span class="mendatory-field text-danger">*</span></label>
                                <br>
                                <select class="form-control" id="department_id" name="department_id">
                                    <option value="" selected>{{ trans('common/filter.select_department') }}</option>
                                    @foreach($departments as $department)
                                        <option value="{{$department->id}}"  @if((old('department_id') == $department->id )) selected @endif>{{ ucfirst($department->name) }}</option>                      
                                    @endforeach
                                    </select>
                                {!! $errors->first('department_id', '<label class="control-label error" for="department_id">:message</label>')!!}
                            </div>
                            <div class="col-md-6 mb-1" id="employee-div" style="display: @if((old('type'))=='employee' || ($currEmp->employee_type == 'employee')) block @else none @endif;">
                                <label for="employee_id" class="required">{{ trans('master/master.employee') }}<span class="mendatory-field text-danger">*</span></label>
                                <br>
                                @if(isset($currEmp) && (($currEmp->employee_type=="employee") || ($currEmp->employee_type=="employee") ))
                                    <select class="form-control" id="employee_id" name="employee_id" disabled>
                                @else
                                    <select class="form-control" id="employee_id" name="employee_id">
                                @endif
                                    <option value="" selected>{{ trans('emprecords/healthrecords.select_employee') }}</option>
                                    @foreach($employees as $employee)
                                        <option value="{{$employee->id}}"  @if((old('employee_id') == $employee->id ) || (isset($rating->employee_id) && $rating->employee_id == $employee->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($employee->name).' ('.$employee->employee_code.')'}}</option>                      
                                    @endforeach
                                    </select>
                                {!! $errors->first('employee_id', '<label class="control-label error" for="employee_id">:message</label>')!!}
                            </div>

                            <div class="col-md-6" id="workman-div" style="display: @if((old('type'))=='workman' || ($currEmp->employee_type == 'workman')) block @else none @endif;">
                                <label for="workman_id" class="required">{{ trans('master/master.workman') }}<span class="mendatory-field text-danger">*</span></label>
                                <br>
                                @if(isset($currEmp) && (($currEmp->employee_type=="workman") || ($currEmp->employee_type=="workman") ))
                                    <select class="form-control" id="workman_id" name="workman_id" disabled>
                                @else
                                    <select class="form-control" id="workman_id" name="workman_id">
                                @endif
                                    <option value="" selected>{{ trans('emprecords/healthrecords.select_workman') }}</option>
                                    @foreach($workmans as $workman)
                                        <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($rating->employee_id) && $rating->employee_id == $workman->id) || (isset($currEmp->id) && $currEmp->id == $workman->id)) selected @endif>{{ ucfirst($workman->name).' ('.$workman->employee_code.')' }}</option>                      
                                    @endforeach
                                    </select>
                                {!! $errors->first('workman_id', '<label class="control-label error" for="workman_id">:message</label>')!!}
                            </div>
                        </div>

                        <div class="row mt-1">
                            <div class="col-md-3 col-12 mt-2">
                                <div class="form-group {{{ $errors->has('feedback') ? 'has-error' : '' }}}">
                                <label for="stars" class="required">{{trans('emprecords/warning.rating')}}<span class="mendatory-field text-danger">*</span></label>
                                <div class="star-rating" id="star-rating" style="display:flex; flex-direction: row-reverse; font-size:2em; justify-content:space-around;">
                                    <input type="radio" id="5-stars" name="stars" value="5" @if((old('stars') == "5" ) || (isset($rating->stars) && $rating->stars == "5")) checked @endif style="display:none"/>
                                    <label for="5-stars" class="star"><i data-feather="star"></i></label>
                                    <input type="radio" id="4-stars" name="stars" value="4" @if((old('stars') == "4" ) || (isset($rating->stars) && $rating->stars == "4")) checked @endif style="display:none"/>
                                    <label for="4-stars" class="star"><i data-feather="star"></i></label>
                                    <input type="radio" id="3-stars" name="stars" value="3" @if((old('stars') == "3" ) || (isset($rating->stars) && $rating->stars == "3")) checked @endif style="display:none" />
                                    <label for="3-stars" class="star"><i data-feather="star"></i></label>
                                    <input type="radio" id="2-stars" name="stars" value="2" @if((old('stars') == "2" ) || (isset($rating->stars) && $rating->stars == "2")) checked @endif style="display:none"/>
                                    <label for="2-stars" class="star"><i data-feather="star"></i></label>
                                    @if(isset($rating->stars))
                                    <input type="radio" id="1-star" name="stars" value="1" @if((old('stars') == "1" ) || (isset($rating->stars) && $rating->stars == "1")) checked @endif style="display:none"/>
                                    @else
                                    <input type="radio" id="1-star" name="stars" value="1" @if((old('stars') == "1" ) || (isset($rating->stars) && $rating->stars == "1")) checked @endif style="display:none" checked/>
                                    @endif
                                    <label for="1-star" class="star"><i data-feather="star"></i></label>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-1">
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('feedback') ? 'has-error' : '' }}}">
                                <label for="feedback">{{trans('emprecords/warning.feedback')}}</label>
                                {!! Form::textarea('feedback', isset($rating->feedback) ? $rating->feedback : old('feedback'), ['class' => 'form-control', 'id' => 'feedback', 'rows' => 2, 'style' => 'resize:none;']) !!} 
                                {!! $errors->first('feedback', '<label class="control-label error" for="feedback">:message</label>')!!}
                                </div>
                            </div>
                        </div>
 
                        <div class="row mt-1">
                            <div class="col-md-12">
                                <label for="attachment" class="required">{{trans('common/common.attachment')}}<span style="color:grey">({{trans('common/common.can_attach_more_than_one')}})</span></label> 
                                <div class="form-group {{{ $errors->has('attachments[]') ? 'has-error' : '' }}}">
                                    <div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'>
                                        <input type="hidden" name="is_attached[]" class="is_attached" />
                                        <div class="row">
                                            <div class="col-md-4">
                                                <button type="button" id="add_more" class="btn btn-primary" style="line-height:15px;width: max-content;"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
                                            </div>
                                        </div>
                                        <div class="preview">
                                        @if($rating->attachments)
                                            @foreach($rating->getMedia('attachments') as $attachment)
                                            <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                                    @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @else
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="{{$attachment->getUrl()}}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    <a onclick="delAttached.call(this,{{$attachment->id}})" style='cursor:pointer; color:red; position: absolute; right: 5px; top: 5px' title="Delete Image"> <i data-feather='x-circle' style="font-size:18px;"></i></a>
                                            </div>
                                            @endforeach
                                        @endif
                                        </div>
                                    </div>
                                    {!! $errors->first('attachments[]', '<label class="control-label error" for="attachments[]">:message</label>')!!}
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />  
                        <div class="row">
                            <div class="col-12 mt-2 d-flex justify-content-end">
                                <button type="submit" id="save-form" class="btn btn-primary me-1">{{trans('common/common.save')}}</button> 
                            </div>
                        </div>        
                </div>
            </div>
        </div>
    </div>
</section>
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>

<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- END: Page JS-->

<script>
    $(document).ready(function() {
        $('#type').change(function() {
            $(".select-type").attr("disabled", true);
            $('.select-type').parent().hide();
            var ids = $(this).val();
            if(ids == "employee"){
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().hide();
            $("#department_id").attr("disabled", true);
            $('#department_id').parent().hide();
            // $('#'+ids+'_id').select2('destroy');
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().show();
            // $('#'+ids+'_id').select2();
            }
            else if(ids == "workman"){
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().hide();
            $("#department_id").attr("disabled", true);
            $('#department_id').parent().hide();
            // $('#'+ids+'_id').select2('destroy');
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().show();
            // $('#'+ids+'_id').select2();
            }
            else if(ids == "department"){
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().hide();
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().hide();
            // $('#'+ids+'_id').select2('destroy');
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().show();
            // $('#'+ids+'_id').select2();
            }
            else{
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().hide();
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().hide();
            $("#department_id").attr("disabled", true);
            $('#department_id').parent().hide();
            }    

        });         
    });
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var extension = input.files[0].name.split('.').pop().toLowerCase();
                if(extension == "pdf"){
                    $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else if(extension == "docx" || extension=="doc"){
                    $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else{
                    $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function delAttached(attachment){
        $(this).parent().remove();
        var val = JSON.parse($('#deleted_attachemnts').val());
        val.push(attachment);
        $('#deleted_attachemnts').val(JSON.stringify(val));
    }

    function deleteAttachment(){
        $(this).parent().remove();
    }

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }

    $('#add_more').click(function(e){
        var temp = $(this).parent().parent().parent().append("<div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'><input type='file' style='display:none;' class='fileinput form-control attachments' name='attachments[]' data-filename-placement='inside' title='Browse' onchange='preview.call(this)' /></div>");
        var result = temp.find('div:last input').trigger('click');
    });
    

</script>

<<style>
.custom-dropdown .form-control { height: auto; padding: 0 }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices { background: none; padding:0; border: none }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { margin-right: 5px }
#organization tr th { /* word-break: break-all; */ 
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}
.tbalorganiresp { overflow: scroll } 

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}

</style>


@endpush