@extends('frontend::layouts.app')
@section('title', $space->title)
@section('content')
    <div class="td-services-banner has-sticky">
        <div class="td-services-banner-wrapper">
            <div class="td-services-banner-left">
                <h3 class="wow img-custom-anim-left" data-wow-duration="1.5s" data-wow-delay="0.1s">{{ $space->title }}
                </h3>
                <p class="wow img-custom-anim-right" data-wow-duration="1.5s" data-wow-delay="0.4s">{{ $space->sub_title }}
                </p>
                <div class="row td-services-banner-left-cards wow img-custom-anim-left" data-wow-duration="1.5s"
                    data-wow-delay="0.6s">
                    @php
                        $services = json_decode($space->services, true);
                    @endphp

                    <div class="col-6 col-sm-6 td-banner-left-singleCard">
                        <div class="td-services-banner-left-card">
                            <i class="text-white {{ $services['first_icon'] }}"></i>
                            <h5>{{ $services['first_title'] }}</h5>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 td-banner-left-singleCard">
                        <div class="td-services-banner-left-card">
                            <i class="text-white {{ $services['second_icon'] }}"></i>
                            <h5>{{ $services['second_title'] }}</h5>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 td-banner-left-singleCard">
                        <div class="td-services-banner-left-card">
                            <i class="text-white {{ $services['third_icon'] }}"></i>
                            <h5>{{ $services['third_title'] }}</h5>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 td-banner-left-singleCard">
                        <div class="td-services-banner-left-card">
                            <i class="text-white {{ $services['fourth_icon'] }}"></i>
                            <h5>{{ $services['fourth_title'] }}</h5>
                        </div>
                    </div>
                </div>
                <div class="td-services-banner-left-button wow img-custom-anim-top" data-wow-duration="1.5s"
                    data-wow-delay="0.8s">
                    <a href="{{ route('user.booking.checkout', encrypt($space->id)) }}" class="td-btn td-btn-xl">
                        <span class="td-btn-wrap">
                            <span class="td-btn-y-1">{{ __('Book Now') }}</span>
                            <span class="td-btn-y-2">{{ __('Book Now') }}</span>
                        </span>
                        <i></i>
                    </a>
                    <p>{{ setting('currency_symbol') }}{{ $space->price }}/{{ $space->price_type }}</p>
                </div>
            </div>
            <div class="td-services-banner-right">
                <div class="td-services-banner-right-img">
                    <img src="{{ asset($space->banner_image) }}" alt="">
                </div>
            </div>
        </div>
        <div class="td-services-banner-element">
            <img src="{{ asset('/frontend/default/img/service-images/services-element.png') }}" alt="">
        </div>
    </div>

    @php
        $full_galleries = array_map(
            fn($chunk) => array_values($chunk),
            array_chunk(array_values($space->galleries), 3),
        );
    @endphp

    <div class="td-services-gallery">
        <div class="container">
            <div class="row g-4">
                @foreach ($full_galleries as $galleries)
                    @if ($loop->odd)
                        <div class="col-md-4">
                            <div class="row g-4">
                                @foreach ($galleries as $gallery)
                                    @if ($loop->index < 2)
                                        <div class="col-12">
                                            <img class="td-services-gallery-leftImg" src="{{ asset($gallery) }}"
                                                alt="">
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        @if (isset($galleries[2]))
                            <div class="col-md-8">
                                <img class="td-services-gallery-rightImg" src="{{ asset($galleries[2]) }}" alt="">
                            </div>
                        @endif
                    @else
                        @if (isset($galleries[2]))
                            <div class="col-md-8">
                                <img class="td-services-gallery-rightImg" src="{{ asset($galleries[2]) }}" alt="">
                            </div>
                        @endif

                        <div class="col-md-4">
                            <div class="row g-4">
                                @foreach ($galleries as $gallery)
                                    @if ($loop->index < 2)
                                        <div class="col-12">
                                            <img class="td-services-gallery-leftImg" src="{{ asset($gallery) }}"
                                                alt="">
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
    <div class="td-services-description">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-12 td-services-description-card">
                    <h3>{{ __('Description') }}</h3>
                    <p>{{ $space->description }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="td-services-info">
        <div class="container">
            <h3>{{ __('Info') }}</h3>
            <div class="row g-4">
                <div class="col-sm-6 col-lg-3">
                    <div class="td-services-info-card">
                        <h5>{{ __('Capacity') }}</h5>
                        <div class="td-services-info-card-des">
                            <i class="{{ $space->capacity_icon }}"></i>
                            <p>{{ $space->capacity }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="td-services-info-card">
                        <h5>{{ __('Benefit') }}</h5>
                        <div class="td-services-info-card-des">
                            <i class="{{ $space->benefit_icon }}"></i>
                            <p>{{ $space->benefit }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="td-services-info-card">
                        <h5>{{ __('Area') }}</h5>
                        <div class="td-services-info-card-des">
                            <i class="{{ $space->area_icon }}"></i>
                            <p>{{ $space->area }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="td-services-info-card">
                        <h5>{{ __('Price Value') }}</h5>
                        <div class="td-services-info-card-des">
                            <p>{{ $currencySymbol . $space->price }} /{{ $space->price_type }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="td-our-facility">
        <div class="td-our-facility-wrapper">
            <div class="container">
                <div class="row td-our-facility-card-full">
                    <div class="col-6 col-sm-4 col-md-3 td-our-facility-card">
                        <h2><span>{{ __('Our Facility') }}</span></h2>
                    </div>
                    @foreach ($space->facilities as $content)
                        <div class="col-6 col-sm-4 col-md-3 td-our-facility-card">
                            <div class="td-our-facility-card-single">
                                <img src="{{ asset($content['icon']) }}" alt="{{ $content['title'] }}">
                                <h5>{{ $content['title'] }}</h5>
                                <h5>{{ setting('currency_symbol') }}{{ $content['price'] }}</h5>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="td-our-facility-wrapper-title">
                <div class="td-our-facility-wrapper-title-text">
                    <h2>{{ __('FACILITY') }}</h2>
                </div>
            </div>
            <div class="td-our-facility-wrapper-element">
                <img class="d-none d-xxl-block"
                    src="{{ asset('frontend/default/img/facility-img/facility-right-element.png') }}" alt="">
            </div>
        </div>
    </section>

    @php
        $types = \App\Models\SpaceType::where('status', 1)->get();
    @endphp

    <!-- our services start -->
    <section class="td-services">
        <div class="container">
            <div class="td-services-wrapper">
                <div class="td-services-title">
                    <img src="{{ asset('frontend/default/img/icon/title-elem.png') }}" alt="">
                    <h2>{{ __('More Spaces') }}</h2>
                </div>
                <div class="td-services-tab">
                    <ul class="td-services-tab-buttons" id="myTab" role="tablist">
                        @foreach ($types as $type)
                            <li class="nav-item" role="presentation">
                                <button @class(['nav-link', 'active' => $loop->first]) id="{{ $type->id }}-tab" data-bs-toggle="tab"
                                    data-bs-target="#space-{{ $type->id }}" type="button" role="tab"
                                    aria-controls="office" aria-selected="true">{{ $type->name }}</button>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        @foreach ($types as $type)
                            <div @class(['tab-pane fade', 'show active' => $loop->first]) id="space-{{ $type->id }}" role="tabpanel"
                                aria-labelledby="{{ $type->id }}-tab">
                                <div class="swiper myServicesSwiper">
                                    <div class="swiper-wrapper">
                                        @php

                                            $spaces = App\Models\Space::with('location')
                                                ->where('type_id', $type->id)
                                                ->where('status', true)
                                                ->latest()
                                                ->get();

                                        @endphp

                                        @foreach ($spaces as $space)
                                            <div class="swiper-slide">
                                                <div class="td-services-card">
                                                    <a href="{{ route('service.details', encrypt($space->id)) }}">
                                                        <img src="{{ asset('/frontend/default/img/service-images/service-image-1.png') }}"
                                                            alt="">
                                                    </a>
                                                    <a href="{{ route('service.details', encrypt($space->id)) }}"
                                                        class="td-services-card-link">
                                                        <span>{{ $space->title }}</span>
                                                        <img src="{{ asset('/frontend/default/img/icon/right-arrow-white.svg') }}"
                                                            alt="">
                                                    </a>
                                                    @if (multiLocationEnabled())
                                                        <div class="td-services-card-location">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="16" viewBox="0 0 14 16" fill="none">
                                                                <path
                                                                    d="M9.33268 7.33333C9.33268 8.622 8.28801 9.66667 6.99935 9.66667C5.71068 9.66667 4.66602 8.622 4.66602 7.33333C4.66602 6.04467 5.71068 5 6.99935 5C8.28801 5 9.33268 6.04467 9.33268 7.33333Z"
                                                                    stroke="#FDD702" stroke-width="1.5"></path>
                                                                <path
                                                                    d="M7 1.33203C10.247 1.33203 13 4.02068 13 7.28254C13 10.5963 10.2022 12.9218 7.618 14.5032C7.42967 14.6095 7.2167 14.6654 7 14.6654C6.7833 14.6654 6.57033 14.6095 6.382 14.5032C3.8026 12.9064 1 10.6078 1 7.28254C1 4.02068 3.75296 1.33203 7 1.33203Z"
                                                                    stroke="#FDD702" stroke-width="1.5"></path>
                                                            </svg>
                                                            <span>{{ $space->location?->name }}</span>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- our services end -->

    <!-- testimonial section start -->
    @php
        $data = json_decode(getLandingData('testimonial')->data, true);
    @endphp
    <div class="mt-5">
        @include('frontend::home.include.__testimonial', ['data' => $data])
    </div>
    <!-- testimonial section end -->
@endsection
