@extends('app-new')

@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.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">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/page-profile.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">
<!-- 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 active">
                    {{trans('emprecords/warning.view_ratings')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card">
                <div class="card invoice-preview-card mb-0">
                    <div class="card-body invoice-padding pb-0">
                        <!-- Header starts -->
                        <div class=" flex-md-row flex-column invoice-spacing mt-1 mb-1">
                            <div>
                            </div>

                        </div>
                    </div>
                    <!--view DSR -->
                    <div class="card-body invoice-padding pt-0">
                        <!-- <h4 class="mb-3 text-center bill-heading card-title ">{{trans('dsr/dsr.view_dsr')}}</h4> -->
                        <div class="row invoice-spacing mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/healthrecords.employee')}} :</td>
                                            <td><span
                                                    class="fw-bold badge rounded-pill badge-light-primary">{{ $currEmp->name }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/healthrecords.employee_code')}} :</td>
                                            <td>
                                                {{ $currEmp->employee_code }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/warning.rating')}} :</td>
                                            <td>
                                                <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((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((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((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((isset($rating->stars) && $rating->stars == "2")) checked @endif style="display:none" />
                                                    <label for="2-stars" class="star"><i data-feather="star"></i></label>
                                                    <input type="radio" id="1-star" name="stars" value="1" @if((isset($rating->stars) && $rating->stars == "1")) checked @endif style="display:none" />
                                                    <label for="1-star" class="star"><i data-feather="star"></i></label>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>

                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/healthrecords.employee_type')}} :</td>
                                            <td>
                                                <span class="fw-bold">
                                                    {{ ucfirst($currEmp->employee_type) }}
                                                </span>
                                            </td>
                                        </tr>
                                        @if($rating->feedback)
                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/warning.feedback')}} :</td>
                                            <td>
                                                {{ $rating->feedback }}
                                            </td>
                                        </tr>
                                        @endif
                                        <tr>
                                            <td class="pe-1">{{trans('emprecords/warning.rated_by')}} :</td>
                                            <td><span class="fw-bold badge rounded-pill badge-light-success">
                                                {{ $createdBy->name }}
                                            </span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- // view DSR  -->

                   
                    <div class="row invoice-spacing ">
                        <div class="content-body">
                            <section class="basic-timeline">
                            
                                <!-- attachment -->
                                @if($rating->attachments)
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="mb-3 bill-heading text-center">{{trans('common/common.attachments')}}</h4>
                                                <div class="row">
                                                @if($rating->attachments)
                                                    @foreach($rating->getMedia('attachments') as $attachment)
                                                    <div class="col-md-3 col-lg-3 col-6 profile-latest-img mb-1">
                                                        @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="/assets/img/docx-icon.jpg" class="img-fluid rounded modalAttachment" style="height:200px; width:200px; object-fit: contain;" alt="avatar img" />
                                                        </a>
                                                        @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank">
                                                            <img src="/assets/img/pdf-icon.jpg" class="img-fluid rounded" style="height:200px; width:200px; object-fit: contain;" alt="avatar img" />
                                                        </a>
                                                        @else
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="{{$attachment->getUrl()}}" class="img-fluid rounded modalAttachment" style="height:200px; width:200px; object-fit: contain;" alt="avatar img" />
                                                        </a>
                                                        @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    </div>
                                                    @endforeach
                                                    
                                                @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </section>

                            <!-- attachment -->
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- image modal -->
    <div class="modal fade" id="addNewCard" tabindex="-1" aria-labelledby="addNewCardTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <img id="modalimg2" src="" class="img-fluid rounded"
                    alt="avatar img" />
            </div>
        </div>
    </div>
    <!--/ image modal -->
</section>
@endsection

@push('footer-script')
<script src="/app-assets/js/scripts/pages/modal-add-new-cc.js"></script>
<script src="/app-assets/vendors/js/vendors.min.js"></script>
<script src="/app-assets/js/core/app-menu.js"></script>
<script src="/app-assets/js/core/app.js"></script>
<script src="/app-assets/js/scripts/pages/page-profile.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.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> -->
<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.min.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/pickers/flatpickr/flatpickr.min.js"></script> -->

<script>
   $(document).ready(function() {
        $('input[name="stars"]').attr('disabled', true);   
    });
    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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

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

</script>

<script>
    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
        // barChartExample();
    });

    $(".modalAttachment").click(function() {
        $('#modalimg2').attr('src', $(this).attr('src'));
        modal.modal("show");
    });
</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;
}

.star-rating :checked ~ label {
  color:#f90;
}
table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

</style>

<!-- END: Page JS-->


@endpush