@extends('souqwaqif.layouts.app')
@section('content')
    <section class="slider_section">
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel">
            
            <div class="carousel-inner">
                @php $i = 0; @endphp
                @foreach($banner as $banners)
                    <div class="carousel-item  slide {{ $i==0 ? 'active': '' }}" data-bs-interval="10000">
                        <img src="{{isset($banners->image)?asset('storage/banners/'.$banners->image):asset('/images/no-image.png')}}" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-md-block">
                            <div>
                                {!! isset($banners->description)? $banners->description : '<h1>Discover the Best Place to <span> Stay in Souq Waqif</span></h1>'!!}
                            </div>
                        </div>
                    </div>
                @php $i++; @endphp
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span
                    class="visually-hidden">{{trans('headings.previous')}}</span> </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span
                    class="visually-hidden">{{trans('headings.next')}}</span> </button>
        </div>
        <div class="banner_caption">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div id="quickbooking" class="main">
                            <form class="book-col-form" action="" method="post" name="BookOnline" target="_blank"
                                id="BookOnline">
                                <div class="book-col-column">
                                    <label for="DD1">{{trans('headings.check_in')}}</label>
                                    <input id="arrival" class="datepicker" name="arrival" value="" type="text"
                                        autofocuss>
                                </div>
                                <div class="book-col-column">
                                    <label for="DD2">{{trans('headings.check_out')}}</label>
                                    <input id="departure" class="datepicker" name="departure" value="" type="text"
                                        autofocuss>
                                </div>
                                <div class="book-col-column book-col-column_small">
                                    <label for="rooms">{{trans('headings.room')}}</label>
                                    <select id="rooms" name="rooms">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                    </select>
                                </div>
                                <div class="book-col-column book-col-column_small">
                                    <label for="adults">{{trans('headings.adults')}}</label>
                                    <select id="adults" name="adults">
                                        <option value="1">1 </option>
                                        <option value="2" selected="selected">2 </option>
                                    </select>
                                </div>
                                <div class="book-col-column book-col-column_small">
                                    <label for="kids">{{trans('headings.children')}}</label>
                                    <select id="kids" name="kids">
                                        <option value="0">0 </option>
                                        <option value="1">1 </option>
                                    </select>
                                </div>
                                <div class="book-col-column">
                                    <label for="promo">{{trans('headings.promotional_code')}}</label>
                                    <input type="text" name="promo" id="promo" />
                                </div>
                                <div class="book-col-column book_button">
                                    <div class="book-col-submit-wrap">
                                        <input class="book-col-submit" type="submit" value="{{trans('headings.check_availability')}}" />
                                    </div>
                                    <div id="container"></div>
                                    <input type="hidden" name="Page" value="19">
                                    <input type="hidden" name="lan_id" value="en-US">
                                    <input type="hidden" name="kid1" value="-1">
                                    <input type="hidden" name="kid2" value="1">
                                    <input type="hidden" name="kid3" value="-1">
                                    <input type="hidden" name="extra" value="0">
                                    <input type="hidden" name="cot" value="0">
                                    <input type="hidden" name="src" value="">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="ourhotel-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                    <div class="head-title"> <span class="title-top">{!!$homeText->title_1!!}</span>
                        <h2>{!!$homeText->description_1!!}</h2>
                    </div>
                </div>
                <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".7s">
                    <div id="tab_example" class="ourhotel_tab">
                        <div class="row d-flex align-items-center hoteltab_block">
                            <div class="col-lg-6 col-sm-6 col-md-6 ourhotel_tab_left " id="hotel_container">
                                <div>
                                    <ul>
                                       <li id="first_tab">
                                            <a href="#t1"> <div class="tab-tit">{!! $newHotels->title !!} </div> </a>
                                            <div class="hotel_tabcontent" id="hotel_tabcontent1">
                                                <p>{{$newHotels->intro_text}}</p>
                                                <a href="{{ route('souqwaqif-aboutus') }}" class="btn line_btn">{{trans('headings.readmore')}}
                                                    <i class="bi bi-arrow-right"></i></a>
                                            </div>
                                        </li>

                                        <li id="second_tab"><a href="#t2">
                                                <div class="tab-tit">{!! $homeText->title_hotel1 !!}
                                                </div>
                                            </a>
                                            <div class="hotel_tabcontent" id="hotel_tabcontent2" style="display:none;">
                                                <p>{{$homeText->description_hotel1}}</p>
                                                <a href="{{ isset($homeText->link_hotel1)?$homeText->link_hotel1:'' }}" class="btn line_btn" target="_blank">{{trans('headings.readmore')}} 
                                                    <i class="bi bi-arrow-right"></i></a>
                                            </div>
                                        </li>
                                        <li id="third_tab"><a href="#t3">
                                                <div class="tab-tit">{!! $homeText->title_hotel2 !!}
                                                </div>
                                                <div class="hotel_tabcontent" id="hotel_tabcontent2" style="display:none;">
                                                    <p>{{$homeText->description_hotel2}}</p>
                                                    
                                                </div>
                                            </a>
                                            <div class="hotel_tabcontent" id="hotel_tabcontent3" style="display:none;">
                                                @if(isset($homeText->link_hotel2))
                                                    <a href="{{ $homeText->link_hotel2 }}" class="btn line_btn" target="_blank">{{trans('headings.readmore')}} 
                                                        <i class="bi bi-arrow-right"></i></a>
                                                @else
                                                    <p>{{trans('headings.comming_soon')}} </p>
                                                @endif
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6 col-md-6 ourhotel_tab_right text-center">
                                <div id="t1">
                                    <div class="forimg_animate forimg_animate_hotel">
                                        <div class="imgsec">
                                            <figure class="effect-apollo"> <img
                                                    src="{{asset('storage/hotels/'.$newHotels->image)}}" />
                                                <figcaption> </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div id="t2">
                                    <div class="forimg_animate forimg_animate_hotel">
                                        <div class="imgsec">
                                            <figure class="effect-apollo"> <img
                                                    src="{{asset('storage/home/'.$homeText->image1)}}" />
                                                <figcaption> </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div id="t3">
                                    <div class="forimg_animate forimg_animate_hotel">
                                        <div class="imgsec">
                                            <figure class="effect-apollo"> <img
                                                    src="{{asset('storage/home/'.$homeText->image2)}}" />
                                                <figcaption> </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--<div class="imgsec">
      <figure class="effect-apollo"> <img src="https://tympanus.net/Development/HoverEffectIdeas/img/18.jpg') }}" alt="img18"/>
        <figcaption> </figcaption>
      </figure>
    </div>-->
    @if (isset($allRooms))
        <section class="ourrooms-section section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 mb-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                        <div class="head-title"> <span class="title-top">{!!$homeText->title_2!!}</span>
                            <h2>{!!$homeText->description_2!!}</h2>
                        </div>
                    </div>
                    <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".7s">
                        <div class="owl-carousel rooms_carousel owl-theme">
                            @foreach($allRooms as $room)
                                <div class="item">
                                    <div class="row">
                                        <div class="col-lg-6 homehotelimg_left">
                                            <div class="forimg_animate">
                                                <div class="imgsec">
                                                    @php
                                                        $image1=App\Models\RoomGallery::select('image')
                                                            ->where([['room_id', $room->id],['type', 5]])->first();
                                                    @endphp
                                                    <figure class="effect-apollo"> <img class="w-100"
                                                            src="{{asset('storage/rooms/'.$image1->image)}}" />
                                                        <figcaption> </figcaption>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="homehotel_details">
                                                <h3>{{$room->title}}</h3>
                                                <p>{{$room->short_description}} </p>
                                                <div class="homehotel_facility">
                                                    @if ($room->facilities)
                                                        @php $facilities = explode(',',$room->facilities); @endphp  
                                                        @foreach($facilities as $id)
                                                            @foreach($allFacilities as $all)
                                                                @if ($all->id == $id)
                                                                    <div> 
                                                                        <span> <img src="{{asset('storage/facilities/'.$all->image)}}"></span>
                                                                        {{$all->facilities}}
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        @endforeach
                                                    @endif
                                                </div>
                                                <a href="{{route('souqwaqif-room',$room->id)}}" class="btn secondary_btn">{{trans('headings.view_room_detail')}} <i
                                                        class="bi bi-arrow-right"></i></a>
                                            </div>
                                            <div class="homehotelimg_btm">
                                                <div class="forimg_animate">
                                                    <div class="imgsec">
                                                        @php
                                                            $image2=App\Models\RoomGallery::select('image')
                                                                ->where([['room_id', $room->id],['type', 4]])->first();
                                                        @endphp
                                                        <figure class="effect-apollo"> <img class="w-100"
                                                                src="{{asset('storage/rooms/'.$image2->image)}}" />
                                                            <figcaption> </figcaption>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if(isset($offers))
    <section class="our_offer_section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12  wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                    <div class="offers_title offers_title_sm">
                        <div class="offersslide_content">
                            <div class="head-title"> <span class="title-top">{!!$homeText->title_4!!}</span>
                                <h2>{!!$homeText->description_4!!}</h2>
                            </div>
                            <p>{!!$homeText->Sub_text_4!!}</p>
                            <a href="{{ route('souqwaqif-offer') }}" class="btn line_btn">{{trans('headings.view_all_offers')}} 
                                <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="owl-carousel ouroffers_carousel owl-theme">
                        @php $i=0; @endphp
                        @foreach( $offers as $offer)
                            @if($i==0)
                                <div class="item">
                                    <div class="row d-flex justify-content-between">
                                        <div class="col-lg-4"> <img src="{{asset('storage/banners/'.$offer->image)}}" /> </div>
                                @php $i=1; @endphp
                            @elseif($i==1)
                                        <div class="col-lg-4"> <img src="{{asset('storage/banners/'.$offer->image)}}" /></div>
                                    </div>
                                </div>
                                @php $i=0; @endphp
                            @endif
                        @endforeach
                        @if($i==1)
                                </div>
                            </div>
                            @php $i=0; @endphp
                        @endif
                    </div>
                    <div class="offers_title offers_title_lg">
                        <div class="offersslide_content">
                            <div class="head-title"> <span class="title-top">{!!$homeText->title_4!!}</span>
                                <h2>{!!$homeText->description_4!!}</h2>
                            </div>
                            <p>{!!$homeText->Sub_text_4!!}</p>
                            <a href="{{ route('souqwaqif-offer') }}" class="btn line_btn">{{trans('headings.view_all_offers')}}
                                <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    <section class="facilities-section section-padding">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                    <div class="head-title"> <span class="title-top">{!!$homeText->title_5!!}</span>
                        <h2>{!!$homeText->description_5!!}</h2>
                    </div>
                </div>
                <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                    <div class="owl-carousel facilities_carousel owl-theme">
                        @php $i=0; @endphp
                        @foreach( $facilitiesSlider as $facility)
                            <div class="item">
                                <div class="homefacility_block">
                                    <div class="forimg_animate">
                                        <div class="imgsec">
                                            <figure class="effect-apollo"><img
                                                    src="{{asset('storage/banners/'.$facility->image)}}" />
                                                <figcaption> </figcaption>
                                                @if($facility->status==0)
                                                <span class="opening top">{!!trans('headings.opening_soon')!!}
                                                @endif
                                            </figure>
                                        </div>
                                    </div>
                                    <span class="facility_text {{($i % 2 == 0)?'textP_top':'textP_btm'}}">{{$facility->description}}</span>
                                </div>
                            </div>
                            @php $i++; @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="corporate-section section-padding" id="enquiry">
        <div class="container">
            <div class="row d-flex align-items-center">
                <div class="col-lg-5 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
                    <div class="head-title text-start"> <span class="title-top title-top-left">{!!$homeText->title_6!!}</span>
                        <h2>{!!$homeText->title_7!!}</h2>
                        <p class="mt-4">{!!$homeText->description_7!!}</p>
                    </div>
                    <div class="formoreenquiry">
                        <h6>{!!$homeText->title_8!!}</h6>
                        <!--  <a href="" class="btn line_btn">Enquire Now <i class="bi bi-arrow-right"></i></a>-->
                    </div>
                </div>
                <div class="col-lg-7 corporateform wow fadeInRight" data-wow-duration="1s" data-wow-delay=".5s">
                    <form action="{{ route('souqwaqif-contact-us') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @if(session()->has('message'))
                            <div class="alert alert-success"> {{ session()->get('message') }} </div>
                        @endif
                        <div class="row input-container">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="styled-input wide">
                                    <input type="text" id="name" name="name" placeholder="{{trans('headings.name')}}" required>
                                </div>
                                @if ($errors->has('name'))
                                    <p class="help-block">{{ $errors->first('name') }}</p>
                                @endif
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="styled-input wide">
                                    <input type="text" id="company" name="company_name" placeholder="{{trans('headings.company_name')}}"
                                        required>
                                </div>
                                @if ($errors->has('company_name'))
                                    <p class="help-block">{{ $errors->first('company_name') }}</p>
                                @endif
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="styled-input">
                                    <input type="email" id="email" name="email" placeholder="{{trans('headings.email')}}" required>
                                </div>
                                @if ($errors->has('email'))
                                    <p class="help-block">{{ $errors->first('email') }}</p>
                                @endif
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="styled-input">
                                    <input type="tel" id="phone" name="phone" minlength="10" maxlength="12"
                                        placeholder="{{trans('headings.phone_number')}}" required>
                                </div>
                                @if ($errors->has('phone_number'))
                                    <p class="help-block">{{ $errors->first('phone_number') }}</p>
                                @endif
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="styled-input">
                                    <input type="text" id="subject" name="subject" placeholder="{{trans('headings.subject')}}" required>
                                </div>
                                @if ($errors->has('subject'))
                                    <p class="help-block">{{ $errors->first('subject') }}</p>
                                @endif
                            </div>
                            <div class="col-md-12 col-sm-12">
                                <div class="styled-input fileupload">
                                    <label for="inputTag"><i class="bi bi-paperclip"></i> {{trans('headings.attach_file_sq')}}</label>
                                    <input type="file" id="inputTag" name="file" accept="image/*|pdf|doc|docx"
                                        required>
                                    <span id="imageName"></span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="styled-input wide">
                                    <textarea id="message" name="message" rows="5" cols="4" placeholder="{{trans('headings.message')}}" required></textarea>
                                </div>
                                @if ($errors->has('message'))
                                    <p class="help-block">{{ $errors->first('message') }}</p>
                                @endif
                            </div>
                            <div class="col-12 text-end mt-4 pt-1">
                                <input type="submit" class="btn secondary_btn f_bold" value="{{trans('headings.submit')}}">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    @if($instaPost->isNotEmpty())
        <section class="instrgram_section">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 instahead wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                        <div class="head-title"> <span class="title-top">{!!$homeText->title_10_1!!}</span>
                            <h2>{!!$homeText->title_10_2!!}</h2>
                            <p>{!!$homeText->description_10_2!!}</p>
                        </div>
                    </div>
                    <div class="col-lg-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                        <div class="owl-carousel insta_carousel owl-theme">
                            @foreach($instaPost as $instaPosts)
                                <div class="item">
                                    <div class="insta_block">
                                        <div class="insta_img"> 
                                            <img class="w-100" src="{{isset($instaPosts->image)?asset('storage/instagram/'.$instaPosts->image):asset('/images/no-image.png')}}" />
                                            <a href="{{$instaPosts->link}}" target="_blank"> 
                                                <div class="insta_icon"> <span> 
                                                    <img src="{{ asset('souqwaqif/images/instagram_1.png') }}" /></span> 
                                                </div>
                                            </a>
                                        </div>
                                        <div class="inst_content">
                                            {!!isset($instaPosts->subtext)?$instaPosts->subtext :''!!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif 

@endsection
@section('script')
    <!-- If runs locally put https:// before each script (ex: src="https://code.jquery.com/jquery-2.1.4.min.js")
     If runs online put // before each script (ex: src="//code.jquery.com/jquery-2.1.4.min.js") -->

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        jQuery(function() {
            jQuery('#quickbooking #arrival').datepicker({
                dateFormat: 'dd, M yy',
                beforeShowDay: function(date) {
                    var currentDate = new Date();
                    currentDate.setHours(0);
                    currentDate.setMinutes(0);
                    currentDate.setSeconds(0);
                    currentDate.setMilliseconds(0);
                    if (date >= currentDate) {
                        return [true, ''];
                    } else {
                        return [false, ''];
                    }
                },
                onSelect: function(dateText, inst) {
                    var nextDay = jQuery('#quickbooking #arrival').datepicker('getDate');
                    nextDay.setDate(nextDay.getDate() + 1);
                    var depart = jQuery('#quickbooking #departure').datepicker('getDate');
                    if (depart < nextDay) {
                        jQuery('#quickbooking #departure').val(jQuery.datepicker.formatDate('dd, M yy',
                            nextDay));
                    }
                }
            }).val(jQuery.datepicker.formatDate('dd, M yy', new Date()));
            var nextDay = new Date();
            nextDay.setDate(new Date().getDate() + 1);
            jQuery('#quickbooking #departure').datepicker({
                dateFormat: 'dd, M yy',
                beforeShowDay: function(date) {
                    var nextDay = jQuery('#quickbooking #arrival').datepicker('getDate');
                    nextDay.setDate(nextDay.getDate() + 1);
                    nextDay.setHours(0);
                    nextDay.setMinutes(0);
                    nextDay.setSeconds(0);
                    nextDay.setMilliseconds(0);

                    if (date >= nextDay) {
                        return [true, ''];
                    } else {
                        return [false, ''];
                    }
                }
            }).val(jQuery.datepicker.formatDate('dd, M yy', nextDay));

            jQuery('#quickbooking form').submit(function(e) {
                e.preventDefault();
                var $this = jQuery(this);
                var url = '';

                var values = {};
                jQuery.each($this.serializeArray(), function(k, v) {
                    values[v.name] = v.value;
                });

                if (values.hotel == -1) {
                    url = '';
                } else {
                    url = 'https://centralinnsouqwaqif.book-onlinenow.net/index.aspx?';
                }
                delete values.hotel;

                var arrivalDate = jQuery('#arrival', jQuery(this)).datepicker('getDate');
                var departureDate = jQuery('#departure', jQuery(this)).datepicker('getDate');
                values.arrival = jQuery.datepicker.formatDate('dd/mm/yy', arrivalDate);
                values.departure = jQuery.datepicker.formatDate('dd/mm/yy', departureDate);

                jQuery.each(values, function(k, v) {
                    if (v.length > 0) {
                        url += k + '=' + v + '&';
                    }
                });
                url = url.substr(0, url.length - 1);
                //uncomment below if results in _self
                //window.location.href = url;

                //comment below if you need result in _self
                var BookSearch = window.open(url, "_blank");
            });
        });
    </script>
    <script>
        let input = document.getElementById("inputTag");
        let imageName = document.getElementById("imageName")

        input.addEventListener("change", () => {
            let inputImage = document.querySelector("input[type=file]").files[0];

            imageName.innerText = inputImage.name;
        })
    </script>
@endsection