@php
    Theme::set('breadcrumbEnabled', 'no');

    Theme::asset()->usePath()->add('fancybox', 'plugins/fancybox/jquery.fancybox.min.css');

    Theme::asset()->container('header')->usePath()->add('jquery', 'js/jquery.min.js');

    Theme::asset()->container('footer')->usePath()->add('fancybox', 'plugins/fancybox/jquery.fancybox.min.js');
    Theme::asset()->usePath()->add('leaflet', 'plugins/leaflet/leaflet.css');
    Theme::asset()->container('footer')->usePath()->add('leaflet', 'plugins/leaflet/leaflet.js');
    Theme::layout('full-width');
@endphp

@include(Theme::getThemeNamespace('views.real-estate.single-layouts.partials.gallery-slider'), ['model' => $project])

<link media="all" type="text/css" rel="stylesheet" href="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/media/css/dataTables.bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/extensions/Buttons/css/buttons.bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">

<script src="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/extensions/Buttons/js/buttons.bootstrap.min.js"></script>
<script src="{{ env('APP_URL') }}vendor/core/core/base/libraries/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>

<section class="flat-section pt-0 flat-property-detail">
    <div class="container">
        <div class="header-property-detail">
            <div class="content-top d-flex justify-content-between align-items-center">
                <div class="box-name">
                    {!! BaseHelper::clean($project->status_html) !!}
                    <h4 class="title link">
                        {!! BaseHelper::clean($project->name) !!}
                    </h4>
                </div>

                @if ($project->price_from || $project->price_to)
                    <div class="box-price d-flex align-items-center">
                        <h4>{{ $project->formatted_price }}</h4>
                    </div>
                @endif
            </div>
            @include(Theme::getThemeNamespace('views.real-estate.partials.meta'), ['model' => $project])
        </div>
        <div class="row">
            <div class="col-lg-8">
                {!! apply_filters('before_single_content_detail', null, $project) !!}

                @if ($project->content)
                    <div class="single-property-element single-property-desc">
                        <div class="h7 title fw-7">{{ __('Description') }}</div>
                        <div class="body-2 text-variant-1">
                            <div class="ck-content single-detail">
                                {!! BaseHelper::clean($project->content) !!}
                            </div>
                        </div>
                    </div>
                @endif
                @if ($videoUrl = $project->getMetaData('video_url', true))
                    <div class="single-property-element single-property-video">
                        <div class="h7 title fw-7">{{ __('Video') }}</div>
                        <div class="img-video">
                            <img src="{{ RvMedia::getImageUrl($project->getMetaData('video_thumbnail', true)) ?: \Botble\Theme\Supports\Youtube::getThumbnail($videoUrl) }}" alt="{{ $project->name }}">
                            <a href="{{ $videoUrl }}" @if(\Botble\Theme\Supports\Youtube::isYoutubeURL($videoUrl)) data-fancybox="gallery2" @endif class="btn-video">
                                <x-core::icon name="ti ti-player-play-filled" />
                            </a>
                        </div>
                    </div>
                @endif
                <div class="single-property-element single-property-overview">
                    <div class="h7 title fw-7">{{ __('Overview') }}</div>
                    <div class="row row-cols-2 row-cols-lg-3 g-3 g-lg-4 info-box">
                        <div class="col item">
                            <div class="box-icon w-52">
                                <x-core::icon name="ti ti-home" />
                            </div>
                            <div class="content">
                                <span class="label">{{ __('Project ID:') }}</span>
                                <span>{{ $project->unique_id ?: $project->getKey() }}</span>
                            </div>
                        </div>
                        @if($project->categories->isNotEmpty())
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-category" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Type:') }}</span>
                                    <span>
                                    {{ collect($project->categories)->pluck('name')->implode(', ') }}
                                </span>
                                </div>
                            </div>
                        @endif
                        @if ($project->investor->name)
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-category" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Investor:') }}</span>
                                    <span>{{ $project->investor->name }}</span>
                                </div>
                            </div>
                        @endif
                        @if ($project->number_block)
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-packages" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Blocks:') }}</span>
                                    <span>{{ number_format($project->number_block) }}</span>
                                </div>
                            </div>
                        @endif
                        @if ($project->number_floor)
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-stairs" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Floors:') }}</span>
                                    <span>{{ number_format($project->number_floor) }}</span>
                                </div>
                            </div>
                        @endif
                        @if ($project->number_flat)
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-building" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Flats:') }}</span>
                                    <span>{{ number_format($project->number_flat) }}</span>
                                </div>
                            </div>
                        @endif
                        @if ($project->square)
                            <div class="col item">
                                <div class="box-icon w-52">
                                    <x-core::icon name="ti ti-ruler-2" />
                                </div>
                                <div class="content">
                                    <span class="label">{{ __('Square:') }}</span>
                                    <span>{{ $project->square_text }}</span>
                                </div>
                            </div>
                        @endif
                        <div class="col item">
                            <div class="box-icon w-52">
                                <x-core::icon name="ti ti-coin" />
                            </div>
                            <div class="content">
                                <span class="label">{{ __('Price:') }}</span>
                                <span>
                                    @if ($project->price_from)
                                        {{ format_price($project->price_from, $project->currency) }}
                                    @endif
                                    @if ($project->price_to)
                                        - {{ format_price($project->price_to, $project->currency) }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        @foreach ($project->customFields as $customField)
                            @continue(! $customField->value)

                            @php
                                $decoded = json_decode($customField->value, true);
                                $isJson = json_last_error() === JSON_ERROR_NONE && is_array($decoded);

                                $label = \Illuminate\Support\Str::title(str_replace(['_', '-'], ' ', $customField->name));
                            @endphp

                            <div class="col item">
                                <div class="box-icon w-52">
                                    @if($label == 'Unitsavailable' || $label == 'Unittypes' || $label == 'Developerinfo')
                                        <x-core::icon name="ti ti-building" />
                                    @elseif($label == 'Labels')
                                        <x-core::icon name="ti ti-tag" />
                                    @elseif($label == 'Attributes')
                                        <x-core::icon name="ti ti-bed" />
                                    @elseif($label == 'Carpetareamin')
                                        <x-core::icon name="ti ti-ruler" />
                                    @else
                                        <x-core::icon name="ti ti-tag" />
                                    @endif
                                </div>
                                <div class="content">
                                    <span class="label">{{ $label != 'Attributes' ? $label : '' }}</span>
                                    @if($isJson)
                                        
                                        {{-- Units Available --}}
                                        @if(isset($decoded['sale']) || isset($decoded['total']) || isset($decoded['available']))
                                            @if(isset($decoded['sale']['price']))
                                                <span>Sale Price: {{ number_format($decoded['sale']['price']) }}</span><br>
                                            @endif
                                            @if(isset($decoded['sale']['count']))
                                                <span>Sale Count: {{ $decoded['sale']['count'] }}</span><br>
                                            @endif
                                            @if(isset($decoded['total']))
                                                <span>Total Units: {{ $decoded['total'] }}</span><br>
                                            @endif  
                                            @if(isset($decoded['available']))
                                                <span>Available Units: {{ $decoded['available'] }}</span>
                                            @endif
                                        @endif

                                        {{-- Labels (array of only name/type) --}}
                                        @if(isset($decoded[0]['name']) && isset($decoded[0]['type']))
                                            @foreach($decoded as $label)
                                                @if(!empty($label['name']))
                                                    <span>
                                                        {{ $label['name'] }}
                                                        @if(!empty($label['type'])) ({{ $label['type'] }}) @endif
                                                    </span><br>
                                                @endif
                                            @endforeach
                                        @endif

                                        {{-- Attributes (array with key, name, value) --}}
                                        @if(isset($decoded[0]['key']) && isset($decoded[0]['value']))
                                            
                                            @foreach($decoded as $attr)
                                                @if(!empty($attr['name']))
                                                    <span class="label">{{ $attr['name'] }}</span>
                                                    <span>{{ $attr['value'] ?? 'N/A' }}</span>
                                                @endif
                                            @endforeach
                                        @endif

                                        {{-- Developer Info --}}
                                        @if(!empty($decoded['logo']) || !empty($decoded['pinTextColor']) || !empty($decoded['pinBgColor']) || !empty($decoded['name']))
                                            @if(!empty($decoded['name']))
                                                <span>Name: {{ $decoded['name'] }}</span>
                                            @else
                                                <span>N/A</span>
                                            @endif
                                        @endif

                                        {{-- Unit Types (array with slug + id + name) --}}
                                        @if(isset($decoded[0]['slug']))
                                            @foreach($decoded as $unit)
                                                @if(!empty($unit['name']))
                                                    <span>{{ $unit['name'] ?? '' }}</span>
                                                @endif
                                            @endforeach
                                        @endif

                                    @else
                                        <span>{!! BaseHelper::clean($customField->value) !!}</span>
                                    @endif
                                </div>
                            </div>

                        @endforeach
                    </div>
                </div>

                <div class="single-property-element single-property-overview">
                    <div class="h7 title fw-7">{{ __('Unit Data') }}</div>
                    <div class="row row-cols-2 row-cols-lg-3 g-3 g-lg-4 info-box">
                        <div class="table-responsive w-100">
                            <table id="kt_datatable_horizontal_scroll" class="table table-striped table-row-bordered gy-5 gs-7 w-100">
                                <thead>
                                    <tr class="fw-semibold fs-6 text-gray-800">
                                        <th class="min-w-150px">Sr No.</th>
                                        <th class="min-w-200px">Name</th>
                                        <th class="min-w-150px">Number Bedroom</th>
                                        <th class="min-w-150px">Number Bathroom</th>
                                        <th class="min-w-300px">Sale Price</th>
                                        <th class="min-w-100px">Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                        @foreach($project->units as $key => $unit)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td><a href="{{ $unit->url }}">{{ $unit->name }}</a></td>
                                            <td>{{ $unit->number_bedroom }}</td>
                                            <td>{{ $unit->number_bathroom }}</td>
                                            <td>{{ $unit->price }}</td>
                                            <td>{{ $unit->content }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                @if ($project->features->isNotEmpty())
                    <div class="single-property-element single-property-feature">
                        <div class="h7 title fw-7">{{ __('Amenities and features') }}</div>
                        <div class="box-feature">
                            <ul>
                                @foreach ($project->features as $feature)
                                    <li class="feature-item">
                                        @if($feature->icon)
                                            {!! BaseHelper::renderIcon($feature->icon) !!}
                                        @endif
                                        {{ $feature->name }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
                @if ($project->facilities->isNotEmpty())
                    <div class="single-property-element single-property-nearby">
                        <div class="h7 title fw-7">{{ __('What’s nearby?') }}</div>
                        <p class="body-2">{{ __("Explore nearby amenities to precisely locate your property and identify surrounding conveniences, providing a comprehensive overview of the living environment and the property's convenience.") }}</p>
                        <ul class="grid-3 box-nearby">
                            @foreach ($project->facilities as $facility)
                                <li class="item-nearby">
                                    <span class="label">
                                        @if($facility->icon)
                                            {!! BaseHelper::renderIcon($facility->icon) !!}
                                        @endif
                                        {{ $facility->name }}:
                                    </span>
                                    <span class="fw-7">{{ $facility->pivot->distance }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="single-property-element single-property-map">
                    <div class="h7 title fw-7">{{ __('Location') }}</div>
                    @if (theme_option('real_estate_show_map_on_single_detail_page', 'yes') === 'yes')
                        @if ($project->latitude && $project->longitude)
                            <div data-bb-toggle="detail-map" id="map" style="min-height: 400px;" data-tile-layer="{{ RealEstateHelper::getMapTileLayer() }}" data-center="{{ json_encode([$project->latitude, $project->longitude]) }}" data-map-icon="{{ $project->map_icon }}"></div>
                        @else
                            <iframe width="100%" style="min-height: 400px" src="https://maps.google.com/maps?q={{ urlencode($project->location) }}%20&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                        @endif
                    @endif
                    <ul class="info-map">
                        <li>
                            <div class="fw-7">{{ __('Address') }}</div>
                            <a class="mt-4 text-variant-1" href="https://www.google.com/maps/search/{{ urlencode($project->location) }}">
                                {{ $project->location ?: $project->short_address }}
                            </a>
                        </li>
                    </ul>

                    @include(Theme::getThemeNamespace('views.real-estate.partials.social-sharing'), ['model' => $project])
                </div>

                {!! apply_filters('after_single_content_detail', null, $project) !!}

                {!! apply_filters(BASE_FILTER_PUBLIC_COMMENT_AREA, null, $project) !!}

                @include(Theme::getThemeNamespace('views.real-estate.single-layouts.partials.reviews'), ['model' => $project])
            </div>
            <div class="col-lg-4">
                <div class="widget-sidebar fixed-sidebar wrapper-sidebar-right">
                        <div class="widget-box single-property-contact bg-surface">
                            <div class="h7 title fw-7">{{ __('Contact Agency') }}</div>

                            @if (! RealEstateHelper::hideAgentInfoInPropertyDetailPage() && ($account = $project->author))
                                <div class="box-avatar">
                                    <div class="avatar avt-100 round">
                                        <a href="{{ $account->url }}" class="d-block">
                                            {{ RvMedia::image($account->avatar->url ?: $account->avatar_url, $account->name) }}
                                        </a>
                                    </div>
                                    <div class="info line-clamp-1">
                                        <div class="text-1 name">
                                            <a href="{{ $account->url }}">{{ $account->name }}</a>
                                        </div>
                                        @if ($account->phone && ! setting('real_estate_hide_agency_phone', false))
                                            <a href="tel:{{ $account->phone }}" class="info-item">{{ $account->phone }}</a>
                                        @elseif($hotline = theme_option('hotline'))
                                            <a href="tel:{{ $hotline }}" class="info-item">{{ $hotline }}</a>
                                        @endif
                                        @if ($account->email && ! setting('real_estate_hide_agency_email', false))
                                            <a href="mailto:{{ $account->email }}" class="info-item">{{ $account->email }}</a>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            {!! apply_filters('project_right_details_info', null, $project) !!}

                            {!! apply_filters('before_consult_form', null, $project) !!}

                            {!! \Botble\RealEstate\Forms\Fronts\ConsultForm::create()
                                ->formClass('contact-form')
                                ->setFormInputWrapperClass('ip-group')
                                ->modify('content', 'textarea', ['attr' => ['class' => '']])
                                ->modify('submit', 'submit', ['attr' => ['class' => 'tf-btn primary w-100']])
                                ->add('type', 'hidden', ['attr' => ['value' => 'project']])
                                ->add('data_id', 'hidden', ['attr' => ['value' => $project->getKey()]])
                                ->addBefore('content', 'data_name', 'text', ['label' => false, 'attr' => ['value' => $project->name, 'disabled' => true]])
                                ->renderForm()
                            !!}

                            {!! apply_filters('after_consult_form', null, $project) !!}
                        </div>
                </div>
            </div>
        </div>
    </div>
</section>

@php
    $relatedProperties = app(\Botble\RealEstate\Repositories\Interfaces\PropertyInterface::class)
    ->getPropertiesByConditions(
        [
            're_properties.project_id' => $project->getKey(),
        ],
        8,
        \Botble\RealEstate\Facades\RealEstateHelper::getPropertyRelationsQuery(),
    );
@endphp

@if ($relatedProperties->isNotEmpty())
    <section class="flat-section pt-0 flat-latest-property">
        <div class="container">
            <div class="box-title">
                <div class="text-subtitle text-primary">{{ __('Latest Properties') }}</div>
                <h2 class="section-title mt-4">{{ __('Properties in project ":name"', ['name' => $project->name]) }}</h2>
            </div>
            <div class="swiper tf-latest-property" data-preview-lg="3" data-preview-md="2" data-preview-sm="2" data-space="30" data-loop="true">
                <div class="swiper-wrapper">
                    @foreach($relatedProperties as $property)
                        <div class="swiper-slide">
                            @include(Theme::getThemeNamespace('views.real-estate.properties.item-grid'), ['property' => $property, 'class' => 'style-2'])
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endif


<template id="map-popup-content">
    <div class="map-popup-content">
        <a class="map-popup-content-thumb" href="{{ $project->url }}">
            {{ RvMedia::image($project->image_thumb, $project->name) }}
            {!! BaseHelper::clean($project->status_html) !!}
        </a>
        <div class="map-popup-content__details">
            <h5 class="map-popup-content__title">
                <a href="{{ $project->url }}" target="_blank" class="map-popup-content__link">{{ $project->name }}</a>
            </h5>
            <div class="map-popup-content__price">{{ $project->category_name }}</div>
            <div class="map-popup-content__city">
                <x-core::icon name="ti ti-map-pin" />
                {{ $project->short_address }}
            </div>
        </div>
    </div>
</template>

<script>
    $("#kt_datatable_horizontal_scroll").DataTable({
        "scrollX": true,          // Horizontal scroll enable
        "paging": true,           // Enable pagination
        "pageLength": 10,         // Rows per page
        "lengthMenu": [ [10, 25, 50, 100], [10, 25, 50, 100] ], // Page size options
        "pagingType": "full_numbers" // Pagination style (numbers + next/prev)
    });
</script>