@extends('layouts.main')
@section('content')

    <div class="body-content food_page" ng-app="food_app" ng-controller="filterController">
    <div class="take-out-container">
        <div class="meal-slider-container">
            <div class="centered">
                <h2>
                    Redeem Delicious Meal Today And Get Them Delivered To Your Doorstep
                </h2>
            </div>
            <img src="{{asset('images/meal-images/takeoutbanner.png')}}" width="100%" />
        </div>
        <div class="search-restaurant-container">
            <div class="row">
                <div class="col-6 col-md-5 modal-form-container">
                    <div>
                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
                        <i ng-show="searching_states" class="fa fa-spinner fa-spin process_indicator"></i>
                        <select name="filter_state" class="form-control" placeholder="Select State" ng-init="loadStates()" ng-model="restaurant_state" ng-change="findCities()">
                            <option value="" selected="selected">Select State</option>
                            <option ng-repeat="(index, state) in states" value="@{{ state._id }}" ng-selected="@{{$first == 1}}">
                                @{{ state.name }}
                            </option>
                        </select>
                        <label class="take-out-label" for="filter_state">State:</label>

                    </div>
                </div>
                <div class="col-6 col-md-5 modal-form-container">
                    <div>
                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                        <select name="filter_city" class="form-control" placeholder="Select city" ng-model="city">
                            <option value="" selected="selected">Select City</option>
                            <option ng-repeat="(index, city) in cities" value="@{{ city._id }}" ng-selected="@{{$first == 1}}">
                                @{{ city.name }}
                            </option>
                        </select>
                        <label class="take-out-label" for="filter_city">City:</label>
                        <i ng-show="searching_cities" class="fa fa-spinner fa-spin process_indicator"></i>
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <button style="width: 100%;" type="button" class="btn btn-primary btn-lg" ng-click="findRestaurant()" ng-disabled="searching_restaurants || searching" id="search_restaurant">
                        <i ng-show="searching_restaurants" class="fa fa-spinner fa-spin process_indicator"></i> Find restaurant
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div id="tt-pageContent">
        <h3 ng-show="!loaded_newrestaurants" class="text-center black-text">Featured Restaurants</h3>
        <h3 ng-show="loaded_newrestaurants" class="text-center">Restaurants</h3>

        <div class="content-wrapper container row" ng-show="loading_restaurants">
            <div class="placeholder col-sm-3">
                <div class="animated-background"></div>
            </div>
            <div class="placeholder col-sm-3">
                <div class="animated-background"></div>
            </div>
            <div class="placeholder col-sm-3">
                <div class="animated-background"></div>
            </div>
            <div class="placeholder col-sm-3">
                <div class="animated-background"></div>
            </div>
        </div>

        <div class="container-fluid restaurants_box_container ng-cloak row" ng-show="loaded_newrestaurants" id="restaurants">
            <div class="col-sm-6 mover" ng-repeat="item in restaurants">
                <div class="restaurants_item_container">
                    <div class="logo_container">
                        <a href="{{url('food/restaurant')}}/@{{ removeChars(item.name) | lowercase }}__@{{ item._id }}">
                            <img src="@{{getImage(item.logo)}}" alt="" class="img-responsive">
                        </a>
                    </div>
                    <div class="content_container">
                        <a href="{{url('food/restaurant')}}/@{{ removeChars(item.name) | lowercase }}__@{{ item._id }}"><h4> @{{ item.name }}</h4></a>
                        <p><i class="fa fa-map-marker" aria-hidden="true"></i> @{{ processAddress(item) }}</p>
                        <p><i class="fa fa-clock-o" aria-hidden="true"></i>  Weekdays : @{{ item.openings.weekdays }} , Weekends:  @{{ item.openings.weekends }}m </p>
                        <p><i class="fa fa-cutlery" aria-hidden="true"></i>  Cuisines: @{{ processCuisine(item) }} </p>
                    </div>
                </div>
            </div>

        </div>

        <div class="container-fluid restaurants_box_container row" ng-cloak ng-show="!loaded_newrestaurants" ng-init="loadFeaturedRestaurants()">
            <div class="col-sm-6 mover" ng-repeat="item in featured_restaurants">
                <div class="restaurants_item_container">
                    <div class="logo_container">
                        <a href="{{url('food/restaurant')}}/@{{ removeChars(item.name) | lowercase }}__@{{ item._id }}">
                            <img src="@{{getImage(item.logo)}}" alt="" class="img-responsive">
                        </a>
                    </div>
                    <div class="content_container">
                        <a href="{{url('food/restaurant')}}/@{{ removeChars(item.name) | lowercase }}__@{{ item._id }}"><h4> @{{ item.name }}</h4></a>
                        <p><i class="fa fa-map-marker" aria-hidden="true"></i> @{{ processAddress(item) }}</p>
                        <p><i class="fa fa-clock-o" aria-hidden="true"></i>  Weekdays : @{{ item.openings.weekdays }} , Weekends:  @{{ item.openings.weekends }}m </p>
                        <p><i class="fa fa-cutlery" aria-hidden="true"></i>  Cuisines: @{{ processCuisine(item) }} </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center" style="padding: 50px;" ng-show="loaded_newrestaurants">
            <button class="custom_button_color btn btn-lg" ng-click="loadMoreRestaurants()" ng-show="show_loadmore"><i class="fa fa-spinner fa-spin process_indicator" ng-show="loading_more_restaurants"></i> Load more</button>
        </div>
    </div>
    </div>



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



    <script>
        var baseUrl = "