@extends('layouts.front')
@section('content')
@section('css')
<style>
  .menu-sectoin {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
  }

  .menu-content-left {
    text-align: center;
    padding: 30px;
  }

  .menu-title {
    font-size: 34px;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 30px 0;
    background-color: #ccdded;
    padding: 20px;
    border-radius: 20px;
  }

  .section-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
  }

  .section-title a:hover {
    color: #2a2625;
  }

  .menu-image-right {
    text-align: center;
  }

  .image-placeholder {
    padding: 20px;
    border-radius: 8px;
  }

  .menu-sectoin .img-responsive {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .section-title {
      font-size: 24px;
    }
  }


  .carousel-section {
    padding: 60px 0;
    background-color: #f8f9fa;
  }

  .carousel-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
  }

  .menu-carousel {
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
  }

  .carousel-inner>.item>img {
    width: 100%;
    height: 500px;
    object-fit: cover;
  }

  .carousel-caption {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 15px;
    left: 20%;
    right: 20%;
    bottom: 20%;
  }

  .carousel-caption h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .carousel-indicators {
    bottom: 10px;
  }

  .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border: 1px solid #fff;
  }

  .carousel-indicators .active {
    background-color: #fff;
  }

  @media (max-width: 768px) {
    .carousel-inner>.item>img {
      height: 350px;
    }

    .carousel-title {
      font-size: 22px;
    }

    .carousel-caption {
      left: 10%;
      right: 10%;
      bottom: 10%;
    }

    .carousel-caption h3 {
      font-size: 18px;
    }
  }
</style>
@endsection

@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area"
  style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="pagination-area">
      <h2>quienes somos</h2>
      <ul>
        <li><a href="{{route('home')}}">Home</a> - </li>
        <li>quienes somos</li>
      </ul>
    </div>
  </div>
</div>

@php
  $menuPage = \App\MenuPage::first();
@endphp

@if($menuPage)
<div class="menu-sectoin">
  <div class="row align-items-center">
    <div class="{{ $menuPage->show_image ? 'col-lg-7' : 'col-lg-12 text-center' }} col-md-6 col-sm-12">
      <div class="menu-content-left">
        @if(!empty($menuPage->title))
          <div class="menu-title">{{ $menuPage->title }}</div>
        @endif

        @if(!empty($menuPage->subtitle))
          <h2 class="section-title">{{ $menuPage->subtitle }}</h2>
        @endif

        @if(!empty($menuPage->description))
          <p>{!! nl2br(e($menuPage->description)) !!}</p>
        @endif

        @if(!empty($menuPage->menu_title_1))
          <h2 class="section-title">
            <a href="{{ route('foodCategory', ['category' => 'panaderia']) }}">
              {{ $menuPage->menu_title_1 }}
            </a>
          </h2>
        @endif

        @if(!empty($menuPage->menu_title_2))
          <h2 class="section-title">
            <a href="{{ route('foodCategory', ['category' => 'pasteleria']) }}">
              {{ $menuPage->menu_title_2 }}
            </a>
          </h2>
        @endif

        @if(!empty($menuPage->menu_title_3))
          <h2 class="section-title">
            <a href="{{ route('foodCategory', ['category' => 'restaurante']) }}">
              {{ $menuPage->menu_title_3 }}
            </a>
          </h2>
        @endif

        @if(!empty($menuPage->menu_title_4))
          <h2 class="section-title">
            <a href="{{ route('foodCategory', ['category' => 'para-prepara-en-casa']) }}">
              {{ $menuPage->menu_title_4 }}
            </a>
          </h2>
        @endif

      </div>
    </div>

    @if($menuPage->show_image && $menuPage->image)
    <div class="col-lg-5 col-md-6 col-sm-12">
      <div class="menu-image-right">
        <div class="image-placeholder">
          <img src="{{ asset('/laravel_code/public/' . $menuPage->image) }}" class="img-responsive" alt="menu">
        </div>
      </div>
    </div>
    @endif
  </div>
</div>
@endif

<section class="carousel-section">
@php
  $menuSlides = \App\MenuPageCarousel::all();
@endphp

@if($menuSlides->count())
<div class="container-fluid">
  <div id="menuCarousel" class="carousel slide menu-carousel" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
      @foreach($menuSlides as $index => $slide)
        <li data-target="#menuCarousel" data-slide-to="{{ $index }}" class="{{ $index == 0 ? 'active' : '' }}"></li>
      @endforeach
    </ol>

    <!-- Slides -->
    <div class="carousel-inner">
      @foreach($menuSlides as $index => $slide)
        <div class="item {{ $index == 0 ? 'active' : '' }}">
          <img src="{{ asset('/laravel_code/storage/app/public/' . $slide->image) }}" alt="{{ $slide->title }}">
          @if(!empty($slide->title))
          <div class="carousel-caption">
              <h3>{{ $slide->title }}</h3>
            @if(!empty($slide->description))
              <p>{{ $slide->description }}</p>
            @endif
          </div>
          @endif
        </div>
      @endforeach
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#menuCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#menuCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
@endif

</section>

@section('js')
@endsection
@endsection