@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">Device Wise 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">
                                    <a href="/report/export" class="btn btn-sm btn-primary" style="margin-bottom: 5px; font-weight: bold">Export to Excel</a>
                                    <!-- <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-md-6">
                <div class="card">
                    <div class="card-body">
                        <div>
                            <table class="table table-responsive border">
                                <thead>
                                    <th>Device Name</th>
                                    <th>Device Count</th>
                                </thead>
                                @php
                                $total = 0;
                                @endphp
                                <tbody>
                                    @foreach($metrics as $metric)
                                    <tr>
                                        <td>{{$metric->device_name}}</td>
                                        <td>{{$metric->device_count}}</td>
                                    </tr>
                                    @php
                                    $total += $metric->device_count;
                                    @endphp
                                    @endforeach
                                    <tr>
                                        <th>Total</td>
                                        <th>{{$total}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
            <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

@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: 'Device Name',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'device_name',
                width: 170,
            },
            {
                headerName: 'Reasons',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'reasons',
                width: 350,
            },
            {
                headerName: 'Total Patient',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'total_patient',
                width: 170,
            },
            {
                headerName: 'No. of Feedback Recorded',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'no_of_feedback_recorded',
                width: 170,
            },
            {
                headerName: '%',
                filter: 'agTextColumnFilter',
                floatingFilter: true,
                field: 'percent',
                width: 170,
            },
        ];

        const rowData = [
            @foreach($metrics as $metric)
            {
                device_name: '{{$metric->device_name}}',
                reasons: 'Not exhaling before use',
                total_patient: '{{$metric->device_count}}',
                no_of_feedback_recorded: '{{$metric->device_count}}',
                percent: ''
            },
            @foreach($metric->reasons as $reason)
            {
                device_name: '',
                reasons: '{{$reason->reason}}',
                total_patient: '',
                no_of_feedback_recorded: '{{$reason->count}}',
                percent: '{{ ((int)(($reason->count / $metric->responses) * 10000)/100) }}%'
            },
            @endforeach
            @endforeach
        ];

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

            // 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