@extends('layouts.main')
@section('content')
    <div class="body-content food_page" ng-app="food_app" ng-controller="mealsController">


        <div class="banner">
            <div class="breadcrumb">
                <div class="container">
                    <div class="breadcrumb-inner">
                        <ul class="list-inline list-unstyled">
                            <li><a href="{{url('/')}}">Home</a></li>
                            <li class='active'>Food</li>
                        </ul>
                    </div>
                    <!-- /.breadcrumb-inner -->
                </div>
            </div>
            <div class='container'>
                <div id="category" class="category-carousel">
                    <div class="item">
                        <div class="image"> <img src="https://food-server.nairabox.com/uploads/{{$restaurant->banner}}" alt="" class="img-responsive"> </div>
                    </div>
                </div>
            </div>

            <div class="container" style="padding-bottom: 10rem;">
                <div class="row">
                    <div class="col-sm-8">
                        <div class="row">
                                {{--<pre>--}}
                                        {{--@php(var_dump($restaurant))--}}
                                    {{--</pre>--}}
                            <div class="col-sm-12 restaurant_container">
                                <div class="logo_container">
                                        <img src="https://food-server.nairabox.com/uploads/{{$restaurant->logo}}" alt="" class="img-responsive" style="">
                                </div>
                                <div class="content_container">{{$restaurant->name}}</h4>
                                    <p><i class="fa fa-map-marker" aria-hidden="true"></i> {{$restaurant->address}}</p>
                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i>  Weekdays : {{ $restaurant->openings->weekdays }} , Weekends:  {{ $restaurant->openings->weekends }} </p>
                                    <p><i class="fa fa-cutlery" aria-hidden="true"></i>  Cuisines:
                                        @foreach($restaurant->cuisines as $index => $cuisine)
                                            <span>{{$cuisine->cuisine->name}}</span>@if($index < count($restaurant->cuisines) -1 ), @endif
                                            @endforeach
                                    </p>
                                </div>
                            </div>
                            </div>

                        <div class="row" ng-init="loadMeals()">
                        <div class="col-sm-4 restaurant_categories sidebar">
                            <div class="side-menu animate-dropdown outer-bottom-xs">
                                <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> Categories</div>
                                <nav class="yamm megamenu-horizontal">
                                    <ul class="nav">
                                                    <li class="dropdown menu-item" ng-repeat="category in state.meals.data">
                                                        <a title="" href="#@{{category.slug}}" class="menu_category">@{{category.category_name}}</a>
                                                    </li>

                                                        <li class="dropdown menu-item" ng-if="state.menu_error">
                                            <a title="" href="#"><span ng-if="state.menu_error">@{{ state.error_message }}</span></a>
                                                        </li>
                                        </li>
                                    </ul>
                                    <!-- /.nav -->
                                </nav>
                                <!-- /.megamenu-horizontal -->
                            </div>
                        </div>

                        <div class="col-sm-8 restaurant_menu">
                            <input type="text" class="search_menu" ng-model="search_input" placeholder="Search here...">
                            <div class="restaurant_menu_container">
                            <div class="restaurant_menu_head">
                            menu
                            </div>
                            <div class="restaurant_menu_body">
                                <h5 ng-if="state.menu_error">@{{ state.error_message }}</h5>
                           <div ng-repeat="category in state.meals.data" id="#@{{category.slug}}">
                            <h4 >@{{category.category_name}}</h4>
                                <div class="meal_item mover" ng-repeat="meal in category.products | filter : search_input">
                                    <div>
                                    <h4>@{{meal.name}}</h4>
                                    <p>@{{  state.appCurrencyFixed == 1 ? "&#8358;"+meal.amount : meal.amount + ' ' +state.appCurrency}}</p>
                                    </div>
                                    <div>
                                        <i class="fa fa-plus-circle" aria-hidden="true" ng-click="addToCart(meal.id)"></i>
                                    </div>
                                </div>
                           </div>

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

                    </div>
                    </div>

                    <div class="col-sm-4 right-sidebar">
                    <div class="cart_container">
                    <div class="cart_header custom_bg_color">
                        Your Order
                    </div>
                        <div class="cart_body">
                            <div class="cart_item mover" ng-repeat="item in state.cart track by $index">
                            <i class="fa fa-trash" ng-click="popFromCart(item.id)"></i>
                                <p title="@{{ item.name}}">@{{ item.name | limitTo:28 }} <span class="qty">x@{{ item.qty }}</span></p>
                                <p class="amount">@{{  state.appCurrencyFixed == 1 ? "&#8358;"+item.amount : item.amount + ' ' +state.appCurrency}}</p>

                            </div>
                        </div>
                        <div class="cart_footer" ng-class="">
                            <span>Total: </span>
                            <span>@{{  state.appCurrencyFixed == 1 ? "&#8358;"+state.cart_total  : state.cart_total  + ' ' +state.appCurrency}}</span>

                            <div ng-if="state.cart.length">
                                <hr>
                                <div>
                                    <h4 style="text-align: left">Delivery details</h4>
                                    <form action="">
                                        <div class="form-group">
                                        <input type="text" name="address" class="form-control" placeholder="Delivery address" ng-model="state.delivery_details.address" ng-disabled="state.redeeming">
                                            <br>
                                        <input type="text" name="phone" class="form-control" placeholder="Phone number" ng-model="state.delivery_details.phone" ng-disabled="state.redeeming">
                                            <br>
                                            <input type="email" name="email" class="form-control" placeholder="Email address" ng-model="state.delivery_details.email" ng-disabled="state.redeeming">
                                            <br>
                                        <input type="text" name="instructions" class="form-control" placeholder="Delivery note" ng-model="state.delivery_details.note" ng-disabled="state.redeeming">

                                            <input type="hidden" name="costfood" ng-model="state.delivery_details.costfood" ng-disabled="state.redeeming">
                                            <input type="hidden" name="costdelivery" ng-model="state.delivery_details.costdelivery" ng-disabled="state.redeeming">
                                            <input type="hidden" name="totalcost" ng-model="state.delivery_details.totalcost" ng-disabled="state.redeeming">
                                            <input type="hidden" name="signature" ng-model="state.delivery_details.signature" ng-disabled="state.redeeming">

                                        </div>
                                        <div class="foodCartSummary">
                                            <h5 class="costFood" ng-modal="state.delivery_details.cost_display" ng-hide="state.costing"><b>@{{ state.costFood }}</b></h5>
                                            <h5 class="costDelivery" ng-modal="state.delivery_details.delivery_display" ng-hide="state.costing"><b>@{{ state.costDelivery }}</b></h5>
                                            <h2 class="totalCost" ng-modal="state.delivery_details.total_display" ng-hide="state.costing"><b>@{{ state.totalCost }}</b></h2>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <button ng-show="!state.ready_to_pay" class="btn custom_button_color pd_btn" ng-click="redeem()" title="Process delivery"> <i class="fa fa-spinner fa-spin process_indicator" ng-show="state.redeeming"></i> Process delivery</button>

                        <button ng-show="state.ready_to_pay" class="btn custom_button_color pd_btn" ng-click="placeOrder()" title="Place Order"> <i class="fa fa-spinner fa-spin process_indicator" ng-show="state.placeOrder"></i> Confirm Order</button>
                    </div>
                    </div>
                </div>
            </div>
    </div>
    </div>

@endsection
@push('script')
    <script src="{{asset('sigma/js/angular.min.js')}}"></script>
    <script src="{{asset('sigma/js/angular-resource.min.js')}}"></script>
    <script src="{{asset('sigma/js/angular-animate.min.js')}}"></script>
    <script src="{{asset('sigma/js/alertui.min.js')}}"></script>
    <script src="{{asset('assets/js/theia-sticky-sidebar.js')}}"></script>

    <script>

        $(document).ready(function() {
            $('.right-sidebar, .sidebar').theiaStickySidebar({
                // Settings
                additionalMarginTop: 30
            });
               // Smooth scroll
            var scrollLink = $('.menu_category');
            console.log($(scrollLink[0].hash))
            //Scroll Animation Effect
            scrollLink.on('click', function (e) {
                console.log($(this.hash))
                e.preventDefault()
                $('body, html').animate({
                    scrollTop: $(this.hash).offset().top - 50
                }, 500)
            })
        });


        var baseUrl = "