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

@section('content')
    @if ($advertisement_locations->isNotEmpty())
        <section class="advertisements mb-4">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="owl-carousel owl-theme">
                            @foreach ($advertisement_locations as $location)
                                <a @class(['item', 'clickable' => $location->advertisement->url]) href="{{ $location->advertisement->url ?? 'javascript:void(0)' }}" @if ($location->advertisement->url) target="_blank" @endif ar-image="{{ uploads($location->advertisement->getTranslation('image', 'ar')) }}" en-image="{{ uploads($location->advertisement->getTranslation('image', 'en')) }}" data-id="{{ $location->id }}"></a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (!$branch->settings->orders->is_available)
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <x-bootstrap.alert type="danger" :messages="__('messages.error.meals.orders_inactive')" :with-exit="false" />
                </div>
            </div>
        </div>
    @endif

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

            @if (request('table') && $branch->settings->orders->enable_call_waiter)
                <div class="col-6 waiter">
                    <a href="#" class="call-waiter" data-link="{{ route('restaurants.branches.call_waiter', ['table' => request('table'), 'branch' => $branch->id]) }}">
                        <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="sticky">
                    <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" data-view="list-view"></i>

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

                    <ul class="header-sections">
                        @foreach ($branch->sections as $section)
                            <li>
                                <a href="#" data-section="#section-{{ $section->id }}">
                                    <picture>
                                        <source type="image/avif" data-srcset="{{ $section->image('avif') }}" />
                                        <source type="image/webp" data-srcset="{{ $section->image('webp') }}" />
                                        <img class="lazy" data-src="{{ $section->image() }}" />
                                    </picture>

                                    <div class="text" style="background-color: {{ $branch->color }}">{{ $section->title }}</div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="sections">
                    @foreach ($branch->sections as $section)
                        <div class="section active" id="section-{{ $section->id }}" data-section="{{ $section->id }}">
                            <div class="header" style="background-color: {{ $branch->color }}">
                                <h5 class="title">{{ $section->title }}</h5>
                                <i class="las la-caret-down arrow"></i>
                            </div>
                            <div class="container-fluid">
                                <div class="row items grid-view">
                                    @foreach ($section->meals as $meal)
                                        <div class="col-6">
                                            <div class="item shadow" data-meal="{{ $meal->id }}" id="meal{{ $meal->id }}">
                                                <div class="media">
                                                    @if (in_array(strtolower(pathinfo($meal->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                        <picture>
                                                            <source type="image/avif" data-srcset="{{ $meal->uploads('media', 'avif') }}" />
                                                            <source type="image/webp" data-srcset="{{ $meal->uploads('media', 'webp') }}" />
                                                            <img class="lazy" data-src="{{ $meal->uploads('media') }}" />
                                                        </picture>
                                                    @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">{{ $meal->title }}</h6>

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

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

                                                    <div class="price-and-actions">
                                                        <div class="price skiptranslate">
                                                            @if ($meal->offer)
                                                                <s>{{ $meal->price }}</s>
                                                                <span class="offer-price">{{ $meal->offer_price }} <span class='icon-saudi_riyal'></span></span>
                                                            @else
                                                                <span>{{ $meal->offer_price }} <span class='icon-saudi_riyal'></span></span>
                                                            @endif
                                                        </div>

                                                        @if (!$order || ($order && in_array($order->status->title, $branch->settings->orders->enable_adding_meal_on_status)))
                                                            <div class="plus">
                                                                <i class="las la-cart-plus"></i>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @if ($section->children->isNotEmpty())
                                @foreach ($section->children as $section_child)
                                    <div @class(['section', 'child', 'active', 'mt-2' => $loop->first]) id="section-{{ $section_child->id }}" data-section="{{ $section_child->id }}">
                                        <div class="header">
                                            <h5 class="title">{{ $section_child->title }}</h5>
                                            <i class="las la-caret-down arrow"></i>
                                        </div>

                                        <div class="container-fluid">
                                            <div class="row items grid-view">
                                                @foreach ($section_child->meals as $meal)
                                                    <div class="col-6">
                                                        <div class="item shadow" data-meal="{{ $meal->id }}" id="meal{{ $meal->id }}">
                                                            <div class="media">
                                                                @if (in_array(strtolower(pathinfo($meal->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                                    <picture>
                                                                        <source type="image/avif" data-srcset="{{ $meal->uploads('media', 'avif') }}" />
                                                                        <source type="image/webp" data-srcset="{{ $meal->uploads('media', 'webp') }}" />
                                                                        <img class="lazy" data-src="{{ $meal->uploads('media') }}" />
                                                                    </picture>
                                                                @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">{{ $meal->title }}</h6>

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

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

                                                                <div class="price-and-actions">
                                                                    <div class="price skiptranslate">
                                                                        @if ($meal->offer)
                                                                            <s>{{ $meal->price }}</s>
                                                                            <span class="offer-price">{{ $meal->offer_price }} <span class='icon-saudi_riyal'></span></span>
                                                                        @else
                                                                            <span>{{ $meal->offer_price }} <span class='icon-saudi_riyal'></span></span>
                                                                        @endif
                                                                    </div>

                                                                    @if (!$order || ($order && in_array($order->status->title, $branch->settings->orders->enable_adding_meal_on_status)))
                                                                        <div class="plus">
                                                                            <i class="las la-cart-plus"></i>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <x-bootstrap.modal id="mealModal" content-type='slot' width="xl">
        <div style="background-color: {{ $branch->color }}" 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('restaurants.cart.store') }}" class="meal-container" method="POST"></form>
    </x-bootstrap.modal>

    <div class="footer-buttons">
        @if ($user?->orders()->isNotEmpty())
            <div class="footer-order">
                <a class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#showOrdersModal">
                    <i class="las la-clipboard-list"></i>
                </a>
            </div>
        @elseif($order)
            <div class="footer-order">
                <a class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#showOrderModal">
                    <i class="las la-clipboard-list"></i>
                </a>
            </div>
        @endif

        <div class="footer-cart">
            <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#cartModal">
                <i class="las la-shopping-cart"></i>
                <span class="items-count skiptranslate">0</span>
            </a>
        </div>
    </div>

    @if ($user?->orders()->isNotEmpty())
        <x-bootstrap.modal id="showOrdersModal" :centered="true" content='website.branches.restaurant.modals.orders.index' :data="['branch' => $branch, 'user' => $user]">
            <x-slot:header>
                <h5 class="modal-title">
                    <a href="{{ route('branches.portfolio', ['branch' => $branch->restaurant->branch->id]) }}">
                        <button class="btn btn-secondary" type="button">
                            @lang('global.homepage1')
                        </button>
                    </a>
                </h5>

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

    <x-bootstrap.modal id="cartModal" content-type='slot' width="xl">
        <div style="background-color: {{ $branch->color }}" 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('restaurants.cart.updateAll') }} method='POST'></div>
    </x-bootstrap.modal>

    @if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
        <x-bootstrap.modal id="createOrderModal" content-type='slot' width="xl">
            <div style="background-color: {{ $branch->color }}" 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('restaurants.orders.store') }}' method='POST'></form>
        </x-bootstrap.modal>

        @if ($branch->restaurant->branch->settings->orders->is_otp_active && !$user)
            <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->color }}" 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/restaurant/images/otp.png', 'assets') }}" class="otp-image" />

                <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="#">
                    @lang('global.resend_otp')
                </a>

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

                    <a href="{{ route('branches.portfolio', ['branch' => $branch->restaurant->branch->id]) }}" class="text-decoration-none">
                        <button class="btn btn-secondary mt-2" type="button">
                            @lang('global.homepage1')
                        </button>
                    </a>

                    <a href="{{ route('restaurants.orders.pdf', ['order' => $order]) }}">
                        <button class="btn btn-success mt-2" type="button">
                            @lang('global.order_summary')
                        </button>
                    </a>
                </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.restaurant.modals.orders.edit' :data="['order' => $order]" /> --}}
    @else
        <div class="go-top">
            <a class="btn btn-success whatsapp" href="https://wa.me/+966539777828">
                <i class="lab la-whatsapp"></i>
            </a>

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

    <x-bootstrap.modal id="showSurveyModal" content='website.branches.restaurant.modals.survey.show' width="xl" :with-header="false" :data="['branch' => $branch, 'survey' => $survey, 'working_times' => $branch->working_times]" />

    @if ($survey)
        @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.restaurant.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch, 'survey' => $survey]" />
        @else
            <x-bootstrap.modal id="createSurveyModal" :centered="true" content='website.branches.restaurant.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch, 'survey' => $survey]" />
        @endif
    @endif
@endsection