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

@section('content')
    @if ($pageBuilder)
        @include('website.branches.portfolio.builder.index')
    @else
        @include('website.branches.portfolio.partials.advertisements')

        @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: {{ $theme->button_bg }};color:{{ $theme->button_font }}">
                        <i class="las la-download"></i> @lang('global.install_pwa')
                    </a>
                </div>
            </div>
        </div>

        <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: {{ $theme->section_bg }}"></div>
                                <h4 class="title">{{ $branch->settings->portfolio->services_title->{$locale} }}</h4>
                                <div style="background-color: {{ $theme->section_bg }}"></div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row justify-content-center mt-2 categories" id="stickyCategories" style="width:100% !important;">
                    <div class="col-12">
                        <div class="row align-items-center">
                            <div class="col-11 search">
                                <input class="input" placeholder="@lang('global.search_here')">
                                <i class="las la-search"></i>
                            </div>
                            <div class="col-1 view p-0">
                                <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 " data-id="all">
                                <div class="icon d-flex flex-column justify-content-center align-items-center p-2 rounded-4 active" tabindex="0">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="image">
                                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                                    </svg>
                                </div>

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

                            @if ($branch->buildings->isNotEmpty())
                                <li class="d-flex flex-column justify-content-center align-items-center" data-id="buildings">
                                    <div class="icon d-flex flex-column justify-content-center align-items-center p-2 rounded-4" tabindex="0">
                                        <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>
                            @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">
                                            <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" style="background-color: {{ $theme->main_bg }}">
                        <div class="row items list-view">
                            @for ($i = 0; $i < 4; $i++)
                                <div class="col-12">
                                    <div class="ph-item">
                                        <div class="ph-col-2">
                                            <div class="ph-avatar"></div>
                                        </div>
                                        <div class="item-data ph-col-10">
                                            <div class="ph-row">
                                                <div class="ph-col-6 big"></div>
                                                <div class="ph-col-6 empty big"></div>

                                                <div class="ph-col-8"></div>
                                                <div class="ph-col-4 empty"></div>

                                                <div class="ph-col-4"></div>
                                                <div class="ph-col-2"></div>
                                                <div class="ph-col-6 empty"></div>

                                                <div class="ph-col-3"></div>
                                                <div class="ph-col-9 empty"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @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" style="background-color: {{ $theme->main_bg }}">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="section-header">
                                <div style="background-color: {{ $theme->section_bg }}"></div>
                                <h4 class="title">@lang('global.contact_us')</h4>
                                <div style="background-color: {{ $theme->section_bg }}"></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

    @endif

    @if (!$sourceQr || $sourceQr->show_location_modal)
        <x-bootstrap.modal id="metadataModal" :centered="true" content='website.branches.portfolio.modals.orders.metadata' :with-header="false" :data="['branch' => $branch, 'qrs' => $qrs, 'metadata' => $metadata, 'theme' => $theme, 'sourceQr' => $sourceQr]" />
    @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, 'theme' => $theme]" />
        @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, 'theme' => $theme]" />
        @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, 'theme' => $theme]" :with-header="false">
            <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' />
    @if ($pageBuilder)
        <div id="qrSectionModal" class="modal fade qr-section-modal" tabindex="-1" aria-labelledby="qrSectionModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 id="qrSectionModalTitle" class="modal-title"></h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="@lang('qr_builder.close')"></button>
                    </div>
                    <div class="modal-body"></div>
                </div>
            </div>
        </div>
    @endif
@endsection