@extends('welcome')

@section('content')

    <div class="container">

        <div class="row valign-wrapper">
            <div class="col s2 m2 14">
                <a class="left bag" href="{{ url('my-bag/'. $fbid .'/'. $brand_id)  }}" style="cursor: pointer;"><i class="material-icons small">shopping_bag</i></a>
            </div>
            <div class="col s8 center-align">
                <span class="center-align"><p><b>Customize Meal</b></p></span>
            </div>
            <div class="col s2 m2 14">
                <a class="right close close-alacart" style="cursor:pointer;"><i class="material-icons small">close</i></a>
            </div>
        </div>

        <form id="alacarteForm">

            <input type="hidden" id="fbid" value="{{$fbid}}">
            <input type="hidden" id="main-item-size">
            <input type="hidden" id="upsells">
            <input type="hidden" id="instructions">

            @foreach($main_item_data as $key => $value)
                <input type="hidden" id="brand_id" value="{{$value['brand_id']}}">
                <input type="hidden" id="main-item-count">
                
                <div class="card main-item" 
                    data-id="{{$value['id']}}" 
                    data-brand_id="{{$value['brand_id']}}" 
                    data-menu_category_id="{{$value['menu_category_id']}}"
                    data-menu_food_layout_id="{{$value['menu_food_layout_id']}}"
                    data-pos_code="{{$value['pos_code']}}"
                >
                    <div class="row valign-wrapper">
                        <div class="col s7 m7 l7 push-s5 push-m5 push-l5">
                            <p id="main-item-name" data-main_item_name="{{$value['name']}}"><b>{{$value['name']}}</b></br>
                            <small>{{$value['description']}}</small><br><br>
                            <span class="left-align main-item-price" data-main_item_price="{{$value['price']}}"><b>{{$value['price']}}</b></span></p>

                            <div class="row valign-wrapper">

                                <!-- @if($value['menu_food_layout']['id'] != 1)
                                <div class="col s6">
                                    <small>
                                        <a class="left-align to-meal" style="cursor: pointer;" onclick="toMeal()">Change to Meal</a>
                                    </small>
                                </div>
                                @else
                                @endif -->

                                <div class="col s6 left-align">
                                    <button class="waves-effect waves-light btn btn-small btn-floating" type="button" id="dec">-</button>
                                    <span id="value" class="">1</span>
                                    <button class="waves-effect waves-light btn btn-small btn-floating" type="button" id="inc">+</button>
                                </div>
                            </div>
                        </div>
                        <div class="col s5 m5 l5 pull-s7 pull-m7 pull-l7">
                            @if($value['photo'] != "")
                                <img src="https://qsr.wetrainbots.com/new_qsr/public/uploads/menu-building/{{$value['photo']}}" alt="" data-photo="{{$value['photo']}}" class="responsive-img" id="main-item" width="300" height="300">
                            @else
                                <img src="{{asset('/img/No-Image-Placeholder.png')}}" alt="" class="responsive-img">
                            @endif
                        </div>

                        
                    </div>
                </div>
            @endforeach

            <!-- Variants Size -->
            @if($inclusion_variances_data == [])
            @else
                <div class="card">
                    <div class="row valign-wrapper">
                        <div class="col s7 m7 l7 push-s5 push-m5 push-l5 left-align horizontal-scroll">

                            @foreach($inclusion_variances_data as $data)

                            <button class="btn btn-small btn-checkbox main-item-variant" 
                                data-id="{{$data['id']}}" 
                                data-mbi_inclusion_id="{{$data['mbi_inclusion_id']}}" 
                                data-menu_store_item_variance_id="{{$data['menu_store_item_variance_id']}}"
                                data-price="{{$data['price']}}"
                                data-store_item_id="{{$data['store_item_id']}}"
                                data-name="{{$data['name']}}"
                                data-description="{{$data['description']}}"
                                data-image="{{$data['image']}}"
                                data-pos="{{$data['pos_code']}}"
                            >
                            {!! Str::words($data['name'], 1, ' ...') !!}</button>

                            @endforeach
                        
                        </div>
                        <div class="col s5 m5 l5 pull-s7 pull-m7 pull-l7 flo">
                            <p><b>Choose Variant</b></br>
                            <small>(Optional)</small>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Meal Size -->
            @if($inclusion_sizes_data == [])
            @else
                <div class="card">
                    <div class="row valign-wrapper">
                        <div class="col s7 m7 l7 push-s5 push-m5 push-l5 left-align horizontal-scroll">

                            @foreach($inclusion_sizes_data as $data)

                                    @if($data['status'] === 'Y')

                                        <input type="hidden" id="menu_building_id" value="{{$data['mbi_inclusion_id']}}">
                                        
                                        @foreach($main_item_data as $key => $main_item_value)
                                            @if($data['item_size'] == "Small")
                                                    <button class="btn btn-small btn-checkbox main-item-size checked" 
                                                        data-id="{{$data['id']}}" 
                                                        data-mbi-inclusion-id="{{$data['mbi_inclusion_id']}}" 
                                                        data-price="{{$data['price']}}"
                                                        data-size-id="{{$data['size_id']}}" type="button"
                                                        >
                                                
                                                        {{$data['item_size']}}  

                                                    </button>
                                            @else
                                                <button class="btn btn-small btn-checkbox main-item-size" 
                                                    data-id="{{$data['id']}}" 
                                                    data-mbi-inclusion-id="{{$data['mbi_inclusion_id']}}" 
                                                    data-price="{{$data['price']}}"
                                                    data-size-id="{{$data['size_id']}}" type="button"
                                                    >
                                            
                                                    {{$data['item_size']}}    

                                                </button>
                                            @endif
                                        @endforeach

                                    @else
                                    @endif
                            @endforeach

                        
                        </div>
                        <div class="col s5 m5 l5 pull-s7 pull-m7 pull-l7 flo">
                            <p><b>Choose Size</b></br>
                            <!-- <small>(Required)</small> -->
                        </div>
                    </div>
                </div>
            @endif

            <!-- Drinks -->
            <div class="card hide">
                <div class="row valign-wrapper">

                    <div class="col s4">
                        <p><b>Choose Drink</b></br>
                        <small>(Optional)</small>
                    </div>

                    <div class="col s8">
                        
                        <div class="carousel">

                            <div class="carousel-item center-align" data-id="1" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.cokebeverages.ph/4060-medium_default/coca-cola-original-taste-500ml-pack-of-6.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Coke</small><br>
                                    </div>
                                    <div class="card-content">
                                        <span><small><b>₱100</b></small></span>
                                    </div>
                                </div>  
                            </div>


                            <div class="carousel-item center-align" data-id="2" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://down-ph.img.susercontent.com/file/6980e76afef5a7646407426ee2fa5727" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Pepsi</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <div class="card-content">
                                        <span><small><b>₱100</b></small></span>
                                    </div>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>


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

            <!-- Desserts -->
            <div class="card hide">
                <div class="row valign-wrapper">

                    <div class="col s4">
                        <p><b>Choose Dessert</b></br>
                        <small>(Optional)</small>
                    </div>

                    <div class="col s8">
                        
                        <div class="carousel">

                            <div class="carousel-item center-align" data-id="1" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.cokebeverages.ph/4060-medium_default/coca-cola-original-taste-500ml-pack-of-6.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Coke</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>


                            <div class="carousel-item center-align" data-id="2" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://down-ph.img.susercontent.com/file/6980e76afef5a7646407426ee2fa5727" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Pepsi</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>


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

            <!-- Extra -->
            <div class="card hide">
                <div class="row valign-wrapper">

                    <div class="col s4">
                        <p><b>Extras</b></br>
                        <small>(Optional)</small>
                    </div>

                    <div class="col s8">
                        
                        <div class="carousel">

                            <div class="carousel-item center-align" data-id="1" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.cokebeverages.ph/4060-medium_default/coca-cola-original-taste-500ml-pack-of-6.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Coke</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>


                            <div class="carousel-item center-align" data-id="2" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://down-ph.img.susercontent.com/file/6980e76afef5a7646407426ee2fa5727" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Pepsi</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>

                            <div class="carousel-item center-align" data-id="3" id="drink1">
                                <div class="card small">
                                    <div class="card-image">
                                        <img src="https://www.foodnavigator-asia.com/var/wrbm_gb_food_pharma/storage/images/publications/food-beverage-nutrition/foodnavigator-asia.com/headlines/processing-packaging/transparent-is-the-new-green-coca-cola-rolls-out-sprite-clear-bottles-to-seven-apac-countries/11526984-1-eng-GB/Transparent-is-the-new-green-Coca-Cola-rolls-out-Sprite-clear-bottles-to-seven-APAC-countries.jpg" alt="" class="responsive-img">
                                    </div>
                                    <div class="card-content">
                                        <small>Sprite</small><br>
                                    </div>
                                    <span><small><b>₱100</b></small></span>
                                </div>  
                            </div>


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

            @if($upsell_data['statusCode'] == 200 && $upsell_data['data'] != [])
                <!-- Best to go with -->
                <div class="card">
                    <div class="row valign-wrapper">

                        <div class="col s4">
                            <p><b>Best to go with</b></br>
                            <small>(Optional)</small>
                        </div>

                        <div class="col s8">
                            <div class="carousel upsell-carousel">

                                @foreach($upsell_data['data'] as $key => $value)
                                    <div class="carousel-item center-align" data-id="1" id="drink1">
                                        <div class="card small" 
                                            data-id="{{$value['id']}}" 
                                            data-menu-store-item-id="{{$value['menu_store_item_id']}}" 
                                            data-price="{{$value['price']}}"
                                            data-pos-code="{{$value['store_item']['pos_code']}}"
                                            data-menu-type-id="{{$value['store_item']['menu_type_id']}}"
                                            data-brand-id="{{$value['store_item']['brand_id']}}"
                                            data-menu-building-id="{{$value['menu_building_id']}}"
                                            data-menu-category-id="{{$value['menu_category_id']}}"
                                        >
                                            <div class="card-image">
                                                @if($value['store_item']['image'] == null)
                                                    <img src="{{asset('/img/No-Image-Placeholder.png')}}" alt="" class="responsive-img">
                                                @else
                                                    <img src="https://qsr.wetrainbots.com/new_qsr/public/upload/images/{{$value['store_item']['image']}}" alt="" class="responsive-img">
                                                @endif
                                            
                                            </div>
                                            <div class="card-content">
                                                <small>{{$value['store_item']['name']}}</small><br>
                                            </div>
                                            <span><small><b>{{$value['price']}}</b></small></span>
                                        </div>
                                    </div>

                                @endforeach
                                

                            </div>
                        </div>
                    </div>
                </div>
            @else
            @endif

            <div class="card">

                <div class="row valign-wrapper">
                    <div class="col s6">
                        <p><b>Special Instruction</b></br>
                        <small>(Optional)</small>
                    </div>
                    <div class="col s6">
                        <textarea id="instructionArea" class="materialize-textarea" placeholder="Type here..."></textarea>
                    </div>
                </div>

            </div>

            <div class="row center-align">
                <button class="btn btn-small custom-submit" type="submit">Add to Bag</button>
            </div>
        
        </form>

    </div>

    @include('customize-meal.modals.success')

@endsection

@push('head')
    <!-- Styles -->
    <!-- Scripts -->
    <script src="{{ asset('js/meal.js') }}"></script>
@endpush