@extends('site.layouts.app')

@section('title', 'Report Meal Patient Per Room')

@section('stylesheets')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('creative/component/datatable/fixedColumns.bootstrap5.css') }}">
<style type="text/css">
    .product-wrapper {
        display: flex;
    }

    .btn-no-hover:hover {
        cursor: default;
    }

    .select2-all-button {
        margin-bottom: 12px;
        padding: 3px 8px;
        font-size: 12px;
        cursor: pointer;
        background-color: #3f9af6;
        border: 1px solid #5ea5ed;
        border-radius: 4px;
    }

    .select2-all-button:hover {
        background-color: #0365c8;
    }

    .select2-container .select2-selection--multiple .select2-selection__rendered {
        padding: 0 !important;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Report Meal Patient Per Room</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('site.home', ['site' => $site->slug]) }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Report Meal Patient Per Room</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <div class="flex-grow-1">
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                            <a href="#" onclick="refresh()" class="btn btn-success">
                                <i class="ri-restart-line me-1 align-bottom"></i> Refresh
                            </a>
                            <a href="#" onclick="filter()" class="btn btn-danger">
                                <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline datatable"
                    style="width:100%">
                    <thead>
                        <tr>
                            <th width="10">No</th>
                            <th width="100">Ward</th>
                            <th width="100">Kelas</th>
                            <th width="100">Waktu</th>
                            @foreach ($dates as $date)
                            <th>{{ $date->format('d/m/y') }}</th>
                            @endforeach
                            <th width="100">Total Qty</th>
                            <th width="100">Total Harga</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search" autocomplete="off">
            <div class="mb-3">
                <label class="control-label" for="date">Period</label>
                <input type="text" id="date" class="form-control flatpickr" name="date" placeholder="Period"
                    data-provider="flatpickr" data-date-format="d/m/Y" data-range-date="true">
            </div>
            <div class="mb-3">
                <label class="control-label" for="status">Ward</label>
                <select name="ward_id" id="ward_id" class="form-control" data-placeholder="Select Ward"
                    placeholder="Select Ward">
                </select>
            </div>
            <div class="mb-3">
                <label class="control-label" for="status">Kelas</label>
                <select name="class_id" id="class_id" class="form-control" data-placeholder="Select Kelas"
                    placeholder="Select Kelas">
                </select>
            </div>
            <div class="mb-3">
                <label class="control-label" for="status">Waktu</label>
                <select name="food_menu_cycle_id" id="food_menu_cycle_id" class="form-control" data-placeholder="Select Waktu"
                    placeholder="Select Waktu">
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3 d-grid">
        <div class="row">
            <div class="col-6">
                <button onclick="exportreport()" class="btn btn-success me-1 w-100">
                    <i class="fa fa-file-export me-1"></i> Export
                </button>
            </div>
            <div class="col-6">
                <button form="form-search" type="submit" class="btn btn-primary w-100" title="Apply">
                    <i class="ri-search-line"></i>
                    Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="create-print" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header no-print">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Cetak</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <iframe id="bodyReplace" scrolling="no" allowtransparency="true"
                        style="width: 69%; border-width: 0px; position: relative; margin: 0 auto; display: block;"
                        onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="{{ asset('creative/component/datatable/dataTables.fixedColumns.js') }}"></script>
<script src="{{ asset('creative/component/datatable/fixedColumns.bootstrap5.js') }}"></script>
<script src="{{ asset('adminlte/component/moment/moment.min.js') }}"></script>
<script>
    /*! RowsGroup for DataTables v2.0.0
     * 2015-2016 Alexey Shildyakov ashl1future@gmail.com
     * 2016 Tibor Wekerle
     */

    /**
     * @summary     RowsGroup
     * @description Group rows by specified columns
     * @version     2.0.0
     * @file        dataTables.rowsGroup.js
     * @author      Alexey Shildyakov (ashl1future@gmail.com)
     * @contact     ashl1future@gmail.com
     * @copyright   Alexey Shildyakov
     *
     * License      MIT - http://datatables.net/license/mit
     *
     * This feature plug-in for DataTables automatically merges columns cells
     * based on it's values equality. It supports multi-column row grouping
     * in according to the requested order with dependency from each previous
     * requested columns. Now it supports ordering and searching.
     * Please see the example.html for details.
     *
     * Rows grouping in DataTables can be enabled by using any one of the following
     * options:
     *
     * * Setting the `rowsGroup` parameter in the DataTables initialisation
     *   to array which containes columns selectors
     *   (https://datatables.net/reference/type/column-selector) used for grouping. i.e.
     *    rowsGroup = [1, 'columnName:name', ]
     * * Setting the `rowsGroup` parameter in the DataTables defaults
     *   (thus causing all tables to have this feature) - i.e.
     *   `$.fn.dataTable.defaults.RowsGroup = [0]`.
     * * Creating a new instance: `new $.fn.dataTable.RowsGroup( table, columnsForGrouping );`
     *   where `table` is a DataTable's API instance and `columnsForGrouping` is the array
     *   described above.
     *
     * For more detailed information please see:
     *
     */

    (function($) {

        ShowedDataSelectorModifier = {
            order: 'current',
            page: 'current',
            search: 'applied',
        }

        GroupedColumnsOrderDir = 'asc';


        /*
         * columnsForGrouping: array of DTAPI:cell-selector for columns for which rows grouping is applied
         */
        var RowsGroup = function(dt, columnsForGrouping) {
            this.table = dt.table();
            this.columnsForGrouping = columnsForGrouping;
            // set to True when new reorder is applied by RowsGroup to prevent order() looping
            this.orderOverrideNow = false;
            this.mergeCellsNeeded = false; // merge after init
            this.order = []

            var self = this;
            dt.on('order.dt', function(e, settings) {
                if (!self.orderOverrideNow) {
                    self.orderOverrideNow = true;
                    self._updateOrderAndDraw()
                } else {
                    self.orderOverrideNow = false;
                }
            })

            dt.on('preDraw.dt', function(e, settings) {
                if (self.mergeCellsNeeded) {
                    self.mergeCellsNeeded = false;
                    self._mergeCells()
                }
            })

            dt.on('column-visibility.dt', function(e, settings) {
                self.mergeCellsNeeded = true;
            })

            dt.on('search.dt', function(e, settings) {
                // This might to increase the time to redraw while searching on tables
                //   with huge shown columns
                self.mergeCellsNeeded = true;
            })

            dt.on('page.dt', function(e, settings) {
                self.mergeCellsNeeded = true;
            })

            dt.on('length.dt', function(e, settings) {
                self.mergeCellsNeeded = true;
            })

            dt.on('xhr.dt', function(e, settings) {
                self.mergeCellsNeeded = true;
            })

            this._updateOrderAndDraw();

            /* Events sequence while Add row (also through Editor)
             * addRow() function
             *   draw() function
             *     preDraw() event
             *       mergeCells() - point 1
             *     Appended new row breaks visible elements because the mergeCells() on previous step doesn't apllied to already processing data
             *   order() event
             *     _updateOrderAndDraw()
             *       preDraw() event
             *         mergeCells()
             *       Appended new row now has properly visibility as on current level it has already applied changes from first mergeCells() call (point 1)
             *   draw() event
             */
        };


        RowsGroup.prototype = {
            setMergeCells: function() {
                this.mergeCellsNeeded = true;
            },

            mergeCells: function() {
                this.setMergeCells();
                this.table.draw();
            },

            _getOrderWithGroupColumns: function(order, groupedColumnsOrderDir) {
                if (groupedColumnsOrderDir === undefined)
                    groupedColumnsOrderDir = GroupedColumnsOrderDir

                var self = this;
                var groupedColumnsIndexes = this.columnsForGrouping.map(function(columnSelector) {
                    return self.table.column(columnSelector).index()
                })
                var groupedColumnsKnownOrder = order.filter(function(columnOrder) {
                    return groupedColumnsIndexes.indexOf(columnOrder[0]) >= 0
                })
                var nongroupedColumnsOrder = order.filter(function(columnOrder) {
                    return groupedColumnsIndexes.indexOf(columnOrder[0]) < 0
                })
                var groupedColumnsKnownOrderIndexes = groupedColumnsKnownOrder.map(function(columnOrder) {
                    return columnOrder[0]
                })
                var groupedColumnsOrder = groupedColumnsIndexes.map(function(iColumn) {
                    var iInOrderIndexes = groupedColumnsKnownOrderIndexes.indexOf(iColumn)
                    if (iInOrderIndexes >= 0)
                        return [iColumn, groupedColumnsKnownOrder[iInOrderIndexes][1]]
                    else
                        return [iColumn, groupedColumnsOrderDir]
                })

                groupedColumnsOrder.push.apply(groupedColumnsOrder, nongroupedColumnsOrder)
                return groupedColumnsOrder;
            },

            // Workaround: the DT reset ordering to 'asc' from multi-ordering if user order on one column (without shift)
            //   but because we always has multi-ordering due to grouped rows this happens every time
            _getInjectedMonoSelectWorkaround: function(order) {
                if (order.length === 1) {
                    // got mono order - workaround here
                    var orderingColumn = order[0][0]
                    var previousOrder = this.order.map(function(val) {
                        return val[0]
                    })
                    var iColumn = previousOrder.indexOf(orderingColumn);
                    if (iColumn >= 0) {
                        // assume change the direction, because we already has that in previos order
                        return [
                            [orderingColumn, this._toogleDirection(this.order[iColumn][1])]
                        ]
                    } // else This is the new ordering column. Proceed as is.
                } // else got milti order - work normal
                return order;
            },

            _mergeCells: function() {
                var columnsIndexes = this.table.columns(this.columnsForGrouping, ShowedDataSelectorModifier)
                    .indexes().toArray()
                var showedRowsCount = this.table.rows(ShowedDataSelectorModifier)[0].length
                this._mergeColumn(0, showedRowsCount - 1, columnsIndexes)
            },

            // the index is relative to the showed data
            //    (selector-modifier = {order: 'current', page: 'current', search: 'applied'}) index
            _mergeColumn: function(iStartRow, iFinishRow, columnsIndexes) {
                var columnsIndexesCopy = columnsIndexes.slice()
                currentColumn = columnsIndexesCopy.shift()
                currentColumn = this.table.column(currentColumn, ShowedDataSelectorModifier)

                var columnNodes = currentColumn.nodes()
                var columnValues = currentColumn.data()

                var newSequenceRow = iStartRow,
                    iRow;
                for (iRow = iStartRow + 1; iRow <= iFinishRow; ++iRow) {

                    if (columnValues[iRow] === columnValues[newSequenceRow]) {
                        $(columnNodes[iRow]).hide()
                    } else {
                        $(columnNodes[newSequenceRow]).show()
                        $(columnNodes[newSequenceRow]).attr('rowspan', (iRow - 1) - newSequenceRow + 1)

                        if (columnsIndexesCopy.length > 0)
                            this._mergeColumn(newSequenceRow, (iRow - 1), columnsIndexesCopy)

                        newSequenceRow = iRow;
                    }

                }
                $(columnNodes[newSequenceRow]).show()
                $(columnNodes[newSequenceRow]).attr('rowspan', (iRow - 1) - newSequenceRow + 1)
                if (columnsIndexesCopy.length > 0)
                    this._mergeColumn(newSequenceRow, (iRow - 1), columnsIndexesCopy)
            },

            _toogleDirection: function(dir) {
                return dir == 'asc' ? 'desc' : 'asc';
            },

            _updateOrderAndDraw: function() {
                this.mergeCellsNeeded = true;

                var currentOrder = this.table.order();
                currentOrder = this._getInjectedMonoSelectWorkaround(currentOrder);
                this.order = this._getOrderWithGroupColumns(currentOrder)
                this.table.order($.extend(true, Array(), this.order))
                this.table.draw()
            },
        };


        $.fn.dataTable.RowsGroup = RowsGroup;
        $.fn.DataTable.RowsGroup = RowsGroup;

        // Automatic initialisation listener
        $(document).on('init.dt', function(e, settings) {
            if (e.namespace !== 'dt') {
                return;
            }

            var api = new $.fn.dataTable.Api(settings);

            if (settings.oInit.rowsGroup ||
                $.fn.dataTable.defaults.rowsGroup) {
                options = settings.oInit.rowsGroup ?
                    settings.oInit.rowsGroup :
                    $.fn.dataTable.defaults.rowsGroup;
                var rowsGroup = new RowsGroup(api, options);
                $.fn.dataTable.Api.register('rowsgroup.update()', function() {
                    rowsGroup.mergeCells();
                    return this;
                });
                $.fn.dataTable.Api.register('rowsgroup.updateNextDraw()', function() {
                    rowsGroup.setMergeCells();
                    return this;
                });
            }
        });

    }(jQuery));

    /*

    TODO: Provide function which determines the all <tr>s and <td>s with "rowspan" html-attribute is parent (groupped) for the specified <tr> or <td>. To use in selections, editing or hover styles.

    TODO: Feature
    Use saved order direction for grouped columns
    	Split the columns into grouped and ungrouped.

    	user = grouped+ungrouped
    	grouped = grouped
    	saved = grouped+ungrouped

    	For grouped uses following order: user -> saved (because 'saved' include 'grouped' after first initialisation). This should be done with saving order like for 'groupedColumns'
    	For ungrouped: uses only 'user' input ordering
    */
</script>
<script>
    function exportreport() {
        var period = $('#searchCanvas').find('#date').val();
        var ward_id = $('#form-search').find('select[name=ward_id]').val();
        var class_id = $('#form-search').find('select[name=class_id]').val();
        var food_menu_cycle_id = $('#form-search').find('select[name=food_menu_cycle_id]').val();

        var data = {
            period: period,
            ward_id: ward_id,
            class_id: class_id,
            food_menu_cycle_id: food_menu_cycle_id,
        };

        $.ajax({
            url: `{{ url($site->slug . '/reportmealroom/export') }}`,
            dataType: 'json',
            data: data,
            type: 'GET',
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            }
        }).done(function(response) {
            if (response.status) {
                $('.overlay').addClass('d-none');
                Swal.fire({
                    title: "Success!",
                    text: "Your file has been export",
                    icon: "success",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                })
                // $('#show_process_modal').modal('hide');
                $('#searchCanvas').offcanvas('hide');
                let download = document.createElement("a");
                download.href = response.file;
                document.body.appendChild(download);
                download.download = response.name;
                download.click();
                download.remove();
            } else {
                Swal.fire({
                    title: "Error!",
                    text: response.message,
                    icon: "error",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                })
            }
        }).fail(function(response) {
            var response = response.responseJSON;
            $('.overlay').addClass('d-none');
            Swal.fire({
                title: "Error!",
                text: response.message,
                icon: "error",
                confirmButtonClass: "btn btn-primary w-xs mt-2",
                buttonsStyling: !1
            })
        });
    }

    function filter() {
        $('#searchCanvas').offcanvas('show');
    }

    function refresh() {
        $('.datatable').DataTable().ajax.reload();
    }

    $(function(){
        reloadDataTable();

        $("#ward_id").select2({
            ajax: {
                url: "{{ route('site.ward.select', ['slug' => $site->slug]) }}",
                type: 'GET',
                dataType: 'json',
                data: function(params) {
                    return {
                        name: params.term,
                        page: params.page,
                        limit: 30,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows, function(index, item) {
                        option.push({
                            id: item.id,
                            text: `${item.name}`,
                            // email: `${item.email}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more: (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $("#searchCanvas"), 
            width: 'resolve',
            multiple: true,
            allowClear: true,
        });

        $("#class_id").select2({
            dropdownParent: $("#searchCanvas"), 
            width: 'resolve',
            multiple: true,
            allowClear: true,
            ajax: {
                url: "{{ route('site.class.select', ['slug' => $site->slug]) }}",
                type: 'GET',
                dataType: 'json',
                data: function(params) {
                    return {
                        name: params.term,
                        page: params.page,
                        limit: 30,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows, function(index, item) {
                        option.push({
                            id: item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more: (params.page * 30) < data.total
                        },
                    };
                },
            },
        });

        $('#food_menu_cycle_id').select2({
            width: 'resolve',
            placeholder: 'Class',
            ajax: {
                url: `{{ route('site.foodmenucycle.select', ['site' => $site->slug]) }}`,
                type: 'GET',
                dataType: 'json',
                data: (params) => {
                    return {
                        name: params.term,
                        page: params.page,
                        limit: 20
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows, function(index, item) {
                        option.push({
                            id: item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more: (params.page * 30) < data.total
                        },
                    };
                },
            },
            allowClear: true,
            dropdownParent: $("#searchCanvas"),
            multiple: true,
        });

        $('#form-search').submit(function(e) {
            e.preventDefault();
            reloadDataTable();
            $('#searchCanvas').offcanvas('hide');
        });
    });

    function reloadDataTable() {
        if ($.fn.dataTable.isDataTable('.datatable')) {
            $('.datatable').DataTable().destroy();
            $('.datatable').empty();
        }

        const period = $('#date').val();
        const doctor_id = $('#doctor_id').val();

        let startDate, endDate;
        if (period) {
            [start, end] = period.split(" to ");
            startDate = moment(start, "DD/MM/YYYY").format("YYYY-MM-DD");
            endDate = moment(end, "DD/MM/YYYY").format("YYYY-MM-DD");
        } else {
            startDate = moment().startOf('month').format('YYYY-MM-DD');
            endDate = moment().endOf('month').format('YYYY-MM-DD');
        }

        const dynamicColumns = generateColumnsByDateRange(startDate, endDate);

        $('.datatable').DataTable({
            // stateSave: true,
            processing: true,
            serverSide: true,
            scrollX: true,
            scrollCollapse: true,
            fixedColumns: {
                leftColumns: 4,
                rightColumns: 2,
            },
            filter: false,
            info: false,
            autoWidth: false,
            pageLength: 100,
            columnDefs: [{
                targets: '_all',
                orderable: false
            }],
            paging: false,
            ajax: {
                url: "{{ route('site.reportmealroom.read', ['site' => $site->slug]) }}",
                type: "POST",
                data:function(data){
                    var ward_id = $('#form-search').find('select[name=ward_id]').val();
                    var class_id = $('#form-search').find('select[name=class_id]').val();
                    var food_menu_cycle_id = $('#form-search').find('select[name=food_menu_cycle_id]').val();
                    data.ward_id = ward_id;
                    data.class_id = class_id;
                    data.food_menu_cycle_id = food_menu_cycle_id;
                    data.period = period;
                }
            },
            columns: dynamicColumns,
            rowsGroup: [
                'ward_name:name',
                'no:name'
            ]
        });
    }

    function generateColumnsByDateRange(startDate, endDate) {
        const columns = [{
                data: "no",
                name: 'no',
                title: "No"
            },
            {
                data: "ward_name",
                name: 'ward_name',
                title: "Ward"
            },
            {
                data: "class_name",
                title: "Kelas",
            },
            {
                data: "food_menu_cycle_name",
                title: "Waktu",
            },
        ];

        let mStart = moment(startDate);
        let mEnd = moment(endDate);

        while (mStart.isSameOrBefore(mEnd)) {
            let dateKey = mStart.format("YYYY_MM_DD");
            const dateLabel = mStart.format("DD/MM/YY");
            columns.push({
                data: "date_"+dateKey,
                title: dateLabel,
                className: "text-center"
            });
            mStart.add(1, 'day');
        }

        columns.push({
            data: "total_qty",
            title: "QTY",
        });

        columns.push({
            data: "total_price",
            title: "TOTAL HARGA",
            render: function(data, type, row) {
                return formatRupiah(data);
            }
        });

        return columns;
    }

    function formatRupiah(number) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(number);
    }
</script>
@endpush