@extends('frontend::layouts.app')
@section('title', $location->title)
@section('content')
    <!-- common page header start -->
    <div class="td-page-header">
        <div class="container">
            <div class="td-page-header-indicator">
                <ul>
                    <li>
                        <a href="{{ url('/') }}">{{ __('Home') }}</a>
                    </li>
                    <li>
                        <a href="{{ request()->fullUrl() }}">{{ __('Location Details') }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="td-page-header-element">
            <img src="{{ asset('frontend/default/img/elements/header-shape.png') }}" alt="">
        </div>
        <div class="td-page-header-elementLeft">
            <img src="{{ asset('frontend/default/img/elements/header-shape-left.png') }}" alt="">
        </div>
    </div>
    <!-- common page header end -->

    <!-- location overview start -->
    <section class="td-location-overview-2">
        <div class="container">
            <div class="td-location-overview-2-box">
                <div class="row gy-4 gy-lg-0 gx-0 gx-lg-4 gx-xl-5 align-items-center">
                    <div class="col-lg-6">
                        <div class="td-location-overview-2-box-left">
                            <div class="td-location-overview-2-box-left-img">
                                <img src="{{ asset($location->banner_image) }}" alt="{{ $location->title }}">
                            </div>
                            <div class="td-location-overview-2-box-left-text">
                                <h2>{{ $location->title }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="td-location-overview-2-box-right">
                            <div class="td-location-overview-2-box-right-title">
                                <h3>{{ __('Overview') }}</h3>
                                <p>
                                    {{ $location->overview }}
                                </p>
                            </div>
                            <div class="td-location-overview-2-box-right-details">
                                <div class="row g-4">
                                    <div class="col-sm-6">
                                        <div class="td-location-overview-2-box-right-details-card">
                                            <div class="td-location-overview-2-box-right-details-card-text">
                                                <h4>{{ $location->name }}</h4>
                                                <p>{{ $location->location }}</p>
                                                <a href="#locationMap" class="share">
                                                    {{ __('Get Direction') }}
                                                    <i class="fa-solid fa-chevron-right"></i>
                                                </a>
                                            </div>
                                            <div class="td-location-overview-2-box-right-details-card-icon">
                                                <img
                                                    src="{{ asset('frontend/default/img/location-img/location-img-2/location-details-icon.svg') }}"alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="td-location-overview-2-box-right-details-card">
                                            <div class="td-location-overview-2-box-right-details-card-text">
                                                <h4>{{ __('Phone') }}</h4>
                                                <p>{{ $location->phone }}</p>
                                                <a href="tel:{{ $location->phone }}" class="share">
                                                    {{ __('Call Now') }}
                                                    <i class="fa-solid fa-chevron-right"></i>
                                                </a>
                                            </div>
                                            <div class="td-location-overview-2-box-right-details-card-icon">
                                                <img src="{{ asset('frontend/default/img/location-img/location-img-2/call-details-icon.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="td-location-overview-2-box-right-details-card">
                                            <div class="td-location-overview-2-box-right-details-card-text">
                                                <h4>{{ __('Email') }}</h4>
                                                <p>{{ $location->email }}</p>
                                                <a href="mailto:{{ $location->email }}}" class="share">
                                                    {{ __('Send Mail') }}
                                                    <i class="fa-solid fa-chevron-right"></i>
                                                </a>
                                            </div>
                                            <div class="td-location-overview-2-box-right-details-card-icon">
                                                <img src="{{ asset('frontend/default/img/location-img/location-img-2/email-details-icon.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="td-location-overview-2-box-right-details-card">
                                            <div class="td-location-overview-2-box-right-details-card-text">
                                                <h4>{{ __('Share') }}</h4>
                                                <div class="td-location-overview-2-box-right-details-card-text-icon">
                                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}"
                                                        class="social-icon" target="_blank">
                                                        <i class="fa-brands fa-facebook-f"></i>
                                                    </a>
                                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}"
                                                        class="social-icon" target="_blank">
                                                        <i class="fa-brands fa-x-twitter"></i>
                                                    </a>
                                                    <a href="https://api.whatsapp.com/send?text={{ urlencode(request()->fullUrl()) }}"
                                                        class="social-icon" target="_blank">
                                                        <i class="fa-brands fa-whatsapp"></i>
                                                    </a>
                                                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(request()->fullUrl()) }}"
                                                        class="social-icon" target="_blank">
                                                        <i class="fa-brands fa-linkedin-in"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="td-location-overview-2-box-right-details-card-icon">
                                                <img src="{{ asset('frontend/default/img/location-img/location-img-2/share-details-icon.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="td-location-overview-2-box-right-button">
                                <a href="{{ route('user.booking.checkout') }}" class="td-services-2-left-button">
                                    {{ __('Book a Tour') }}
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                        viewBox="0 0 18 18" fill="">
                                        <path
                                            d="M9.3511 3.19433C9.10776 3.43425 9.08493 3.81335 9.28441 4.07935L9.34433 4.1489L13.4625 8.325L2.925 8.325C2.55221 8.325 2.25 8.62721 2.25 9C2.25 9.34412 2.5075 9.62809 2.84033 9.66974L2.925 9.675H13.4625L9.34433 13.8511C9.10441 14.0944 9.08697 14.4738 9.2902 14.737L9.3511 14.8057C9.59444 15.0456 9.97384 15.063 10.237 14.8598L10.3057 14.7989L15.5557 9.4739C15.7932 9.23299 15.813 8.85817 15.615 8.59494L15.5557 8.5261L10.3057 3.2011C10.0439 2.93563 9.61657 2.9326 9.3511 3.19433Z"
                                            fill="" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- location overview end -->

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

    <section class="td-services-2">
        <div class="container">
            <div class="td-services-2-tabs">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between mb-40">
                    <div class="td-services-title td-services-title-page">
                        <img src="{{ asset('frontend/default/img/icon/icon-2/title-icon.svg') }}" alt="">
                        <h2>{{ __(':location_name Spaces', ['location_name' => $location->name]) }}</h2>
                    </div>
                </div>
                <div class="full-tab">
                    <div class="full-tab-content">
                        <div class="full-tab-content-buttons" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            @foreach ($types as $type)
                                <button @class(['tab-button', '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>
                            @endforeach
                        </div>
                        <div class="full-tab-content-cards tab-content" id="v-pills-tabContent">
                            @foreach ($types as $type)
                                <div @class(['tab-pane fade', 'show active' => $loop->first]) id="space-{{ $type->id }}" role="tabpanel"
                                    aria-labelledby="{{ $type->id }}-tab">
                                    @php
                                        $spaces = App\Models\Space::where('type_id', $type->id)
                                            ->where('status', true)
                                            ->where('location_id', $location->id)
                                            ->latest()
                                            ->get();
                                    @endphp
                                    <div class="office-space-content">
                                        <div class="row gy-4 gy-md-0 gx-4">
                                            @foreach ($spaces as $space)
                                                <div class="col-sm-6 col-md-4">
                                                    <div class="tab-service-card">
                                                        <a href="{{ route('service.details', encrypt($space->id)) }}"
                                                            class="image-container">
                                                            <div class="img">
                                                                <img src="{{ asset($space->banner_image) }}"
                                                                    alt="{{ $space->title }}">
                                                            </div>
                                                            <div class="location">
                                                                <img src="{{ asset('frontend/default/img/service-images/location-icon-black.svg') }}"
                                                                    alt="{{ $space->location?->name }}">
                                                                {{ $space->location?->name }}
                                                            </div>
                                                        </a>
                                                        <a href="{{ route('service.details', encrypt($space->id)) }}"
                                                            class="title">
                                                            {{ $space->title }}
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="td-services-2-element">
            <img src="{{ asset('frontend/default/img/service-images/service-images-2/service-element.svg') }}"
                alt="">
        </div>
    </section>

    <div id="locationMap" class="td-location-fullMap">
        <div class="container">
            {!! $location->map_location !!}
        </div>
    </div>
@endsection
