@extends('layouts.vertical', ['page_title' => 'Datatables'])

@section('css')
    <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')
<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 -->

        <!-- 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">
                                <h4 class="page-title">Detailing Contest Report</h4>
                            </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="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.0/xlsx.full.min.js"></script>

    <script type="text/javascript">
        var cellClassRules = {
            'header-cell': 'data.section === "big-title"',
            'quarters-cell': 'data.section === "quarters"',
        };

        function rowSpan(params) {
            return 20;
        }

        const columnDefs = [{
                    headerName: 'Name',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: '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: 'Designation',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'designation',
                    width: 170,
                },
                {
                    headerName: 'Zone',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'Zone',
                    width: 170,
                },
                {
                    headerName: 'Region',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'Region',
                    width: 170,
                },
                {
                    headerName: 'Area',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'Area',
                    width: 170,
                },
                {
                    headerName: 'Territory',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'Territory',
                    width: 170,
                },

                {
                    headerName: 'Marks',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'marks',
                    width: 170,
                },
                {
                    headerName: 'Total',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: 'total',
                    width: 170,
                },

                @foreach($parameters as $param)
                {
                    headerName: '{{$param->title}}',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    field: '{{$param->id}}',
                    width: 170,
                },
                @endforeach

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

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

        let final_data = {!! json_encode($users) !!}
        gridOptions.api.setRowData(final_data);

        //$("#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();
        //         gridOptions.api.setRowData(data.jsondata);
        //         $("#pageloader").fadeOut();
        //         final_data = final_data.concat(data.jsondata)

        //         for (var i=0; i<data.total; i+=5000) {
        //            if(i > 0) {
        //                 $.ajax({
        //                     type: "GET",
        //                     async: false,
        //                     url: '/report/ajaxbdedoctorscansfiles?type=nextpage&fileno=' + (i/5000),
        //                     processData: false,
        //                     contentType: false,
        //                     success: function(data) {
        //                         final_data = final_data.concat(data)
        //                     },
        //                 });
        //            }
        //         }
        //         gridOptions.api.setRowData(final_data);
        //     },
        // });
    </script>
@endsection