@extends(in_array(\Auth::user()->role, [10, 40]) ? 'layoutfrontdesk' : 'layout')

@section('title', 'Dashboard')
@section('css')
    <style type="text/css">
        .c3-axis-y-label{
            font-weight: bold
        }
        .c3-axis-x-label{
            font-weight: bold
        }
    </style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header {{\Auth::user()->role != 10 ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Home</span> - Dashboard</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			{{--
				<div class="d-flex">
					<form id="select-hotel" method="get">
						<select name="hotel_id" id="hotel_id" class="form-control form-control-select2">
							<option value="">-- Pilih Hotel --</option>
							@foreach($hotels as $hotel)
							<option value="{{$hotel->id}}" {{ isset($_GET['hotel_id']) ? ($_GET['hotel_id'] == $hotel->id ? 'selected' : '') : '' }}>{{$hotel->nama}}</option>
							@endforeach
						</select>
					</form>
				</div>
			--}}

            @if(hotelID())
                @if(cekSetupCompleted())
                <div class="float-right">
                    <div class="row">
                        <label style="white-space: nowrap;" class="col-form-label col-sm-2"><h6><b>Filter: </b></h6></label>
                        <div class="col-sm-4">
                            <select name="filter_method" id="filter_method" class="form-control form-control-select2">
                                <option value="period" {{ $method == 'period' ? 'selected':'' }}>Filter Date</option>
                                <option value="3day" {{ $method == '3day' ? 'selected':'' }}>Last 3 Day</option>
                                <option value="lastweek" {{ $method == 'lastweek' ? 'selected':'' }}>Last Week</option>
                                <option value="lastmonth" {{ $method == 'lastmonth' ? 'selected':'' }}>Last Month</option>
                                <option value="3month" {{ $method == '3month' ? 'selected':'' }}>Last 3 Month</option>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <input type="text"
                                name="tanggal"
                                id="tanggal_dashboard"
                                class="form-control daterange-picker"
                                autocomplete="off"
                                {{$method=='period'?'':'disabled'}}
                                required>
                        </div>
                    </div>
                </div>
                @endif
            @endif

		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
	@if(hotelID())
    @if (!checkLicense() == 1)
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning alert-styled-right alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                    <span class="font-weight-semibold">Warning!</span> This Hotel is Inactive. please contact our marketing!
                </div>
            </div>
        </div>
    @else
		@if(cekSetupCompleted())

			@if(isset($_GET['setupcomplete']))
				@if($_GET['setupcomplete'] == 1)
				<div class="row">
					<div class="col-md-12">
						<div class="alert alert-success alert-styled-right alert-dismissible">
							<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
							<span class="font-weight-semibold">Congrats!</span> now all features are available.
						</div>
					</div>
				</div>
				@endif
			@endif


        <!-- Filter Area -->
		{{-- <div class="card">
			<div class="card-header row">
                <div class="form-group row col-sm-6 mt-3">
                    <label class="col-form-label col-sm-4"><h6><b>Filter Date:</b></h6></label>
                    <div class="col-sm-6">
                        <input type="text"
                                name="tanggal"
                                id="tanggal_dashboard"
                                class="form-control daterange-picker"
                                autocomplete="off"
                                required>
                    </div>
                </div>
			</div>
		</div> --}}
		<!-- Filter Area -->

        {{-- <div class="row">
            <div class="col-md-4">
                <!-- Statistik Pemesanan Kamar -->
                <h2>Order Room Statistics</h2>
                @if(in_array(\Auth::user()->role, [1,5]))
                    @if(\Session::get('hotel_id'))
                    <div class="card p-0">
                        <div class="card-header p-1">
                            <div class="row">
                                <div class="col-12 py-0">
                                    <input type="text"
                                            name="tanggal"
                                            id="tanggal"
                                            class="form-control daterange-picker"
                                            autocomplete="off"
                                            required>
                                </div>
                            </div>
                        </div>
                        @if(count($jml_kamars) > 0)
                        <ul id="list_statistik_kamar" class="list-group list-group-bordered">
                                @foreach($jml_kamars as $key => $val)
                                <li class="list-group-item">
                                {{$val['jenis'] ?? '-'}}
                                <span class="badge bg-primary align-self-center ml-auto">{{$val['count'] ?? 0}} Booked Room</span>
                                </li>
                                @endforeach
                        </ul>
                        @else
                        <div class="alert alert-danger text-center m-2" role="alert">
                            No Data
                        </div>
                        @endif

                    </div>
                    @else
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-danger text-center mb-2" role="alert">
                                Please Select Hotel First!
                            </div>
                        </div>
                    </div>
                    @endif
                @else
                <div class="card p-0">
                    <div class="card-header p-1">
                        <div class="row">
                            <div class="col-12 py-0">
                                <input type="text"
                                        name="tanggal"
                                        id="tanggal"
                                        class="form-control daterange-picker"
                                        autocomplete="off"
                                        required>
                            </div>
                        </div>
                    </div>
                    @if(count($jml_kamars) > 0)
                    <ul id="list_statistik_kamar" class="list-group list-group-bordered">
                        @foreach($jml_kamars as $key => $val)
                        <li class="list-group-item">
                        {{$val['jenis'] ?? '-'}}
                        <span class="badge bg-primary align-self-center ml-auto">{{$val['count'] ?? 0}} Booked Room</span>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    <div class="alert alert-danger text-center m-2" role="alert">
                        No Data
                    </div>
                    @endif
                </div>
                @endif
                <!-- /Statistik Pemesanan Kamar -->
            </div>
            <div class="col-md-4">
                <!-- Stok Kamar -->
                <h2>Room Stocks {{dateFormat(getSystemDate(), 'd F Y')}}</h2>
                @if(in_array(\Auth::user()->role, [1,5]))
                    @if(\Session::get('hotel_id'))
                    <div class="card p-0">
                        @if(count($stok_kamars) > 0)
                        <ul id="list_statistik_kamar" class="list-group list-group-bordered">
                            @foreach($stok_kamars as $stok_kamar)
                            <li class="list-group-item">
                                @php
                                $badge = $stok_kamar['stok_kamars_count'] == 0 ? 'bg-danger' : 'bg-success';
                                @endphp
                                {{$stok_kamar['nama']}}&nbsp;&nbsp;@if(in_array(\Auth::user()->role, [1,5]))<span class="badge {{$badge}}">{{$this_hotel->nama}}</span>@endif
                                <span class="badge {{$badge}} align-self-center ml-auto">{{$stok_kamar['stok_kamars_count']}} Room</span>
                            </li>
                            @endforeach
                        </ul>
                        @else
                        <div class="alert alert-danger text-center m-2" role="alert">
                            No Data
                        </div>
                        @endif
                    </div>
                    @else
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-danger text-center mb-2" role="alert">
                                Please Select Hotel First!
                            </div>
                        </div>
                    </div>
                    @endif
                @else
                <div class="card p-0">
                    @if(count($stok_kamars) > 0)
                    <ul id="list_statistik_kamar" class="list-group list-group-bordered">
                        @foreach($stok_kamars as $stok_kamar)
                        <li class="list-group-item">
                        @php
                        $badge = $stok_kamar['stok_kamars_count'] == 0 ? 'bg-danger' : 'bg-success';
                        @endphp
                        {{$stok_kamar['nama']}}&nbsp;&nbsp;@if(in_array(\Auth::user()->role, [1,5]))<span class="badge {{$badge}}">{{$this_hotel->nama}}</span>@endif
                        <span class="badge {{$badge}} align-self-center ml-auto">{{$stok_kamar['stok_kamars_count']}} Room</span>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    <div class="alert alert-danger text-center m-2" role="alert">
                        No Data
                    </div>
                    @endif
                </div>
                @endif

                <!-- Stok Kamar -->
            </div>
        </div> --}}

            <!-- Revenue Box -->
            @if (in_array(\Auth::user()->role, [1,2,5,6]))
            <div class="row">
                <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($room_rev->rev)}}</h3>
                            </div>
                            <div>
                                Room Only Revenue
                                <br><span><small>{{$start_date_index.' - '.$end_date_index}}</small></span>
                            </div>

                        </div>

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

                </div>

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

                    <!-- Occupancy -->
                    <div class="card bg-pink-400">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">{{$occp}}%</h3>
                            </div>

                            <div>
                                Occupancy %
                                <br><span><small>{{$start_date_index.' - '.$end_date_index}}</small></span>
                            </div>
                        </div>

                        <div id="server-load"></div>
                    </div>
                    <!-- /Occupancy -->

                </div>

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

                    <div class="card bg-blue-400">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($pars->par)}}</h3>
                            </div>

                            <div>
                                RevPAR (Price per available room)
                                <br><span><small>{{$start_date_index.' - '.$end_date_index}}</small></span>
                            </div>
                        </div>

                        <div id="today-revenue"></div>
                    </div>

                </div>
            </div>
            @endif
            <!-- /Revenue Box -->

            <!-- statistikhide -->
            {{-- <div class="row">
                <!-- Order Room Chart -->
                    <div class="col-md-7">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Room Order Statistics</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" id="order-room-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- /Order Room Chart -->
                <!-- Guest Segment Chart -->
                    <div class="col-md-5">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Guest Segment Statistics</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 text-center">
                                    <div class="d-inline-block" id="c3-pie-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- Guest Segment Chart -->
            </div> --}}

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

                    <div class="card bg-grey-400">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($average_daily_rate)}}</h3>
                            </div>

                            <div>
                                Yesterday Daily Report : {{$prev_daily_rate_date}}
                            </div>
                        </div>

                        <div id="today-revenue"></div>
                    </div>

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

                    <div class="card bg-grey-400">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($average_room_rates)}}</h3>
                            </div>

                            <div>
                                Average Room Rates : {{$period_average_room_rates}}
                            </div>
                        </div>

                        <div id="today-revenue"></div>
                    </div>

                </div>
            </div>
            @endif
            <!--ARR dan ADR-->

            <!-- Room Availability Box -->
            @if (!in_array(\Auth::user()->role, [50]))
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Reservation Statistics: <span><small>({{$start_date_index.' - '.$end_date_index}})</small></span> &nbsp;&nbsp;&nbsp;
                        <a href="{{url('roomview')}}"><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">
                    <div class="row">
                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-success">
                                <h4 class="font-weight-semibold mb-0">{{ $arriving_stat }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                Expected Arrival
                            </div>
                        </div>

                        <div class="col-md-1" style=" border-right: 1px solid rgb(177, 177, 177);"></div>

                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-warning">
                                <h4 class="font-weight-semibold mb-0"> {{ $checkin_stat }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                In house
                            </div>
                        </div>

                        <div class="col-md-1" style=" border-left: 1px solid rgb(177, 177, 177);"></div>

                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-danger">
                                <h4 class="font-weight-semibold mb-0">{{ $departure_stat }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                Departure
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            @endif
            <!-- /Room Availability Box -->

            <!-- Room Availability Box -->
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Room Status Statistics: <span><small>({{$start_date_index.' - '.$end_date_index}})</small></span> &nbsp;&nbsp;&nbsp;
                        @if (!in_array(\Auth::user()->role, [50]))
                        <a href="{{url('status-kamar')}}"><button type="button" class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a>
                        @endif
                    </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="row">
                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-primary">
                                <h4 class="font-weight-semibold mb-0">{{ $vc_stats }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                Vacant Clean
                            </div>
                        </div>

                        <div class="col-md-1" style=" border-right: 1px solid rgb(177, 177, 177);"></div>

                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-danger">
                                <h4 class="font-weight-semibold mb-0"> {{ $vd_stats }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                Vacant Dirty
                            </div>
                        </div>

                        <div class="col-md-1" style=" border-left: 1px solid rgb(177, 177, 177);"></div>

                        <div class="col-lg-3" style="text-align: center">
                            <div class="text-danger">
                                <h4 class="font-weight-semibold mb-0">{{ $od_stats }}</h4>
                            </div>
                            <div class="font-weight-semibold">
                                Occupied Dirty
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- /Room Availability Box -->

            <!-- Stock Room Chart -->
            @if (!in_array(\Auth::user()->role, [50]))
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Room Stock Availability &nbsp;&nbsp;&nbsp;
                            <a href="{{url('room-availability')}}"><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>
		                		{{-- <a class="list-icons-item" data-action="reload"></a> --}}
		                		{{-- <a class="list-icons-item" data-action="remove"></a> --}}
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<div class="chart-container">
							<div class="chart" id="stock-room-chart"></div>
						</div>
					</div>
				</div>
            @endif
            <!-- /Stock Room Chart -->

            <!-- 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="{{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>

					<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%">Room Number</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
                                @endif

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

		@else
            @php
                $tipe_prop = propertiTipe();
            @endphp
			<div class="row">
				<div class="col-md-12">
					<div class="alert alert-warning alert-styled-right alert-dismissible">
						<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
						<span class="font-weight-semibold">Warning!</span> Please complete all settings below before using all features.
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="card">
						<table class="table table striped">
							<!-- <thead>
								<tr>
									<th class="bg-warning text-white" colspan="2" style="text-align: center; font-weight: bold">To Do</th>
								</tr>
							</thead> -->
							<tbody class="font-weight-bold">
								<tr>
									<td><a href="{{ url('fasilitas') }}">Setup Facility</a></td>
									<td class="text-right" id="btn_facilities">
										@if(cekFacility())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('fasilitas') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('jenis_kamar') }}">Setup Room Type</a></td>
									<td class="text-right" id="btn_room_types">
										@if(cekRoomType())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('jenis_kamar') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('kamars') }}">Add Room</a></td>
									<td class="text-right" id="btn_rooms">
										@if(cekRoom())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('kamars') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @if (in_array($tipe_prop, [1]))
                                <tr>
									<td><a href="{{ url('main-account-coa') }}">Setup Main Account COA</a></td>
									<td class="text-right" id="btn_main_account">
										@if(cekmainAccountCoa())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('main-account-coa') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('coa') }}">Setup COA</a></td>
									<td class="text-right" id="btn_coas">
										@if(cekCoa())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('coa') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @endif
                                <tr>
									<td><a href="{{ url('departments') }}">Setup Department</a></td>
									<td class="text-right" id="btn_departments">
										@if(cekDepartment())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('departments') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @if (in_array($tipe_prop, [1]))
								<tr>
									<td><a href="{{ url('setting-coa-default') }}">Setting COA Default</a></td>
									<td class="text-right" id="btn_coa_cash">
										@if(cekCoaCash())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('setting-coa-default') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @endif
                                @if (in_array($tipe_prop, [1,2]))
								<tr>
									<td><a href="{{ url('shops') }}">Setup Outlet</a></td>
									<td class="text-right" id="btn_shops">
										@if(cekOutlet())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('shops') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('tipe-menus') }}">Setup Item Type</a></td>
									<td class="text-right" id="btn_item_types">
										@if(cekItemType())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('tipe-menus') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('menus') }}">Setup Item</a></td>
									<td class="text-right" id="btn_items">
										@if(cekItem())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('menus') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @endif
								<tr>
									<td><a href="{{ url('arrangement-code') }}">Setup Arrangement</a></td>
									<td class="text-right" id="btn_arrangements">
										@if(cekArrangement())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('arrangement-code') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('ratecode') }}">Setup Ratecode and Service Tax Hotel</a></td>
									<td class="text-right" id="btn_ratecodes">
										@if(cekRatecode())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('ratecode') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('pembayarans') }}">Add Payment Method</a></td>
									<td class="text-right" id="btn_payment_methods">
										@if(cekPaymentMethod())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('pembayarans') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @if (in_array($tipe_prop, [1]))
								<tr>
									<td><a href="{{ url('pembayaran-ar') }}" >Add A/R & A/P Payment Method</a></td>
									<td class="text-right" id="btn_ar_ap_methods">
										@if(cekArApPayment())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('pembayaran-ar') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
                                @endif
								<tr>
									<td><a href="{{ url('rekening-bank') }}" >Setup Bank Account</a></td>
									<td class="text-right" id="btn_rekening_bank">
										@if(cekRekeningBank())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('rekening-bank') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
								<tr>
									<td><a href="{{ url('complimentaries') }}" >Setup Complimentaries</a></td>
									<td class="text-right" id="btn_complimentaries">
										@if(cekComplimentaries())
										<i class="fas fa-check-circle fa-2x text-success"></i>
										@else
										<a href="{{ url('complimentaries') }}" class="btn btn-warning">GO</a>
										@endif
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		@endif
    @endif
	@endif
	</div>

    <!-- Alert Modal -->
    <div id="alert_modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-success" align="center">
                    <h6 class="modal-title">
                        Guest Birthday!
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body" align="center" id="text-alert">

                    <h3>Guest Birthday Today :</h3>

                    <table class="table datatable-basic table-hover">
                        <thead>
                            <tr>
                                <th style="width: 10%">#</th>
                                <th style="width: 30%">Guest Name</th>
                                <th style="width: 25%">Birth Date</th>
                                <th style="width: 10%">Age </th>
                                <th style="width: 25%">Inhouse Room</th>
                            </tr>
                        </thead>

                        <tbody id="tbody_birthday_list">
                        </tbody>
                    </table>

                    <legend></legend>

                    <br>

                    <h3>Guest Birthday Tommorow :</h3>

                    <table class="table datatable-basic table-hover">
                        <thead>
                            <tr>
                                <th style="width: 10%">#</th>
                                <th style="width: 30%">Guest Name</th>
                                <th style="width: 25%">Birth Date</th>
                                <th style="width: 10%">Age </th>
                                <th style="width: 25%">Inhouse Room</th>
                            </tr>
                        </thead>

                        <tbody id="tbody_birthday_list_tommorow">
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn bg-success" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
    <!-- /Alert Modal -->

@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/forms/selects/select2.min.js')}}"></script>

<!-- Daterange Picker -->
<!-- <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script> -->

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

<!-- 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>
    @if(hotelID())
	@if(!cekSetupCompleted())
	var interval = setInterval(function() {
			$.ajax({
				type: 'GET',
				url: "{{ url('cek-setup-complete') }}",
				async: true,
				success: function (data) {
					// Cek Fasilitas
					if(data['facilities']){
						$('#btn_facilities').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_facilities').html('<a href="{{ url('fasilitas') }}" class="btn btn-warning">GO</a>');
					}

					// Cek Room Type
					if(data['room_types']){
						$('#btn_room_types').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_room_types').html('<a href="{{ url('jenis_kamar') }}" class="btn btn-warning">GO</a>');
					}

					//Cek Room
					if(data['rooms']){
						$('#btn_rooms').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_rooms').html('<a href="{{ url('kamars') }}" class="btn btn-warning">GO</a>');
					}

					//Cek Department
					if(data['departments']){
						$('#btn_departments').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_departments').html('<a href="{{ url('departments') }}" class="btn btn-warning">GO</a>');
					}

                    //Cek COA
					if(data['main_account_coa']){
						$('#btn_main_account').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_main_account').html('<a href="{{ url('main-account-coa') }}" class="btn btn-warning">GO</a>');
					}

					//Cek COA
					if(data['coas']){
						$('#btn_coas').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_coas').html('<a href="{{ url('coa') }}" class="btn btn-warning">GO</a>');
					}

					//Cek COA
					if(data['coa_cash']){
						$('#btn_coa_cash').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_coa_cash').html('<a href="{{ url('setting-coa-default') }}" class="btn btn-warning">GO</a>');
					}

					//Cek Outlet
					if(data['shops']){
						$('#btn_shops').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_shops').html('<a href="{{ url('shops') }}" class="btn btn-warning">GO</a>');
					}

					//Setup Item Type
					if(data['item_types']){
						$('#btn_item_types').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_item_types').html('<a href="{{ url('tipe-menus') }}" class="btn btn-warning">GO</a>');
					}

					//Setup Item
					if(data['items']){
						$('#btn_items').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_items').html('<a href="{{ url('menus') }}" class="btn btn-warning">GO</a>');
					}

					//Setup Arrangements
					if(data['arrangements']){
						$('#btn_arrangements').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_arrangements').html('<a href="{{ url('arrangement-code') }}" class="btn btn-warning">GO</a>');
					}

					//Setup Ratecodes
					if(data['ratecodes']){
						$('#btn_ratecodes').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_ratecodes').html('<a href="{{ url('ratecode') }}" class="btn btn-warning">GO</a>');
					}

					//Setup Payment Method
					if(data['payment_methods']){
						$('#btn_payment_methods').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_payment_methods').html('<a href="{{ url('pembayarans') }}" class="btn btn-warning">GO</a>');
					}

					//Setup A/R & A/P Payment Method
					if(data['ar_ap_methods']){
						$('#btn_ar_ap_methods').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
					}
					else{
						$('#btn_ar_ap_methods').html('<a href="{{ url('pembayaran-ar') }}" class="btn btn-warning">GO</a>');
					}

                    //Setup Rekening Bank
                    if(data['rekening_bank']){
                        $('#btn_rekening_bank').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
                    }
                    else{
                        $('#btn_rekening_bank').html('<a href="{{ url('rekening-bank') }}" class="btn btn-warning">GO</a>');
                    }

                    //Setup Complimentaries
                    if(data['complimentaries']){
                        $('#btn_complimentaries').html('<i class="fas fa-check-circle fa-2x text-success"></i>');
                    }
                    else{
                        $('#btn_complimentaries').html('<a href="{{ url('complimentaries') }}" class="btn btn-warning">GO</a>');
                    }

					if(data['facilities'] &&
					   data['room_types'] &&
					   data['rooms'] &&
					   data['departments'] &&
					   data['coas'] &&
					   data['shops'] &&
					   data['item_types'] &&
					   data['items'] &&
					   data['arrangements'] &&
					   data['ratecodes'] &&
					   data['payment_methods'] &&
					   data['ar_ap_methods'] &&
					   data['rekening_bank'] &&
					   data['complimentaries'] &&
					   data['coa_cash'] &&
					   data['main_account_coa'])
					{
						window.location.href = "{{url('home')}}?setupcomplete=1";
					}
				}
			})
	}, 2000);
	@endif
	@endif
</script>

@if(\Auth::user()->role == 10)
    <script>
        let date_system = {!! json_encode(getSystemDate()) !!};

        function callModalBirthdayList() {

            $.ajax({
                type: "get",
                url: "{{ route('get-list-birthday-guest') }}",
                dataType: "json",
                success: function (data) {

                    $('#tbody_birthday_list').html(''); //reset
                    $('#tbody_birthday_list_tommorow').html(''); //reset

                    // guest birthday today
                    if (data.birthday_today.length > 0) {

                        let guests = '';

                           // looping data booking details
                           $.each(data.birthday_today, function (index, guest) {
                                // insert variable html room revenue with html

                                    let rooms = '';
                                    let nomor_kamar = '';

                                    $.each(guest.active_booking, function (key_active_bookings, active_bookings) {
                                        $.each(active_bookings.booking_details, function (a, b) {
                                            if (b.array_sub == 0) {
                                                if (moment(b.start_date).format('YYYY-MM-DD') <= moment(date_system).format('YYYY-MM-DD') &&
                                                    moment(b.end_date).format('YYYY-MM-DD') >= moment(date_system).format('YYYY-MM-DD')) {
                                                    if (b.array_sub == 0) {
                                                            nomor_kamar = b.nomor_kamar ?? `Hasn't choose a room yet`
                                                            rooms += ' - '+nomor_kamar+'<br>';
                                                    }
                                                }
                                            }
                                        });
                                    });


                                    var ageDifMs    = Date.now() - (new Date(guest.birth_date)).getTime();
                                    var ageDate     = new Date(ageDifMs); // miliseconds from epoch
                                    let age         = Math.abs(ageDate.getUTCFullYear() - 1970);

                                    // Guest Main      <td>${rooms}</td>
                                    guests += `<tr>
                                                    <td>${index+1}</td>
                                                    <td>${guest?.name}</td>
                                                    <td>${guest.birth_date ?  moment(guest.birth_date).format('DD-MM-YYYY') : '-'}</td>
                                                    <td>${age}</td>
                                                    <td>${rooms}</td>
                                                </tr>`

                            });

                        $('#tbody_birthday_list').html(guests);

                    }else{
                        $('#tbody_birthday_list').html('<tr><td colspan="5"><div class="alert alert-danger text-center" role="alert">No Birthday Guest</div></td></tr>');
                    }

                    // guest birthday tommorow
                    if (data.birthday_tommorow.length > 0) {

                        let guests = '';

                           // looping data booking details
                           $.each(data.birthday_tommorow, function (index, guest) {
                                // insert variable html room revenue with html

                                    let rooms = '';
                                    let nomor_kamar = '';

                                    // Penentu jika tidak ada booking details
                                    // let any_rooms = false

                                    $.each(guest.active_booking_tommorow, function (key_active_bookings, active_bookings) {
                                        $.each(active_bookings.booking_details, function (a, b) {
                                            if (moment(b.start_date).format('YYYY-MM-DD') <= moment(date_system).add(1, 'days').format('YYYY-MM-DD') &&
                                                moment(b.end_date).format('YYYY-MM-DD') >= moment(date_system).add(1, 'days').format('YYYY-MM-DD')) {
                                                if (b.array_sub == 0) {
                                                    nomor_kamar = b.nomor_kamar ?? `Hasn't choose a room yet`
                                                    rooms += ' - '+nomor_kamar+'<br>';
                                                    // any_rooms = true
                                                }
                                            }
                                        });
                                    });


                                    var ageDifMs    = Date.now() - (new Date(guest.birth_date)).getTime();
                                    var ageDate     = new Date(ageDifMs); // miliseconds from epoch
                                    let age         = Math.abs(ageDate.getUTCFullYear() - 1970);

                                    // Guest Main      <td>${rooms}</td>

                                    // if (any_rooms) {
                                        guests += `<tr>
                                                        <td>${index+1}</td>
                                                        <td>${guest?.name}</td>
                                                        <td>${guest.birth_date ?  moment(guest.birth_date).format('DD-MM-YYYY') : '-'}</td>
                                                        <td>${age}</td>
                                                        <td>${rooms}</td>
                                                    </tr>`
                                    // }

                            });

                        $('#tbody_birthday_list_tommorow').html(guests);

                    }else{
                        $('#tbody_birthday_list_tommorow').html('<tr><td colspan="5"><div class="alert alert-danger text-center" role="alert">No Birthday Guest</div></td></tr>');
                    }

                }
            });

            $('#alert_modal').modal('show')
        }

        $( document ).ready(function() {

            var queryString = window.location.search;
            var urlParams           = new URLSearchParams(queryString);
            var birthday_today      = urlParams.get('birthday_today');
            var birthday_tommorow   = urlParams.get('birthday_tommorow');

            let birthday            = birthday_today + birthday_tommorow;

            // CONDITION IF COUNT BIRTHDAY MORE THAN 0
            if (birthday > 0) {
                // function to call modal and this additional param
                callModalBirthdayList()
            }

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

<script>
$('.form-control-select2').select2();

$('#hotel_id').on('change', function(){
	let val = $(this).val();
	if(val){
		$('#select-hotel').submit();
	}
})

//Date Range Picker
$('.daterange-picker').daterangepicker({
	applyClass: 'btn-primary',
	cancelClass: 'btn-light',
	// startDate: moment().startOf('month').format('DD-MM-YYYY'),
	// startDate: `${moment("{{getSystemDate()}}").subtract(6, 'days').format('DD-MM-YYYY')}`,
	// endDate: `${moment("{{getSystemDate()}}").add(7, 'days').format('DD-MM-YYYY')}`,
	startDate: "{{ $js_tanggal_awal }}",
	endDate: "{{ $js_tanggal_sekarang }}",
	locale: {
	  format: 'DD-MM-YYYY'
	}
});

//Tanggal
$('#tanggal').on('change', function(){
	let tanggal_arr = $(this).val().split(" - ");
	let tanggal_awal = tanggal_arr[0].replaceAll('/', '-');
	let tanggal_akhir = tanggal_arr[1].replaceAll('/', '-');

	$.ajax({
		type: 'POST',
		url: "{{route('filter-status-kamar')}}",
		data: {
			_token:'{{csrf_token()}}',
			tanggal_awal: tanggal_awal,
			tanggal_akhir: tanggal_akhir
		},
		success: function (response) {
			console.log(response);
			let html = "";
			$.each(response, function(index, val){
				html += `<li class="list-group-item">
						  ${val.jenis ?? '-'}
						  <span class="badge bg-primary align-self-center ml-auto">${val.count ?? 0} Booked Room</span>
						 </li>`;
			});

			$('#list_statistik_kamar').html(html);
		}
	});
});

$('#tanggal_dashboard').on('apply.daterangepicker', (e, picker) => {
    let newRequest = window.location.search;
    let params = new URLSearchParams(newRequest);

    // filter tanggal_dashboard
    params.delete('tanggal_dashboard');
    params.append('tanggal_dashboard', document.getElementById("tanggal_dashboard").value);

    // filter method
    params.delete('filter_method');
    params.append('filter_method', document.getElementById("filter_method").value);

    document.location.href = "?" + params.toString();
})

$('#filter_method').on('change', function(){
    var condition = document.getElementById("filter_method").value
    console.log(condition);
    if (condition != 'period') {
        $('#tanggal_dashboard').prop('disabled', true)

        let newRequest = window.location.search;
        let params = new URLSearchParams(newRequest);
        console.log('href');

        // filter method
        params.delete('filter_method');
        params.append('filter_method', document.getElementById("filter_method").value);

        document.location.href = "?" + params.toString();
    }else{
        $('#tanggal_dashboard').prop('disabled', false)
    }
})

// CALL DATA FROM BACKEND
// CALL DATA FROM BACKEND

// DEFINING DATA BOOKING PER SEGMENT
    // let data_segment = {};
    // let key_segment = [];
    // $.each(data_per_segments, function (akey, bval) {
    //     key_segment.push(akey)
    //     data_segment[akey] = bval;
    // });
// DEFINING DATA BOOKING PER SEGMENT

// DEFINING DATA ORDER ROOM STATISTICS
    // let room_order_datas = {};
    // let key_room_order = [];

    // $.each(data_order_rooms, function (akey, bval) {
    //     key_room_order.push(akey)
    //     room_order_datas[akey] = bval;
    // });

    // let array_date_x_room_orders = []
    // let room_order_datas = [];
    // // get date for X
    //     array_date_x_room_orders.push('x')
    //     $.each(date_array, function (inkey, inval) {
    //         array_date_x_room_orders.push(inval)
    //     });
    //     room_order_datas.push(array_date_x_room_orders)

    //     $.each(data_order_rooms, function (akey, bval) {
    //         let test    = []
    //         test.push(akey);
    //         $.each(bval, function (index_date, ordered) {
    //             test.push(ordered);
    //         });
    //         room_order_datas.push(test)
    //     });

// DEFINING DATA ORDER ROOM STATISTICS

// DEFINING DATA STOCK ROOM STATISTICS
    // let array_date_x        = []
    // let room_stock_datas    = []

    // // get date for X
    // array_date_x.push('x')
    // $.each(date_array, function (inkey, inval) {
    //     array_date_x.push(inval)
    // });
    // room_stock_datas.push(array_date_x)
    // // console.log(get_real_data_stocks)

    // $.each(get_real_data_stocks, function (akey, bval) {
    //     let test    = []
    //     test.push(akey);
    //     $.each(bval, function (index_date, val_stock) {
    //         test.push(val_stock);
    //     });
    //     room_stock_datas.push(test)
    // });
// DEFINING DATA STOCK ROOM STATISTICS

// Setup Guest Segment Statistics
    // statistikhide
    // var С3BarsPies = function() {
    //     // Chart
    //     var _barsPiesExamples = function() {

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

    //         // Define charts elements
    //         var pie_chart_element = document.getElementById('c3-pie-chart');

    //         // Pie chart
    //         if(pie_chart_element) {

    //             // Generate chart
    //             var pie_chart = c3.generate({
	// 				size:{height:395},
    //                 bindto: pie_chart_element,
    //                 data: {
    //                     json: [data_segment],
    //                     keys: {
    //                         value: key_segment,
    //                     },
    //                     type : 'pie',
    //                     empty: {
    //                         label: {
    //                         text: "No Data"
    //                         }
    //                     }
    //                 },
    //                 // legend: {
    //                 //     position: 'inset',
    //                 //     inset: {
    //                 //     anchor: 'top-left',
    //                 //     x: -60,
    //                 //     y: 250,
    //                 //     step: 6
    //                 //     }
    //                 // },
    //                 // padding: {
    //                 //     bottom: 50
    //                 // }
    //             });

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

    //     return {
    //         init: function() {
    //             _barsPiesExamples();
    //         }
    //     }
    // }();
// Setup Guest Segment Statistics

// Setup Order Room Statistics
    // console.log(array_date_x_room_orders.length);

    // var OrderRoomChart = function() {

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

    //         // Define charts elements
    //         var bar_chart_element = document.getElementById('order-room-chart');

    //         // Bar chart
    //         if(bar_chart_element) {

    //             // Generate chart
    //             var bar_chart = c3.generate({
    //                 bindto: bar_chart_element,
    //                 size: { height: 400 },
    //                 data: {
    //                     x: 'x',
    //                     columns: room_order_datas,
    //                     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: array_date_x_room_orders.length >= 8 ? (array_date_x_room_orders.length >= 10 ? 8 : 2 ) : 1
    //                             }
    //                         },
    //                         label: {
    //                             text: 'DATE',
    //                             position: 'outer-center'
    //                         }
    //                     },
    //                     y:{
    //                         // Range includes padding, set 0 if no padding needed
    //                         max:max_room_order * 3,
    //                         min:0,
    //                         padding: {top:0, bottom:0},
    //                         label: {
    //                             text: 'COUNT',
    //                             position: 'outer-middle'
    //                         }
    //                     }
    //                 },
    //                 // legend: {
    //                 //     position: 'inset',
    //                 //     inset: {
    //                 //     anchor: 'top-left',
    //                 //     x: 10,
    //                 //     y: 0,
    //                 //     step: undefined
    //                 //     }
    //                 // },
    //                 padding: {
    //                     bottom: 50
    //                 },
    //                 onresized: function () {
    //                     array_date_x_room_orders.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() {
    //             _barsPiesExamples();
    //         }
    //     }
    // }();
// Setup Order Room Statistics

// Setup Stock Room Statistics
    // console.log(room_stock_datas, key_room_stock)
    // statistikhide
    // var StockRoomChart = function() {

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

    //         // Define charts elements
    //         var bar_chart_element = document.getElementById('stock-room-chart');

    //         // Bar chart
    //         if(bar_chart_element) {

    //             // Generate chart
    //             var bar_chart = c3.generate({
    //                 bindto: bar_chart_element,
    //                 size: { height: 400 },
    //                 data: {
    //                     x: 'x',
    //                     columns: room_stock_datas,
    //                     empty: {
    //                         label: {
    //                         text: "No Data"
    //                         }
    //                     }
    //                 },
    //                 zoom: {
    //                     enabled: true
    //                 },
    //                 grid: {
    //                     y: {
    //                         show: true
    //                     }
    //                 },
    //                 axis:{
    //                     x:{
    //                         type: 'timeseries',
    //                         tick: {
    //                             multiline: true,
    //                             show: true,
    //                             format: '%d-%m-%Y',
    //                             fit: true,
    //                             outer: false,
    //                             culling: true,
    //                             culling: {
    //                                 max: array_date_x.length >= 8 ? (array_date_x.length >= 10 ? 8 : 2 ) : 1
    //                             }
    //                         },
    //                         label: {
    //                             text: 'DATE',
    //                             position: 'outer-center'
    //                         }
    //                     },
    //                     y:{
    //                         label: {
    //                             text: 'COUNT',
    //                             position: 'outer-middle'
    //                         }
    //                     }
    //                 },
    //                 // subchart: {
    //                 //     show: true
    //                 // },
    //                 legend: {
    //                     position: 'right'
    //                 },
    //                 onresized: function () {
    //                     array_date_x.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() {
    //             _barsPiesExamples();
    //         }
    //     }
    // }();
// Setup Stock Room Statistics

// Initialize module
// ------------------------------
// document.addEventListener('DOMContentLoaded', function() {
//     // С3BarsPies.init();
//     // OrderRoomChart.init();
//     StockRoomChart.init();
// });

    // statistik ajax
    $( document ).ready(function() {
        var date= $('#tanggal_dashboard').val()
        console.log(date)
        $.ajax({
            type: 'get',
            url: "{{url('statistik-room-available')}}",
            data:{date:date},
            success: function (response) {

                let array_date_x        = []
                let room_stock_datas    = []

                let get_real_data_stocks =  response.get_real_data_stocks;
                let date_array           =  response.date_array
                let max_room_order       =  response.room_order_max

                // get date for X
                array_date_x.push('x')
                $.each(date_array, function (inkey, inval) {
                    array_date_x.push(inval)
                });
                room_stock_datas.push(array_date_x)
                // console.log(get_real_data_stocks)

                $.each(get_real_data_stocks, function (akey, bval) {
                    let test    = []
                    test.push(akey);
                    $.each(bval, function (index_date, val_stock) {
                        test.push(val_stock);
                    });
                    room_stock_datas.push(test)
                });

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

                        // Define charts elements
                        var bar_chart_element = document.getElementById('stock-room-chart');

                        // Bar chart
                        if(bar_chart_element) {

                            // Generate chart
                            var bar_chart = c3.generate({
                                bindto: bar_chart_element,
                                size: { height: 400 },
                                data: {
                                    x: 'x',
                                    columns: room_stock_datas,
                                    empty: {
                                        label: {
                                        text: "No Data"
                                        }
                                    }
                                },
                                zoom: {
                                    enabled: true
                                },
                                grid: {
                                    y: {
                                        show: true
                                    }
                                },
                                axis:{
                                    x:{
                                        type: 'timeseries',
                                        tick: {
                                            multiline: true,
                                            show: true,
                                            format: '%d-%m-%Y',
                                            fit: true,
                                            outer: false,
                                            culling: true,
                                            culling: {
                                                max: array_date_x.length >= 8 ? (array_date_x.length >= 10 ? 8 : 2 ) : 1
                                            }
                                        },
                                        label: {
                                            text: 'DATE',
                                            position: 'outer-center'
                                        }
                                    },
                                    y:{
                                        label: {
                                            text: 'COUNT',
                                            position: 'outer-middle'
                                        }
                                    }
                                },
                                // subchart: {
                                //     show: true
                                // },
                                legend: {
                                    position: 'right'
                                },
                                onresized: function () {
                                    array_date_x.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() {
                            _barsPiesExamples();
                            }
                        }
                }();
                StockRoomChart.init();
            }
        });
    });
</script>
@endsection