Rapport-Laravel/resources/views/report/bdedoctorscans.blade.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@30.0.0/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')
<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
    <!-- Start Content-->
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-md-6 p-2">
                <h4 class="page-title">Doctor wise Scans 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">
                                
                            </div>
                            <div class="col-auto">
                                <div class="text-lg-end my-1 my-lg-0">
                                    <button id="btn-export" class="btn btn-sm btn-primary" style="margin-bottom: 5px; font-weight: bold"> Export to Excel </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 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">
#pageloader {
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img {
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}

        .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: 'Doctor Name',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'name',
                    width: 170,
                },
                {
                    headerName: 'MSL Code',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'msl_code',
                    width: 170,
                },
                {
                    headerName: 'User',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'user_name',
                    width: 170,
                },
                {
                    headerName: 'Employee Code',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'user_employee_code',
                    width: 170,
                },
                {
                    headerName: 'Email',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'user_email',
                    width: 170,
                },
                {
                    headerName: 'Designation',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'user_designation',
                    width: 170,
                },
                {
                    headerName: 'Designation',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'user_designation',
                    width: 170,
                },
                {
                    headerName: 'Team',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'team',
                    width: 170,
                },
                {
                    headerName: 'EM Name',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'em_name',
                    width: 170,
                },

                {   headerName: 'Level 2 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_name', width: 170, },
                {   headerName: 'Level 2 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_email', width: 170, },
                {   headerName: 'Level 2 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_employee_code', width: 170, },
                
                {   headerName: 'Level 3 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_name', width: 170, },
                {   headerName: 'Level 3 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_email', width: 170, },
                {   headerName: 'Level 3 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_employee_code', width: 170, },

                {   headerName: 'Level 4 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_name', width: 170, },
                {   headerName: 'Level 4 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_email', width: 170, },
                {   headerName: 'Level 4 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_employee_code', width: 170, },

                {   headerName: 'Level 5 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_name', width: 170, },
                {   headerName: 'Level 5 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_email', width: 170, },
                {   headerName: 'Level 5 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_employee_code', width: 170, },
                
            ];

        const rowData = [];

        $('#btn-export').on('click', function() {
            gridOptions.api.exportDataAsCsv();
        });

        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);

        $("#pageloader").fadeIn();
        $.ajax({
            type: "GET",
            url: '/report/ajaxbdedoctorscans',
            processData: false,
            contentType: false,
            success: function(data) {
                //console.log(data)
                gridOptions.api.setRowData(data.doctors);
                $("#pageloader").fadeOut();
            },
        });
    </script>
@endsection