@extends(\Auth::user()->role != 40 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Dashboard POS')

@section('css')
<style type="text/css">
    .datatable-column-width {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
</style>
@endsection

@section('content')
<!-- Page header -->
<div class="page-header {{in_array(\Auth::user()->role, [1, 2]) ? 'page-header-light' : ''}}">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h4> <span class="font-weight-semibold">Dashboard POS</span></h4>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
        @if(hotelID())
            @if(cekSetupCompleted())
                <div class="float-right">
                    <div class="row">
                        <label style="white-space: nowrap;" class="col-form-label col-sm-3">
                            <h6><b>Filter: </b></h6>
                        </label>
                        <div class="col-sm-9">
                            <select name="filter_shop" id="filter_shop" class="form-control form-control-select2">
                                <option value="">-- Select Shop --</option>
                                @foreach ($shops as $shop)
                                    <option value="{{$shop->id}}" {{request()->filter_shop == $shop->id ? "selected" : ""}}>
                                        {{$shop->nama}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>
<!-- /page header -->

<div class="content">
    <div class="row">
        @if (in_array(\Auth::user()->role, [1,2,5,6]))
        <div class="col-lg-4">

            <!-- Revenue -->
            <div class="card bg-pink-400">
                <div class="card-body">

                    <div class="d-flex">
                        <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($food_rev->rev)}}</h3>
                    </div>
                    <div>
                        Food Revenue
                        <!-- <br><span><small></small></span> -->
                    </div>

                </div>

                <div class="container-fluid">
                    <div id="members-online"></div>
                </div>
            </div>
            <!-- /Revenue  -->

        </div>
        <div class="col-lg-4">

            <!-- Revenue -->
            <div class="card bg-blue-400">
                <div class="card-body">

                    <div class="d-flex">
                        <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($beverage_rev->rev)}}
                        </h3>
                    </div>
                    <div>
                        Beverage Revenue
                        <!-- <br><span><small></small></span> -->
                    </div>

                </div>

                <div class="container-fluid">
                    <div id="members-online"></div>
                </div>
            </div>
            <!-- /Revenue  -->

        </div>
        <div class="col-lg-4">

            <!-- Revenue -->
            <div class="card bg-teal-400">
                <div class="card-body">

                    <div class="d-flex">
                        <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($other_rev->rev)}}
                        </h3>
                    </div>
                    <div>
                        Other Revenue
                        <!-- <br><span><small></small></span> -->
                    </div>

                </div>

                <div class="container-fluid">
                    <div id="members-online"></div>
                </div>
            </div>
            <!-- /Revenue  -->

        </div>
        @endif
        <div class="col-md-12">
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Rush Hours</h5>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="chart-container">
                        <div class="chart has-fixed-height" id="columns_timeline"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <!-- Most Purchased Item -->
            <div class="card">

                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Best-seller Items &nbsp;&nbsp;&nbsp;
                        <!-- <a href="{{route('guest-lost-found.index')}}"><button type="button"
                                class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a> -->
                    </h5>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th class="d-none">no</th>
                            <th>Item Name</th>
                            <th>Item Type</th>
                            <th>Shop</th>
                            <th>Price</th>
                            <th>Status</th>
                            <th width="100px">Cost Complimentary</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!$most_purchased_menu->isEmpty())
                            @foreach($most_purchased_menu as $menu)
                                <tr>
                                    <td class="d-none">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="datatable-column-width">
                                            <img src="{{$menu->gambar}}" style="height: 25px" alt="">&nbsp;{{$menu->nama}}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->nama_tipe}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->shop->nama}}</div>
                                    </td>
                                    {{-- <td>
                                        <div class="datatable-column-width">Rp. {{number_format($menu->harga, 0, ',', '.')}}
                                        </div>
                                    </td> --}}
                                    <td>
                                        <div class="datatable-column-width">Rp. {{ribuanWithComma($menu->harga)}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{config('custom.status_menu')[$menu->status]}}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">
                                            {{$menu->cost_complimentary ? $menu->cost_complimentary . "%" : '-' }}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td align="center" colspan="5">No Data</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <!-- Most Purchased Item -->
        </div>

        <div class="col-md-12">
            <!-- Most Purchased Item -->
            <div class="card">

                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Unpopular Items &nbsp;&nbsp;&nbsp;
                        <!-- <a href="{{route('guest-lost-found.index')}}"><button type="button"
                                class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a> -->
                    </h5>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th class="d-none">no</th>
                            <th>Item Name</th>
                            <th>Item Type</th>
                            <th>Shop</th>
                            <th>Price</th>
                            <th>Status</th>
                            <th width="100px">Cost Complimentary</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!$most_purchased_menu->isEmpty())
                            @foreach($most_unpurchased_menu as $menu)
                                <tr>
                                    <td class="d-none">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="datatable-column-width">
                                            <img src="{{$menu->gambar}}" style="height: 25px" alt="">&nbsp;{{$menu->nama}}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->nama_tipe}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->shop->nama}}</div>
                                    </td>
                                    {{-- <td>
                                        <div class="datatable-column-width">Rp. {{number_format($menu->harga, 0, ',', '.')}}
                                        </div>
                                    </td> --}}
                                    <td>
                                        <div class="datatable-column-width">Rp. {{ribuanWithComma($menu->harga)}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{config('custom.status_menu')[$menu->status]}}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">
                                            {{$menu->cost_complimentary ? $menu->cost_complimentary . "%" : '-' }}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td align="center" colspan="5">No Data</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <!-- Most Purchased Item -->
        </div>

        <div class="col-md-12">
            <!-- Most Purchased Item -->
            <div class="card">

                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Sold Out Items &nbsp;&nbsp;&nbsp;
                        <!-- <a href="{{route('guest-lost-found.index')}}"><button type="button"
                                class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a> -->
                    </h5>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th class="d-none">no</th>
                            <th>Item Name</th>
                            <th>Item Type</th>
                            <th>Shop</th>
                            <th>Price</th>
                            <th width="100px">Cost Complimentary</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!$sold_out_menu->isEmpty())
                            @foreach($sold_out_menu as $menu)
                                <tr>
                                    <td class="d-none">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="datatable-column-width">
                                            <img src="{{$menu->gambar}}" style="height: 25px" alt="">&nbsp;{{$menu->nama}}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->nama_tipe}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">{{$menu->tipeMenu->shop->nama}}</div>
                                    </td>
                                    {{-- <td>
                                        <div class="datatable-column-width">Rp. {{number_format($menu->harga, 0, ',', '.')}}
                                        </div>
                                    </td> --}}
                                    <td>
                                        <div class="datatable-column-width">Rp. {{ribuanWithComma($menu->harga)}}</div>
                                    </td>
                                    <td>
                                        <div class="datatable-column-width">
                                            {{$menu->cost_complimentary ? $menu->cost_complimentary . "%" : '-' }}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td align="center" colspan="5">No Data</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <!-- Most Purchased Item -->
        </div>

        <div class="col-md-12">
            <!-- Guest Lost Found -->
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Guest Lost and Found &nbsp;&nbsp;&nbsp;
                        <a href="{{url('guest-lost-found-pos')}}"><button type="button"
                                class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a>
                    </h5>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <table id="tabel_kamar" class="table datatable-basic table-hover">
                        <thead>
                            <tr>
                                <th class="d-none"></th>
                                <th style="width:15%">Shop</th>
                                <th style="width:25%">Note</th>
                                <th style="width:15%">Date</th>
                                <th style="width:15%">Time</th>
                                <th style="width:15%">Status</th>
                            </tr>
                        </thead>
                        <tbody>

                            @if (count($data_guest_lost_found) > 0)
                                @foreach ($data_guest_lost_found as $item)
                                    <tr>
                                        <td class="d-none"></td>
                                        <td style="font-weight: bold;">{{$item->nomor_kamar}}</td>
                                        <td style="">{{$item->note}}</td>
                                        <td style="font-weight: bold;">{{dateFormat($item->date, 'd-m-Y')}}</td>
                                        <td style="font-weight: bold;">{{dateFormat($item->losttime, 'H:i:s')}}</td>
                                        <td style="font-weight: bold;"><span
                                                class="{{$item->status == 1 ? 'text-danger' : ($item->status == 2 ? 'text-success' : 'text-warning') }}"
                                                style="font-weight: bold">{{$item->status ? config('custom.lostfound_status')[$item->status] : ''}}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td align="center" colspan="5">No Data</td>
                                </tr>
                            @endif

                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Guest Lost Found -->
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/echarts/echarts.min.js')}}"></script>

<!-- JS Date Picker -->
<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
<script>
    $(document).ready(function () {
        $('#filter_shop').on('change', function () {
            var condition = $("#filter_shop").val();
            console.log(condition);
            let newRequest = window.location.search;
            let params = new URLSearchParams(newRequest);

            params.delete('filter_shop');
            params.append('filter_shop', $("#filter_shop").val());

            document.location.href = "?" + params.toString();
        });
        $('#filter_shop').on('select2:open', function (e) {
            // set binded select2 value again to fix selection on dropdown opening
            $('#filter_shop').val(JSON.stringify(e.selectedValue)).trigger('change.select2');
        });

        let shop_id_user = {!! json_encode(\Auth::user()->shop_id) !!};

        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
        var s = urlParams.get('s');
        var filter_shop = urlParams.get('filter_shop');

        if (s || filter_shop) {
            if (shop_id_user) {
                $("#filter_shop").val(shop_id_user).prop('disabled', true);

            } else {
                $("#filter_shop").val(s);
            }
        } else if (shop_id_user) {
            $("#filter_shop").val(shop_id_user).prop('disabled', true);
        }
    });
</script>
<script>
    const raw_days = {!! json_encode($days) !!};
    const raw_hours = {!! json_encode($hours) !!};
    const raw_rush_hour = {!! json_encode($rush_hours) !!};
    const hours = [];
    const days = [];

    Object.values(raw_days).map((day, index) => {
        days.push(day);
    });
    Object.values(raw_hours).map(hour => {
        hours.push(hour);
    });

    const data_rush_hours = Object.keys(raw_rush_hour).reduce((acc, day) => {
        const hourData = raw_rush_hour[day];
        const values = hours.map(hour => hourData[hour] || 0);
        acc[day] = values;
        return acc;
    }, {});

    var EchartsColumnsTimelineLight = function () {

        var _columnsTimelineLightExample = function () {
            if (typeof echarts == 'undefined') {
                console.warn('Warning - echarts.min.js is not loaded.');
                return;
            }

            var columns_timeline_element = document.getElementById('columns_timeline');

            if (columns_timeline_element) {

                // Initialize chart
                var columns_timeline = echarts.init(columns_timeline_element);

                var dataMap = {};
                dataMap.day = data_rush_hours;
                console.log(dataMap);



                // Options
                columns_timeline.setOption({

                    // Setup timeline
                    timeline: {
                        axisType: 'category',
                        data: days,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        label: {
                            normal: {
                                fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                                fontSize: 11
                            }
                        },
                        autoPlay: false,
                        playInterval: 3000
                    },

                    // Config
                    options: [
                        {

                            // Global text styles
                            textStyle: {
                                fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                                fontSize: 13
                            },

                            // Chart animation duration
                            animationDuration: 750,

                            // Setup grid
                            grid: {
                                left: 10,
                                right: 10,
                                top: 35,
                                bottom: 60,
                                containLabel: true
                            },

                            // Tooltip
                            tooltip: {
                                trigger: 'axis',
                                backgroundColor: 'rgba(0,0,0,0.75)',
                                padding: [10, 15],
                                textStyle: {
                                    fontSize: 13,
                                    fontFamily: 'Roboto, sans-serif'
                                },
                                axisPointer: {
                                    type: 'shadow',
                                    shadowStyle: {
                                        color: 'rgba(0,0,0,0.025)'
                                    }
                                }
                            },

                            // Horizontal axis
                            xAxis: [{
                                type: 'category',
                                data: hours,
                                axisLabel: {
                                    formatter: function (value, index){
                                        return index % 2 === 0 ? value : "";
                                    },
                                    color: '#333'
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#999'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#eee',
                                        type: 'dashed'
                                    }
                                },
                                splitArea: {
                                    show: true,
                                    areaStyle: {
                                        color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
                                    }
                                }
                            }],

                            // Vertical axis
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '',
                                    max: 53500,
                                    axisLabel: {
                                        color: '#333'
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#999'
                                        }
                                    },
                                    splitLine: {
                                        show: false,
                                        lineStyle: {
                                            color: '#eee'
                                        }
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '',
                                    axisLabel: {
                                        color: '#333'
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#999'
                                        }
                                    },
                                    splitLine: {
                                        show: false,
                                        lineStyle: {
                                            color: '#f5f5f5'
                                        }
                                    }
                                }
                            ],

                            // Add series
                            series: [

                                {
                                    name: '',
                                    yAxisIndex: 1,
                                    type: 'bar',
                                    data: dataMap.day['Monday'],
                                    itemStyle: {
                                        color: '#42A5F5'
                                    }
                                },
                            ]
                        },

                        // 2011 data
                        {
                            series: [
                                { data: dataMap.day['Tuesday'] },
                            ]
                        },

                        // 2012 data
                        {
                            series: [
                                { data: dataMap.day['Wednesday'] },
                            ]
                        },

                        // 2013 data
                        {
                            series: [
                                { data: dataMap.day['Thursday'] },
                            ]
                        },

                        // 2014 data
                        {
                            series: [
                                { data: dataMap.day['Friday'] },
                            ]
                        },
                        {
                            series: [
                                { data: dataMap.day['Saturday'] },
                            ]
                        },
                        {
                            series: [
                                { data: dataMap.day['Sunday'] },
                            ]
                        }
                    ]
                });
            }

            // Resize function
            var triggerChartResize = function () {
                columns_timeline_element && columns_timeline.resize();
            };

            // On sidebar width change
            var sidebarToggle = document.querySelector('.sidebar-control');
            sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

            // On window resize
            var resizeCharts;
            window.addEventListener('resize', function () {
                clearTimeout(resizeCharts);
                resizeCharts = setTimeout(function () {
                    triggerChartResize();
                }, 200);
            });
        };


        return {
            init: function () {
                _columnsTimelineLightExample();
            }
        }
    }();

    document.addEventListener('DOMContentLoaded', function () {
        EchartsColumnsTimelineLight.init();
    });
</script>
<script>
    $(document).ready(function () {
        // Default style
        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if (session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

    });
</script>
@endsection