@extends('front.layouts.app')

@section('metatags')

    <link rel="alternate" hreflang="ka" href="https://www.menu.awh.ge/ka/" />
    <link rel="alternate" hreflang="en" href="https://www.menu.awh.ge/en/" />
    <link rel="alternate" hreflang="ru" href="https://www.menu.awh.ge/ru/" />
        <title>{{$city->translated_title}}</title>
    <meta name="title" content=" {{$city->translated_title}}">
    <meta name="description" content=" {{$city->translated_title}}"> 

<meta property="og:locale" content="{{ currentLocale() }}"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.menu.awh.ge/{{ currentLocale() }}" />
<meta property="og:image" content="{{asset('/assets/img/cover.jpg')}}" />
<meta property="og:description" content=" {{$city->translated_title}}" />
<meta property="og:site_name" content="menu.awh.ge" />
<meta itemprop="name" content="{{$city->translated_title}}">
<meta itemprop="description" content=" {{$city->translated_title}}">
<meta itemprop="image" content="{{asset('/assets/img/cover.jpg')}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{$city->translated_title}}">
<meta name="twitter:description" content="{{$city->translated_title}}">
<meta name="twitter:image:src" content="{{asset('/assets/img/cover.jpg')}}">
<meta itemprop="name" content="{{$city->translated_title}}"/>
<meta itemprop="description" content="{{$city->translated_title}}"/>
<meta itemprop="image" content="{{asset('/assets/img/cover.jpg')}}"/>



@endsection


@section('content')

<style>
body {
  background-color: #fff;
}
.sb-reviews-prev {

    position: absolute;
  
    left: 40px;
}
.sb-reviews-next {

position: absolute;
right: 40px;
}
.sb-menu-item:hover .sb-cover-frame img {
  height:390px!important;
}
.sb-menu-item .sb-cover-frame {
  height:390px!important;
}
.sb-menu-item .sb-cover-frame img {
  height:390px!important;
}
.sb-menu-item .sb-cover-frame {
  border-top-left-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;

}

.sb-card-title {
  font-feature-settings: 'case' on;
}

.modal.show .modal-dialog {
  margin-top: 200px;
}
.width-current-for-category-img {
    width:100%;
}
</style>

@include('front.pages.particials.items.desktop',['cityTranslatedTitle' => $city->translated_title]) 

@include('front.pages.particials.items.mobile',['cityTranslatedTitle' => $city->translated_title]) 


@endsection

@section('scripts')

@foreach($data as $menu)


<div class="modal fade bd-{{$menu->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ $menu->translated_title }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="row">

  <div class="col-md-4">
  <img src="{{asset('/images/'.$menu['images'][0]->url ?? '')}}" class="width-current-for-category-img">


  </div>
<div class="col-md-8">
<h3>{{ $menu->translated_title }}</h3>
<p>{!! $menu->translated_description !!}</p>

<span style="font-size:20px;">{{$menu->price}} ₾</span>

</div>

        </div>
      </div>
     


    </div>
  </div>
</div>

@endforeach
@endsection