@extends('layoutfrontend')

@section('title', 'Beranda')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('global_assets/slick/slick/slick.css') }}"/>
	<link rel="stylesheet" type="text/css" href="{{asset('global_assets/slick/slick/slick-theme.css') }}"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <style>
            .badge{
                font-size:90% !important;
            }

            .content-badges{
                padding-bottom:21px;
            }

            .carousel-banner{
                margin-top:24px;
                /* padding-bottom:52px; */
            }

            .img-carousel{
                /*border-radius:6px;*/
                width: 100%;
                height: 280px;
                object-fit: cover;
            }

            .slick-dots{
                margin-top: -20px !important;
                text-align: right;
            }

            .slick-dots li.slick-active button:before {
                color: #007BFF;
            }

            .slick-dots li button:before {
                color: #A1CCFA;
            }

            .slick-slide:nth-of-child(n+1) {
                display: none;
            }

            .slick-initialized,
            .slick-slide:first-child {
                display: block;
            }

            .title {
                font-size: 3em;
                font-weight: 600;
                line-height: 1;
            }

            .subtitle {
                font-size: 1.5em;
                font-weight: 300;
                line-height: 1;
            }

            .img-room {
                width: 100%;
                height: 100%;
                object-fit: cover
            }

            .calendar-time{
                display: none;
            }

            .drp-selected{
                display:none !important;
            }

            .dropdown-item a{
                text-align: center;
            }

            .dropdown-menu {
                min-width: 13.25rem;
            }

            .category{
                padding-top:16px;
            }

            .btn-counter{
                background-color: #E9ECEF;
            }

            .count{
                text-align: center;
            }

            .input-group-text{
                background-color: #E9ECEF;
            }

            .dropdown-item:hover{
                cursor: default;
                background-color:#fff;
            }


            /* RESPONSIVE */
            @media only screen and (min-width: 600px) {

                .img-room{
                    border-top-left-radius:6px;
                    border-bottom-left-radius:6px;
                }

                .btn-book{
                    font-size:16px; padding:6px 12px; float:right;
                }

                .slick-dots li button:before {
                    color: #A1CCFA;
                    font-size:12px;
                }

            }

            @media only screen and (max-width: 600px) {
                .img-room{
                    border-top-left-radius:6px;
                    border-top-right-radius:6px;
                }

                .btn-book{
                    font-size:16px; padding:6px 12px;
                }

                .carousel-banner {
                    padding-top: 30px;
                }

            }
    </style>
@endsection

@section('content')
    <div class="container">
        @if($sliders)
            <div class="carousel-banner">
                @foreach ($sliders as $slider)
                    <div style="border-radius: 6px; overflow: hidden;"><a href="#" target="_blank"><img class="img-carousel" src="{{ URL::asset($slider->gambar) }}" alt="{{$slider->nama}}"></a></div>
                @endforeach
            </div>
        @endif
        <div class="my-3">
            <div class="title mb-2">Let's find what you looking for!</div>
            <div class="text-muted subtitle">Start looking for a room according to your needs. Book now!</div>
        </div>
        <div class="row align-items-center mt-4">
            <div class="col-md-4">
                <div class="form-group">
                    <label class="text-muted mb-0" for="search">Check Booking Status</label>
                    <input class="form-control" id="search" placeholder="Find your booking code..." />
                </div>
            </div>
            <div class="col-md-3">
                <a href="{{ route("orders.search",  ["prefix" => $hotel->sub_url]) }}?kd=" id="search_button" class="btn btn-primary btn-outline-primary">
                    Search <i class="fas fa-search ml-2"></i>
                </a>
            </div>
        </div>
        <div class="my-2 mb-5 border-0 row align-items-center" style="border-radius: 6px">
            <div class="col-md-4">
				<medium class="text-muted">Reservation</medium>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-prepend">
							<span class="input-group-text">
								<i class="far fa-calendar-alt"></i>
							</span>
						</span>
						<input type="text" class="form-control" placeholder="Check In - Check Out" aria-label="Input group example" aria-describedby="btnGroupAddon2" name="datetimes" />
					</div>
				</div>
                <input type="hidden" name="startDate" value="" />
                <input type="hidden" name="endDate" value="" />
			</div>
			{{-- <div class="col-md-4">
				<medium class="text-muted">Guest</medium>
				<div class="form-group dropdown">
					<div class="input-group">
						<span class="input-group-prepend">
							<span class="input-group-text">
								<i class="fas fa-user-friends"></i>
							</span>
						</span>
						<button class="btn dropdown-toggle form-control" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border: 1px solid #ddd;">
						<span id="adulttext">1</span> Adult(s) - <span id="childtext">0</span> Child - <span id="roomtext">1</span> Room</button>
						<div class="dropdown-menu" id="dropdown" aria-labelledby="dropdownMenuButton" style="padding:10px;">
							<div class="row category">
								<div class="col-5">
									<p class="dropdown-item">Adult</p>
								</div>
								<div class="col-7">
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<button class="btn btn-counter" type="button" onclick="minusadult()">-</button>
										</div>
										<input type="text" name="quant[1]" class="form-control count" id="adult" value="1" min="1">
										<div class="input-group-append">
											<button class="btn btn-counter" type="button" onclick="plusadult()">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="row category">
								<div class="col-5">
									<p class="dropdown-item">Child</p>
								</div>
								<div class="col-7">
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<button class="btn btn-counter" type="button" onclick="minuschild()">-</button>
										</div>
										<input type="text" class="form-control count" id="child" value="0" min="0">
										<div class="input-group-append">
											<button class="btn btn-counter" type="button" onclick="pluschild()">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="row category">
								<div class="col-5">
									<a class="dropdown-item" href="#">Room</a>
								</div>
								<div class="col-7">
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<button class="btn btn-counter" type="button" onclick="minusroom()">-</button>
										</div>
										<input type="text" class="form-control count" id="room" value="1" min="1">
										<div class="input-group-append">
											<button class="btn btn-counter" type="button" onclick="plusroom()">+</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div> --}}
            <div class="col-md-auto">
                <div class="d-flex btn-selection">
                    <button class="btn btn-primary px-3 select-params" data-selected="false">Select</button>
                </div>
            </div>
        </div>
        <div class="mb-5">
            @foreach ($jenis_kamars as $jenis_kamar)
                <div class="card mb-3" style="border-radius:6px; margin-bottom:0.5rem;">
                    <div class="row no-gutters" style="">
                        <div class="col-md-4">
                            @foreach ( $jenis_kamar->thumbnail as $thumbnail )
                                <img class="img-room" src="{{ URL::asset($thumbnail->url) }}" alt="{{$thumbnail->name}}">
                            @endforeach
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h3>{{@$jenis_kamar->nama}}</h3>
                                <p style="text-align:justify;">{{@$jenis_kamar->deskripsi}}</p>
                                <div class="content-badges">
                                    @if($jenis_kamar->fasilitas)
                                        @foreach ($jenis_kamar->getFilteredFasilitas() as $fasilitas)
                                            <div class="badge badge-pill badge-primary">{{$fasilitas->nama}}</div>
                                        @endforeach
                                    @endif
                                </div>
                                <div class="row" style="display: flex; align-items: center;">
                                    <div class="col-sm-9">
                                        <p style="font-size:12px; color:#6C757D; font-weight:400; margin-bottom:0px;">start from</p>
                                        <p style="font-size:24px; color:#212529; line-height:29px; font-weight:bold; margin-top:0px;" class="room-price">
                                            @if(@$jenis_kamar->discount_prs)
                                                @php
                                                    $default_price = @$jenis_kamar->additional_price ?? $jenis_kamar->harga;
                                                    $dics_price = $default_price - ( (@$jenis_kamar->discount_prs / 100) *  $default_price)
                                                @endphp
                                                <span class="mr-2 text-muted" style="text-decoration: line-through; font-size: 18px">
                                                    Rp {{ribuan($default_price)}}
                                                </span>
                                                <span>
                                                    Rp {{ribuan($dics_price)}}
                                                </span> / night
                                                <span class="text-danger">
                                                    ({{ @$jenis_kamar->discount_prs }}% OFF)
                                                </span>
                                            @else
                                                <span>
                                                    Rp {{ribuan(@$jenis_kamar->additional_price ?? $jenis_kamar->harga )}}
                                                </span> / night
                                            @endif
                                        </p>
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="button" class="btn btn-primary btn-book" onclick="redirectParams({{$jenis_kamar->id}})">Check Availability</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="container">
        <!-- Basic map -->
        <div class="card ">

            <div class="card-body row">
                <div class="col-lg-6">
                    <p class="mb-3">{{$hotel->nama}}</p>
                    <p class="mb-3">Location: {{$hotel->alamat}}</p>
                </div>
                <div class="col-lg-6">
                    <div class="map-container" id="map_basic" style="height: 250px"></div>
                </div>
            </div>

        </div>
        <!-- /basic map -->
    </div>
@endsection

@section('js')

    <script type="text/javascript" src="{{asset('global_assets/slick/slick/slick.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

	<!-- Gmaps APIS -->
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('G_API_KEY', 'error')}}"></script>
    {{-- <script src="https://maps.googleapis.com/maps/api/js"></script> --}}

    {{-- Carousel --}}
    <script type="text/javascript">
        $(document).ready(function(){
            $('.carousel-banner').slick({
                dots: true,
                arrows: false,
            });
        });
    </script>

    {{-- Datepicker --}}
    <script>
        $(function() {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const $startDate = $('input[name="startDate"]')
            const $endDate = $('input[name="endDate"]')

            //let $adult = $("#adult").val();
            //let $child = $("#child").val();
            //let $room = $("#room").val();

            let $searchButton = $("#search_button")

            if(window.location.search){
                const urlParams = new URLSearchParams(window.location.search);
                const start = urlParams.get('start');
                const end = urlParams.get('end');

                $startDate.val(start)
                $endDate.val(end);

                $(".btn-selection").append(`
                    <a href="{{ route('hotel.home', ['prefix' => $hotel->sub_url]) }}" class="btn btn-light ml-2">Reset</a>
                `)
            } else {
                $startDate.val(moment().format("YYYY-MM-DD"))
                $endDate.val(moment().add(1, "days").format("YYYY-MM-DD"));
            }

            // datepicker func
            $('input[name="datetimes"]').daterangepicker({
                minDate: moment(),
                timePicker: true,
                startDate: moment($startDate.val()),
                endDate: moment($endDate.val()),
                locale: {
                    format: 'D MMMM YYYY'
                }
            }, function(start, end) {
                $('input[name="startDate"]').val(start.format("YYYY-MM-DD"))
                $('input[name="endDate"]').val(end.format("YYYY-MM-DD"))
            });


            $(".select-params").click(function() {
                window.location.search = `?start=${$startDate.val()}&end=${$endDate.val()}`
                $(this).attr("disabled", true);
            })

            $("#search").on("keyup", function() {
                let value = $(this).val()
                let baseUrl  = $searchButton.attr("href").split("?")[0]
                let href = `${baseUrl}?kd=${value}`

                $searchButton.attr("href", href)
            })

        });

        function redirectParams(id) {
            //let $adult = $("#adult").val();
            //let $child = $("#child").val();
            //let $room = $("#room").val();
            let $start = $('input[name="startDate"]').val()
            let $end = $('input[name="endDate"]').val()

            const isSelected = $(".select-params").data("selected");
            const bookHref = `/booking/${"{{$hotel->sub_url}}"}/rooms/${id}`;
            const link = `${bookHref}?start=${$start}&end=${$end}`;

            // redirect url
            window.location.href = link
        }
    </script>

    {{-- Prevent auto close dropdown --}}
    <script>

        let lat_var = {!! json_encode($hotel->latitude_address) !!};
        let long_var = {!! json_encode($hotel->longtitude_address) !!};

        // Setup modulegmaps
        var GoogleMapBasic = function() {

            var _googleMapBasic = function() {
                if (typeof google == 'undefined') {
                    console.warn('Warning - Google Maps library is not loaded.');
                    return;
                }


                // Map settings
                function initialize() {

                    // Define map element
                    var map_basic_element = document.getElementById('map_basic');

                    // Set coordinates
			        var myLatlng = new google.maps.LatLng(lat_var, long_var);

                    // Optinos
                    var mapOptions = {
                        zoom: 17,
                        center: myLatlng
                    };

                    // Apply options
                    var map = new google.maps.Map(map_basic_element, mapOptions);
                    var contentString = 'Amsterdam';

                    // Add info window
                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });

                    // Add marker
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: 'Hello World!'
                    });

                    // Attach click event
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                    });
                }

                // Load map
                google.maps.event.addDomListener(window, 'load', initialize);
            };

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

        document.addEventListener('DOMContentLoaded', function() {
            GoogleMapBasic.init();
        });

        document.getElementById("dropdown").addEventListener('click', function (event) {
            event.stopPropagation();
        });
    </script>

    {{-- Counter --}}
    {{-- <script>
        var count = 0;
        var count1 = 1;
        var count2 = 1;
        var countEl = document.getElementById("child");
        var countEl1 = document.getElementById("adult");
        var countEl2 = document.getElementById("room");
        function pluschild(){
            count++;
            countEl.value = count;
            document.getElementById("childtext").innerHTML = count;
        }
        function minuschild(){
            if (count > 0) {
            count--;
            countEl.value = count;
            document.getElementById("childtext").innerHTML = count;
            }
        }
        function plusadult(){
            count1++;
            countEl1.value = count1;
            document.getElementById("adulttext").innerHTML = count1;
        }
        function minusadult(){
            if (count1 > 1) {
            count1--;
            countEl1.value = count1;
            document.getElementById("adulttext").innerHTML = count1;
            }
        }
        function plusroom(){
            count2++;
            countEl2.value = count2;
            document.getElementById("roomtext").innerHTML = count2;
        }
        function minusroom(){
            if (count2 > 1) {
            count2--;
            countEl2.value = count2;
            document.getElementById("roomtext").innerHTML = count2;
            }
        }
    </script> --}}

@endsection