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

@section('content')
@if ($advertisement_locations->isNotEmpty())
<section class="advertisements mb-4">
    <div class="container">
        <div class="row justify-content-center">
            <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->portfolio->about->{$locale})
<section id="about" class="mb-4">
    <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
@if ($services->isNotEmpty())
<section id="services">
    <div class="container">
        <div class="row justify-content-center mb-2">
            <div class="col-12">
                <div class="section-header mb-2">
                    <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 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" data-view="list-view"></i>

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

        <div class="row justify-content-center mb-2 categories">
            <div class="col-12">
                <ul class="main-ul">
                    <li data-id="all" style="background-color: {{$branch->color}}">@lang('global.all')</li>

                    @if ($branch->buildings->isNotEmpty())
                    <li data-id="buildings">@lang('global.markets_floors')</li>
                    @endif

                    @foreach ($main_categories as $main_category)
                    <li data-id="{{ $main_category->id }}">
                        @if ($main_category->image)
                        <img data-src="{{ $main_category->uploads('image') }}" class="lazy">
                        @endif
                        {{ $main_category->title }}
                    </li>
                    @endforeach
                </ul>
            </div>

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

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

        <div class="row justify-content-center">
            <div class="col-12 big-card">
                <div class="row items grid-view">
                    @foreach ($services as $service)
                    @switch(class_basename($service))
                    @case('Restaurant')
                        <div class="item col-lg-3 col-4" 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="#" data-service="restaurant" data-id='{{ $service->id }}'>
                            <div>
                                <img data-src="{{ $service->logo() }}" class="lazy">
                                <p>{{ $service->title }}</p>
                                <div></div>
                            </div>
                        </a>
                    </div>
                    @break
                    @case('Service')
                    <div class="item col-lg-3 col-4" data-categories="[{{$service->categories->implode('id',',')}} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{$service->data_sub_categories}}" >
                        <a href="#" data-service="service" data-id="{{ $service->id }}">
                        <div>
                            <img data-src="{{ $service->logo() }}" class="lazy">
                            <p>{{ $service->title }}</p>
                            <div></div>
                        </div>
                        </a>
                    </div>
                    @break
                    @case('Spa')
                    <div class="item col-lg-3 col-4" data-categories="[{{$service->categories->implode('id',',')}} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{$service->data_sub_categories}}" >
                        <a href="#" data-service="spa" data-id="{{ $service->id }}">
                            <div>
                                <img data-src="{{ $service->logo() }}" class="lazy">
                                <p>{{ $service->title }}</p>
                                <div></div>
                            </div>
                        </a>
                    </div>
                    @break
                    @case('Charity')
                    <div class="item col-lg-3 col-4" data-categories="[{{$service->categories->implode('id',',')}} @if ($service->branches->pluck('floor_id')) ,'buildings' @endif]" data-sub-categories="{{$service->data_sub_categories}}" >
                        <a href="#" data-service="charity" data-id="{{ $service->id }}">
                        <div>
                            <img data-src="{{ $service->logo() }}" class="lazy">
                            <p>{{ $service->title }}</p>
                            <div></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 mb-3">
                    <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-4">
                <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

@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