Rapport-Laravel/resources/views/rcpareport/appmonthwise.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">Month 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">

                            </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 -->
    <style type="text/css">
        #myGrid {
            height: calc(100vh - 200px);
        }
        .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/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

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

        function rowSpan(params) {
            return 20;
        }

        var cellClassRules = {
            'header-cell': 'data.base === true'
        };

        const columnDefs = [{
                headerName: 'Brand',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'sku',
                width: 170,
                cellClassRules: cellClassRules,
            },
            {
                headerName: 'Competitor',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'competitor',
                width: 170,
                cellClassRules: cellClassRules,
            },
            
            @foreach($months as $month)
            {
                headerName: '{{$month->month_text}}',
                children: [
                    {
                        headerName: 'Quantity',
                        filter: 'agTextColumnFilter',
                        floatingFilter: true,
                        field: 'quantity_{{$month->timestamp}}',
                        width: 170,
                    },
                    {
                        headerName: 'Business',
                        filter: 'agTextColumnFilter',
                        floatingFilter: true,
                        field: 'business_{{$month->timestamp}}',
                        width: 170,
                    },
                ]
            },
            @endforeach


        ];

        let rowData = {!! json_encode($agg) !!}
        

        $('#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,
                cellClassRules: cellClassRules,
            },
            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',
        //         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