Rapport-Laravel/resources/views/rcpareport/apptmwise.blade.php

@extends('layouts.vertical-individual', ['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/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);
        }
        #myGrid {
            height: calc(100vh - 200px);
        }
    </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">TM Wise RCPA 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">Month: </label>
                                    <div class="me-sm-3">
                                        <select class="form-select my-1 my-lg-0" id="status-select" onchange="if (this.value) window.location.href = window.location.href.split('?')[0]+ '?month=' + this.value;">
                                            @foreach($months as $mon)
                                                <option value="{{$mon}}">{{$mon}}</option>
                                            @endforeach
                                        </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 id="myGrid" style="" class="ag-theme-alpine"></div>
            </div><!-- end col-->
        </div>
        <!-- end row-->
    </div> <!-- container -->

    @endsection

@section('script')
    <!-- third party js -->
    <script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script type="text/javascript">
        $('.datetime').flatpickr({
            dateFormat: "Y-m-d"
        });

        function rowSpan(params) {
            return 20;
        }

        const columnDefs = [{
                headerName: 'TM Name',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'user_name',
                width: 170,
            },
            {
                headerName: 'Employee Code',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'employee_code',
                width: 170,
            },
            {
                headerName: 'Email',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'email',
                width: 170,
            },
            {
                headerName: 'No of Chemist',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'no_of_contacts',
                width: 170,
            },
            
            @foreach($skus as $sku)
            {
                headerName: '{{$sku->title}}',
                children: [
                    {
                        headerName: '{{$sku->title}}',
                        filter: 'agTextColumnFilter',
                        floatingFilter: true,
                        field: 'quantity_{{$sku->id}}',
                        width: 170,
                    },
                    @foreach($sku->competitors as $comp)
                    {
                        headerName: '{{$comp->title}}',
                        filter: 'agTextColumnFilter',
                        floatingFilter: true,
                        field: 'quantity_{{$sku->id}}_{{$comp->id}}',
                        width: 170,
                    },
                    @endforeach
                ]
            },
            @endforeach


        ];

        let 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: 'normal',
        };

        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);

        jQuery(document).ready(function($){
            $("#pageloader").fadeIn();
            $.ajax({
                type: "GET",
                url: '/rcpareport/ajaxtmwise?{!! http_build_query($params) !!}',
                processData: false,
                contentType: false,
                success: function(data) {
                    let final_data = []
                    for(let doc of data.chemists) {
                        final_data.push(doc)
                    }
                    gridOptions.api.setRowData(final_data);
                    $("#pageloader").fadeOut();
                },
            });
        })
       

    </script>
@endsection