@extends('layouts.main')
@section('content')
    {!! csrf_field() !!}
        <div class="body-content mt30">
            <div class='container'>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-3 sidebar">
                              {{--<pre>--}}
                                {{--@php--}}
                                    {{--var_dump($meals_products)--}}
                                {{--@endphp--}}
                            {{--</pre>--}}
                            <div class="side-menu animate-dropdown outer-bottom-xs">
                                <div class="head">Categories</div>
                                <nav class="yamm megamenu-horizontal">
                                    <ul class="nav">
                                        @if(isset($meals_products->data))
                                            @foreach($meals_products->data->data as $category)
                                                <li class="dropdown menu-item">
                                                    <a title="" href="#{{str_slug($category->category_name)}}" class="meal_cat_link">{{$category->category_name}}</a>
                                                </li>
                                            @endforeach
                                        @else
                                            <li class="dropdown menu-item">
                                                <a title="" href="#">Failed to load categories</a>
                                            </li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    <div class="col-12 col-sm-12 col-md-9 homebanner-holder" style="margin-bottom: 50px;">
                        <div class="">

                            @if(isset($meals_products->data))
                                    @if(isset($meals_products->data->data))
                                        @foreach($meals_products->data->data as $category)
                                            @php $itemcountid = 0; @endphp
                                            {{--Meals under category--}}
                                            <div class="row meals_branch_food_category" id="{{str_slug($category->category_name)}}">
                                                <div class="col-12 grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }' style="margin-bottom: 30px;">
                                                        <h3 class="title-tag" style="padding: 10px">{{ucwords($category->category_name)}}</h3>
                                                </div>
                                                @if(count($category->data) > 0)
                                                    @foreach($category->data as $index => $meal)
                                                        @php $itemcountid++ @endphp
                                                        <div class="col-sm-3 col-12 meal_item grid-item">
                                                            <div class="meal_item_container"
                                                                 data-itemid = "{{$itemcountid}}"
                                                                 data-itemname = "{{$meal->product_name}}"
                                                                 data-itempoints = "{{$meal->price}}"
                                                                 data-itemcode = "{{$meal->signature}}"
                                                                 data-product_image = "{{$meal->image[0]->image_url}}"
                                                            >
                                                                <div class="meal_item_img_container">
                                                                    <img src="{{$meal->image[0]->image_url}}" alt="{{$meal->product_name}}" class="img-responsive meals_item_img">
                                                                </div>
                                                                <div class="meal_item_details"
                                                                     {{--data-itemid = {{$meal->signature}}--}}
                                                                     data-itemid = "{{$itemcountid}}"
                                                                     data-itemname = "{{$meal->product_name}}"
                                                                     data-itempoints = "{{$meal->price}}"
                                                                     data-itemcode = "{{$meal->signature}}"
                                                                     data-product_image = "{{$meal->image[0]->image_url}}"
                                                                >
                                                                    <h5 title="{{$meal->product_name}}">{{str_limit(ucwords($meal->product_name), 20)}}</h5>
                                                                    <div class="meal_item_price_container">
                                                                        @if(Auth::check())
                                                                            @if(Auth::user()->currency->is_currency_fixed == '1')
                                                                                <span class="">&#8358;{{ (transform_product_price($meal->price, 1)) }}</span>
                                                                            @else
                                                                                <span class="">@php echo (transform_product_price($meal->price, Auth::user()->currency->rate) ) @endphp {{Auth::user()->currency->currency}}</span>
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                    <div class="checkout_options">
                                                                        @if($meal->delivery_type == 2)
                                                                            <div>
                                                                                <input type="radio" value="2" name="delivery" data-signature="{{$meal->signature}}" checked="checked" >Delivery
                                                                            </div>
                                                                            <div>
                                                                                <input type="number" min="1" max="{{$meal->max_quantity}}" value="1" class="form-control" >
                                                                            </div>
                                                                        @elseif($meal->delivery_type == 1)
                                                                            <div>
                                                                                <input type="number" min="1" max="{{$meal->max_quantity}}" value="1" class="form-control">
                                                                            </div>
                                                                            <label>
                                                                                <input type="radio" value="1" name="pickup-{{$meal->signature}}" data-signature="{{$meal->signature}}" checked="checked" >Pickup
                                                                            </label>
                                                                            <input type="hidden" class="p_location" value="{{$meal->branch_details[0]->branch_id}}" >

                                                                        @elseif($meal->delivery_type == 3)
                                                                            <label>
                                                                                <input type="radio" value="2" name="meal_radio" class="meal_delivery" data-id="{{$index}}" data-signature="{{$meal->signature}}" > Delivery
                                                                            </label>
                                                                            <label>
                                                                                <input type="radio" value="1" name="meal_radio" class="meal_pickup" data-id="{{$index}}" data-signature="{{$meal->signature}}"> Pickup
                                                                            </label>
                                                                            <div class="meals_qty_loc">
                                                                                <div>
                                                                                    <select class="form-control" id="{{$index}}">
                                                                                        <optgroup>
                                                                                            <option value="null">Select Location</option>
                                                                                            @foreach ($meal->branch_details as  $detail)
                                                                                                <option value="{{$detail->branch_id}}" >{{$detail->branch_name}}</option>
                                                                                        </optgroup>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                                <div>
                                                                                    <input type="number" min="1" max="{{$meal->max_quantity}}" value="1" class="form-control float-right" >
                                                                                </div>
                                                                        @endif
                                                                    </div>
                                                                        <div>
                                                                            <button class="btn btn-md btn-primary add_to_basket add_to_basket_btn"> <i class="fa fa-spinner fa-spin checkoutbtn off"></i> Add to cart</button>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <p class="empty_cat_notification">No items for the category</p>
                                                @endif
                                            </div>
                                        @endforeach
                                    @endif

                                <!-- .products -->
                            @else
                                <p><i class="fa fa-info-circle"> </i>No Products available</p>
                                                @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('style')
            <link rel="stylesheet" type="text/css" href="{{asset('css/alertui.min.css')}}">
            <style>
        label{
            padding: 5px 0
        }
        .empty_cat_notification{
            padding: 5px 25px;
        }
        .add_to_basket{
            width: 100%;
        }
        input[type=radio], input[type=checkbox] {
            margin: 4px 5px 0;
        }
    </style>
@endpush

@push('script')
            <script>
                $('body').addClass('meal-bg');
            </script>

    <script src="{{asset('js/theia-sticky-sidebar.js')}}"></script>
            <script src="{{asset('js/alertui.min.js')}}"></script>
            {{--<script src="{{asset('sigma/js/masonry.pkgd.min.js')}}"></script>--}}
    <script>
        $('.sidebar').theiaStickySidebar({
            // Settings
            additionalMarginTop: 70
        });
        //    Smooth scroll
        var scrollLink = $('.meal_cat_link');
        //Scroll Animation Effect
        scrollLink.on('click', function(e){
            e.preventDefault()
            $('body, html').animate( {scrollTop: $(this.hash).offset().top - 50
            }, 500)
        })
    </script>
    <script>
        'use strict'
        String.prototype.trunc =
            function(n){
                return this.substr(0,n-1)+(this.length>n?'&hellip;':'');
            };

        var cart = [];
        var viewCart = [];
        var item;
        var addtocartbtn;
        var baseUrl = "