@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">Summery 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">
                                <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">
                                            <option selected="November 2023">November 2023</option>

                                        </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 class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table mb-2 table-bordered">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Target</th>
                                        <th>Achievement</th>
                                        <th>Total Dr Referral</th>
                                        <th>Total Chemist Referral</th>
                                        <th>Call Done</th>
                                        <th>Calls Not Done</th>
                                        <th>Total Calls</th>
                                        <th>% of Achievement</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>{{ $totals->target }}</th>
                                        <td>{{ $totals->achievement }}</td>
                                        <td>{{ $totals->total_dr_referrel }}</td>
                                        <td>{{ $totals->total_ch_referrel }}</td>
                                        <th>{{ $totals->call_done }}</th>
                                        <td>{{ $totals->call_not_done }}</td>
                                        <td>{{ $totals->total_calls }}</td>
                                        <td>{{ $totals->calls_achievement }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </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: 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/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: 'Zonal Business Manager',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'zonal_business_manager',
                width: 170,
                cellClassRules: cellClassRules
                //rowSpan: rowSpan,
            },
            {
                headerName: 'Regional Manager',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'regional_manager', // Replace with the actual field for this column
                //rowSpan: rowSpan,
                width: 170,
            },
            {
                headerName: 'AM Name',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'am_name', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Educator Manager',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'educator_manager', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Target',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'target', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Dr Referred',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'dr_referred', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Chemist Refferal',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'ch_referred', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Total (Dr+Chemist)',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'total_dr_chemist', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Done @BDE',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'done_at_bde', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Not Done @BDE',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'not_done_at_bde', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Patient Referred',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'patient_referred', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Done (%)',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'done_percentage', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Not Done (%)',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'not_done_percentage', // Replace with the actual field for this column
                width: 170,
            },
            {
                headerName: 'Achievement in %',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'achievement_percentage', // Replace with the actual field for this column
                width: 170,
            },
            @foreach ($days as $key => $display)
                {
                    headerName: '{{ $display }}',
                    children: [{
                            headerName: 'Done @BDE',
                            filter: 'agTextColumnFilter',
                            floatingFilter: true,
                            field: 'done_bde_{{ $key }}',
                            width: 170,
                        },
                        {
                            headerName: 'Not Done @BDE',
                            filter: 'agTextColumnFilter',
                            floatingFilter: true,
                            field: 'done_not_bde_{{ $key }}',
                            width: 170,
                        },
                    ],
                },
            @endforeach

        ];

        let rowData = []
        let zbms = {!! json_encode($zbms) !!}
        let rbms = {!! json_encode($rbms) !!}
        let ems = {!! json_encode($ems) !!}
        let lastzbm = ems[0].zbm_id
        let lastrbm = ems[0].rbm_id
        for (let em of ems) {
            if (em.rbm_id != lastrbm) {
                let rbm = rbms.find(z => z.id == lastrbm)
                if (rbm) {
                    rbm.regional_manager = rbm.regional_manager + ' Total'
                    rbm['section'] = "quarters"
                    rowData.push(rbm)
                }
            }
            if (em.zbm_id != lastzbm) {
                let zbm = zbms.find(z => z.id == lastzbm)
                zbm.zonal_business_manager = zbm.zonal_business_manager + ' Total'
                zbm['section'] = "big-title"
                rowData.push(zbm)
            }
            lastzbm = em.zbm_id
            lastrbm = em.rbm_id
            rowData.push(em)
        }
        let rbm = rbms.find(z => z.id == lastrbm)
        rbm.regional_manager = rbm.regional_manager + ' Total'
        rbm['section'] = "quarters"
        rowData.push(rbm)
        let zbm = zbms.find(z => z.id == lastzbm)
        zbm.zonal_business_manager = zbm.zonal_business_manager + ' Total'
        zbm['section'] = "big-title"
        rowData.push(zbm)

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

        const gridOptions = {
            columnDefs: columnDefs,
            pagination: false,

            // sets 10 rows per page (default is 100)
            paginationPageSize: 50,
            defaultColDef: {
                resizable: true,
                sortable: true,
                cellClassRules: cellClassRules,
            },
            rowData: rowData,
            domLayout: 'autoHeight',
        };

        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);
    </script>
@endsection