@extends('member-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/charts/apexcharts.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" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/charts/chart-apex.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('master/master.activity_dashboard')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('master/master.activity_dashboard')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <section id="dashboard-ecommerce">
        
        <div class="row match-height">

            <div class="col-md-5 col-12" style="min-height:450px;">
                <div class="card">
                    <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                        <h4 class="card-title mb-sm-0">{{trans('master/master.health_care')}}</h4>
                        <p class="mt-sm-0 mt-2">
                        <select class="form-select form-control" id="health_record_pie_chart" onchange="pieChart()">
                            <option value="" selected>All</option>
                            @foreach($healthRecordParentTestTypes as $healthRecordParentTestType)
                                <option value="{{$healthRecordParentTestType->id}}"  @if( old('health_record_pie_chart') == $healthRecordParentTestType->id ) selected @endif>{{ $healthRecordParentTestType->name }}</option>                      
                            @endforeach
                        </select>
                        </p>
                    </div>
                    <div class="card-body">
                        <div id="health-record-chart" class="mt-2 mb-1">
                        
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-7 col-12" style="min-height:450px;">
                <div class="card">
                    <div class="card-header d-block d-sm-flex  flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                        <h4 class="card-title mb-sm-0"> {{trans('master/master.health_care')}}</h4>
                        <p class="ms-0 ms-sm-5 mt-1 mt-sm-0">
                            <!-- <img src="/assets/img/filter.png" class="filterimg"  height="20px" alt="" data-bs-toggle="modal" data-bs-target="#filterpopup"> -->
                            <span data-bs-toggle="modal" data-bs-target="#filterpopup" style="cursor:pointer"><i data-feather='filter' class="user-avtar ms-0 ms-sm-5" ></i></span>
                            <a id="healthRecordView" href="compliance/health-record/0/view-childs?activity_from_date={{$fromDate}}&activity_to_date={{$toDate}}&health_record_test_type=&employee_type=&employee_id=&status=pending" target="_blank">
                                <button class="btn btn-primary ms-2 waves-effect waves-float waves-light" type="button" data-repeater-create="">
                                    <span>{{trans('master/master.view_all')}}</span>
                                </button>
                            </a>
                        </p>
                        <p>
                            <input type="text" class="form-control" id="healthRecordSearch" placeholder="Search">
                        </p>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table" id="healthRecord">
                                <thead>
                                    <tr>
                                        <th>{{trans('master/master.type')}}</th>
                                        <th>{{trans('master/master.name')}}</th>
                                        <th>{{trans('emprecords/healthrecords.vaccine')}}</th>
                                        <th>{{trans('emprecords/healthrecords.due_date')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                            
                                </tbody>
                            </table>
                        </div>
                    
                    </div>
                </div>
            </div>
        </div>

        <div class="row match-height">
            <div class="col-md-6 col-12" style="min-height:450px;">
                <div class="card">
                    <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                        <div class="d-block">
                            <h4 class="card-title mb-sm-0">{{trans('emprecords/warning.warning')}} </h4> 
                            <span>{{$monthName}}</span>
                        </div>
                        <p class="ms-0">
                            <a id="warningView" href="compliance/warning-letter/team-members" target="_blank">
                                <button class="btn ms-0 ms-sm-5 mt-1 mt-sm-0 btn-primary waves-effect waves-float waves-light" type="button" data-repeater-create="">
                                    <span>{{trans('master/master.view_all')}}</span>
                                </button>
                            </a>
                        </p>
                        <p><input type="text" class="form-control" id="warningSearch" placeholder="Search"></p>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="warning">
                                <thead>
                                    <tr>
                                        <th>{{trans('master/master.type')}}</th>
                                        <th>{{trans('master/master.name')}}</th>
                                        <th>{{trans('master/master.date')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-12" style="min-height:450px;">
                <div class="card">
                <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                    <div class="d-block">
                        <h4 class="card-title mb-sm-0">{{trans('emprecords/warning.certificate')}} </h4> 
                        <span>{{$monthName}}</span>
                    </div>
                    <p class="ms-0">
                        <a id="certificateView" href="compliance/certificate/team-members" target="_blank">
                            <button class="btn ms-0 ms-sm-5 mt-1 mt-sm-0 btn-primary waves-effect waves-float waves-light" type="button" data-repeater-create="">
                                <span>{{trans('master/master.view_all')}}</span>
                            </button>
                        </a>
                    </p>
                    <p><input type="text" class="form-control" id="certificateSearch" placeholder="Search"></p>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                    <table class="table" id="certificate">
                        <thead>
                            <tr>
                                <th>{{trans('master/master.type')}}</th>
                                <th>{{trans('master/master.name')}}</th>
                                <th>{{trans('emprecords/warning.issue_date')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                       
                        </tbody>
                    </table>
                    </div>
                
                </div>
                </div>
            </div>
        </div>

        <div class="row match-height">

            <div class="col-md-6 col-12" style="min-height:450px;">
                <div class="card">
                    <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                        <div class="d-block">
                            <h4 class="card-title mb-sm-0">{{trans('emprecords/warning.feedback')}} </h4> 
                            <span>{{$monthName}}</span>
                        </div>
                        <p class="ms-0">
                            <a id="feedbackView" href="compliance/rating/team-members" target="_blank">
                                <button class="btn ms-0 ms-sm-5 mt-1 mt-sm-0 btn-primary waves-effect waves-float waves-light" type="button" data-repeater-create="">
                                    <span>{{trans('master/master.view_all')}}</span>
                                </button>
                            </a>
                        </p>
                        <p><input type="text" class="form-control" id="feedbackSearch" placeholder="Search"></p>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="feedback">
                                <thead>
                                    <tr>
                                        <th>{{trans('master/master.type')}}</th>
                                        <th>{{trans('master/master.name')}}</th>
                                        <th>{{trans('emprecords/warning.average')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($ratings as $rating)
                                        <tr>
                                            <td>{{ ucfirst($rating->employee->employee_type) }}</td>
                                            <td>
                                                <div class="d-flex flex-row">
                                                    <div class="avatar me-75">
                                                        <img src="{!! $rating->employee->image !!}" onerror="this.src='/assets/img/default-profile-3.png'" class="rounded" width="42px" height="42px" alt="Avatar">
                                                    </div>
                                                    <div class="my-auto">
                                                        <h6 class="mb-0">{{$rating->employee->name}}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($rating->employee->averageRating() < 3) 
                                                    <span class="badge bg-danger">{{ round($rating->employee->averageRating(), 2) }} <i data-feather="star"></i></span>
                                                @elseif($rating->employee->averageRating()>3)
                                                    <span class="badge bg-success">{{ round($rating->employee->averageRating(), 2) }} <i data-feather="star"></i></span>
                                                @else
                                                    <span class="badge bg-warning">{{ round($rating->employee->averageRating(), 2) }} <i data-feather="star"></i></span>
                                                @endif
                                            </td>   
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="modal fade" id="filterpopup" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
                <div class="modal-content">
                    <div class="modal-header bg-transparent">
                        <h4 class="modal-title" id="exampleModalLabel">{{trans('emprecords/healthrecords.list_of_health_care')}}</h4>
                        <!-- <span class="filter">Filter</span> -->
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pb-5 px-sm-5 pt-50">
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="from_date">{{trans('master/master.from_date')}}e</label>
                                    <input type="date" id="from_date" class="select-data form-control" value="{{ $fromDate }}" />
                                </div>
                            </div>
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="to_date">{{trans('master/master.to_date')}}</label>
                                    <input type="date" id="to_date" class="select-data form-control" value="{{ $toDate }}" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="health_record_test_type">{{trans('emprecords/healthrecords.vaccine')}}</label>
                                    <select class="select-data select2 form-control" id="health_record_test_type">
                                        <option value="" selected>Select {{trans('emprecords/healthrecords.vaccine')}}</option>
                                        @foreach($healthRecordTestTypes as $healthRecordTestType)
                                            <option value="{{$healthRecordTestType->id}}"  @if( old('health_record_test_type') == $healthRecordTestType->id ) selected @endif>{{ $healthRecordTestType->name }}</option>                      
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="status">{{trans('master/master.status')}}</label>
                                    <select class="select-data select2 form-control" id="status">
                                        <option value="pending" selected>{{trans('emprecords/healthrecords.pending')}}</option>
                                        <option value="completed">{{trans('emprecords/healthrecords.completed')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="employee_type">{{trans('master/master.employee_type')}}</label>
                                    <select class="select-data select2 form-control" id="employee_type" onchange="getEmployeeByType(this,'employees')">
                                        <option value="">Select Employee Type</option>
                                        <option value="employee">{{trans('master/master.employee')}}</option>
                                        <option value="workman">{{trans('master/master.workman')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 mt-2">
                                <div class="form-group">
                                    <label class="form-label" for="employee_id">{{trans('master/master.employee')}}</label>
                                    <select class="select-data form-control select2" id="employee_id" multiple>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee->id}}">
                                                {{$employee->name}}({{$employee->employee_code}})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 text-end">
                            <button type="button" class="applyfilter btn btn-primary mt-4" onclick="filter()">{{trans('master/master.apply_filter')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection 
@push('footer-script') 
    <!-- BEGIN: 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/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.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>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>

    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->

    <script src="/app-assets/vendors/js/charts/apexcharts.min.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-apex.js"></script>
    <script src="/app-assets/vendors/js/charts/chart.min.js"></script>

    <script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
    <script src="/app-assets/js/scripts/pages/dashboard-analytics.js"></script>

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script>
    <script src="/app-assets/js/scripts/cards/card-statistics.js"></script>
    <script src="/app-assets/js/scripts/cards/card-analytics.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
    <script>
        $(document).ready(function() {
            callDtHealth();
            callDtWarning();
            callDtFeedback();
            callDtCertificate();
            pieChart();
            $('#certificate_filter').hide();
            $('#healthRecord_filter').hide();
            $('#feedback_filter').hide();
            $('#warning_filter').hide();
        });

        function licenseChartEx(){
           
        }
        function pieChart(){
            var value = $('#health_record_pie_chart').val();
            var data = {
                value: value,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: "{{route('health-record.pie-chart.member',['alias'=>$alias])}}",
                type: 'POST',
                data: data,
                success: function(dataResult) {
                    var licenseChart;
                    $licenseChart = document.querySelector('#health-record-chart');
                    $('#health-record-chart').html('');
                    licenseChartOptions = {
                        chart: {
                        type: 'pie',
                        height: 325,
                        toolbar: {
                            show: false
                        },
                        events: {
                            dataPointSelection: function (evt, item, config){
                                var label = item.opts.labels[config.dataPointIndex];
                                var value = item.opts.values[config.dataPointIndex];
                                window.open("/member/{{$alias}}/compliance/health-record/team-members?label="+label+"&ids="+value, 'new');
                            }
                        }
                        },
                        labels: [
                        'Fully Vacinated',
                        'Partially Vacinated',
                        'Pending'
                        ],
                        series: [dataResult['completed'], dataResult['partially'], dataResult['pending']],
                        values: [dataResult['completedArr'], dataResult['partiallyArr'], dataResult['pendingArr']],
                        dataLabels: {
                        enabled: false
                        },
                        legend: {
                            show: true,
                            position: 'bottom'
                        },
                        stroke: {
                            lineCap: 'round',
                            width: 4
                        },
                        colors: [window.colors.solid.primary, window.colors.solid.danger, window.colors.solid.warning],
                        
                    };
                    licenseChart = new ApexCharts($licenseChart, licenseChartOptions);
                    licenseChart.render();

                }
            });
        }

        function callDtHealth() {
        $('#healthRecord').DataTable({
                language:{
                    "infoFiltered":""
                },
                "targets": 'no-sort',
                "bSort": false,
                "processing": true,
                "serverSide": true,
                "info" : false,
                "paging": false,
                
                "ajax": {
                    "url": "{{ route('activityMemberHealthRecord',['slug'=>$alias]) }}?>",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        _token: "{{csrf_token()}}",
                        from_date: $("#from_date").val(),
                        to_date: $("#to_date").val(),
                        health_record_test_type: $("#health_record_test_type").val(),
                        employee_type: $("#employee_type").val(),
                        employee_id: $("#employee_id").val(),
                        status: $("#status").val(),
                    },
                },
                "columns": [{
                    "data": "employee.employee_type",
                    "class" : "text-capitalize",
                    render: function(data, type,row) {
                        if (data != "") {
                            return data;
                        }
                        return "";
                    }
                }, {
                    "data": "employee.name",
                    render: function(data, type, row) {
                        if (row.employee) {
                       
                            var result = '<div class="d-flex flex-row"><div class="avatar me-75"><img src="' + row.employee.image + '"onerror="this.src='+ "'/assets/img/default-profile-3.png'" + '" class="rounded" height="42px" width="42px" alt="" /> </div><div class="my-auto"><h6 class="mb-0">'+ row.employee.name + '</h6></div></div>';
                            
                            return result;
                        }
                            return "";
                    }
                }, {
                    "data": "compliance_type.name",
                }, {
                    "data": "",
                    render: function(data, type, row) {
                        if(row.status=="pending"){
                            return row.next_due_date;
                        }
                        else if(row.status=='completed'){
                            return row.completed_date;
                        }

                        return '-';
                    }
                }],
            });
            $('#healthRecord_filter').hide();
        }

        function callDtWarning() {
        $('#warning').DataTable({
                language:{
                    "infoFiltered":""
                },
                "targets": 'no-sort',
                "bSort": false,
                "processing": true,
                "serverSide": true,
                "info" : false,
                "paging": false,
                
                "ajax": {
                    "url": "{{ route('activityMemberWarning',['slug'=>$alias]) }}?>",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        _token: "{{csrf_token()}}",
                    }
                },
                "columns": [{
                    "data": "employee.employee_type",
                    "class" : "text-capitalize",
                }, {
                    "data": "employee.name",
                    render: function(data, type, row) {
                        var result = '<div class="d-flex flex-row"><div class="avatar me-75"><img src="' + row.employee.image + '"onerror="this.src='+ "'/assets/img/default-profile-3.png'" + '" class="rounded" height="42px" width="42px" alt="" /> </div><div class="my-auto"><h6 class="mb-0">'+ row.employee.name + '</h6></div></div>';
                        
                        return result;
                    }
                }, {
                    "data": "created_at",
                    render: function(data, type, row) {
                        var date = new Date(data);
                        return date.getFullYear() + '-' + (parseInt(date.getMonth())+1) + '-' + String("00" + date.getDate()).slice(-2);
                    }
                }],
            });
        }

        function callDtFeedback() {
        $('#feedback').DataTable({
                language:{
                    "infoFiltered":""
                },
                "targets": 'no-sort',
                "bSort": false,
                "info" : false,
                "paging": false,
                
            });
        }

        function callDtCertificate() {
        $('#certificate').DataTable({
                language:{
                    "infoFiltered":""
                },
                "targets": 'no-sort',
                "bSort": false,
                "processing": true,
                "serverSide": true,
                "info" : false,
                "paging": false,
                
                "ajax": {
                    "url": "{{ route('activityMemberCertificate',['slug'=>$alias]) }}?>",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        _token: "{{csrf_token()}}",
                    }
                },
                "columns": [{
                    "data": "employee.employee_type",
                    "class" : "text-capitalize",
                }, {
                    "data": "employee.name",
                    render: function(data, type, row) {
                        var result = '<div class="d-flex flex-row"><div class="avatar me-75"><img src="' + row.employee.image + '"onerror="this.src='+ "'/assets/img/default-profile-3.png'" + '" class="rounded" height="42px" width="42px" alt="" /> </div><div class="my-auto"><h6 class="mb-0">'+ row.employee.name + '</h6></div></div>';
                        
                        return result;
                    }
                }, {
                    "data": "issued_date",
                }],
            });
        }

        $('#healthRecordSearch').on("keyup change", function (e) {
            e.preventDefault();
            $('#healthRecord').DataTable().search($(this).val()).draw();
        });
        
        $('#warningSearch').on("keyup change", function (e) {
            e.preventDefault();
            $('#warning').DataTable().search($(this).val()).draw();
        });

        $('#feedbackSearch').on("keyup change", function (e) {
            e.preventDefault();
            $('#feedback').DataTable().search($(this).val()).draw();
        });

        $('#certificateSearch').on("keyup change", function (e) {
            e.preventDefault();
            $('#certificate').DataTable().search($(this).val()).draw();
        });

        function filter() {
            $('#filterpopup').modal('hide');
            $('#healthRecord').DataTable().destroy();
            var data = "compliance/health-record/team-members/0/view-childs?activity_from_date=" +  $("#from_date").val() +"&activity_to_date=" + $("#to_date").val() + "&health_record_test_type=" + $("#health_record_test_type").val() + "&employee_type=" + $("#employee_type").val() + "&employee_id=" + $("#employee_id").val() + "&status=" + $("#status").val();
            $('#healthRecordView').attr('href', data);
            if($('#status').val()=="pending"){
                $('#date_type').html('Due Date');
            }
            else if($('#status').val()=='completed'){
                $('#date_type').html('Completed Date');
            }
            callDtHealth();
        }

        function getEmployeeByType(th) {
            var typeId = $('#employee_type').val()
            if(typeId!=''){
                typeId = typeId.split(' ');
            }
            var data = {
                employee_type: typeId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: "{{route('employees-type-member',['alias'=>$alias])}}",
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    $('#employee_id').select2('destroy');
                    if (data) {
                        $.each(data, function(i, item) {
                            selectbox += '<option value="'+data[i].id+'">'+data[i].name+'('+data[i].employee_code+')</option>';
                        });
                    }
                    $('#employee_id').html(selectbox);
                    $('#employee_id').select2();
                }
            });  
        }	
    </script>
@endpush