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

@section('css')
    <!-- third party 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">Doctor wise Follow up</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">
                <button id="btn-export" class="btn btn-sm btn-primary" style="margin-bottom: 5px; font-weight: bold"> Export to Excel </button>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div id="myGrid" style="" class="ag-theme-alpine"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row-->
    </div> <!-- container -->

    <style type="text/css">
        .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
@php
function ordinal($number) {
    $ends = array('th','st','nd','rd','th','th','th','th','th','th');
    if ((($number % 100) >= 11) && (($number%100) <= 13))
        return $number. 'th';
    else
        return $number. $ends[$number % 10];
}
@endphp
@section('script')
    <!-- third party js -->
    <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;
        }
        let columnDefs = [{
                headerName: 'TM Name',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'tm_user_name',
                width: 170,
                pinned: 'left'
            },
            { headerName: 'User Identification', filter: 'agTextColumnFilter', floatingFilter: true, field: 'tm_user_id', width: 170},
            { headerName: 'User Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'tm_user_code', width: 170},
            { headerName: 'Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'tm_user_email', width: 170},
            { headerName: 'Designation', filter: 'agTextColumnFilter', floatingFilter: true, field: 'tm_user_designation', width: 170},
            
            { headerName: 'Zone', filter: 'agTextColumnFilter', floatingFilter: true, field: 'position_zone', width: 170},
            { headerName: 'Region', filter: 'agTextColumnFilter', floatingFilter: true, field: 'position_region', width: 170},
            { headerName: 'Area', filter: 'agTextColumnFilter', floatingFilter: true, field: 'position_area', width: 170},
            { headerName: 'Territory', filter: 'agTextColumnFilter', floatingFilter: true, field: 'position_territory', width: 170},

            { headerName: 'ABM Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_1_code', width: 170},
            { headerName: 'ABM Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_1_name', width: 170},
            { headerName: 'ABM Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_1_email', width: 170},
            { headerName: 'RBM Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_2_code', width: 170},
            { headerName: 'RBM Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_2_name', width: 170},
            { headerName: 'RBM Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'manager_2_email', width: 170},

            { headerName: 'EM Emp ID', filter: 'agTextColumnFilter', floatingFilter: true, field: 'em_user_id', width: 170},
            { headerName: 'EM Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'em_user_name', width: 170},
            { headerName: 'EM Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'em_user_code', width: 170},
            
            { headerName: 'BF RBM Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_rbm_code', width: 170},
            { headerName: 'BF RBM Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_rbm_name', width: 170},
            { headerName: 'BF RBM Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_rbm_email', width: 170},
            { headerName: 'BF ZBM Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_zbm_code', width: 170},
            { headerName: 'BF ZBM Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_zbm_name', width: 170},
            { headerName: 'BF ZBM Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'edm_zbm_email', width: 170},

            @php
            $i = 1;
            $month = strtotime('2024-04-01');
            @endphp
            @while($month <= strtotime('now'))
            { headerName: '{{ date('F Y', $month) }}',
                children: [
                    {headerName: 'Neb Yatra Planned', filter: 'agTextColumnFilter', floatingFilter: true, field: 'neb_yatra_planned_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Doctors planned', filter: 'agTextColumnFilter', floatingFilter: true, field: 'doctors_planned_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Neb Requested', filter: 'agTextColumnFilter', floatingFilter: true, field: 'neb_requested_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Neb Yatra Done', filter: 'agTextColumnFilter', floatingFilter: true, field: 'no_of_executions_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Dr executions', filter: 'agTextColumnFilter', floatingFilter: true, field: 'no_of_doctorsd_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Neb Allocated', filter: 'agTextColumnFilter', floatingFilter: true, field: 'no_of_neb_allocated_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Follow Ups', filter: 'agTextColumnFilter', floatingFilter: true, field: 'no_of_followups_{{ date('n_Y', $month) }}', width: 170, },

                    {headerName: 'Budecort Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'execution_budecort_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Duolin Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'execution_duolin_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Levolin Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'execution_levolin_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Hyperneb Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'execution_hyperneb_{{ date('n_Y', $month) }}', width: 170, },

                    {headerName: 'Followup Budecort Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'followup_budecort_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Followup Duolin Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'followup_duolin_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Followup Levolin Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'followup_levolin_{{ date('n_Y', $month) }}', width: 170, },
                    {headerName: 'Followup Hyperneb Units', filter: 'agTextColumnFilter', floatingFilter: true, field: 'followup_hyperneb_{{ date('n_Y', $month) }}', width: 170, },
                ],
                @php
                $month = strtotime('+1 month', $month);
                @endphp
            },
            @endwhile
            
        ];

        const rowData = {!! json_encode($executions) !!}

        $('#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);
    </script>
@endsection