@extends('layouts.master')

@section('pagetitle')
View Menus
@endsection
@section('title')
View Menus
@endsection

@section('content')

<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor" style="font-weight: 600;">Menus</h4>
    </div>
    <div class="col-md-7 align-self-center text-right">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Menu</li>
            </ol>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->

<div class="row">
    <div class="col-lg-4 col-xlg-3 col-md-5">
    <div class="card">
            <div class="card-body">
            <h3 class="m-t-0"> Menu Cover Image</h3>
            <hr>
            <div class="row text-center m-t-10">
                <div class="user-bg"> <img src="{{ env('UPLOAD_URL') .'/'.$menus->image }}" style="width: 324px; height: 256px; object-fit: cover;"> </div>
            </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <div class="user-btm-box">
                    <!-- .row -->
                    <div class="row text-center m-t-10">
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Menu Type</strong>
                            <p>{{ $menus->menuType->name }} </p>
                        </div>

                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Name</strong>
                            <p>{{ $menus->name }} </p>
                        </div>
                    </div>
                    <!-- /.row -->
                    <hr>
                    <!-- .row -->
                    <div class="row text-center m-t-10">
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Price</strong>
                            <p>{{ $menus->price }} </p>
                        </div>

                        <div class="col-md-6"><strong style="font-weight: bold;">Discount</strong>
                            <p>{{ $menus->discount }} </p>
                        </div>
                    </div>
                    <hr>
                    <!-- .row -->
                    <div class="row text-center m-t-10">
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Discount Type</strong>
                            <p>{{ $menus->discount_type }} </p>
                        </div>

                        <div class="col-md-6"><strong style="font-weight: bold;">Status</strong>
                        <br>
                        <span class="label label-sm label-info">
                            Inactive                        </span>
                        </div>
                    </div>
                    <hr>

                    <!-- .row -->
                    <div class="row text-center m-t-10">
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Time Starts</strong>
                            <p>{{ $menus->available_time_starts }} </p>
                        </div>

                        <div class="col-md-6"><strong style="font-weight: bold;">Time Ends</strong>
                            <p>{{ $menus->available_time_ends }} </p>
                        </div>
                    </div>   
                </div>
            </div>
        </div>
    </div>

    <!-- Column -->
    <div class="col-lg-8 col-xlg-9 col-md-7">
        <div class="card">
            <div class="card-body">

                <h3 class="m-t-0"> Menu view</h3>
                <hr>
                <div class="row">
                    <div class="col-10 col-xs-6 b-r"> <strong style="font-weight: bold;"> Short Description</strong>
                        <br>
                        <p>{!! $menus->short_description !!} </p>
                    </div>

                    <div class="col-10 col-xs-6 b-r"> <strong style="font-weight: bold;"> Description</strong>
                        <br>
                        <p>{!! $menus->description !!} </p>

                    </div>

                    <div class="col-10 col-xs-6 b-r"> <strong style="font-weight: bold;"> Ingridients</strong>
                        <br>
                        <p>{!! $menus->ingridients !!} </p>

                    </div>

                    <div class="col-10 col-xs-6 b-r"> <strong style="font-weight: bold;"> Calories</strong>
                        <br>
                        <p>{!! $menus->calories !!} </p>

                    </div>

                    <div class="col-10 col-xs-6 b-r"> <strong style="font-weight: bold;"> Allergies</strong>
                        <br>
                        <p>{!! $menus->allergies !!} </p>
                    </div>
                </div>

            </div>
        </div>

        <div class="card">
            <div class="card-body">

                <h3 class="m-t-0"> Addons</h3>
                <hr>
                <div class="row">
                    @foreach($addons as $a)
                    <div class="col-md-3 col-xs-6 b-r"> <strong style="font-weight: bold;"> Name</strong>
                        <br>
                        <p>{{ $a->name }} </p>

                    </div>
                    <div class="col-md-3 col-xs-6 b-r"> <strong style="font-weight: bold;"> Price</strong>
                        <br>
                        <p>{{ $a->price }} </p>

                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12">
    <!-- carousel -->
        <div class="card">
            <div class="card-body">
            <h3 class="m-t-0"> Slider Images</h3>
            <hr>
            <div class="row col-10">
            @foreach($menus->menuImages as $image)
                <img class="d-block" src="{{ env('UPLOAD_URL').'/'.$image->menu_cover_image }}" style="width: 200px; height: 135px; object-fit: cover;">
            @endforeach
            </div>
        </div>
        </div>
    <!-- end carousel -->
    </div>

</div>
@endsection