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

@section('content')
    @if ($advertisement_locations->isNotEmpty())
        <section class="advertisements">
            <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.items.orders_inactive')" :with-exit="false" />
                </div>
            </div>
        </div>
    @endif

    <section class="container-fluid menu grid-view" id="menuSection">
        <div class="row">
            <div class="col-12">
                <div class="sticky">
                    @isset($metadata['order_type'])
                        <div class="row">
                            <div class="col-12">
                                <x-bootstrap.alert type="info" :with-exit="false" class="mb-0">
                                    @lang('messages.info.branches.change_order_type', ['type' => $metadata['order_type'] === 'delivery' ? __('global.orders_type.delivery') : __('global.pickup')]) <a href="#" data-bs-toggle="modal" data-bs-target="#metadataModal">@lang('global.click_here')</a>
                                </x-bootstrap.alert>
                            </div>
                        </div>
                    @endisset

                    <div class="row align-items-center justify-content-center" style="background-color: {{ $branch->service->theme->main_bg }}">
                        <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" style="background-color: {{ $branch->service->theme->main_bg }}">
                        @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->service->theme->section_bg }};color : {{ $branch->service->theme->section_font }}">{{ $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->service->theme->section_bg }};color : {{ $branch->service->theme->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 grid-view">
                                    @foreach ($section->items as $item)
                                        <div class="col-6">
                                            <div class="item shadow" data-item="{{ $item->id }}" id="item{{ $item->id }}" style="background-color: {{ $branch->service->theme->product_bg }}">
                                                <div class="media">
                                                    @if (in_array(strtolower(pathinfo($item->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                        <picture>
                                                            <source type="image/avif" data-srcset="{{ $item->uploads('media', 'avif') }}" />
                                                            <source type="image/webp" data-srcset="{{ $item->uploads('media', 'webp') }}" />
                                                            <img class="lazy" data-src="{{ $item->uploads('media') }}" />
                                                        </picture>
                                                    @else
                                                        <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                                            <source src="{{ $item->uploads('media') }}" />
                                                        </video-js>
                                                    @endif
                                                </div>

                                                <div class="details">
                                                    <div class="title-and-tag">
                                                        <h6 class="title" style="color: {{ $branch->service->theme->product_title_font }}">{{ $item->title }}</h6>

                                                        @if ($item->service_tag_id)
                                                            <div class="tag" style="background-color: {{ $branch->service->theme->tag_bg }};color : {{ $branch->service->theme->tag_title_font }}">{{ $item->tag->title }}</div>
                                                        @endif
                                                    </div>

                                                    <div class="description" style="color: {{ $branch->service->theme->product_description_font }}">
                                                        {!! $item->description ?: __('global.no_description') !!}
                                                    </div>

                                                    <div class="price-and-actions">
                                                        <div class="price skiptranslate">
                                                            @if (bccomp($item->userPrice(), $item->userPrice(withOffer: false), 3) !== 0)
                                                                <s style="color: {{ $branch->service->theme->product_price_font }}">{{ $item->userPrice(withOffer: false) }}</s>
                                                                <span class="offer-price">{{ $item->userPrice() }} <span class='icon-saudi_riyal'></span></span>
                                                            @else
                                                                <span style="color: {{ $branch->service->theme->product_price_font }}">{{ $item->userPrice() }} <span class='icon-saudi_riyal'></span></span>
                                                            @endif
                                                        </div>

                                                        @if (!$order || ($order && in_array($order->store_status->title, $branch->settings->orders->enable_adding_item_on_status)))
                                                            <div class="plus" style="background-color: {{ $branch->service->theme->button_bg }};color : {{ $branch->service->theme->button_font }}">
                                                                <i class="las la-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" style="background-color: {{ $branch->service->theme->section_bg }};color : {{ $branch->service->theme->section_font }}">
                                            <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->items as $item)
                                                    <div class="col-6">
                                                        <div class="item shadow" data-item="{{ $item->id }}" style="background-color: {{ $branch->service->theme->product_bg }}">
                                                            <div class="media">
                                                                @if (in_array(strtolower(pathinfo($item->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                                    <picture>
                                                                        <source type="image/avif" data-srcset="{{ $item->uploads('media', 'avif') }}" />
                                                                        <source type="image/webp" data-srcset="{{ $item->uploads('media', 'webp') }}" />
                                                                        <img class="lazy" data-src="{{ $item->uploads('media') }}" />
                                                                    </picture>
                                                                @else
                                                                    <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                                                        <source src="{{ $item->uploads('media') }}" />
                                                                    </video-js>
                                                                @endif
                                                            </div>

                                                            <div class="details">
                                                                <div class="title-and-tag">
                                                                    <h6 class="title" style="color: {{ $branch->service->theme->product_title_font }}">{{ $item->title }}</h6>

                                                                    @if ($item->service_tag_id)
                                                                        <div class="tag" style="background-color: {{ $branch->service->theme->tag_bg }};color : {{ $branch->service->theme->tag_title_font }}">{{ $item->tag->title }}</div>
                                                                    @endif
                                                                </div>

                                                                <div class="description" style="color: {{ $branch->service->theme->product_description_font }}">
                                                                    {!! $item->description ?: __('global.no_description') !!}
                                                                </div>

                                                                <div class="price-and-actions">
                                                                    <div class="price skiptranslate">
                                                                        @if (bccomp($item->userPrice(), $item->userPrice(withOffer: false), 3) !== 0)
                                                                            <s style="color: {{ $branch->service->theme->product_price_font }}">{{ $item->userPrice(withOffer: false) }}</s>
                                                                            <span class="offer-price">{{ $item->userPrice() }} <span class='icon-saudi_riyal'></span></span>
                                                                        @else
                                                                            <span style="color: {{ $branch->service->theme->product_price_font }}">{{ $item->userPrice() }} <span class='icon-saudi_riyal'></span></span>
                                                                        @endif
                                                                    </div>

                                                                    @if (!$order || ($order && in_array($order->store_status->title, $branch->settings->orders->enable_adding_item_on_status)))
                                                                        <div class="plus" style="background-color: {{ $branch->service->theme->button_bg }};color : {{ $branch->service->theme->button_font }}">
                                                                            <i class="las la-plus"></i>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <div class="footer-buttons">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6">
                    <div>
                        @if ($user?->orders()->isNotEmpty() || $order)
                            <a href="#"></a>
                        @endif
                        <a class="btn btn-success footer-whatsapp" href="https://wa.me/+966539777828">
                            <i class="lab la-whatsapp"></i>
                        </a>
                    </div>
                </div>

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

                        <a class="btn btn-dark footer-go-top" href="#menuSection">
                            <i class="las la-chevron-circle-up"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <a href="#" class="btn btn-success footer-cart" data-bs-toggle="modal" data-bs-target="#cartModal" style="background-color: {{ $branch->service->theme->button_bg }};color : {{ $branch->service->theme->button_font }}">
                        <div>
                            <i class="las la-shopping-cart"></i> @lang('global.show_cart') (<span class="items-count skiptranslate">0</span>)
                        </div>

                        <div><span class="price">0</span> <span class='icon-saudi_riyal'></span></div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <x-bootstrap.modal id="metadataModal" :centered="true" :data-bs-keyboard="$open_metadata_modal ? 'false' : 'true'" :data-bs-backdrop="$open_metadata_modal ? 'static' : 'true'" content='website.branches.service.modals.orders.metadata' :with-header="false" :data="['branch' => $branch, 'qrs' => $qrs, 'metadata' => $metadata]" />

    <x-bootstrap.modal id="itemModal" content-type='slot' width="xl">
        <div style="background-color: {{ $branch->service->theme->modal_header_bg }};color : {{ $branch->service->theme->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('services.cart.store') }}" class="item-container" method="POST" style="background-color: {{ $branch->service->theme->product_bg }}"></form>
    </x-bootstrap.modal>

    @if ($user?->orders()->isNotEmpty())
        <x-bootstrap.modal id="showOrdersModal" :centered="true" content='website.branches.service.modals.orders.index' :data="['branch' => $branch, 'user' => $user]">
            <x-slot:header>
                <h5 class="modal-title">
                    <a href="{{ route('branches.portfolio', ['branch' => $branch->service->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->service->theme->modal_header_bg }};color : {{ $branch->service->theme->modal_header_font }}" class="main-title">
            <h3><i class="las la-shopping-cart"></i>@lang('global.orders')</h3>
            <i class="las la-times" data-bs-dismiss="modal"></i>
        </div>

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

    @if (session("metadata.{$branch->service->branch_id}.order_type") === 'delivery' || ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order'))
        <x-bootstrap.modal id="createOrderModal" content-type='slot' width="xl" data-bs-focus="false">
            <div style="background-color: {{ $branch->service->theme->modal_header_bg }};color : {{ $branch->service->theme->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('services.orders.store') }}' method='POST'></form>
        </x-bootstrap.modal>

        @if ($branch->service->branch->settings->orders->is_otp_active && !$user)
            <x-bootstrap.modal id="otpModal" content="website.branches.service.modals.orders.otp" width="xl" :data="['branch' => $branch]" />
        @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->service->theme->button_bg }};color : {{ $branch->service->theme->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">
                <i class="las la-clipboard-list"></i>
            </a>
        </div>

        <x-bootstrap.modal id="showOrderModal" :centered="true" content='website.branches.service.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->service->branch->id]) }}" class="text-decoration-none">
                        <button class="btn btn-secondary mt-2" type="button">
                            @lang('global.homepage1')
                        </button>
                    </a>

                    <a href="{{ route('services.orders.pdf', ['order' => $order]) }}">
                        <button class="btn btn-success mt-2" type="button" style="background-color: {{ $branch->service->theme->button_bg }};color : {{ $branch->service->theme->button_font }}">
                            @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.service.modals.orders.edit' :data="['order' => $order]" /> --}}
    @endif

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