@extends('layout')

@section('title','Dashboard')

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><span class="font-weight-semibold">Admin Hotely</span> - Dashboard</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

    <!-- Breacrumb component -->
    <div class="bg-white mb-4">
        <div class="mt-3 ml-4">
            <form method="GET" class="ml-3">
                <div class="form-group row">
                    <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" placeholder="Masukkan Tanggal" id="startDate" name="startDate" value="{{$startDate}}">
                        </div>
                    </div>
                    <p class="mt-2">Sampai</p>
                    <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" placeholder="Masukkan Tanggal" id="endDate" name="endDate" value="{{$endDate}}">
                        </div>
                    </div>
                    {{-- <div class="col-md-3">
                        <select id="datarange" name="rangestring" class="form-control form-control-select2">
                            <option value="" selected disabled>Range</option>
                            <option value="seminggu">1 Minggu</option>
                            <option value="sebulan">1 Bulan</option>
                            <option value="3bulan">3 Bulan</option>
                            <option value="setahun">1 Tahun</option>
                        </select>
                    </div> --}}
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary submitBtn">Filter <i class="icon-checkmark"></i></button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <!-- /breacrumb component -->

	<!-- Content area -->
    <div class="content">

        <!-- Diagram Active Hotel -->
        <!-- Show values -->
        {{-- <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">Active Hotel Statistic</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="active_hotel_div"></div>
                </div>
            </div>
        </div> --}}
        <!-- /show values -->

        <!-- Diagram Client -->
        <!-- Show values -->
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">Client Statistic</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="client_div"></div>
                </div>
            </div>
        </div>
        <!-- /show values -->

        <!-- Diagram All Hotel Trial And Premium -->
        <!-- Show values -->
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">Hotel Statistic</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="hotel_div"></div>
                </div>
            </div>
        </div>
        <!-- /show values -->

    </div>
    <!-- /content area -->

@endsection

@section('js')

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3_tooltip.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/bootstrap_multiselect.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js') }}"></script>

<script src="{{asset('assets/js/app.js') }}"></script>
<script src="{{asset('global_assets/js/demo_pages/dashboard.js') }}"></script>
<!-- /theme JS files -->

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/c3/c3.min.js')}}"></script>
<!-- /Theme JS files -->

<script type="text/javascript">
	$( document ).ready(function() {

		// $('#datarange').select2()
        // Button class options
        $('#startDate').daterangepicker({
            singleDatePicker: true,
            applyClass: 'btn-primary',
            cancelClass: 'btn-light',
            startDate: "{{ $startDate ?? dateFormat(now(),'d-m-Y') }}",
            locale: {
            format: 'DD-MM-YYYY'
            }
        });
        $('#endDate').daterangepicker({
            singleDatePicker: true,
            applyClass: 'btn-primary',
            cancelClass: 'btn-light',
            startDate: "{{ $endDate ?? dateFormat(now(),'d-m-Y') }}",
            locale: {
            format: 'DD-MM-YYYY'
            }
        });

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

<script>
    // CALL DATA FROM BACKEND
        let dates    =  {!! json_encode($dates) !!};
        let clients     =  {!! json_encode($clients) !!};
        let all_hotels     =  {!! json_encode($all_hotels) !!};
        let active_hotels     =  {!! json_encode($active_hotels) !!};

        let c_clients     =  {!! json_encode($count_clients) !!};
        let c_all_hotel     =  {!! json_encode($count_all_hotel) !!};
        let c_acvtive_h     =  {!! json_encode($count_active_h) !!};
    // CALL DATA FROM BACKEND

    // DEFINING ACTIVE HOTELS
        let xDateArray = []
        let ActiveHotel = [];
        // get date for X
            xDateArray.push('x')
            $.each(dates, function (inkey, inval) {
                xDateArray.push(inval)
            });
            ActiveHotel.push(xDateArray)

            let acHotel    = []
            acHotel.push('Active Hotel');//name
            $.each(active_hotels, function (akey, bval) {
                acHotel.push(bval);
            });
            ActiveHotel.push(acHotel)
    // DEFINING ACTIVE HOTELS

    // DEFINING ALL HOTEL
        let AllHotels = [];
        // get date for X
            AllHotels.push(xDateArray)

            // alHotel.push('Hotel Count');//name
            $.each(all_hotels, function (akey, bval) {
                let alHotel    = []
                alHotel.push(akey)
                $.each(bval, function (index_date, ordered) {
                    alHotel.push(ordered);
                });
                AllHotels.push(alHotel)
            });
    // DEFINING ALL HOTEL

    // DEFINING CLIENT
        let Clients = [];
        // get date for X
            Clients.push(xDateArray)

            let ccLients    = []
            // ccLients.push('Client');//name
            $.each(clients, function (akey, bval) {
                let ccLients_in    = []
                ccLients_in.push(akey);
                $.each(bval, function (akey2, bval2) {
                    ccLients_in.push(bval2);
                });
                Clients.push(ccLients_in)
            });
            // Clients.push(ccLients)
            console.log(Clients)
    // DEFINING CLIENT

    // Setup Active Hotel Statistics
    var ActiveHotelStats = function() {

        // Chart
        var _activeHotelChart = function() {
            if (typeof c3 == 'undefined') {
                console.warn('Warning - c3.min.js is not loaded.');
                return;
            }

            // Define charts elements
            var chart_element = document.getElementById('active_hotel_div');

            // Bar chart
            if(chart_element) {

                // Generate chart
                var bar_chart = c3.generate({
                    bindto: chart_element,
                    size: { height: 400 },
                    data: {
                        x: 'x',
                        columns: ActiveHotel,
                        empty: {
                            label: {
                            text: "No Data"
                            }
                        }
                    },
                    zoom: {
                        enabled: true
                    },
                    grid: {
                        y: {
                            show: true
                        }
                    },
                    axis:{
                        x:{
                            type: 'timeseries',
                            tick: {
                                show: true,
                                format: '%d-%m-%Y',
                                fit: true,
                                outer: false,
                                culling: true,
                                culling: {
                                    max: xDateArray.length >= 8 ? (xDateArray.length >= 10 ? 8 : 2 ) : 1
                                }
                            },
                            label: {
                                text: 'DATE',
                                position: 'outer-center'
                            }
                        },
                        y:{
                            // Range includes padding, set 0 if no padding needed
                            max:c_acvtive_h * 2,
                            min:0,
                            padding: {top:0, bottom:0},
                            label: {
                                text: 'COUNT',
                                position: 'outer-middle'
                            },
                        }
                    },
                    // legend: {
                    //     show:false
                    // },
                    tooltip: {
                        format: {
                            title: function (d) { return 'Data Active Hotel at ' + moment(d).format("DD-MM-YYYY"); },
                            value: function (value, ratio, id) {
                                var format = d3.format('');
                                return (value);
                            }
                        }
                    },
                    padding: {
                        bottom: 50
                    },
                    onresized: function () {
                        xDateArray.length >= 8 ? bar_chart.internal.config.axis_x_tick_culling_max = 8 : bar_chart.internal.config.axis_x_tick_culling_max = 4;
                    }
                });

                    // Resize chart on sidebar width change
                    $('.sidebar-control').on('click', function() {
                        bar_chart.resize();
                    });
                }
            };

        return {
            init: function() {
                _activeHotelChart();
            }
        }
    }();
    // Setup Active Hotel Statistics

    // Setup Hotel Statistics
    var HotelStats = function() {

        // Chart
        var _hotelStats = function() {
            if (typeof c3 == 'undefined') {
                console.warn('Warning - c3.min.js is not loaded.');
                return;
            }

            // Define charts elements
            var chart_element = document.getElementById('hotel_div');

            // Bar chart
            if(chart_element) {

                // Generate chart
                var bar_chart = c3.generate({
                    bindto: chart_element,
                    size: { height: 400 },
                    data: {
                        x: 'x',
                        columns: AllHotels,
                        empty: {
                            label: {
                            text: "No Data"
                            }
                        }
                    },
                    zoom: {
                        enabled: true
                    },
                    grid: {
                        y: {
                            show: true
                        }
                    },
                    axis:{
                        x:{
                            type: 'timeseries',
                            tick: {
                                show: true,
                                format: '%d-%m-%Y',
                                fit: true,
                                outer: false,
                                culling: true,
                                culling: {
                                    max: xDateArray.length >= 8 ? (xDateArray.length >= 10 ? 8 : 2 ) : 1
                                }
                            },
                            label: {
                                text: 'DATE',
                                position: 'outer-center'
                            }
                        },
                        y:{
                            // Range includes padding, set 0 if no padding needed
                            max:c_all_hotel * 4,
                            min:0,
                            padding: {top:0, bottom:0},
                            label: {
                                text: 'COUNT',
                                position: 'outer-middle'
                            },
                        }
                    },
                    // legend: {
                    //     show:false
                    // },
                    tooltip: {
                        format: {
                            title: function (d) { return 'Data Hotel at '+ moment(d).format("DD-MM-YYYY"); },
                            value: function (value, ratio, id) {
                                var format = d3.format('');
                                return (value);
                            }
                        }
                    },
                    padding: {
                        bottom: 50
                    },
                    onresized: function () {
                        xDateArray.length >= 8 ? bar_chart.internal.config.axis_x_tick_culling_max = 8 : bar_chart.internal.config.axis_x_tick_culling_max = 4;
                    }
                });

                    // Resize chart on sidebar width change
                    $('.sidebar-control').on('click', function() {
                        bar_chart.resize();
                    });
                }
            };

        return {
            init: function() {
                _hotelStats();
            }
        }
    }();
    // Setup Hotel Statistics

    // Setup Hotel Statistics
    console.log(Clients.length)
    var ClientStats = function() {

        // Chart
        var _clientStats = function() {
            if (typeof c3 == 'undefined') {
                console.warn('Warning - c3.min.js is not loaded.');
                return;
            }

            // Define charts elements
            var chart_element = document.getElementById('client_div');

            // Bar chart
            if(chart_element) {

                // Generate chart
                var bar_chart = c3.generate({
                    bindto: chart_element,
                    size: { height: 400 },
                    data: {
                        x: 'x',
                        columns: Clients,
                        empty: {
                            label: {
                            text: "No Data"
                            }
                        }
                    },
                    zoom: {
                        enabled: true
                    },
                    grid: {
                        y: {
                            show: true
                        }
                    },
                    axis:{
                        x:{
                            type: 'timeseries',
                            tick: {
                                show: true,
                                format: '%d-%m-%Y',
                                fit: true,
                                outer: false,
                                culling: true,
                                culling: {
                                    max: xDateArray.length >= 8 ? (xDateArray.length >= 10 ? 8 : 2 ) : 1
                                }
                            },
                            label: {
                                text: 'DATE',
                                position: 'outer-center'
                            }
                        },
                        y:{
                            // Range includes padding, set 0 if no padding needed
                            max:c_clients * 2,
                            min:0,
                            padding: {top:0, bottom:2},
                            label: {
                                text: 'COUNT',
                                position: 'outer-middle'
                            },
                        }
                    },
                    // legend: {
                    //     show:false
                    // },
                    tooltip: {
                        format: {
                            title: function (d) { return 'Data Hotel at ' + moment(d).format("DD-MM-YYYY"); },
                            value: function (value, ratio, id) {
                                var format = d3.format('');
                                return (value);
                            }
                        }
                    },
                    padding: {
                        bottom: 50
                    },
                    onresized: function () {
                        xDateArray.length >= 8 ? bar_chart.internal.config.axis_x_tick_culling_max = 8 : bar_chart.internal.config.axis_x_tick_culling_max = 4;
                    }
                });

                    // Resize chart on sidebar width change
                    $('.sidebar-control').on('click', function() {
                        bar_chart.resize();
                    });
                }
            };

        return {
            init: function() {
                _clientStats();
            }
        }
    }();
    // Setup Hotel Statistics

    document.addEventListener('DOMContentLoaded', function() {
        ActiveHotelStats.init();
        HotelStats.init();
        ClientStats.init();
    });

</script>


@endsection