@extends('layouts.adminmaster')

@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746402762"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746402762"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/buttonbootstrap.min.css') }}?v=1746402762"
        rel="stylesheet" />
@endsection

@section('content')
    <!--Page header-->
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title"><span class="font-weight-normal text-muted ms-2">{{ lang('Report') }}</span></h4>
        </div>
    </div>
    <!--End Page header-->

    <div class="col-xl-12 col-md-12 col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <h4 class="card-title">{{ lang('Employee Reports') }}</h4>
            </div>
            <div class="card-body" style="min-height: 230px;">
                <div class="table-responsive">
                    <table class="table table-bordered border-bottom text-nowrap w-100" id="reports">
                        <thead>
                            <tr>
                                <th width="10">{{ lang('Sl.No') }}</th>
                                <th>{{ lang('Name') }}</th>
                                <th>{{ lang('Rating') }}</th>
                                <th>{{ lang('Overall Rating') }}</th>
                                <th>{{ lang('Total Answered Ticket') }}</th>
                                <th>{{ lang('Actions') }}</th>
                            </tr>
                        </thead>
                        <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                            <p>loading.. Please Wait</p>
                        </div>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <!-- INTERNAL Apexchart js-->
    <script src="{{ asset('build/assets/plugins/apexchart/apexcharts.js') }}?v=1746402762"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1746402762"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1746402762"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1746402762">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1746402762">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/datatablebutton.min.js') }}?v=1746402762"></script>
    <script src="{{ asset('build/assets/plugins/datatable/buttonbootstrap.min.js') }}?v=1746402762"></script>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", (event) => {

            let tableDataObject = @json($userRatings);
            let tableData = Object.values(tableDataObject);
         
            
            let dateFormat = @json(setting('date_format'));
            var SITEURL = '{{ url('') }}';
            
            var dataTable;
            var tableDropDown;

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            loadTable(tableData);

            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();
                if ($.fn.DataTable.isDataTable('#reports')) {
                    $('#reports').DataTable().clear().destroy(); 
                }

                // if (dataTable)
                //     dataTable.destroy();

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    let userImage = data.user.image == null ? 'user-profile.png' :
                        `${data.user.image}`;
                    
                        let roleName = (data.user.roles && data.user.roles.length > 0) ? data.user.roles[0]
                        .name : null;

                    let userDetails = `
                    <div class="d-flex align-items-center">
                        <div class="me-2 lh-1">
                            <span class="avatar avatar-md avatar-rounded">
                                <img src="{{ asset('uploads/profile/${userImage}') }}" alt="">
                            </span>
                        </div>
                        ${roleName ? `<h5 class="mb-0 fs-13 font-weight-sembold text-dark">
                                                                           ${data.user.name}
                                                                        </h5>
                                                                        <small class="fs-12 text-muted"><span
                                                                                class="font-weight-normal1"><b>(${roleName})</b></span></small>` 
                                                                        : ` <h5 class="mb-0 fs-13 font-weight-sembold text-dark">
                                                                       ${data.user.name}
                                                                    </h5>` }            
                    </div>
                `;

                    return `
                            <tr>
                                <td>${index + 1}</td>
                                <td class="text-center">
                                ${userDetails}
                                </td>

                                <td> <div class="allemployeerating pt-1" data-rating="${data.rating}"></div>  </td>

                                <td> ${data.overallCount} </td>

                                <td> ${data.comentticketss} </td>

                                <td>  <div class="d-flex">
                                        <a href="${SITEURL}/admin/reports/employeedetails/${data.user.id}"
                                            class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="{{ lang('View') }}"><i
                                                class="feather feather-eye text-primary"></i></a>
                                    </div>
                                </td>

                                

                            </tr>
                        `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('reports').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#reports').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });
                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            $(function() {
                "use strict";


                $(".allemployeerating").starRating({
                    readOnly: true,
                    starSize: 25,
                    emptyColor: '#ffffff',
                    activeColor: '#F2B827',
                    strokeColor: '#F2B827',
                    strokeWidth: 15,
                    useGradient: false
                });
            })
        });
    </script>
@endsection