@extends('layouts.front')
@section('content')
@section('css')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Grape+Nuts&display=swap" rel="stylesheet">
<style>
  .menu_upper{
    margin-top: 20px;
  }
  .menu_upper h2{
    margin-top: 0px !important;
  }
  .cat_banner{
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    padding: 86px 0 95px;
    background-size: cover;
  }
  #main_menu h3{
    margin-bottom: 0px !important;
  }
  .menustyling{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .menustyling h5{
    margin-top: 0px !important;
  }
  .menustyling img{
    padding-left: 10px;
    padding-bottom: 10px;
  }
  .close_msg h4{
    padding: 5px !important;
  }
  .close_msg h4{
    font-size: 16px;
    margin-bottom: 0px !important;
  }
  .fixedElement {
    background-color: #f2f2f2;
    position:fixed;
    top:0;
    z-index:100;
}
.list-group-item {
  padding: 5px 12px !important;
}
.si{
  border-radius: 0px !important;
  margin-bottom: 5px;
}
.buy{
  padding: 2px !important;
  font-size: 12px;
  margin-left: 10px;
  padding-left: 5px !important;
}
</style>
@endsection

<div class="mobileCart hidden-md hidden-lg" id="cartHeader">
  <div class="cart-area">
    <a href="#cart__container"><i aria-hidden="true" class="fa fa-shopping-cart"></i> <span class="items" style="position:inherit; font-size:16px">0</span> Mi Pedido</a>
  </div>
</div>


@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>Menú</h2>
      <ul>
        <li><a href="{{route('home')}}">Home</a> - </li>
        <li>Menú</li>
      </ul>
    </div>
  </div>
</div>

<div class="menu_upper">
  <div class="container">
    <div class="row"> 
      <div class="col-md-8">
        <h2>{{$settings->name}}</h2>
        <p>
          <i class="fa fa-map-marker" aria-hidden="true"></i> {{$settings->address}} &nbsp;|&nbsp; 
          <i class="fa fa-phone" aria-hidden="true"></i> {{$settings->phone_no}} <br> 
          <i class="fa fa-envelope-o" aria-hidden="true"></i> {{$settings->email}}
        </p>
        <p>
          <i class="fa fa-clock-o" aria-hidden="true"></i> {{$today_timing}}
        </p>
      </div>

      <div class="col-md-4">

        <div class="order_type_container">
          <div class="row">
              <div class="col-md-12">
                  <div class="btn-group" data-toggle="buttons" id="orderTypeGroup">
                      <label class="btn btn-ordertype active">
                          <input type="radio" id="delivery" name="orderType" value="delivery" checked="checked" /> DOMICILIO
                      </label> 
                      <label class="btn btn-ordertype">
                          <input type="radio" id="pickup" name="orderType" value="pickup" /> Recoger 
                      </label>
                  </div>
              </div>
          </div>
        </div>

        <div id="menu_upper_delivery_cont">
          <p>
            Costo Domicilio : <b>{{env('CURRENCY').$settings->delivery_charges}}</b> 
            &nbsp;|&nbsp; Cantidad Minima : <b>{{env('CURRENCY').$settings->minimum_order}}</b>
          </p>
          <p>Tiempo de Entrega : <b>{{$settings->delivery_time}}</b></p> 
        </div>

        <div id="menu_upper_pickup_cont" style="display: none;">
          <select class="form-control" name="pickup_time" id="pickup_time">
            @include('pickup_timings')
          </select>
        </div>

      </div>

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

<div class="container">
  <div id="container_pin">
    
    @if($settings->web_ordering == 0)
    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-warning notice_msg">{{$settings->web_ordering_msg}}</div>
      </div>
    </div>
    @endif
    

    <div class="row">
       <!-- mobile menu categories -->
      <div class="col-md-12">
        <select class="form-control hidden-md hidden-lg" name="menu_mobile" id="mm" style="margin-bottom:20px">
          @if(isset($menu_items) && !empty($menu_items))
          <option value="">Menu</option>          
          @foreach($menu_items as $row)  
            <optgroup label="{{$row->name}}">
              @foreach($row->categories as $cat)
              <option value="menu_{{$cat->id}}">{{$cat->category_name}}</option>
              @endforeach
            </optgroup>
          @endforeach
          @endif
        </select>
      </div>

      <div class="col-md-12">
          <ul class="list-group hidden-md hidden-lg">
            @if(isset($menu_items) && !empty($menu_items))
            @foreach($menu_items as $row)  
            <a href="#cat_{{$row->id}}" style="color:#222; font-size:18px; text-align:center"><li class="list-group-item">{{$row->name}}</li></a>
            @endforeach
            @endif
          </ul>
        </div>
    </div>

    <div class="row">
      <div class="col-md-2 hidden-sm hidden-xs">
        <div class="pin-wrapper">
          <div class="box_style_1 cart_box_animate">
            <ul id="cat_nav">
              @if(isset($menu_items) && !empty($menu_items))              
              @foreach($menu_items as $row)
              
              @if($row->name == 'RESTAURANTE')
               @php $bgcolor = '#BBDDE6';@endphp
              @elseif($row->name == 'PANADERÍA')
               @php $bgcolor = '#BBDDE6';@endphp
              @elseif($row->name == 'PASTELERÍA')
               @php $bgcolor = '#BBDDE6';@endphp
              @elseif($row->name == 'PARA PREPARAR EN CASA')
               @php $bgcolor = '#BBDDE6';@endphp
              @endif

              <li><a style="background-color:{{$bgcolor}};color:#333; font-size:14px" href="#category_{{$row->id}}" title="{{$row->name}}" class="menu_cat">{{$row->name}}</a></li>
              @foreach($row->categories as $cat)
              <li class=""><a href="#menu_{{$cat->id}}" title="{{$cat->category_name}}" class="menu_cat">{{$cat->category_name}}</a></li>
              @endforeach
              @endforeach
              @endif
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-sm-12">
        
        @if(isset($close_flag) && $close_flag == 0)
        <div class="close_msg">
          <div class="alert alert-danger">
            <h4>{{$close_msg}}</h4>
          </div>
        </div>
        @endif

        @if(isset($menu_items) && !empty($menu_items))
        @foreach($menu_items as $row)

        <div id="category_{{$row->id}}">
          <div id="cat_{{$row->id}}" class="cat_menu">

          @if($row->name == 'RESTAURANTE')
            @php $bgcolor = '#BBDDE6';@endphp
          @elseif($row->name == 'PANADERÍA')
            @php $bgcolor = '#BBDDE6';@endphp
          @elseif($row->name == 'PASTELERÍA')
            @php $bgcolor = '#BBDDE6';@endphp
          @elseif($row->name == 'PARA PREPARAR EN CASA')
            @php $bgcolor = '#BBDDE6';@endphp
          @endif
          
          <h3 style="background-color:{{$bgcolor}};color:#333;">{{$row->name}}</h3>

            @foreach($row->categories as $row)
            
              <div id="menu_{{$row->id}}">
                <div class="box_style_2" id="main_menu">
                  <h3>{{$row->category_name}}</h3>
                  @if(!empty($row->image))
                  <div class="cat_banner" style="background: url({{asset('/laravel_code/public/category/' . $row->image)}}); background-position: center;">
                  </div>
                  @endif
                  @if($row->category_description !='')
                  <p>{{$row->category_description}}</p>
                  @endif

                  @if(!empty($row->menu_items))
                  @foreach($row->menu_items as $mi)
                  

                  <div class="row">
                    <div class="cart-list menustyling">
                      <div class="col-md-7 col-sm-12">
                        @if($mi->schedule == 1)
                          <p style="color:red"><small>Disponible ({{date('h:i A', strtotime($mi->activation)) .' - '.date('h:i A', strtotime($mi->deactivation))}}  )</small></p>                  
                        @endif

                        @if($mi->buy == 1)
                        <p class="alert alert-warning buy">Compre hoy Entregamos mañana, enviado 24 horas después de su pedido</p>
                        @endif
                        <h5>{{$mi->menu_item_name}}</h5>
                        <p><i><small>( @if($mi->order_type == 'Delivery & Pickup') Domicilio & Recoger @else {{$mi->order_type}} @endif )</small></i></p>
                        @if($mi->image != "")
                            <img width="120" height="120" src="{{asset('/laravel_code/public/menu/' . $mi->image)}}">
                        @endif
                        <p>{{$mi->description}} </p>
                      </div>
                      <div class="col-md-5 col-sm-12">
                        @if(!empty($mi->prices))
                        @php $i=0; @endphp
                        @foreach($mi->prices as $p)
                        <div class="row">
                          <div class="col-md-7 col-sm-12">
                            <div class="food_prices">
                              @if(isset($p->flat_discount) && $p->flat_discount != '')
                              <label class="label label-success">{{$p->discount}}% Discount</label><br>
                              @endif

                              @if(isset($p->flat_discount) && $p->flat_discount != '')
                              <span class="price_item" style="text-decoration: line-through;">{{env('CURRENCY')}}
                              {{ number_format($p->price) }}</span>
                              <span class="price_item text-success">{{env('CURRENCY')}} {{$p->flat_discount}}</span>
                              @else
                              <span class="price_item">{{env('CURRENCY')}} {{ is_numeric($p->price) ? number_format($p->price) : $p->price }}</span>
                              @endif
                              <br>
                              {{$p->title}}
                            </div>
                          </div>
                            
                            @if(!$hasToday)
                          <div class="col-md-5 col-sm-12">

                            @if($settings->web_ordering == 1)
                            @if($mi->schedule == 1)
                              @php
                                $date1 = strtotime("now");
                                $date2 = strtotime($mi->activation);
                                $date3 = strtotime($mi->deactivation);
                              @endphp
                              @if ($date1 > $date2 && $date1 < $date3)
                              <div class="cart_btn_cont">
                                <a class="cart_btn @if(sizeof($p->addons)>0) menu_addons @else add_to_cart @endif" 
                                  data-category-id="{{$row->id}}"
                                  data-category-name="{{$row->category_name}}" 
                                  data-menu-item-id="{{$mi->id}}"
                                  data-item-name="{{$mi->menu_item_name}}" 
                                  data-item-description="{{$mi->description}}" 
                                  data-price-id="{{$p->id}}"
                                  data-price-title="{{$p->title}}"
                                  data-discounted-price="{{isset($p->flat_discount)?$p->flat_discount:'0'}}"
                                  data-discount="{{isset($p->discount)?$p->discount:'0'}}"
                                  data-price="@if(isset($p->flat_discount)) {{round($p->flat_discount,3)}} @else {{round($p->price,3)}} @endif"
                                  data-actual-discount="@if(isset($p->actual_discount)) {{$p->actual_discount}} @else 0.00 @endif"
                                  data-options="false"
                                  data-buy="{{$mi->buy}}">
                                  Add
                                </a>
                              </div>
                              @endif
                            @else
                            <div class="cart_btn_cont">
                              <a class="cart_btn @if(sizeof($p->addons)>0) menu_addons @else add_to_cart @endif" 
                                data-category-id="{{$row->id}}"
                                data-category-name="{{$row->category_name}}" 
                                data-menu-item-id="{{$mi->id}}"
                                data-item-name="{{$mi->menu_item_name}}" 
                                data-item-description="{{$mi->description}}" 
                                data-price-id="{{$p->id}}"
                                data-price-title="{{$p->title}}"
                                data-discounted-price="{{isset($p->flat_discount)?$p->flat_discount:'0'}}"
                                data-discount="{{isset($p->discount)?$p->discount:'0'}}"
                                data-price="@if(isset($p->flat_discount)) {{round($p->flat_discount,3)}} @else {{round($p->price,3)}} @endif"
                                data-actual-discount="@if(isset($p->actual_discount)) {{$p->actual_discount}} @else 0.00 @endif"
                                data-options="false"
                                data-buy="{{$mi->buy}}">
                                Add
                              </a>
                            </div>
                            @endif

                            <!-- <hr> -->
                            @endif
                          </div>
                          @endif
                        </div>
                        @php $i++; @endphp
                        @if(sizeof($mi->prices) > $i)<hr>@endif
                        @endforeach
                        @endif
                      </div>
                    </div>
                  </div>

                    <hr>
                  @endforeach
                  @endif
                  
                </div>
              </div>

            @endforeach
          </div>
        </div>
        @endforeach
        @endif
      </div>

      <div class="col-md-4">
        <div id="cart" class="cart-page-area cart_box_animate">

          <div class="cart-page-top table-responsive" id="cart__container">
            <div class="cart_items_container">
              <table class="table table-hover cart">
                <thead>
                  <tr>
                    <td></td>
                    <td>Items</td>
                    <td class="text-center">Cantidad</td>
                    <td class="text-center">Total</td>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>

            <div class="empty_cart">
              <img src="{{asset('assets/front/img/bag.png')}}">
              <p>Explore nuestro menú y comience a agregar artículos a su pedido</p>
            </div>

            <hr>

            <div class="cart-page-bottom-right">
              <h3>Subtotal <span class="subtotal"></span></h3>
              <h3>Impuesto <span class="tax">0</span></h3>
              <h3 class="delivery__cart">Domicilio <span class="delivery__cart_value">0</span></h3>
              <h3>Total <span class="Total"></span></h3>
              
              <textarea class="form-control si" id="si" placeholder="Special Order Instructions"></textarea>

              <div class="alert alert-danger" style="display:none;" id="minimum_order_error"></div>

              @if($settings->web_ordering == 1)
              <div class="row">
                <div class="col-sm-6">
                  <button class="btn btn-default guest_ck_btn proceed_to_check_out">Invitados Checkout</button>
                </div>
                <div class="col-sm-6">
                  @if(Auth::guard('customer')->check())
                  <button type="button" class="btn-apply-coupon proceed_to_check_out">Checkout</button>
                  @else
                  <a href="{{route('signinPage',['from' => Request::segment(1)])}}" class="btn-apply-coupon">Checkout</a>
                  @endif
                </div>
              </div>
              @endif

            </div>

          </div>

        </div>
      </div>

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

<div class="modal fade menuOptions" id="menuOptions" tabindex="-1" role="dialog" aria-labelledby="menuOptionsLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="menuOptionsContainer"></div>
        </div>
    </div>
</div>

<div class="alert alert-success" id="add_to_cart_alert">Item added to cart</div>

@section('js')
<script type="text/javascript" src="{{ asset('assets/front/js/pin.js') }}"></script>
<script type="text/javascript">
var ls = "{{env('LS')}}";
$(function () {
  $("#orderTypeGroup input:radio").change(function() {
    var value = $("input[type='radio'][name='orderType']:checked").val();
    if (value == 'delivery') {
      $('#menu_upper_delivery_cont').show();
      $('#menu_upper_pickup_cont').hide();
    }else{
      $('#menu_upper_delivery_cont').hide();
      $('#menu_upper_pickup_cont').show();
    }
  });

  var $root = $('html, body');
  $('a.menu_cat').click(function () {
      $root.animate({
          scrollTop: $($.attr(this, 'href')).offset().top -82,
      }, 1000);
      
      return false;
  });

  $(".cart_box_animate").pin({
    padding: {
      top: 105,
      bottom: 25
    },
    minWidth: 1100,
    containerSelector: "#container_pin"
  });

});

  $(".menu_addons").on('click', function () {
    var click = $(this);
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
        type: 'POST',
        url: '{{ route("getMenuOptions") }}',
        data: {
            category_id:$(this).attr('data-category-id'),
            category_name:$(this).attr('data-category-name'),
            item_id:$(this).attr('data-menu-item-id'),
            item_name:$(this).attr('data-item-name'),
            item_description:$(this).attr('data-item-description'),
            item_price:$(this).attr('data-price'), 
            item_price_id:$(this).attr('data-price-id'),
            item_price_title:$(this).attr('data-price-title'),
            discounted_price:$(this).attr('data-discounted-price'),
            discount:$(this).attr('data-discount'),
            actual_discount:$(this).attr('data-actual-discount'),
            _token: CSRF_TOKEN
        },
        success: function (response) {
            $('#menuOptions .menuOptionsContainer').html(response);
            $('#menuOptions.modal').modal('show');
        },
    });

  });

  $("body").on("click", ".proceed_to_check_out", function (event) {
    
    var order_type = '';
    var order_type = $('input[name="orderType"]:checked').val();
    localStorage.setItem(ls+'_order_type',order_type);
    var minimum_order = localStorage.getItem(ls+'_minimum_order');
    var subtotal = localStorage.getItem(ls+'_subtotal');
    if (parseInt(subtotal) >= parseInt(minimum_order)) {
      window.location.href = "{{ route('checkout') }}";
    } else {
      $('#minimum_order_error').slideDown().html('Minimum order should be ' + minimum_order);
    }
    localStorage.setItem(ls+'_si',$('#si').val());
    
    const cartData = localStorage.getItem(ls+'_cart');
    if (cartData) {
      try {
        const cart = JSON.parse(cartData);
        let hasBuy1Item = false;
        if (Array.isArray(cart)) {
            hasBuy1Item = cart.some(item => item.buy === "1");
        }
        localStorage.setItem('cart_with_NDO', hasBuy1Item ? 'true' : 'false');
      } catch (error) {
        localStorage.setItem('cart_with_NDO', 'false');
      }
    }
    
  });
  localStorage.setItem(ls+'_pickup_time',$('#pickup_time').val());
  
  $(window).scroll(function(e){ 
    var $el = $('.fixedElement'); 
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 500 && !isPositionFixed){ 
      $el.css({'position': 'fixed', 'top': '110px'}); 
    }
    if ($(this).scrollTop() < 500 && isPositionFixed){
      $el.css({'position': 'static', 'top': '110px'}); 
    } 
  });

</script>
@endsection
@endsection