@extends('layouts.frontend-layout')
@section('content')


    <section class="title-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="left-title-text">
                        <h3>Food Menu</h3>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="right-title-text">
                        <ul>
                            <li class="breadcrumb-item"><a href="{{ route('main-site.index') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Food Menu</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="browse-places-all">
        <div class="container">

            <div class="row text-left">
               
                <div class="col-md-6">
                    <div class="text-center">                        
                        <h4 style="padding: 15px">Choose  Restaurant</h4>
                        <select name="shop_id" class="video-form selectbox"  >
                            <option value="">Select Restaurant</option>
                            @foreach ($food_shops as $key)
                                @if($key->shop_name_logo)
                                <option value="{{ $key->id }}">{{ $key->shop_name_logo->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
               
                <div class="col-md-6">
                    <div class="text-center">                        
                        <h4 style="padding: 15px">Choose  Catering</h4>
                        <select  name="shop_id" class="video-form selectbox"  >
                            <option value="">Select Catering</option>
                            @foreach ($catering_shops as $key)
                                @if($key->shop_name_logo)
                                <option value="{{ $key->id }}">{{ $key->shop_name_logo->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row text-left">               
                <div class="col-md-12">
                    <div  id="Menus"></div>
                </div>
            </div>
            
            
            
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script>
    $('.selectbox').change(function() {       
        var data = "";
        $.ajax({
            type:"GET",
            url : "/get-shop-menus",
            data : 'shop_id='+$(this).val(),
            async: false,
            success : function(response) {
                if(response.length>0){
                    $('#Menus').html(
                        response.map(item=>(
                                '<div  style="background-image: url('+item.image+'); width:100%; ">'+
                                    '<h3 style="color:#fff;font-weight:900; margin-top:35px; padding:80px; text-align:center">'+item.name+'</h3>'+
                                '</div>'+

                                '<div class="row" style="width:100%">'+
                                item.menus.map(item2=>(
                                    '<div style="width:48%; float:left; padding:15px">'+
                                        '<h4 style="text-align:center;color:#000;padding-top:15px; font-weight:900">['+item2.menu_code+'] '+item2.name+'</h4>'+
                                        '<p style="text-align:center;color:red; font-size:15px; font-weight:600" >৳'+item2.price+'</p>'+
                                        '<p style="text-align:center;color:#000;" >'+item2.short_description+'</p>'+
                                    '</div>'
                                ))
                                +'</div>'
                        ))
                    );
                }else{
                    $('#Menus').html("")
                }
                
            },
            error: function() {
                alert('Error occured');
            }
        });
   
    });
    
    
</script>
@endsection