390 lines
16 KiB
PHP
390 lines
16 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">{{ $title }} Report</h4>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 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">Team</label>
|
|
<div class="me-sm-3">
|
|
<select class="form-select my-1 my-lg-0" id="status-select">
|
|
<option selected="">All</option>
|
|
<option value="Respiratory 1">Respiratory 1</option>
|
|
<option value="Respiratory 2">Respiratory 2</option>
|
|
<option value="Respiratory Arise">Respiratory Arise</option>
|
|
<option value="Respiratory Team 4">Respiratory Team 4</option>
|
|
<option value="Neb 1">Neb 1</option>
|
|
<option value="Neb 2">Neb 2</option>
|
|
<option value="Neb Arise">Neb Arise</option>
|
|
<option value="Team 4 (OR)">Team 4 (OR)</option>
|
|
</select>
|
|
</div>
|
|
<label for="status-select" class="me-2">Brand</label>
|
|
<div class="me-sm-3">
|
|
<select class="form-select my-1 my-lg-0" id="status-select">
|
|
<option selected="">All</option>
|
|
<option value="Seroflo">Seroflo</option>
|
|
<option value="Levolin">Levolin</option>
|
|
<option value="Foracort">Foracort</option>
|
|
<option value="Maxiflo">Maxiflo</option>
|
|
<option value="Duolin">Duolin</option>
|
|
<option value="Aerocort">Aerocort</option>
|
|
<option value="Budecort">Budecort</option>
|
|
<option value="Montair LC">Montair LC</option>
|
|
<option value="Furamist">Furamist</option>
|
|
<option value="Budecort Respules">Budecort Respules</option>
|
|
<option value="Glycohale Respules">Glycohale Respules</option>
|
|
<option value="Levolin Respules">Levolin Respules</option>
|
|
<option value="Inhalex Respules">Inhalex Respules</option>
|
|
<option value="Foracort Respules">Foracort Respules</option>
|
|
<option value="Duolin Respules">Duolin Respules</option>
|
|
<option value="Endobloc">Endobloc</option>
|
|
<option value="Assurans">Assurans</option>
|
|
<option value="Pirfenex">Pirfenex</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label for="status-select" class="me-2">Region</label>
|
|
<div class="me-sm-3">
|
|
<select class="form-select my-1 my-lg-0" id="status-select">
|
|
<option selected="">All</option>
|
|
<option value="Kerala">Kerala</option>
|
|
<option value="Eastern UP">Eastern UP</option>
|
|
<option value="Punjab">Punjab</option>
|
|
<option value="Rajasthan">Rajasthan</option>
|
|
<option value="Andhra Pradesh">Andhra Pradesh</option>
|
|
<option value="ROM 1">ROM 1</option>
|
|
<option value="Western UP">Western UP</option>
|
|
<option value="Chandigarh & HP">Chandigarh & HP</option>
|
|
<option value="West Bengal">West Bengal</option>
|
|
<option value="Haryana">Haryana</option>
|
|
<option value="Gujarat">Gujarat</option>
|
|
<option value="Jharkhand">Jharkhand</option>
|
|
<option value="Mumbai Total">Mumbai Total</option>
|
|
<option value="Madhya Pradesh">Madhya Pradesh</option>
|
|
<option value="Central UP">Central UP</option>
|
|
<option value="Karnataka">Karnataka</option>
|
|
<option value="Tamil Nadu">Tamil Nadu</option>
|
|
<option value="ROM 2">ROM 2</option>
|
|
<option value="Bihar">Bihar</option>
|
|
<option value="Orissa">Orissa</option>
|
|
<option value="Delhi Total">Delhi Total</option>
|
|
<option value="Chhattisgarh">Chhattisgarh</option>
|
|
<option value="Jammu">Jammu</option>
|
|
<option value="Assam">Assam</option>
|
|
<option value="Goa">Goa</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label for="status-select" class="me-2">Date Range</label>
|
|
<div class="me-sm-3">
|
|
<input type="text" class="form-control border datetime" id="period-startdate"
|
|
value="">
|
|
</div>
|
|
<div class="me-sm-3">
|
|
<input type="text" class="form-control border datetime" id="period-enddate"
|
|
value="">
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="text-lg-end my-1 my-lg-0">
|
|
<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>
|
|
<a href="/report/export" class="btn btn-sm btn-primary"
|
|
style="margin-bottom: 5px; font-weight: bold">
|
|
Export to Excel
|
|
</a>
|
|
</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: 150px
|
|
}
|
|
|
|
.filter-section .form-control {
|
|
max-width: 120px
|
|
}
|
|
|
|
.header-cell {
|
|
background-color: #a6e1ec;
|
|
text-align: center;
|
|
}
|
|
|
|
.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: 'RM Name',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'rm_name',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Week 01',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'region',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Week 02',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'city',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Week 03',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'doctor_name',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Grand Total',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'grand_total',
|
|
width: 170,
|
|
}
|
|
];
|
|
|
|
const rowData = [{
|
|
rm_name: 'Anirban Biswas',
|
|
region: '649',
|
|
city: '610',
|
|
doctor_name: '1050',
|
|
grand_total: '2309',
|
|
},
|
|
{
|
|
rm_name: 'Ashok Kumar',
|
|
region: '782',
|
|
city: '796',
|
|
doctor_name: '852',
|
|
grand_total: '2430',
|
|
},
|
|
{
|
|
rm_name: 'Dhanesh Salgaonkar',
|
|
region: '890',
|
|
city: '801',
|
|
doctor_name: '506',
|
|
grand_total: '2197',
|
|
},
|
|
{
|
|
rm_name: 'Gulshan Kumar',
|
|
region: '477',
|
|
city: '567',
|
|
doctor_name: '343',
|
|
grand_total: '1387',
|
|
},
|
|
{
|
|
rm_name: 'Gunaseelan P',
|
|
region: '607',
|
|
city: '506',
|
|
doctor_name: '361',
|
|
grand_total: '1474',
|
|
},
|
|
{
|
|
rm_name: 'M Satyanarayana',
|
|
region: '517',
|
|
city: '558',
|
|
doctor_name: '404',
|
|
grand_total: '1479',
|
|
},
|
|
{
|
|
rm_name: 'Pramod More',
|
|
region: '642',
|
|
city: '532',
|
|
doctor_name: '485',
|
|
grand_total: '1659',
|
|
},
|
|
{
|
|
rm_name: 'Saurabh Upadhyay',
|
|
region: '1116',
|
|
city: '1043',
|
|
doctor_name: '1009',
|
|
grand_total: '3168',
|
|
},
|
|
{
|
|
rm_name: 'Shobhit Nigam',
|
|
region: '411',
|
|
city: '375',
|
|
doctor_name: '375',
|
|
grand_total: '1161',
|
|
},
|
|
{
|
|
rm_name: 'Subin Murali',
|
|
region: '679',
|
|
city: '679',
|
|
doctor_name: '547',
|
|
grand_total: '1905',
|
|
},
|
|
{
|
|
rm_name: 'Taiyaba Hussain',
|
|
region: '388',
|
|
city: '299',
|
|
doctor_name: '487',
|
|
grand_total: '1174',
|
|
},
|
|
{
|
|
rm_name: 'Sonu Kumar',
|
|
region: '601',
|
|
city: '592',
|
|
doctor_name: '468',
|
|
grand_total: '1661',
|
|
},
|
|
{
|
|
rm_name: 'Sanjeev Pal',
|
|
region: '454',
|
|
city: '515',
|
|
doctor_name: '272',
|
|
grand_total: '1241',
|
|
},
|
|
{
|
|
rm_name: 'Mohd Shoeb Khan',
|
|
region: '529',
|
|
city: '505',
|
|
doctor_name: '390',
|
|
grand_total: '1424',
|
|
},
|
|
{
|
|
rm_name: 'Subhrajit Nayak',
|
|
region: '804',
|
|
city: '722',
|
|
doctor_name: '784',
|
|
grand_total: '2310',
|
|
},
|
|
{
|
|
rm_name: 'Grand Total',
|
|
region: '9546',
|
|
city: '9100',
|
|
doctor_name: '8333',
|
|
grand_total: '26979',
|
|
},
|
|
];
|
|
|
|
|
|
|
|
const gridOptions = {
|
|
columnDefs: columnDefs,
|
|
pagination: true,
|
|
|
|
// sets 10 rows per page (default is 100)
|
|
paginationPageSize: 50,
|
|
defaultColDef: {
|
|
resizable: true,
|
|
sortable: true,
|
|
},
|
|
rowData: rowData,
|
|
domLayout: 'autoHeight',
|
|
};
|
|
|
|
const gridDiv = document.querySelector('#myGrid');
|
|
new agGrid.Grid(gridDiv, gridOptions);
|
|
</script>
|
|
@endsection
|