@extends('layoutfrontend')

@section('title', 'Detail')

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

        .detail{
            padding-top:52px;
        }

        .show-img {
            height: 350px; 
            width: 100%;
            object-fit: cover;
        }

        .img-slider{
            margin: 0 5px;
            height: 100px; 
            width: 100%;
            object-fit: cover;
            cursor: pointer;
            /* height: 110px; */
        }

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

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

        .subtitle {
            font-size: 1.2em;
            font-weight: 300;
        }

        .slick-dots{
        }

        .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;
        }

        .price {
            font-size: 2.5em;
            line-height: 1;
        }
        
        /* RESPONSIVE */
        @media only screen and (min-width: 600px) {
            .show-img{
                width:100%;
                /* height:350px; */
            }

            

            .img-room{
                margin-top:2rem;
            }
            

        }

        @media only screen and (max-width: 600px) {
            
        }
    </style>
@endsection

@section('content')
    <div class="container mb-5">
        <div class="row">
            <div class="col-md-6">
                <div class="slider-for mb-3">
                    @foreach ($kamar->gambar as $gambar)
                        <img class="show-img" src="{{ URL::asset($gambar->url) }}" alt="{{$gambar->nama}}">
                    @endforeach
                </div>
                <div class="slider-nav">
                    @foreach ($kamar->gambar as $gambar)
                        <img class="img-slider" src="{{ URL::asset($gambar->url) }}" alt="{{$gambar->nama}}">
                    @endforeach
                </div>
            </div>
            <div class="col-md-6">
                <form method="post" action="{{ route("hotel.room.store", ["prefix" => $hotel->sub_url]) }}">
                    @csrf
                    <h2 class="title">{{$kamar->nama}}</h2>
                    <div class="subtitle text-muted">{{$kamar->deskripsi}}</div>
                    <div class="d-flex my-2">
                        @if($kamar->fasilitas)
                            @foreach ($kamar->getFilteredFasilitas() as $fasilitas)
                                <div class="badge badge-pill badge-primary mr-1" style="font-size: 1em">{{$fasilitas->nama}}</div>
                            @endforeach
                        @endif
                    </div>
                    <input type="hidden" name="jns_kamar" id="jenis_kamar_id" value="{{$kamar->id}}" />
                    <input type="hidden" name="jns_kamar_nama" value="{{$kamar->nama}}" />
                    <input type="hidden" name="jns_kamar_gambar" value="{{@$kamar->thumbnail[0]->url}}" />
                    <div class="mt-4">
                        @if(@$kamar->discount_prs)
                            @php
                                $default_price = @$kamar->additional_price ?? $kamar->harga;
                                $dics_price = $default_price - ( (@$kamar->discount_prs / 100) * $default_price)
                            @endphp
                            <div class="price mb-2 row align-items-end">
                                <div class="col-md-8">
                                    <span class="text-muted" style="font-size: 21px; text-decoration: line-through;" id="default" data-harga="{{$default_price}}">
                                        Rp {{ ribuan($default_price) }}
                                    </span>
                                    <div><strong id="harga" data-harga="{{$dics_price}}">Rp {{ribuan($dics_price)}}</strong> /night</div>
                                </div>
                                <div class="text-danger col-md-4 mt-2"><strong>{{ @$kamar->discount_prs }}% OFF!</strong></div>
                            </div>
                        @else
                            <div class="price mb-2">
                                <strong id="harga" data-harga="{{@$kamar->additional_price ?? $kamar->harga}}">
                                    Rp {{ribuan(@$kamar->additional_price ?? $kamar->harga)}}
                                </strong> /night
                            </div>
                        @endif
                        <input type="hidden" id="hargaHidden" name="subtotal" value="" />
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <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" disabled />
                                    <input type="hidden" name="start_date" id="start_date" value="" />
                                    <input type="hidden" name="end_date" id="end_date" value="" />
                                    <input type="hidden" name="jml_malam" id="jml_malam" value="" />
                                </div>
                            </div>
                            <div class="col-md-auto">
                                <div class="text-muted" style="font-size: 1.4em"><strong class="text-dark" id="days">1</strong> Day(s)</div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="text-muted" for="adult">Adult</label>
                                <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="jml_dewasa" 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 class="col-md-4">
                                <label class="text-muted" for="child">Child</label>
                                <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" name="jml_anak" 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 class="col-md-4">
                                <label class="text-muted" for="room">Room</label>
                                <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" name="jml_kamar" 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 class="mt-3 row align-items-center">
                        <input id="hid" type="hidden" value="{{ $hotel->id }}" />
                        <input id="totalKamar" type="hidden" value="" />
                        <div class="col-md-auto" id="left-buttons"></div>
                        <div class="col-md-auto" id="right-buttons"></div>
                    </div>
                </form>
            </div>
        </div>
    </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>

    <script type="text/javascript">
        $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            fade: true,
            asNavFor: '.slider-nav'
        });
        $('.slider-nav').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            arrows: true,
            focusOnSelect: true
        });
    </script>

    <script>
        
        $(function() {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const startParams = urlParams.get("start");
            const endParams = urlParams.get("end");
            //const adultParams = urlParams.get("adult");
            //const childParams = urlParams.get("child");
            //const roomParams = urlParams.get("room");

            const hotelId = $("#hid").val();
            const jenisKamarId = $("#jenis_kamar_id").val()

            //if(adultParams){
            //    $("#adult").val(adultParams);
            //}

            //if(childParams){
            //    $("#child").val(childParams);
            //}

            //if(roomParams){
            //    $("#room").val(roomParams);
            //}

            if(startParams && endParams){
                countTotalPrice(moment(startParams), moment(endParams));
            }

            $('input[name="datetimes"]').daterangepicker({
                minDate: moment(),
                startDate: startParams ? moment(startParams) : moment(),
                endDate: endParams ? moment(endParams) : moment().add(1, 'days'),
                locale: {
                    format: 'D MMMM YYYY'
                }
            });

            totalRoomAvaliable(hotelId, jenisKamarId, startParams, endParams)

        });

        function countTotalPrice(start, end, room) {
            const $harga = $("#harga").data("harga");
            const $hargaDefault = $("#default").data("harga");
            const $days = $("#days").text();

            if(start && end){
                const diff = end.diff(start, 'days');
                const total = room ? ($harga * diff) * room : $harga * diff;
                const totalDefault = room ? ($hargaDefault * diff) * room : $hargaDefault * diff;

                $("#start_date").val(moment(start).format("YYYY-MM-DD"));
                $("#end_date").val(moment(end).format("YYYY-MM-DD"));
                $("#jml_malam").val(diff);
                $("#hargaHidden").val(total);
                $("#harga").text(toRupiah(total));
                $("#days").text(diff);

                if($("#default")){
                    $("#default").text(toRupiah(totalDefault))
                }
            }

        }

        function totalRoomAvaliable(hotel_id, jenis_kamar_id, checkin, checkout){
            let leftButtons = $("#left-buttons")
            let rightButtons = $("#right-buttons")
			let scheckin = moment(checkin).format('YYYY-MM-DD');
			let scheckout = moment(checkout).format('YYYY-MM-DD');

			$.ajax({
				type: 'GET',
				url: "{{ url('/count-kamar')}}/"+hotel_id+"/"+jenis_kamar_id+"/"+scheckin+"/"+scheckout,
				success: function (defaultData) {

                    // hitung jumlah kamar yang terpilih di cart
                    const cart = getCartSession(hotel_id)
                    let totalKamarInsideCart = 0

                    if(cart.length > 0){
                        totalKamarInsideCart = cart
                            .filter(li => li.jns_kamar === jenis_kamar_id)
                            .map(cart => Number(cart.jml_kamar))
                            .reduce((acc, curr) => acc + curr)
                    }

                    const data = Number(defaultData) - totalKamarInsideCart

                    $("#totalKamar").val(data)

                    // kamar tersedia lebih dari sepuluh
                    if(data > 10) {
                        leftButtons.html(
                            `<button type="submit" class="btn btn-lg btn-primary text-uppercase px-4">Book Now!</button>`
                        )
                        rightButtons.html()
                        return
                    }

                    // kamar tersedia lebih dari 1 kurang dari 10
                    if(data >  1) {
                        leftButtons.html(
                            `<button type="submit" class="btn btn-lg btn-primary text-uppercase px-4">Book Now!</button>`
                        )
                        rightButtons.html(
                            `<div class="text-danger" style="font-size: 1.2em">Less than <strong>${data}</strong> Rooms Available!</div>`
                        )
                        return
                    }

                    // kamar tersedia hanya 1
                    if(data === 1) {
                        leftButtons.html(
                            `<button type="submit" class="btn btn-lg btn-primary text-uppercase px-4">Book Now!</button>`
                        )
                        rightButtons.html(
                            `<div class="text-danger" style="font-size: 1.2em">Only <strong>${data}</strong> Room Available!</div>`
                        )
                        return
                    }

                    // kamar tidak tersedia
                    if(data < 1) {
                        leftButtons.html(
                            `
                            <button class="btn btn-lg btn-dark text-uppercase px-2" disabled><i class="fas fa-times text-danger mr-2"></i>Not Available</button>
                            <medium class="d-block text-muted mt-1">Sorry, currently this room is not available</medium>
                            `
                        )
                        rightButtons.html()
                        return
                    }
				}
			});
		}
    </script>

    {{-- Counter --}}
    <script>
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        //const adultParams = urlParams.get("adult");
        //const childParams = urlParams.get("child");
        //const roomParams = urlParams.get("room");
        const startParams = urlParams.get("start");
        const endParams = urlParams.get("end");


        var count = 0; //child
        var count1 = 1; //adult
        var count2 = 1; //room
        var countEl = $("#child");
        var countEl1 = $("#adult");
        var countEl2 = $("#room");
        var totalKamar = $("#totalKamar")
        function pluschild(){
            count++;
            countEl.val(count) 
        }
        function minuschild(){
            if (count > 0) {
            count--;
            countEl.val(count) 
            }  
        }
        function plusadult(){
            count1++;
            countEl1.val(count1) 
        }
        function minusadult(){
            if (count1 > 1) {
            count1--;
            countEl1.val(count1) 
            }  
        }
        function plusroom(){
            //console.log(Number(totalKamar))
            if(count2 < totalKamar.val()){
                count2++;
                countEl2.val(count2)
                countTotalPrice(moment(startParams), moment(endParams), count2)
            }
        }
        function minusroom(){
            if (count2 > 1) {
                count2--;
                countEl2.val(count2) 
                countTotalPrice(moment(startParams), moment(endParams), count2)
            }  
        }
    </script>

@endsection