@extends('website.branches.menu.layouts.index')

@section('content')
@if ($advertisments->isNotEmpty())
<section class="advertisements">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="owl-carousel owl-theme">
                    @foreach ($advertisments as $advertisment)
                    <a class="item" style="background-image: url({{ uploads($advertisment->image) }})" href="{{ $advertisment->link ?? 'javascript:void(0)' }}" title="advertisment"></a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<section class="container-fluid menu list-view" id="menuSection">
    <div class="row">
        @if ($table)
        <div class="col-6 table-room">
            <button class="btn btn-success">
                <i class="las la-utensils"></i> {{$table->title}}
            </button>
        </div>
        @endif

        @if (request('table') && $branch->settings->enable_call_waiter)
        <div class="col-6 waiter">
            <a href="#" class="call-waiter" data-link="{{ route('website.branches.call_waiter',['table' => request('table'),'branch' => $branch->id]) }}" title="@lang('global.call_waiter')">
                <button class="btn btn-danger">
                    <i class="las la-bell"></i> @lang('global.call_waiter')
                </button>
            </a>
        </div>
        @endif

        <div class="col-12">
            <div class="row align-items-center justify-content-center">
                <div class="col-9 search">
                    <input class="input" placeholder="@lang('global.search')">
                    <i class="las la-search"></i>
                </div>
                <div class="col-2 view">
                    <i class="las la-th-list d-none" data-view="list-view"></i>

                    <i class="las la-th-large" data-view="grid-view"></i>
                </div>
            </div>

            <ul class="header-sections" style="background-color: {{ $branch->restaurant->color->main_bg }}">
                @foreach ($branch->menu->sections as $section)
                <li>
                    <a href="#" data-section="#section-{{ $section->id }}" title="{{ $section->title }}">
                        <img data-src="{{ $section->image() }}" class="lazy" alt="{{ $section->title }}" />
                        <div class="text" style="background-color: {{ $branch->restaurant->color->section_bg }};color : {{ $branch->restaurant->color->section_font }}">{{ $section->title }}</div>
                    </a>
                </li>
                @endforeach
            </ul>

            <div class="sections">
                @foreach ($branch->menu->sections as $section)
                <div class="section active" id="section-{{ $section->id }}">
                    <div class="header" style="background-color: {{ $branch->restaurant->color->section_bg }};color : {{ $branch->restaurant->color->section_font }}">
                        <h5 class="title">{{ $section->title }}</h5>
                        <i class="las la-caret-down arrow"></i>
                    </div>
                    <div class="container-fluid">
                        <div class="row items list-view">
                            @foreach ($section->meals as $meal)
                            <div class="col-12">
                                <div class="item shadow" data-meal="{{ $meal->id }}" style="background-color: {{ $branch->restaurant->color->meal_bg }}">
                                    <div class="media">
                                        @if (in_array(strtolower(pathinfo($meal->media, PATHINFO_EXTENSION)),['gif','jpg','jpeg','png','jfif','webp']))
                                        <img data-src="{{ $meal->uploads('media') }}" class="lazy" alt="{{ $meal->title }}" />
                                        @else
                                        <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                            <source src="{{ $meal->uploads('media') }}" />
                                        </video-js>
                                        @endif
                                    </div>

                                    <div class="details">
                                        <div class="title-and-tag">
                                            <h6 class="title" style="color: {{ $branch->restaurant->color->meal_title_font }}">{{ $meal->title }}</h6>

                                            @if ($meal->tag_id)
                                            <div class="tag" style="background-color: {{ $branch->restaurant->color->tag_bg }};color : {{ $branch->restaurant->color->tag_title_font }}">{{ $meal->tag->title }}</div>
                                            @endif
                                        </div>

                                        <div class="description" style="color: {{ $branch->restaurant->color->meal_description_font }}">
                                            {!! $meal->description ?: __('global.no_description') !!}
                                        </div>

                                        <div class="price-and-actions">
                                            <div class="price skiptranslate">
                                                @if ($meal->offer)
                                                <s style="color: {{ $branch->restaurant->color->meal_price_font }}">{{ $meal->price }}</s>
                                                <span class="offer-price">{{ $meal->offer_price }} SAR</span>
                                                @else
                                                <span style="color: {{ $branch->restaurant->color->meal_price_font }}">{{ $meal->offer_price }} SAR</span>
                                                @endif
                                            </div>

                                            @if (!$order || ($order && in_array($order->status->title,$order->branch->settings->enable_adding_meal_to_order_on_status)))
                                            <div class="plus" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}">
                                                @if ($branch->settings->is_interactive_menu)
                                                <i class="las la-cart-plus"></i>
                                                @else
                                                <i class="las la-eye"></i>
                                                @endif
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<x-bootstrap.modal id="mealModal" content-type='slot' width="xl">
    <div style="background-color: {{ $branch->restaurant->color->modal_header_bg }};color : {{ $branch->restaurant->color->modal_header_font }}" class="main-title">
        <h3>@lang('global.add_from_menu_options')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <form action="{{ route('website.cart.store') }}" class="meal-container" method="POST" style="background-color: {{ $branch->restaurant->color->meal_bg }}"></form>
</x-bootstrap.modal>

@if ($branch->settings->is_interactive_menu)
<div class="container-fluid footer-cart">
    <a class="btn" data-bs-toggle="modal" data-bs-target="#cartModal" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}" title="cart">
        <i class="las la-shopping-cart"></i>
        <span class="items-count skiptranslate">0</span>
    </a>
</div>

<x-bootstrap.modal id="cartModal" content-type='slot' width="xl">
    <div style="background-color: {{ $branch->restaurant->color->modal_header_bg }};color : {{ $branch->restaurant->color->modal_header_font }}" class="main-title">
        <h3><i class="las la-shopping-cart"></i>@lang('global.cart')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <div class="cart-container" action={{ route('website.cart.updateAll') }} method='POST'></div>
</x-bootstrap.modal>

<x-bootstrap.modal id="createOrderModal" content-type='slot' width="xl">
    <div style="background-color: {{ $branch->restaurant->color->modal_header_bg }};color : {{ $branch->restaurant->color->modal_header_font }}" class="main-title">
        <h3>@lang('global.order_details')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <form class="order-container" action='{{ route("website.orders.store") }}' method='POST'></form>
</x-bootstrap.modal>

<x-bootstrap.modal id="orderCheckoutModal" content-type='slot' width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#createOrderModal">
                @lang('global.back_to_order')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>

    <div class="checkout-container"></div>
</x-bootstrap.modal>

@if ($branch->settings->send_otp)
<x-bootstrap.modal id="otpModal" content-type='slot' width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#createOrderModal">
                @lang('global.back_to_order')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>

    <img src="{{ mix('website/branches/menu/images/otp.png','assets') }}" class="otp-image" alt="otp" />

    <p class="message"></p>

    <div class="otp-inputs">
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" autocomplete="one-time-code" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
    </div>

    <p class="countdown">
        <span class="minutes">00</span>:<span class="seconds">59</span>
    </p>

    <a class="resend-otp d-none" href="#" title="resend otp">
        @lang('global.resend_otp')
    </a>

    <button class="btn btn-success" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}">
        <i class="las la-utensils"></i> @lang('global.submit')
    </button>
</x-bootstrap.modal>
@endif

<x-bootstrap.modal id="ePaymentModal" content-type='slot' width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#createOrderModal">
                @lang('global.back_to_order')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>

    <div class='form'>
        <div></div>
    </div>
</x-bootstrap.modal>
@endif

@if ($order)
<div class="container-fluid footer-order">
    <a class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#showOrderModal" title="show order">
        <i class="las la-clipboard-list"></i>
    </a>
</div>

<x-bootstrap.modal id="showOrderModal" :centered="true" content='website.branches.menu.modals.orders.show' :data="['order' => $order]" width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $branch->restaurant->color->button_bg }};color : {{ $branch->restaurant->color->button_font }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#editOrderModal">
                @lang('global.order_details')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>
</x-bootstrap.modal>

<x-bootstrap.modal id="editOrderModal" width="xl" content='website.branches.menu.modals.orders.edit' :data="['order' => $order]" />

@else
<div class="container-fluid go-top">
    <a class="btn btn-dark" href="#menuSection" title="menu style">
        <i class="las la-chevron-circle-up"></i>
    </a>
</div>
@endif

@if ($survey?->questions->isNotEmpty() || $working_times->isNotEmpty())
<x-bootstrap.modal id="showSurveyModal" content='website.branches.menu.modals.survey.show' width="xl" :with-header="false" :data="['branch' => $branch,'survey' => $survey,'working_times' => $working_times]" />

@if ($survey?->questions->isNotEmpty())
@if ($survey?->required && session()->missing("survey_answered.$survey?->id"))
<x-bootstrap.modal id="createSurveyModal" :centered="true" data-bs-keyboard="false" data-bs-backdrop="static" content='website.branches.menu.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch,'survey' => $survey]" />
@else
<x-bootstrap.modal id="createSurveyModal" :centered="true" content='website.branches.menu.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch,'survey' => $survey]" />
@endif
@endif

@endif
@endsection