358 lines
13 KiB
PHP
358 lines
13 KiB
PHP
@extends('layouts.vertical', ['page_title' => 'Datatables'])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
|
|
type="text/css" />
|
|
<link href="{{ asset('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
|
|
<!-- third party css end -->
|
|
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
|
<style type="text/css">
|
|
.ag-theme-alpine {
|
|
--ag-header-column-separator-display: block;
|
|
--ag-header-column-separator-height: 20%;
|
|
--ag-header-column-separator-width: 1px;
|
|
--ag-header-column-separator-color: rgb(0, 0, 0);
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-md-6 p-2">
|
|
<h4 class="page-title">Summery Report</h4>
|
|
</div>
|
|
</div>
|
|
@include('report.navigation')
|
|
<!-- end page title -->
|
|
@if (session()->has('message'))
|
|
<div class="alert alert-success">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
@if (session()->has('error'))
|
|
<div class="alert alert-danger">
|
|
{{ session()->get('error') }}
|
|
</div>
|
|
@endif
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row justify-content-between">
|
|
<div class="col-auto filter-section">
|
|
<form class="d-flex flex-wrap align-items-center">
|
|
<label for="status-select" class="me-2">Month: </label>
|
|
<div class="me-sm-3">
|
|
<select class="form-select my-1 my-lg-0" id="status-select">
|
|
<option selected="November 2023">November 2023</option>
|
|
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="text-lg-end my-1 my-lg-0">
|
|
<div>
|
|
<button id="btn-export" class="btn btn-sm btn-primary"
|
|
style="margin-bottom: 5px; font-weight: bold">
|
|
Export to Excel
|
|
</button>
|
|
</div>
|
|
<!-- <button class="btn btn-danger waves-effect waves-light"><i
|
|
class="mdi mdi-search-web me-1"></i>Fetch</button> -->
|
|
</div>
|
|
</div><!-- end col-->
|
|
</div> <!-- end row -->
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table mb-2 table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Target</th>
|
|
<th>Achievement</th>
|
|
<th>Total Dr Referral</th>
|
|
<th>Total Chemist Referral</th>
|
|
<th>Call Done</th>
|
|
<th>Calls Not Done</th>
|
|
<th>Total Calls</th>
|
|
<th>% of Achievement</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>{{ $totals->target }}</th>
|
|
<td>{{ $totals->achievement }}</td>
|
|
<td>{{ $totals->total_dr_referrel }}</td>
|
|
<td>{{ $totals->total_ch_referrel }}</td>
|
|
<th>{{ $totals->call_done }}</th>
|
|
<td>{{ $totals->call_not_done }}</td>
|
|
<td>{{ $totals->total_calls }}</td>
|
|
<td>{{ $totals->calls_achievement }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="myGrid" style="" class="ag-theme-alpine"></div>
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</div>
|
|
<!-- end row-->
|
|
</div> <!-- container -->
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
.img-thumbnail {
|
|
max-width: 100px
|
|
}
|
|
|
|
.filter-section .form-select {
|
|
max-width: 200px
|
|
}
|
|
|
|
.filter-section .form-control {
|
|
max-width: 120px
|
|
}
|
|
|
|
.header-cell {
|
|
background-color: #a6e1ec;
|
|
|
|
}
|
|
|
|
.subheader-cell {
|
|
background-color: #a6e199;
|
|
|
|
}
|
|
|
|
.quarters-cell {
|
|
background-color: #5bc0de;
|
|
}
|
|
|
|
.row-header {}
|
|
|
|
.cell-span {
|
|
background-color: #f4f7f8;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
|
|
<script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
|
|
<script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.0/xlsx.full.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$('.datetime').flatpickr({
|
|
dateFormat: "Y-m-d"
|
|
});
|
|
|
|
var cellClassRules = {
|
|
'header-cell': 'data.section === "big-title"',
|
|
'quarters-cell': 'data.section === "quarters"',
|
|
};
|
|
|
|
function rowSpan(params) {
|
|
return 20;
|
|
}
|
|
|
|
const columnDefs = [{
|
|
headerName: 'Zonal Business Manager',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'zonal_business_manager',
|
|
width: 170,
|
|
cellClassRules: cellClassRules
|
|
//rowSpan: rowSpan,
|
|
},
|
|
{
|
|
headerName: 'Regional Manager',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'regional_manager', // Replace with the actual field for this column
|
|
//rowSpan: rowSpan,
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'AM Name',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'am_name', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Educator Manager',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'educator_manager', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Target',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'target', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Dr Referred',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'dr_referred', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Chemist Refferal',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'ch_referred', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Total (Dr+Chemist)',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'total_dr_chemist', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Done @BDE',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'done_at_bde', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Not Done @BDE',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'not_done_at_bde', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Patient Referred',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'patient_referred', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Done (%)',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'done_percentage', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Not Done (%)',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'not_done_percentage', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Achievement in %',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'achievement_percentage', // Replace with the actual field for this column
|
|
width: 170,
|
|
},
|
|
@foreach ($days as $key => $display)
|
|
{
|
|
headerName: '{{ $display }}',
|
|
children: [{
|
|
headerName: 'Done @BDE',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'done_bde_{{ $key }}',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Not Done @BDE',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'done_not_bde_{{ $key }}',
|
|
width: 170,
|
|
},
|
|
],
|
|
},
|
|
@endforeach
|
|
|
|
];
|
|
|
|
let rowData = []
|
|
let zbms = {!! json_encode($zbms) !!}
|
|
let rbms = {!! json_encode($rbms) !!}
|
|
let ems = {!! json_encode($ems) !!}
|
|
let lastzbm = ems[0].zbm_id
|
|
let lastrbm = ems[0].rbm_id
|
|
for (let em of ems) {
|
|
if (em.rbm_id != lastrbm) {
|
|
let rbm = rbms.find(z => z.id == lastrbm)
|
|
if (rbm) {
|
|
rbm.regional_manager = rbm.regional_manager + ' Total'
|
|
rbm['section'] = "quarters"
|
|
rowData.push(rbm)
|
|
}
|
|
}
|
|
if (em.zbm_id != lastzbm) {
|
|
let zbm = zbms.find(z => z.id == lastzbm)
|
|
zbm.zonal_business_manager = zbm.zonal_business_manager + ' Total'
|
|
zbm['section'] = "big-title"
|
|
rowData.push(zbm)
|
|
}
|
|
lastzbm = em.zbm_id
|
|
lastrbm = em.rbm_id
|
|
rowData.push(em)
|
|
}
|
|
let rbm = rbms.find(z => z.id == lastrbm)
|
|
rbm.regional_manager = rbm.regional_manager + ' Total'
|
|
rbm['section'] = "quarters"
|
|
rowData.push(rbm)
|
|
let zbm = zbms.find(z => z.id == lastzbm)
|
|
zbm.zonal_business_manager = zbm.zonal_business_manager + ' Total'
|
|
zbm['section'] = "big-title"
|
|
rowData.push(zbm)
|
|
|
|
|
|
$('#btn-export').on('click', function() {
|
|
gridOptions.api.exportDataAsCsv();
|
|
});
|
|
|
|
const gridOptions = {
|
|
columnDefs: columnDefs,
|
|
pagination: false,
|
|
|
|
// sets 10 rows per page (default is 100)
|
|
paginationPageSize: 50,
|
|
defaultColDef: {
|
|
resizable: true,
|
|
sortable: true,
|
|
cellClassRules: cellClassRules,
|
|
},
|
|
rowData: rowData,
|
|
domLayout: 'autoHeight',
|
|
};
|
|
|
|
const gridDiv = document.querySelector('#myGrid');
|
|
new agGrid.Grid(gridDiv, gridOptions);
|
|
</script>
|
|
@endsection
|