@extends('frontend.layouts.app')
@section('styles')
@if($id==14)
     <style id="themeModuleStyle">
      :root {
        --primary: #202124 !important;
        --secondary: #D5000B !important;
        --third: #ffffff !important;
        --headerBackground: #202124 !important;
        --headerText: #ffffff !important;
        --headerDivideColor: var(--whiteTranslucent) !important;
        --brandNavBackground: #0F0F0F !important;
        --footerBackground: #000000 !important;
        --footerText: #ffffff !important;
        --background: #3E3F43 !important;
        --backgroundComplement: #ffffff !important;
        --accountBackground: #000000 !important;
        --checkoutAccentBackground: #252628 !important;
        --backgroundLightPattern: #ffffff !important;
        --backgroundDarkPattern: #3E3F43 !important;
        --cartBackground: #3E3F43 !important;
        --cartHeaderTextColor: var(--white) !important;
        --cartFooter: var(--footerBackground) !important;
        --cartFooterText: var(--footerText) !important;
        --cartBreakLine: #FFFFFF20 !important;
        --cartFooterBreakLine: #FFFFFF20 !important;
        --cardBackground: #000000 !important;
        --cardActiveBackground: #000000BF !important;
        --cardTextColor: #FFFFFF !important;
        --cardDescriptionTextColor: #FFFFFF !important;
        --primaryText: #ffffff !important;
        --secondaryText: #ffffff !important;
        --labelColor: #ffffff !important;
        --labelAltBgColor: var(--white) !important;
        --primaryButtonColor: #D5000B !important;
        --primaryButtonHoverColor: #D5000B !important;
        --primaryButtonActiveColor: #D5000B !important;
        --primaryButtonTextColor: #ffffff !important;
        --secondaryButtonColor: #ffffff !important;
        --secondaryButtonHoverColor: #ffffff !important;
        --secondaryButtonActiveColor: #ffffff !important;
        --secondaryButtonTextColor: #000000 !important;
      }
    </style>
  @elseif($id==15)
  <style id="themeModuleStyle">
    :root {--primary:#BAA686 !important;--secondary:#FF1400 !important;--third:#FAF1E3 !important;--headerBackground:#BAA686 !important;--headerText:#000 !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#82745E !important;--footerBackground:#F4E5C9 !important;--footerText:#000 !important;--background:#FAF1E3 !important;--backgroundComplement:#ffffff !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:#ffffff !important;--backgroundDarkPattern:#FAF1E3 !important;--cartBackground:#FAF1E3 !important;--cartHeaderTextColor:#000000 !important;--cartFooter:var(--footerBackground) !important;--cartFooterText:var(--footerText) !important;--cartBreakLine:#00000020 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#BAA686 !important;--cardActiveBackground:#BAA686BF !important;--cardTextColor:#000000 !important;--cardDescriptionTextColor:#000000 !important;--primaryText:#000 !important;--secondaryText:#000 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#FF1400 !important;--primaryButtonHoverColor:#FF1400 !important;--primaryButtonActiveColor:#FF1400 !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#82745E !important;--secondaryButtonHoverColor:#82745E !important;--secondaryButtonActiveColor:#82745E !important;--secondaryButtonTextColor:#ffffff !important; } 
    </style>
    @elseif($id==16)
    <style id="themeModuleStyle">:root {--primary:#D26F91 !important;--secondary:#381E16 !important;--third:#FFEBF2 !important;--headerBackground:#D26F91 !important;--headerText:#ffffff !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#934E66 !important;--footerBackground:#381E16 !important;--footerText:#fff !important;--background:#FFFFFF !important;--backgroundComplement:#ffffff !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:#ffffff !important;--backgroundDarkPattern:#FFFFFF !important;--cartBackground:#FFFFFF !important;--cartHeaderTextColor:#381E16 !important;--cartFooter:var(--footerBackground) !important;--cartFooterText:var(--footerText) !important;--cartBreakLine:#381E1620 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#D26F91 !important;--cardActiveBackground:#D26F91BF !important;--cardTextColor:#FFFFFF !important;--cardDescriptionTextColor:#FFFFFF !important;--primaryText:#381E16 !important;--secondaryText:#381E16 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#ff8eb5 !important;--primaryButtonHoverColor:#ff8eb5 !important;--primaryButtonActiveColor:#ff8eb5 !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#fff !important;--secondaryButtonHoverColor:#fff !important;--secondaryButtonActiveColor:#fff !important;--secondaryButtonTextColor:#381E16 !important; } </style> 

    @elseif($id==17)
           <style id="themeModuleStyle">:root {--primary:#33662F !important;--secondary:#63A95D !important;--third:#F1E5CE !important;--headerBackground:#33662F !important;--headerText:#ffffff !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#244721 !important;--footerBackground:#33662f !important;--footerText:#fff !important;--background:#F1e5Ce !important;--backgroundComplement:#ffffff !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:#ffffff !important;--backgroundDarkPattern:#F1e5Ce !important;--cartBackground:#F1e5Ce !important;--cartHeaderTextColor:#000000 !important;--cartFooter:var(--footerBackground) !important;--cartFooterText:var(--footerText) !important;--cartBreakLine:#00000020 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#33662F !important;--cardActiveBackground:#33662FBF !important;--cardTextColor:#FFFFFF !important;--cardDescriptionTextColor:#FFFFFF !important;--primaryText:#000000 !important;--secondaryText:#000000 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#63A95D !important;--primaryButtonHoverColor:#63A95D !important;--primaryButtonActiveColor:#63A95D !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#000000 !important;--secondaryButtonHoverColor:#000000 !important;--secondaryButtonActiveColor:#000000 !important;--secondaryButtonTextColor:#ffffff !important; } </style>
      @elseif($id==18)
         <style id="themeModuleStyle">:root {--primary:#FFFFFF !important;--secondary:#000000 !important;--third:#1D1D1B !important;--headerBackground:#DC1E28 !important;--headerText:#ffffff !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#b01820 !important;--footerBackground:#000000 !important;--footerText:#FFFFFF !important;--background:#FFFFFF !important;--backgroundComplement:#ffffff !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:#ffffff !important;--backgroundDarkPattern:#FFFFFF !important;--cartBackground:#FFFFFF !important;--cartHeaderTextColor:#1D1D1B !important;--cartFooter:#000000 !important;--cartFooterText:#FFFFFF !important;--cartBreakLine:#1D1D1B20 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#DC1E28 !important;--cardActiveBackground:#DC1E28BF !important;--cardTextColor:#FFFFFF !important;--cardDescriptionTextColor:#FFFFFF !important;--primaryText:#1D1D1B !important;--secondaryText:#000000 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#DC1E28 !important;--primaryButtonHoverColor:#DC1E28 !important;--primaryButtonActiveColor:#DC1E28 !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#ffffff !important;--secondaryButtonHoverColor:#ffffff !important;--secondaryButtonActiveColor:#ffffff !important;--secondaryButtonTextColor:#000000 !important; } </style> 
      @elseif($id==19)
      <style id="themeModuleStyle">:root {--primary:#0D2A59 !important;--secondary:#279185 !important;--third:#FFFFFF !important;--headerBackground:#0D2A59 !important;--headerText:#ffffff !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#153054 !important;--footerBackground:#0D2A59 !important;--footerText:#ffffff !important;--background:#FFFFFF !important;--backgroundComplement:#FFFFFF !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:url(../gobycitizens.imgix.net/ellaMiaBackgroundPatternLight1350.jpg?auto=format) !important;--backgroundDarkPattern:url() !important;--cartBackground:#FFFFFF !important;--cartHeaderTextColor:#000000 !important;--cartFooter:#279185 !important;--cartFooterText:var(--footerText) !important;--cartBreakLine:#00000020 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#0D2A59 !important;--cardActiveBackground:#0D2A59BF !important;--cardTextColor:#FFFFFF !important;--cardDescriptionTextColor:#FFFFFF !important;--primaryText:#000000 !important;--secondaryText:#000000 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#1E4470 !important;--primaryButtonHoverColor:#1E4470 !important;--primaryButtonActiveColor:#1E4470 !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#ffffff !important;--secondaryButtonHoverColor:#ffffff !important;--secondaryButtonActiveColor:#ffffff !important;--secondaryButtonTextColor:#000000 !important; } </style> 
         @elseif($id==20)
         <style id="themeModuleStyle">:root {--primary:#762323 !important;--secondary:#333333 !important;--third:#3C3B2B !important;--headerBackground:#762323 !important;--headerText:#ffffff !important;--headerDivideColor:var(--whiteTranslucent) !important;--brandNavBackground:#531818 !important;--footerBackground:#333333 !important;--footerText:#ffffff !important;--background:#BDAA98 !important;--backgroundComplement:#ffffff !important;--accountBackground:var(--background) !important;--checkoutAccentBackground:var(--footerBackground) !important;--backgroundLightPattern:#ffffff !important;--backgroundDarkPattern:#BDAA98 !important;--cartBackground:var(--brandNavBackground) !important;--cartHeaderTextColor:var(--white) !important;--cartFooter:var(--footerBackground) !important;--cartFooterText:var(--footerText) !important;--cartBreakLine:#FFFFFF20 !important;--cartFooterBreakLine:#FFFFFF20 !important;--cardBackground:#762323 !important;--cardActiveBackground:#762323BF !important;--cardTextColor:#FFFFFF !important;--cardDescriptionTextColor:#FFFFFF !important;--primaryText:#000000 !important;--secondaryText:#000000 !important;--labelColor:var(--white) !important;--labelAltBgColor:var(--white) !important;--primaryButtonColor:#762323 !important;--primaryButtonHoverColor:#762323 !important;--primaryButtonActiveColor:#762323 !important;--primaryButtonTextColor:#ffffff !important;--secondaryButtonColor:#BDAA98 !important;--secondaryButtonHoverColor:#BDAA98 !important;--secondaryButtonActiveColor:#BDAA98 !important;--secondaryButtonTextColor:#ffffff !important; } 
           </style>

     @endif

<style>
#map{
    height:400px;
}
        input {
            width: 100%;
            text-align: left;
            color: #fff;
            margin-top: 6px;
            margin-bottom: 20px;
            padding: 4px;
            padding-left: 19px;
            border: none;
            font-size: 13px;
            line-height: 16.2px;
            height: 56px;
            box-sizing: border-box;
            outline: none;
            background-color:#000000cf;
        }

        input::placeholder {
            text-transform: capitalize !important;
            color: currentColor;
            opacity: .60;
        }

 </style>
@section('main-content')
<section class="ModulesContainer_modulesBlock__dxsT6" style="--grid-template-xs:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-s:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-m:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-l:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-xl:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;">
    

  <googlemap :restaurantlat="{{$lat}}" :restaurantlong="{{$long}}" :charge_per_kilo="{{$charge_per_kilo}}" 
   :basic_delivery_charge="{{$basic_delivery_charge}}" :free_delivery_radius="{{$free_delivery_radius}}"
  ></googlemap>
  <div class="MenusView_menuViewHeightDesktop__dpbx8">
    <div class="MenusView_menuViewHeader__mZNQi">
    </div>
    <div>
      <listitems :products="{{$products}}" ></listitems>
    <span></span>
    </div>
    <span></span>
    </div>
</section>


@endsection