@extends('website.branches.spa.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

    <section class="container-fluid menu grid-view" id="menuSection">
        <div class="row">
            <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->sitems as $sitem)
                                        <div class="col-6">
                                            <div class="item shadow" data-sitem="{{ $sitem->id }}" id="sitem{{ $sitem->id }}">
                                                <div class="media">
                                                    @if (in_array(strtolower(pathinfo($sitem->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                        <picture>
                                                            <source type="image/avif" data-srcset="{{ $sitem->uploads('media', 'avif') }}" />
                                                            <source type="image/webp" data-srcset="{{ $sitem->uploads('media', 'webp') }}" />
                                                            <img class="lazy" data-src="{{ $sitem->uploads('media') }}" />
                                                        </picture>
                                                    @else
                                                        <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                                            <source src="{{ $sitem->uploads('media') }}" />
                                                        </video-js>
                                                    @endif
                                                </div>

                                                <div class="details">
                                                    <div class="title-and-tag">
                                                        <h6 class="title">{{ $sitem->title }}</h6>

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

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

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

                                                        @if (!$order)
                                                            <div class="plus">
                                                                @if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
                                                                    <i class="las la-plus-circle"></i>
                                                                @else
                                                                    <i class="las la-eye"></i>
                                                                @endif
                                                            </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->sitems as $sitem)
                                                    <div class="col-6">
                                                        <div class="item shadow" data-sitem="{{ $sitem->id }}" id="sitem{{ $sitem->id }}">
                                                            <div class="media">
                                                                @if (in_array(strtolower(pathinfo($sitem->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp', 'avif']))
                                                                    <picture>
                                                                        <source type="image/avif" data-srcset="{{ $sitem->uploads('media', 'avif') }}" />
                                                                        <source type="image/webp" data-srcset="{{ $sitem->uploads('media', 'webp') }}" />
                                                                        <img class="lazy" data-src="{{ $sitem->uploads('media') }}" />
                                                                    </picture>
                                                                @else
                                                                    <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                                                        <source src="{{ $sitem->uploads('media') }}" />
                                                                    </video-js>
                                                                @endif
                                                            </div>

                                                            <div class="details">
                                                                <div class="title-and-tag">
                                                                    <h6 class="title">{{ $sitem->title }}</h6>

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

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

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

                                                                    @if (!$order)
                                                                        <div class="plus">
                                                                            @if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
                                                                                <i class="las la-plus-circle"></i>
                                                                            @else
                                                                                <i class="las la-eye"></i>
                                                                            @endif
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <x-bootstrap.modal id="sitemModal" 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('spas.cart.store') }}" class="sitem-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>
        @endif
    </div>

    @if ($user?->orders()->isNotEmpty())
        <x-bootstrap.modal id="showOrdersModal" :centered="true" content='website.branches.spa.modals.orders.index' :data="['branch' => $branch, 'user' => $user]">
            <x-slot:header>
                <h5 class="modal-title">
                    <a href="{{ route('branches.portfolio', ['branch' => $branch->spa->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

    @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.reservation_details')</h3>
                <i class="las la-times" data-bs-dismiss="modal"></i>
            </div>

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

        @if ($branch->spa->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/spa/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-check-circle"></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.spa.modals.orders.show' :data="['order' => $order, 'branch' => $branch]" width="xl">
            <x-slot:header>
                <h5 class="modal-title">
                    <a href="{{ route('branches.portfolio', ['branch' => $branch->spa->branch->id]) }}">
                        <button class="btn btn-secondary mt-2" type="button">
                            @lang('global.homepage1')
                        </button>
                    </a>

                    <a href="{{ route('spa.orders.pdf', ['order' => $order]) }}">
                        <button class="btn btn-success mt-2" type="button">
                            @lang('global.reservation_bill')
                        </button>
                    </a>
                </h5>
            </x-slot:header>
        </x-bootstrap.modal>
    @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.spa.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.spa.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch, 'survey' => $survey]" />
        @else
            <x-bootstrap.modal id="createSurveyModal" :centered="true" content='website.branches.spa.modals.survey.create' width="xl" :with-header="false" :data="['branch' => $branch, 'survey' => $survey]" />
        @endif
    @endif
@endsection