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

@section('content')
    @if ($advertisement_locations->get('banner')?->isNotEmpty() || $advertisement_locations->get('card')?->isNotEmpty())
        <section class="advertisements">
            @if ($advertisement_locations->get('banner')?->isNotEmpty())
                <div class="banner">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <div class="owl-carousel owl-theme">
                                    @foreach ($advertisement_locations->get('banner') 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>
                </div>
            @endif

            @if ($advertisement_locations->get('card')?->isNotEmpty())
                <div class="card mt-2">
                    <div class="container">
                        <div class="row justify-content-center">
                            @if ($branch->settings->portfolio->card_advertisements_title->{$locale})
                                <div class="col-12">
                                    <p class="lead mb-0">{{ $branch->settings->portfolio->card_advertisements_title->{$locale} }}</p>
                                </div>
                            @endif

                            <div class="col-12">
                                <div class="owl-carousel owl-theme">
                                    @foreach ($advertisement_locations->get('card') as $location)
                                        <div class="item-wrapper">
                                            <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>

                                            @if ($location->advertisement->caption)
                                                <div class="caption">
                                                    {{ $location->advertisement->caption }}
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </section>
    @endif

    @if ($branch->settings->portfolio->about->{$locale})
        <section id="about" class="mt-2">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div>
                            <div class="text">{!! $branch->settings->portfolio->about->{$locale} !!}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-12">
                <a class="btn mt-2" id="installPwaButton" style="display: none;background-color: {{ $branch->color }};color:white">
                    <i class="las la-download"></i> @lang('global.install_pwa')
                </a>
            </div>
        </div>
    </div>

    @if ($services->isNotEmpty())
        <section id="services" style="position: relative;">
            <div class="container">
                @if ($branch->settings->portfolio->services_title->{$locale})
                    <div class="row justify-content-center mt-2">
                        <div class="col-12">
                            <div class="section-header">
                                <div style="background-color: {{ $branch->color }}"></div>
                                <h4 class="title">{{ $branch->settings->portfolio->services_title->{$locale} }}</h4>
                                <div style="background-color: {{ $branch->color }}"></div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row justify-content-center mt-2 categories" id="stickyCategories">
                    @isset($metadata['order_type'])
                        <div class="col-12">
                            <x-bootstrap.alert class="mb-0" type="info" :with-exit="false">
                                @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>
                    @endisset

                    <div class="col-12">
                        <div class="row align-items-center">
                            <div class="col-9 search">
                                <input class="input" placeholder="@lang('global.search_here')">
                                <i class="las la-search"></i>
                            </div>
                            <div class="col-3 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>
                    </div>

                    <div class="col-12">
                        <ul class="main-ul">
                            <li class="d-flex flex-column justify-content-center align-items-center">
                                <div class="icon d-flex flex-column justify-content-center align-items-center p-2 rounded-4" tabindex="0" style="border-color: {{ $branch->color }}">
                                    <picture>
                                        <source type="image/avif" data-srcset="https://img.icons8.com/?size=50&id=3096&format=png&color=000000" />
                                        <source type="image/webp" data-srcset="https://img.icons8.com/?size=50&id=3096&format=png&color=000000" />
                                        <img class="lazy" data-src="https://img.icons8.com/?size=50&id=3096&format=png&color=000000" />
                                    </picture>
                                </div>

                                <div class="title">
                                    <span>@lang('global.all')</span>
                                </div>
                            </li>

                            {{-- <li data-id="all" style="background-color: {{ $branch->color }}">@lang('global.all')</li> --}}

                            @if ($branch->buildings->isNotEmpty())
                                <li class="d-flex flex-column justify-content-center align-items-center">
                                    <div class="icon d-flex flex-column justify-content-center align-items-center p-2 rounded-4" tabindex="0" style="border-color: {{ $branch->color }}">
                                        <picture>
                                            <source type="image/avif" data-srcset="https://img.icons8.com/fluency-systems-regular/96/shopping-mall.png" />
                                            <source type="image/webp" data-srcset="https://img.icons8.com/fluency-systems-regular/96/shopping-mall.png" />
                                            <img class="lazy" data-src="https://img.icons8.com/fluency-systems-regular/96/shopping-mall.png" />
                                        </picture>
                                    </div>

                                    <div class="title">
                                        <span>@lang('global.markets_floors')</span>
                                    </div>
                                </li>

                                {{-- <li data-id="buildings">@lang('global.markets_floors')</li> --}}
                            @endif

                            @foreach ($main_categories as $main_category)
                                <li class="d-flex flex-column justify-content-center align-items-center" data-id="{{ $main_category->id }}">
                                    @if ($main_category->image)
                                        <div class="icon d-flex flex-column justify-content-center align-items-center p-2 rounded-4" tabindex="0" style="border-color: {{ $branch->color }}">
                                            <picture>
                                                <source type="image/avif" data-srcset="{{ $main_category->uploads('image', 'avif') }}" />
                                                <source type="image/webp" data-srcset="{{ $main_category->uploads('image', 'webp') }}" />
                                                <img class="lazy" data-src="{{ $main_category->uploads('image') }}" />
                                            </picture>
                                        </div>
                                    @endif
                                    <div class="title">
                                        <span>{{ $main_category->title }}</span>
                                    </div>

                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="col-12">
                        <ul class="sub-ul d-none"></ul>
                    </div>

                    <div class="col-12">
                        <ul class="sub-sub-ul d-none"></ul>
                    </div>
                </div>

                <div class="row justify-content-center">
                    <div class="col-12 big-card">
                        <div class="row items list-view">
                            @foreach ($services as $service)
                                @switch(class_basename($service))
                                    @case('Restaurant')
                                        <div class="item col-12" data-categories="[{{ $service->category_id }} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="[{{ $service->categories->implode('id', ',') }}  @foreach ($service->branches as $service_branch) @if ($service_branch->floor_id) ,'floor-{{ $service_branch->floor_id }},'building-{{ $service_branch->floor->building_id }}' @endif @endforeach ]">
                                            <a href="#" class="item-link" data-service="restaurant" data-id='{{ $service->id }}'>
                                                <div class="item-card">
                                                    @if ($service->tag)
                                                        <div class="tag" style="background-color: {{ $service->tag->background_color }};color: {{ $service->tag->font_color }};">{{ $service->tag->title }}</div>
                                                    @endif

                                                    <picture>
                                                        <source type="image/avif" data-srcset="{{ $service->uploads('portfolio_logo', 'avif') ?? $service->logo('avif') }}" />
                                                        <source type="image/webp" data-srcset="{{ $service->uploads('portfolio_logo', 'webp') ?? $service->logo('webp') }}" />
                                                        <div class="img-wrapper">
                                                            <img class="lazy" data-src="{{ $service->uploads('portfolio_logo') ?? $service->logo() }}" />

                                                            @if ($service->default_branch?->isClosed())
                                                                <div class="overlay">
                                                                    <span>@lang('global.is_closed')</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </picture>

                                                    <div class="item-data">
                                                        <p class="title">{{ $service->title }}</p>
                                                        <span class="list-content">
                                                            <p class="category"><i class="las la-tags"></i> {{ $service->category->title }}
                                                                <span class="sub-categories">
                                                                    @if ($service->categories->isNotEmpty())
                                                                        ({{ $service->categories->implode('title', ' - ') }})
                                                                    @endif
                                                                </span>
                                                            </p>

                                                            @if (session()->get("metadata.$branch->id.order_type") === 'delivery')
                                                                <p class="delivery-fees">
                                                                    <span>
                                                                        <i class="las la-motorcycle"></i>

                                                                        @if ($service->delivery_fees)
                                                                            {{ $service->delivery_fees }} <span class='icon-saudi_riyal'></span>
                                                                        @else
                                                                            @lang('global.free')
                                                                        @endif
                                                                    </span>

                                                                    @if ($service->delivery_time_from)
                                                                        <span>|</span>
                                                                        <span>
                                                                            <i class="las la-stopwatch"></i>

                                                                            {{ $service->delivery_time_from }} @lang('global.minutes')

                                                                            @if ($service->delivery_time_to)
                                                                                - {{ $service->delivery_time_to }} @lang('global.minutes')
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                </p>
                                                            @endif

                                                            @if ($service->default_branch)
                                                                <p class="open-closed"><i class="las la-door-open"></i> @lang('global.' . ($service->default_branch->isClosed() ? 'is_closed' : 'is_open'))</p>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @break

                                    @case('Service')
                                        <div class="item col-12" data-categories="[{{ $service->categories->implode('id', ',') }} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{ $service->data_sub_categories }}">
                                            <a href="#" class="item-link" data-service="service" data-id='{{ $service->id }}'>
                                                <div class="item-card">
                                                    @if ($service->tag)
                                                        <div class="tag" style="background-color: {{ $service->tag->background_color }};color: {{ $service->tag->font_color }};">{{ $service->tag->title }}</div>
                                                    @endif

                                                    <picture>
                                                        <source type="image/avif" data-srcset="{{ $service->uploads('portfolio_logo', 'avif') ?? $service->logo('avif') }}" />
                                                        <source type="image/webp" data-srcset="{{ $service->uploads('portfolio_logo', 'webp') ?? $service->logo('webp') }}" />
                                                        <div class="img-wrapper">
                                                            <img class="lazy" data-src="{{ $service->uploads('portfolio_logo') ?? $service->logo() }}" />

                                                            @if ($service->default_branch?->isClosed())
                                                                <div class="overlay">
                                                                    <span>@lang('global.is_closed')</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </picture>

                                                    <div class="item-data">
                                                        <p class="title">{{ $service->title }}</p>
                                                        <span class="list-content">
                                                            <p class="category">
                                                                @foreach ($service->categories as $category)
                                                                    {{ $category->title }}

                                                                    @if (!$loop->last)
                                                                        -
                                                                    @endif
                                                                @endforeach
                                                            </p>

                                                            @if (session()->get("metadata.$branch->id.order_type") === 'delivery')
                                                                <p class="delivery-fees">
                                                                    <span>
                                                                        <i class="las la-motorcycle"></i>

                                                                        @if ($service->delivery_fees)
                                                                            {{ $service->delivery_fees }} <span class='icon-saudi_riyal'></span>
                                                                        @else
                                                                            @lang('global.free')
                                                                        @endif
                                                                    </span>

                                                                    @if ($service->delivery_time_from)
                                                                        <span>|</span>
                                                                        <span>
                                                                            <i class="las la-stopwatch"></i>

                                                                            {{ $service->delivery_time_from }} @lang('global.minutes')

                                                                            @if ($service->delivery_time_to)
                                                                                - {{ $service->delivery_time_to }} @lang('global.minutes')
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                </p>
                                                            @endif

                                                            @if ($service->default_branch)
                                                                <p class="open-closed"><i class="las la-door-open"></i> @lang('global.' . ($service->default_branch->isClosed() ? 'is_closed' : 'is_open'))</p>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @break

                                    @case('Spa')
                                        <div class="item col-12" data-categories="[{{ $service->categories->implode('id', ',') }} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{ $service->data_sub_categories }}">
                                            <a href="#" class="item-link" data-service="spa" data-id='{{ $service->id }}'>
                                                <div class="item-card">
                                                    @if ($service->tag)
                                                        <div class="tag" style="background-color: {{ $service->tag->background_color }};color: {{ $service->tag->font_color }};">{{ $service->tag->title }}</div>
                                                    @endif

                                                    <picture>
                                                        <source type="image/avif" data-srcset="{{ $service->uploads('portfolio_logo', 'avif') ?? $service->logo('avif') }}" />
                                                        <source type="image/webp" data-srcset="{{ $service->uploads('portfolio_logo', 'webp') ?? $service->logo('webp') }}" />
                                                        <div class="img-wrapper">
                                                            <img class="lazy" data-src="{{ $service->uploads('portfolio_logo') ?? $service->logo() }}" />

                                                            @if (!$service->default_branch?->isOpen())
                                                                <div class="overlay">
                                                                    <span>@lang('global.is_closed')</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </picture>

                                                    <div class="item-data">
                                                        <p class="title">{{ $service->title }}</p>
                                                        <span class="list-content">
                                                            <p class="category">
                                                                @foreach ($service->categories as $category)
                                                                    {{ $category->title }}

                                                                    @if (!$loop->last)
                                                                        -
                                                                    @endif
                                                                @endforeach
                                                            </p>

                                                            @if (session()->get("metadata.$branch->id.order_type") === 'delivery')
                                                                <p class="delivery-fees">
                                                                    <span>
                                                                        <i class="las la-motorcycle"></i>

                                                                        @if ($service->delivery_fees)
                                                                            {{ $service->delivery_fees }} <span class='icon-saudi_riyal'></span>
                                                                        @else
                                                                            @lang('global.free')
                                                                        @endif
                                                                    </span>

                                                                    @if ($service->delivery_time_from)
                                                                        <span>|</span>
                                                                        <span>
                                                                            <i class="las la-stopwatch"></i>

                                                                            {{ $service->delivery_time_from }} @lang('global.minutes')

                                                                            @if ($service->delivery_time_to)
                                                                                - {{ $service->delivery_time_to }} @lang('global.minutes')
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                </p>
                                                            @endif

                                                            @if ($service->default_branch)
                                                                <p class="open-closed"><i class="las la-door-open"></i> @lang('global.' . ($service->default_branch->isOpen() ? 'is_open' : 'is_closed'))</p>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @break

                                    @case('Charity')
                                        <div class="item col-12" data-categories="[{{ $service->categories->implode('id', ',') }} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{ $service->data_sub_categories }}">
                                            <a href="#" class="item-link" data-service="charity" data-id='{{ $service->id }}'>
                                                <div class="item-card">
                                                    @if ($service->tag)
                                                        <div class="tag" style="background-color: {{ $service->tag->background_color }};color: {{ $service->tag->font_color }};">{{ $service->tag->title }}</div>
                                                    @endif

                                                    <picture>
                                                        <source type="image/avif" data-srcset="{{ $service->uploads('portfolio_logo', 'avif') ?? $service->logo('avif') }}" />
                                                        <source type="image/webp" data-srcset="{{ $service->uploads('portfolio_logo', 'webp') ?? $service->logo('webp') }}" />
                                                        <div class="img-wrapper">
                                                            <img class="lazy" data-src="{{ $service->uploads('portfolio_logo') ?? $service->logo() }}" />

                                                            @if (!$service->default_branch?->is_open)
                                                                <div class="overlay">
                                                                    <span>@lang('global.is_closed')</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </picture>

                                                    <div class="item-data">
                                                        <p class="title">{{ $service->title }}</p>
                                                        <span class="list-content">
                                                            <p class="category">
                                                                @foreach ($service->categories as $category)
                                                                    {{ $category->title }}

                                                                    @if (!$loop->last)
                                                                        -
                                                                    @endif
                                                                @endforeach
                                                            </p>

                                                            @if ($service->default_branch)
                                                                <p class="open-closed"><i class="las la-door-open"></i> @lang('global.' . ($service->default_branch->is_open ? 'is_open' : 'is_closed'))</p>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @break
                                @endswitch
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if ($branch->settings->portfolio->email || $branch->settings->portfolio->phone || $branch->settings->portfolio->facebook || $branch->settings->portfolio->instagram || $branch->settings->portfolio->twitter || $branch->settings->portfolio->linkedin || $branch->settings->portfolio->youtube || $branch->settings->portfolio->snapchat || $branch->settings->portfolio->tiktok)
        <section id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="section-header">
                            <div style="background-color: {{ $branch->color }}"></div>
                            <h4 class="title">@lang('global.contact_us')</h4>
                            <div style="background-color: {{ $branch->color }}"></div>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center">
                    @if ($branch->settings->portfolio->email)
                        <a class="col-6 clickable" href="mailto:{{ $branch->settings->portfolio->email }}" click-type="email" clickable-type='branch' clickable-id="{{ $branch->id }}">
                            <div>
                                <i class="las la-envelope"></i>
                                <p class="text">@lang('validation.attributes.email')</p>
                            </div>
                        </a>
                    @endif

                    @if ($branch->settings->portfolio->phone)
                        <a class="col-6 clickable" href="tel:{{ $branch->settings->portfolio->phone }}" click-type="phone" clickable-type='branch' clickable-id="{{ $branch->id }}">
                            <div>
                                <i class="las la-phone-volume"></i>
                                <p class="text">@lang('validation.attributes.phone')</p>
                            </div>
                        </a>
                    @endif

                    @if ($branch->settings->portfolio->facebook || $branch->settings->portfolio->instagram || $branch->settings->portfolio->twitter || $branch->settings->portfolio->linkedin || $branch->settings->portfolio->youtube || $branch->settings->portfolio->snapchat || $branch->settings->portfolio->tiktok)
                        <div class="col-12 mt-2">
                            <div>
                                <ul class="social-links">
                                    @if ($branch->settings->portfolio->facebook)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->facebook }}" class="clickable" click-type="facebook" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/facebook.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->instagram)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->instagram }}" class="clickable" click-type="instagram" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/instagram.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->twitter)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->twitter }}" class="clickable" click-type="twitter" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/twitter.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->linkedin)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->linkedin }}" class="clickable" click-type="linkedin" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/linkedin.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->youtube)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->youtube }}" class="clickable" click-type="youtube" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/youtube.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->snapchat)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->snapchat }}" class="clickable" click-type="snapchat" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/snapchat.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                    @if ($branch->settings->portfolio->tiktok)
                                        <li>
                                            <a href="{{ $branch->settings->portfolio->tiktok }}" class="clickable" click-type="tiktok" clickable-type='branch' clickable-id="{{ $branch->id }}">
                                                <img src="{{ mix('website/portfolio/images/tiktok.png', 'assets') }}" />
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                                <p class="text">
                                    @lang('global.social_media')
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    <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.portfolio.modals.orders.metadata' :with-header="false" :data="['branch' => $branch, 'qrs' => $qrs, 'metadata' => $metadata]" />

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

    @if ($user?->orders()->isNotEmpty())
        <x-bootstrap.modal id="showOrdersModal" :centered="true" content='website.branches.portfolio.modals.orders.index' :data="['branch' => $branch, 'user' => $user]">
            <x-slot:header>
                <h5 class="modal-title"></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="serviceModal" :centered="true" :with-header="false" content-type='empty' />
@endsection