@extends('web.layouts.app')

@section('title', 'Order Patient')

@section('stylesheets')
<style>
    .divider2{
        width: 100%;
        height: 1px;
        border-bottom: 2px dashed var(--border-color);
    }
    .swiper-slide{
        border: 2px solid white;
        flex-direction: row;
        display: flex;
        background: #fff;
        box-shadow: 0px 0px 10px -6px #00000080;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 9px;
        padding: 5px 15px 5px 5px;
        cursor: pointer;
        align-items: center;
    }
    .recomanded-swiper .swiper-slide.active{
        border: 2px solid var(--primary);
        background: #fff;
        box-shadow: 0px 0px 10px -6px #00000080;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 9px;
        padding: 5px 15px 5px 5px;
        cursor: pointer;
        align-items: center;
        opacity: 1 !important;
    }
    .item-content.active .item-title-row .item-title{
        text-decoration: line-through;
    }
    .item-content.active .recomanded-swiper .swiper-slide,
    .item-content.active .item-media{
        opacity: 0.5;
    }
</style>
@endsection

@section('banner')
@if($code)
<!-- Header -->
<header class="header transparent">
    <div class="main-bar">
        <div class="container">
            <div class="header-content">
                <div class="left-content">
                    <a href="{{ url($site->slug.'/orders/patient') }}/{{ $code }}" class="">
                        <svg width="18" height="18" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9.03033 0.46967C9.2966 0.735936 9.3208 1.1526 9.10295 1.44621L9.03033 1.53033L2.561 8L9.03033 14.4697C9.2966 14.7359 9.3208 15.1526 9.10295 15.4462L9.03033 15.5303C8.76406 15.7966 8.3474 15.8208 8.05379 15.6029L7.96967 15.5303L0.96967 8.53033C0.703403 8.26406 0.679197 7.8474 0.897052 7.55379L0.96967 7.46967L7.96967 0.46967C8.26256 0.176777 8.73744 0.176777 9.03033 0.46967Z" fill="#fff"/>
						</svg>
                    </a>
                    <a href="{{ url($site->slug.'/orders/patient') }}/{{ $code }}">
					    <h5 class="mb-0 ms-2 text-nowrap">Kembali</h5>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Header End -->
 @endif
@endsection

@section('content')
<div class="content-body fb">
    <div class="swiper-btn-center-lr my-0">
        <div class="swiper-container demo-swiper">
            <div class="swiper-wrapper">
                @if($menu->imageMain)
                <div class="swiper-slide">
                    <div class="dz-banner-heading">
                        <div class="overlay-black-light">
                            <img src="{{ $menu->imageMain->getImage() }}" class="bnr-img" alt="bg-image">
                        </div>
                    </div>
                </div>
                @else
                <div class="swiper-slide">
                    <div class="dz-banner-heading">
                        <div class="overlay-black-light">
                            <img src="{{ asset('assets/img/no-image.png') }}" class="bnr-img" alt="bg-image">
                        </div>
                    </div>
                </div>
                @endif
                @foreach($menu->imageNotMain as $image)
                <div class="swiper-slide">
                    <div class="dz-banner-heading">
                        <div class="overlay-black-light">
                            <img src="{{ $image->getImage() }}" class="bnr-img" alt="bg-image">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-btn">
                <div class="swiper-pagination style-2 flex-1"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="company-detail">
            <div class="detail-content">
                <div class="flex-1">
                    <h4>{{ $menu->name }}</h4>
                    <p>{!! $menu->description !!}</p>
                </div>
            </div>
            <div class="mt-4 mb-3">
                <div class="diit-wapper w-100">
                    <div class="title-bar">
                        <h5 class="title">Food Texture</h5>
                    </div>
                    <div class="">
                        @forelse($menu->foodtexture as $texture)
                        <span class="badge badge-primary me-1 mb-1">{{$texture->name}}</span>
                        @empty
                        <div class="text-muted">Tidak ada food texture</div>
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="divider2"></div>
            <div class="mb-3">
                <div class="diit-wapper w-100">
                    <div class="title-bar">
                        <h5 class="title">Diit</h5>
                    </div>
                    <div class="">
                        @foreach($menu->diits as $diit)
                        <span class="badge badge-primary me-1 mb-1">{{$diit->name}}</span>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="divider2"></div>
            <div class="item-list recent-jobs-list" id="item-list">
                <ul>
                    @foreach($menu->menuItems as $menu_item)
                    <li>
						<div class="item-content justify-content-start align-items-start @if($menu_item->is_replace) active @endif">
                            <div class="item-media media media-90" style="margin-left: 0px;margin-right: 20px;">
                                <img src="{{ $menu_item->item->imageMain?$menu_item->item->imageMain->getImage():asset('assets/img/no-image.png') }}" alt="logo">
                            </div>
							<div class="item-inner">
								<div class="item-title-row">
									<h6 class="item-title"><a href="product-detail.html">{{ $menu_item->item->name }}</a></h6>
									<div class="item-subtitle">{{ $menu_item->item->description }}</div>
                                    @if(count($menu_item->options) > 0)
                                    <p class="mt-2 mb-0">Item Pengganti : </p>
                                    <div class="swiper-container tag-group mt-0 recomanded-swiper" style="margin-left: -15px;">
                                        <div class="swiper-wrapper">
                                        @foreach($menu_item->options as $option)
                                            <div class="swiper-slide @if($option->is_replacement) active @endif" data-menu-id="{{ $menu->id }}" data-schedule-id="{{ $food_schedule_id }}" data-food_item_id="{{$menu_item->item->id}}" data-food_item_replacement="{{$option->item->id}}" onclick="replaceItem($(this))">
                                                <div class="item-media media media-60 mb-0" style="margin-left: 0px;margin-right: 10px;">
                                                    <img src="{{ $option->item->imageMain?$option->item->imageMain->getImage():asset('assets/img/no-image.png') }}" alt="logo">
                                                </div>
                                                <span class="">{{ $option->item->name }}</span>
                                            </div>
                                        @endforeach
                                        </div>
                                    </div>
                                    @endif
								</div>
							</div>
						</div>
					</li>
                    @endforeach
                </ul>
            </div>
            <div class="divider2"></div>
            <div>
                <div class="nutrition-wapper w-100">
                    <div class="title-bar">
                        <h5 class="title">Nutrisi</h5>
                    </div>
                    <div class="">
                        <div class="dz-list">
                            <ul>
                                <li>
                                    <a href="javascript:void(0);" class="item-content">
                                        <div class="dz-inner d-flex justify-content-between w-100">
                                            <div>
                                                <span class="title">Energi</span>
                                            </div>
                                            <div>
                                                <span class="">{{ number_format($menu->kalori, 2, ',', '.') }} kkal</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="item-content">
                                        <div class="dz-inner d-flex justify-content-between w-100">
                                            <div>
                                                <span class="title">Protein</span>
                                            </div>
                                            <div>
                                                <span class="">{{ number_format($menu->protein, 2, ',', '.') }} gr</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="item-content">
                                        <div class="dz-inner d-flex justify-content-between w-100">
                                            <div>
                                                <span class="title">Lemak</span>
                                            </div>
                                            <div>
                                                <span class="">{{ number_format($menu->lemak, 2, ',', '.') }} gr</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="item-content">
                                        <div class="dz-inner d-flex justify-content-between w-100">
                                            <div>
                                                <span class="title">Karbohidrat</span>
                                            </div>
                                            <div>
                                                <span class="">{{ number_format($menu->karbo, 2, ',', '.') }} gr</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('menubar')
@if($enableCart)
<!-- Footer -->
<div class="footer fixed">
    <input type="hidden" name="code" id="code" value="{{ $code }}">
	<div class="container">
		<a href="javascript:void(0);" class="btn @if($addedToCart) btn-light @else btn-primary @endif text-start w-100 btn-rounded"
            onclick="addCart($(this))"
            data-menu-id="{{ $menu->id }}"
            data-schedule-id="{{ $food_schedule_id }}"
            id="btn-add-to-cart">
            @if($addedToCart) Batal @else Pilih @endif
        </a>
	</div>
</div>
<!-- Footer End -->
 @endif
@endsection

@section('scripts')
<script>
    var process_add_to_cart = false;

    function addCart(el){
        if(process_add_to_cart){
            return;
        }
        process_add_to_cart = true;
        var food_menu_id = el.data('menu-id');
        var food_schedule_id = el.data('schedule-id');
        var code = $('#code').val();
        var data = {
            food_menu_id: food_menu_id,
            food_schedule_id: food_schedule_id,
            code: code,
            type: 1,
            qty: 1,
            _token: "{{ csrf_token() }}",
        }
        $.ajax({
          url:'{{ route('web.cart.add', ['site' => $site->slug ]) }}',
          method:'post',
          data: data,
          dataType: 'json',
          beforeSend:function(){

          }
        }).done(function(response){
            process_add_to_cart = false;
            if(response.status){
                changeButton($('#btn-add-to-cart'));
                Swal.fire({
                    title: "Success!",
                    text: response.message,
                    icon: "success",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                });
            }else{

            }
            return;
        }).fail(function(response){
            process_add_to_cart = false;
            var response = response.responseJSON;
            Swal.fire({
                title: "Error!",
                text: response.message,
                icon: "error",
                confirmButtonClass: "btn btn-primary w-xs mt-2",
                buttonsStyling: !1
            });
        });
    }

    function changeButton(el){
        if(el.hasClass('btn-primary')){
            el.removeClass('btn-primary');
            el.addClass('btn-light');
        }else{
            el.removeClass('btn-light');
            el.addClass('btn-primary');
        }

        var text = el.text();
        //hapus space
        text = text.replace(/\s/g, '');

        //ubah text button
        if(text == 'Pilih'){
            el.text('Batal');
        }else{
            el.text('Pilih');
        }
    }

    function replaceItem(el){
        var food_item_id = el.data('food_item_id');
        var food_item_replacement = el.data('food_item_replacement');
        var food_menu_id = el.data('menu-id');
        var food_schedule_id = el.data('schedule-id');
        var code = $('#code').val();
        var data = {
            food_menu_id: food_menu_id,
            food_schedule_id: food_schedule_id,
            code: code,
            type: 1,
            qty: 1,
            food_item_id: food_item_id,
            food_item_replacement: food_item_replacement,
            _token: "{{ csrf_token() }}",
        }
        $.ajax({
          url:'{{ route('web.cart.replace', ['site' => $site->slug ]) }}',
          method:'post',
          data: data,
          dataType: 'json',
          beforeSend:function(){

          }
        }).done(function(response){
            if(response.status){
                Swal.fire({
                    title: "Success!",
                    text: response.message,
                    icon: "success",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling:!1
                });
                updateActiveItem(el);
            }else{
                Swal.fire({
                    title: "Warning!",
                    text: response.message,
                    icon: "warning",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling:!1
                });
            }
            return;
        }).fail(function(response){
            var response = response.responseJSON;
            Swal.fire({
                title: "Warning!",
                text: response.message,
                icon: "warning",
                confirmButtonClass: "btn btn-primary w-xs mt-2",
                buttonsStyling:!1
            });
        });

    }

    function updateActiveItem(el){
        var item = el.parents('.item-content');
        var swipper_conteioner = el.parents('.swiper-container');
        var is_active = el.hasClass('active');
        if(is_active){
            item.removeClass('active');
            el.removeClass('active');
            return;
        }
        //hapus class active
        swipper_conteioner.find('.swiper-slide.active').removeClass('active');
        //tambahkan class active
        item.addClass('active');
        el.addClass('active');
    }

    $(function(){
        var swiperGetStarted = new Swiper('.recomanded-swiper', {
            speed: 500,
            parallax: true,
            slidesPerView: 'auto',
            spaceBetween: 10,
            loop: false,
            navigation: {
                nextEl: '.swiper-btn-next',
                prevEl: '.swiper-btn-prev',
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    });
</script>
@endsection