@extends('layouts.app')

@push('page-styles')
<link href="{{ asset('frontend/css/properties.css') }}" rel="stylesheet">
@endpush

@section('content')

@include('partials.page-banner', [
    'bannerTitle' => $property->title,
    'bannerImage' => \App\Helpers\ImageHelper::url($property->main_image),
    'breadcrumbs' => [
        ['label' => 'Property', 'url' => route('properties.index')],
        ['label' => $property->title],
    ],
])

<div class="container">
<div>
<section class="property-gallery mt-4 mb-4">
<div class="container">
    <div class="row">

        {{-- Main Slider --}}
        <div class="col-lg-9 p-0">
            <div id="propertyCarousel" class="carousel slide">
                <div class="carousel-inner">

                    <div class="property-info">
                        <span class="badge-property">{{ $property->property_type }}</span>
                        <div class="mt-3">
                            <h4>{{ $property->title }}</h4>
                        </div>
                    </div>

                    <div class="carousel-item active">
                        <img src="{{ \App\Helpers\ImageHelper::url($property->main_image) }}" class="d-block w-100">
                    </div>

                    @foreach($property->images as $image)
                    <div class="carousel-item">
                        <img src="{{ \App\Helpers\ImageHelper::url($image->image) }}" class="d-block w-100">
                    </div>
                    @endforeach

                </div>

                <button class="carousel-control-prev" type="button" data-bs-target="#propertyCarousel" data-bs-slide="prev">
                    <span class="nav-btn"><i class="bi bi-chevron-left"></i></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#propertyCarousel" data-bs-slide="next">
                    <span class="nav-btn"><i class="bi bi-chevron-right"></i></span>
                </button>
            </div>
        </div>

        {{-- Thumbnail Column --}}
        <div class="col-lg-3 p-0">
            <div class="thumb-wrapper">
                <button class="thumb-arrow" id="thumbUp"><i class="bi bi-chevron-up"></i></button>

                <div class="thumb-container" id="thumbContainer">
                    <img src="{{ \App\Helpers\ImageHelper::url($property->main_image) }}" class="thumb active" data-bs-target="#propertyCarousel" data-bs-slide-to="0">

                    @foreach($property->images as $i => $image)
                    <img src="{{ \App\Helpers\ImageHelper::url($image->image) }}" class="thumb" data-bs-target="#propertyCarousel" data-bs-slide-to="{{ $i + 1 }}">
                    @endforeach
                </div>

                <button class="thumb-arrow" id="thumbDown"><i class="bi bi-chevron-down"></i></button>
            </div>
        </div>

    </div>
</div>
</section>
</div>

<section class="property-details py-2">
<div class="container">

    <div class="d-lg-flex justify-content-between align-items-start mb-1">
        <div>
            <h3 class="property-title">{{ $property->title }}</h3>
            <p class="property-location"><i class="bi bi-geo-alt-fill"></i> {{ $property->address ?: $property->location }}</p>
        </div>
        <div class="text-lg-end mt-3 mt-lg-0">
            @if($property->show_price && $property->price)
            <h3 class="property-price">${{ number_format($property->price, 0) }}</h3>
            @endif
            <div class="property-actions mt-3">
                <a href="#" onclick="navigator.share ? navigator.share({title: '{{ $property->title }}', url: window.location.href}) : window.print(); return false;"><i class="bi bi-share"></i></a>
            </div>
        </div>
    </div>

    @if($property->description)
    <h4 class="section-title">Description</h4>
    <hr>
    <p>{{ $property->short_description ?: \Illuminate\Support\Str::limit(strip_tags($property->description), 220) }}</p>

    @if($property->additional_description)
    <p class="collapse" id="moreText">{!! nl2br(e($property->additional_description)) !!}</p>
    <button class="btn read-more-btn" data-bs-toggle="collapse" data-bs-target="#moreText">Read More</button>
    @endif
    @endif

    <h4 class="section-title mt-2">Property Details</h4>
    <hr>
    <div class="row">
        <div class="col-md-6">
            <ul class="detail-list">
                @if($property->property_ref)<li><strong>Property ID:</strong> {{ $property->property_ref }}</li>@endif
                @if($property->show_price && $property->price)<li><strong>Price:</strong> ${{ number_format($property->price, 0) }}</li>@endif
                @if($property->property_size)<li><strong>Property Size:</strong> {{ $property->property_size }}</li>@endif
                @if($property->bedrooms)<li><strong>Bedrooms:</strong> {{ $property->bedrooms }}</li>@endif
                @if($property->bathrooms)<li><strong>Bathrooms:</strong> {{ $property->bathrooms }}</li>@endif
            </ul>
        </div>
        <div class="col-md-6">
            <ul class="detail-list">
                @if($property->cars)<li><strong>Garage:</strong> {{ $property->cars }}</li>@endif
                @if($property->garage_size)<li><strong>Garage Size:</strong> {{ $property->garage_size }}</li>@endif
                @if($property->year_built)<li><strong>Year Built:</strong> {{ $property->year_built->format('Y-m-d') }}</li>@endif
                <li><strong>Property Type:</strong> {{ $property->property_type }}</li>
                <li><strong>Property Status:</strong> {{ $property->status_label }}</li>
            </ul>
        </div>
    </div>

    @if(!empty($property->features))
    <h4 class="section-title mt-5">Features</h4>
    <hr>
    <div class="row">
        @foreach(collect($property->features)->chunk((int) ceil(count($property->features) / 3)) as $chunk)
        <div class="col-md-4">
            <ul class="feature-list">
                @foreach($chunk as $feature)
                <li><i class="bi bi-check-square-fill"></i> {{ $feature }}</li>
                @endforeach
            </ul>
        </div>
        @endforeach
    </div>
    @endif

</div>
</section>

@if($property->floorPlans->count())
<section class="floor-plan py-0">
    <div class="container">
        <h3 class="floor_section-title">Floor Plan</h3>

        <div class="accordion custom-floor-plan" id="floorPlanAccordion">
            @foreach($property->floorPlans as $plan)
            <div class="accordion-item">
                <h4 class="accordion-header">
                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#floor{{ $plan->id }}">
                        <span class="floor-name">{{ strtoupper($plan->name) }}</span>
                        @if($plan->size)<span class="floor-size">{{ $plan->size }}</span>@endif
                    </button>
                </h4>
                <div id="floor{{ $plan->id }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#floorPlanAccordion">
                    <div class="accordion-body">
                        <img src="{{ \App\Helpers\ImageHelper::url($plan->image) }}" class="img-fluid floor-img" alt="{{ $plan->name }}">
                        @if($plan->description)
                        <p class="mt-4">{{ $plan->description }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

</div>

@push('scripts')
<script>
const thumbs = document.querySelectorAll(".thumb");
thumbs.forEach((thumb) => {
    thumb.addEventListener("click", () => {
        thumbs.forEach(t => t.classList.remove("active"));
        thumb.classList.add("active");
    });
});

const thumbContainer = document.getElementById("thumbContainer");
const btnUp = document.getElementById("thumbUp");
const btnDown = document.getElementById("thumbDown");
btnUp?.addEventListener("click", () => { thumbContainer.scrollTop -= 140; });
btnDown?.addEventListener("click", () => { thumbContainer.scrollTop += 140; });
</script>
@endpush

@endsection