@extends('web.layouts.layout')
@section('content')


    <header class="header">

        {{-- <div class="info">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <h1> <span class="line_txt"> {!! $banners[0]->name ?? '' !!} </span> </h1>
                        <a href="{{route('web.reservation')}}" class="butn mt-4"> <span> {{__('web.book_room')}} </span> </a>
                    </div>
                </div>
            </div>
        </div> --}}

        {{-- <!-- <img src="{{url('')}}/assets/web/images/head_bg1.jpg" alt="" class="bg"> -->
        <!--<video class="bg" width="100%" height="100%"  autoplay="" muted="" loop="" __idm_id__="1996242945" playsinline="">-->
        <!--    <source src="{{$banners[0]->video_show}}" type="video/mp4">-->
        <!--</video>--> --}}
        
        <div class="head-slider">
            <div class="swiper-wrapper">
                @foreach($banners as $key=> $banner)
                <div class="swiper-slide">
                    <div class="head-img">
                        <img src="{{asset($banner->file ?? null)}}" alt="" class="img_cover">
                        <!--<img src="{{url('')}}/assets/web/images/head_bg1.jpg" alt="" class="img_cover">-->
                    </div>
                    <div class="slider-text">
                        <h1> <span class="line_txt"> {!! $banner->name ?? '' !!} </span> </h1>
                        {{--
                        <a href="{{route('web.reservation')}}" class="butn mt-4"> <span> {{__('web.book_room')}} </span> </a>
                        --}}
                    </div>
                </div>
                @endforeach
                {{-- <div class="swiper-slide">
                    <div class="head-img">
                        <img src="{{url('')}}/assets/web/images/room1.jpg" alt="" class="img_cover">
                    </div>
                </div> --}}
            </div>
        </div>

    </header>
    <!--  end header  -->

    <main>


        <!-- ---------- rooms2 ----------- -->
        <section class="rooms_st2">
            <div class="container">
                <div class="section_title">
                    <div class="row">
                        <div class="col-lg-8">
                            <h3 class="title"> {{__('web.our_rooms')}} <span class="line wow"></span> </h3>
                        </div>
                    </div>
                </div>
                <div class="rooms_cards rooms_cards_slider">
                    <div class="swiper-wrapper">
                        @foreach($rooms as $row)
                            @include('web.pages.components.rooms.card',['room'=>$row])
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>


        <!-- ---------- menu ----------- -->
        <section class="menu">
            <div class="container">
                <div class="section_title">
                    <div class="row">
                        <div class="col-lg-8">
                            <h3 class="title"> {{__('web.menu')}} <span class="line wow"></span> </h3>
                        </div>
                        {{--
                            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                                <a href="{{route('product.index')}}" class="text-uppercase text-decoration-underline"> {{__('web.show_all_menus')}} </a>
                            </div>
                        --}}
                    </div>
                </div>
                <div class="menu_slider">
                    <div class="swiper-wrapper">
                        @foreach($menus as $row)
                            <div class="swiper-slide">
                                @include('web.pages.components.menu.card',['menu'=>$row])
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="part"><span></span></div>
            <img src="{{url('')}}/assets/web/images/circle-top.svg" alt="" class="circle">
            <div id="particles-js"></div>
        </section>


        <!-- ---------- why_us ----------- -->
        <section class="why_us">
            <div class="container">
                <div class="section_head text-center mb-5">
                    <h2> {{__('web.why_choose_us')}} </h2>
                </div>
                <div class="row">
                    @foreach($cards as $key=>$row)
                    @if($key < 2)
                        <div class="col-lg-6">
                            <div class="why_card">
                                <div class="row gx-3">
                                    <div class="col-lg-6 order-last order-lg-first">
                                        <div class="info wow zoomIn slow">
                                            <div class="cont">
                                                <h5> {!! $row->title !!}  </h5>
                                                <div class="text"> {!! $row->description !!}  </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="img wow zoomIn slow">
                                            <img src="{{asset($row->image)}}" alt="" class="img_cover">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="col-lg-6">
                            <div class="why_card">
                                <div class="row gx-3">
                                    <div class="col-lg-6">
                                        <div class="img wow zoomIn slow">
                                            <img src="{{asset($row->image)}}" alt="" class="img_cover">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="info wow zoomIn slow">
                                            <div class="cont">
                                                <h5> {!! $row->title !!} </h5>
                                                <div class="text"> {!! $row->description !!} </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- star ----------- -->
        <section class="star">
            <img src="{{url('')}}/assets/web/images/head_bg1.jpg" alt="" class="bg">
            <img src="{{asset($page->image)}}" alt="" class="bg_person">
            <div class="content">
                <div class="container">
                    <div class="info">
                        <h2 class="wow fadeInUp t_lines col-lg-5"> {!! $page[getCurrentLocale()]->title !!} </h2>
                    </div>
                </div>
            </div>
            <span class="line1 wow"></span>
        </section>


        <!-- ---------- about ----------- -->
        <section class="about_sec">
            <div class="container">
                <div class="about-box">
                    <h2 class="col-lg-8 mx-auto"> {!! $section->title !!} </h2>
                    <div class="text col-lg-7 mx-auto"> {!! $section->description !!} </div>
                    <a href="{{$section->link}}" class="butn mt-5"> <span> {{__('web.learn_more')}} </span> </a>
                </div>
            </div>
        </section>


        <!-- ---------- rooms ----------- -->
        <section class="rooms">
            <div class="container">
                <div class="rooms_cards">
                    <div class="row justify-content-between">
                        <div class="col-lg-6">
                            <a href="{{ $card1->link }}" class="room_card">
                                <div class="img wow">
                                    <img src="{{ asset($card1->image) }}" alt="" class="img_cover">
                                </div>
                                <div class="info">
                                    <h2 class="mb-3"> {!! $card1->title ?? "" !!} </h2>
                                    <p class="fs-5"> {!! $card1->description ?? "" !!} </p>
                                    <div class="butn mt-5 d-inline-block"> <span> {{__('web.view_menu')}} </span> </div>
                                </div>
                            </a>
                        </div>
                        <!--<div class="col-lg-4">-->
                        <!--    <a href="#" class="all_rooms">-->
                        <!--        <div class="cont position-relative">-->
                        <!--            <h4 class="line_txt"> THE RESTAURANT </h4>-->
                        <!--            <div class="book_link mt-4"> <span> VIEW MENU </span> <span class="icon ms-2"> <i class="fal fa-chevron-right"></i> </span> </div>-->
                        <!--        </div>-->
                        <!--    </a>-->
                        <!--    <a href="#" class="all_rooms">-->
                        <!--        <div class="cont position-relative">-->
                        <!--            <h4 class="line_txt"> THE KARAOKE </h4>-->
                        <!--            <div class="book_link mt-4 text-dark"> <span> BOOK A ROOM </span> <span class="icon ms-2"> <i class="fal fa-chevron-right"></i> </span> </div>-->
                        <!--        </div>-->
                        <!--    </a>-->
                        <!--</div>-->
                        <div class="col-lg-6">
                            <a href="{{ $card2->link }}" class="room_card">
                                <div class="img wow">
                                    <img src="{{ asset($card2->image) }}" alt="" class="img_cover">
                                </div>
                                <div class="info">
                                    <h2 class="mb-3">  {!! $card2->title ?? "" !!} </h2>
                                    <p class="fs-5"> {!! $card2->description ?? "" !!} </p>
                                    <div class="butn mt-5 d-inline-block"> <span> {{__('web.book_room')}} </span> </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- <div class="line wow"> <img src="{{url('')}}/assets/web/images/line-sep.svg" alt="" class=""> </div> -->
                </div>
            </div>
        </section>

        <!-- ---------- College  ----------- -->


        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@stop
