@extends('layout.site')
@section('title', __('structure.the-hotel').' - ')
@section('canonical', url('/o-hotel'))

@section('content')
    <div class="section-internal">
        <div class="breadcrumbs" style="background-image: url('{{ base_url('assets/site/img/slide/'.$content_text->header) }}')">
            <div class="container py-5 px-2 breadcrumb">
                <div class="breadcrumb-item">{!!  __('structure.the-hotel') !!}</div>
            </div>
        </div>

        <div class="content bg-light py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 section-title">
                        {!! $content_title->content !!}
                    </div>
                </div>
                <div class="row my-5">
                    <div class="col-lg-12">
                        {!! $content_text->content !!}
                    </div>
                </div>

                @foreach($restaurants as $key=>$restaurant)
                <div class="row bg-white  align-items-center @if($key%2) flex-row-reverse @endif">
                    <div class="col-lg-6 py-5 py-lg-0 text-center">
                        <div class="text-uppercase">{!! $restaurant->value_a !!}</div>
                        <div class="section-title">{!! $restaurant->value_b !!}</div>
                        <div class="px-4 mt-4 lh-lg">{!! $restaurant->value_c !!}</div>
                    </div>
                    <div class="col-lg-6 px-0">
                        <div class="carousel-one owl-carousel owl-theme">
                            @foreach($restaurant->photos as $photo)
                            <div class="item"><img src="{{ base_url('/assets/site/img/content/'.$photo->url) }}" width="100%"></div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>

        <div class="content">
            <div class="container mt-5 py-5">
                <div class="row">
                    @foreach($services as $key=>$service)
                    <div class="col-4 col-lg-2 mb-4 text-center">
                        <div class="rounded-circle service-icon"><img src="{{ base_url('assets/site/img/content/'.$service->value_a) }}" width="70%"></div>
                        <div class="service-name">
                            {!! $service->value_b !!}
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="container py-5 px-5 mb-5">
                <div class="carousel-tree owl-carousel owl-theme">
                    @foreach($content_photos as $key=>$photos)
                    <div class="item">
                      <figure><img src="{{ base_url('/assets/site/img/content/'.$photos->url) }}" width="100%"></figure>
                    </div>
                    @endforeach
                </div>
            </div>

        </div>

        @include('site.widget-saleoff')
        @include('site.widget-location')
    </div>
@endsection

@section('script')
    <link rel="stylesheet" href="{{ asset('assets/site/css/carousel.css') }}">
    <script src="{{ asset('assets/site/js/carousel.js') }}"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
    <script src="{{ asset('assets/site/js/maps.js') }}"></script>

@endsection