@extends('layouts.app')

@section('content')

{{-- ================= HERO CAROUSEL ================= --}}
<section class="hero-section">
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">

    @if($sliders->count() > 1)
    <div class="carousel-indicators text-right">
        @foreach($sliders as $i => $slide)
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $i }}" class="{{ $i === 0 ? 'active' : '' }}"></button>
        @endforeach
    </div>
    @endif

    <div class="carousel-inner">
        @forelse($sliders as $i => $slide)
        <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
            <div class="banner-slide">
                <img src="{{ \App\Helpers\ImageHelper::url($slide->image_mobile ?: $slide->image) }}" alt="{{ $slide->title }}" class="d-block d-md-none slider">
                <img src="{{ \App\Helpers\ImageHelper::url($slide->image) }}" alt="{{ $slide->title }}" class="d-none d-md-block slider">
                <div class="container-fluid h-100">
                    <div class="row h-100 align-items-center2">
                        <div class="col-lg-4 ms-auto text-white text-right pr-4">
                            @if($slide->title)<h1>{!! nl2br(e($slide->title)) !!}</h1>@endif
                            @if($slide->subtitle)<p>{{ $slide->subtitle }}</p>@endif
                            @if($slide->button_text)
                            <a href="{{ $slide->button_link ?: '#' }}" class="btn btn-light rounded-pill px-4">{{ $slide->button_text }}</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        {{-- fallback slide if no sliders have been added in admin yet --}}
        <div class="carousel-item active">
            <div class="banner-slide">
                <img src="{{ asset('frontend/images/banner_01.jpg') }}" alt="J&K Homes" class="slider">
                <div class="container-fluid h-100">
                    <div class="row h-100 align-items-center2">
                        <div class="col-lg-4 ms-auto text-white text-right pr-4">
                            <h1>Knock Down<br>& Rebuild</h1>
                            <p>At J and K Homes, we specialise in demolishing existing properties and constructing homes perfectly suited to your block of land.</p>
                            <a href="{{ route('contact') }}" class="btn btn-light rounded-pill px-4">FIND OUT MORE</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforelse
    </div>

    @if($sliders->count() > 1)
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
    @endif
</div>
</section>

{{-- ================= PROPERTY SEARCH ================= --}}
<section class="property-search py-4">
    <div class="container-fluid">
        <form method="GET" action="{{ route('properties.index') }}" class="row g-4 align-items-center">

            <div class="col-lg-3 col-md-6 search-item pt-3 pb-3">
                <label class="search-label"><i class="fas fa-home me-2"></i>TYPE OF HOME</label>
                <select name="property_type" class="form-select custom-select">
                    <option value="">ANY TYPE</option>
                    <option value="House">House</option>
                    <option value="Apartment">Apartment</option>
                    <option value="Villa">Villa</option>
                </select>
            </div>

            <div class="col-lg-2 col-md-6 search-item pt-3 pb-3">
                <label class="search-label"><i class="fas fa-bed me-2"></i>BEDROOMS</label>
                <select name="bedrooms" class="form-select custom-select">
                    <option value="">ANY NUMBER</option>
                    <option value="1">1 Bedroom</option>
                    <option value="2">2 Bedrooms</option>
                    <option value="3">3 Bedrooms</option>
                    <option value="4">4+ Bedrooms</option>
                </select>
            </div>

            <div class="col-lg-2 col-md-6 search-item pt-3 pb-3">
                <label class="search-label"><i class="fas fa-bath me-2"></i>BATHROOMS</label>
                <select name="bathrooms" class="form-select custom-select">
                    <option value="">ANY NUMBER</option>
                    <option value="1">1 Bathroom</option>
                    <option value="2">2 Bathrooms</option>
                    <option value="3">3 Bathrooms</option>
                </select>
            </div>

            <div class="col-lg-2 col-md-6 search-item pt-3 pb-3">
                <label class="search-label"><i class="fas fa-ruler-horizontal me-2"></i>LOT WIDTH</label>
                <select name="lot_width" class="form-select custom-select">
                    <option value="">ANY WIDTH</option>
                    <option value="10m">10m</option>
                    <option value="15m">15m</option>
                    <option value="20m">20m+</option>
                </select>
            </div>

            <div class="col-lg-3 text-center pt-3 pb-3">
                <button type="submit" class="btn find-btn">FIND OUT MORE</button>
            </div>

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

{{-- ================= INTRO / ABOUT SNIPPET ================= --}}
<section class="home-section py-1">
    <div>
        <div class="row g-0 align-items-stretch">
            <div class="col-lg-6">
                <div class="content-box h-100">
                    <h2 class="title-top">{{ $content['intro_title_top'] ?? 'Let us help' }}</h2>
                    <h1 class="title-main">{{ $content['intro_title_main'] ?? 'Create your new home' }}</h1>
                    <p class="content-text">{!! nl2br(e($content['intro_text'] ?? "As a family owned and operated business based in South Australia, we are dedicated to making your building dreams a reality. We pride ourselves on our ability to build well-designed custom homes that exhibit premium quality and workmanship. Our mission is to help make the building process stress free by getting projects done on time and on budget.")) !!}</p>
                    <div class="trust-text">
                        {{ $content['intro_trust_text'] ?? 'TRUST US, CHOOSE US –' }}
                        <span>{{ $content['intro_trust_highlight'] ?? 'BUILD YOUR DREAM HOME' }}</span>
                    </div>
                    <a href="{{ route('about') }}" class="btn btn-custom mt-4">FIND OUT MORE</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="image-box">
                    <img src="{{ \App\Helpers\ImageHelper::url($content['intro_image'] ?? null, 'frontend/images/homeimg.jpg') }}" alt="House" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ================= HOME DESIGNS TABS ================= --}}
<section class="products">
  <div class="container p-0">
    <h2>Our Home Designs</h2>
    <p class="text-center">J&K Homes gives you to the freedom to select the ideal home design to suit your lifestyle. Select from a range of uniquely designed floor plans and then choose the facade that most appeals to your style and taste.</p>

    <div class="container py-2 p-0">
        <ul class="nav nav-tabs d-none d-lg-flex" id="myTab" role="tablist">
            @foreach($homeDesigns as $category => $properties)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="tab-{{ $category }}" data-bs-toggle="tab" data-bs-target="#pane-{{ $category }}" type="button" role="tab">
                    {{ \App\Models\Property::categoryLabel($category) }}
                </button>
            </li>
            @endforeach
        </ul>

        <div class="tab-content accordion" id="myTabContent">
            @foreach($homeDesigns as $category => $properties)
            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }} accordion-item" id="pane-{{ $category }}" role="tabpanel">
                <h3 class="accordion-header d-lg-none" id="heading-{{ $category }}">
                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $category }}">
                        {{ \App\Models\Property::categoryLabel($category) }}
                    </button>
                </h3>
                <div id="collapse-{{ $category }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }} d-lg-block">
                    <div class="accordion-body">
                        <div id="{{ str_replace('.', '', $category) }}-slider" class="owl-carousel">
                            @forelse($properties as $property)
                            <div class="post-slide">
                                <div class="img-container">
                                    <img src="{{ \App\Helpers\ImageHelper::url($property->main_image) }}" alt="{{ $property->title }}">
                                </div>
                                <h4 class="house-title">{{ $property->title }}</h4>
                                <p class="house-desc">{{ $property->short_description }}</p>
                                <div class="house-info">
                                    @if($property->bedrooms)<span>🛏 {{ $property->bedrooms }}</span>@endif
                                    @if($property->bathrooms)<span>🛁 {{ $property->bathrooms }}</span>@endif
                                    @if($property->cars)<span>🚗 {{ $property->cars }}</span>@endif
                                    @if($property->lot_width)<span>{{ strtoupper($property->lot_width) }} WIDE</span>@endif
                                    <div class="py-1 text-center">
                                        <a href="{{ route('properties.show', $property->slug) }}" class="btn btn-more">View Details</a>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <p class="text-center py-4">More designs coming soon.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
  </div>
</section>

{{-- ================= DISPLAY HOMES ================= --}}
<section class="display-home-section">
    <div class="container-fluid px-0">
        <div class="row g-0 align-items-stretch">
            <div class="col-lg-6">
                <div class="display-content">
                    <h3>{{ $content['display_homes_title'] ?? "J&K Homes understand how important it is to experience our home designs in person." }}</h3>
                    <p>{{ $content['display_homes_text'] ?? "There's nothing quite like walking through the spaces, exploring the features, and getting inspired by the living ideas. A visit to one of our display centres can give you fresh inspiration and clarity in choosing your perfect home." }}</p>
                    <a href="{{ route('properties.index') }}" class="btn display-btn">FIND OUT MORE</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="display-image">
                    <img src="{{ \App\Helpers\ImageHelper::url($content['display_homes_image'] ?? null, 'frontend/images/displayhome.jpg') }}" alt="Display Homes">
                </div>
                <div class="capt-2"><h3>Display <br>Homes</h3></div>
            </div>
        </div>
    </div>
</section>

<section class="display-home-section">
    <div class="container-fluid px-0">
        <div class="row g-0 align-items-stretch">
            <div class="col-lg-6">
                <div class="display-content">
                    <h3>{{ $content['house_land_title'] ?? 'J&K Homes offers a wide variety of house and land packages.' }}</h3>
                    <p>{{ $content['house_land_text'] ?? "All of our House and Land Packages are thoughtfully designed to fit different lifestyles and budgets. Whether you're looking for your first home or planning a dream upgrade, we have options to suit your needs." }}</p>
                    <a href="{{ route('properties.index', ['category' => 'property']) }}" class="btn display-btn">Find a house and land package</a>
                </div>
            </div>
            <div class="col-lg-6 order-md-first">
                <div class="display-image">
                    <img src="{{ \App\Helpers\ImageHelper::url($content['house_land_image'] ?? null, 'frontend/images/houseland.jpg') }}" alt="house land">
                </div>
                <div class="capt-2"><h3>House &  <br>Land</h3></div>
            </div>
        </div>
    </div>
</section>

{{-- ================= TESTIMONIALS ================= --}}
<section class="testimonialsmain redimg py-5">
  <div class="container pt-2">
    <div class="row p-0 m-0">
       <div class="col-md-4 testiimg p-0">
         <div class="testimonial-left py-3">
            <span class="tag">Testimonials</span>
            <h2>What our clients are saying</h2>
            <p>{{ $content['testimonials_intro'] ?? 'J&K Homes made our home-buying journey smooth and stress-free. Their team was professional, supportive, and attentive to every detail.' }}</p>
         </div>
       </div>

        <div class="col-md-8">
          <section class="testimonials">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="customers-testimonials" class="owl-carousel">
                            @forelse($testimonials as $testimonial)
                            <div class="item testimonialscontent testimonial-right">
                                <div class="testislide">
                                    <img src="{{ \App\Helpers\ImageHelper::url($testimonial->image, 'frontend/images/testi01.jpg') }}" alt="{{ $testimonial->name }}">
                                    <div class="review">
                                        <div class="stars">{{ str_repeat('★', $testimonial->rating) }}{{ str_repeat('☆', 5 - $testimonial->rating) }}</div>
                                        <p>{{ $testimonial->review }}</p>
                                        <strong>{{ $testimonial->name }}</strong><br>
                                        <span>{{ $testimonial->designation }}</span>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="item testimonialscontent testimonial-right">
                                <div class="testislide">
                                    <div class="review">
                                        <p>Testimonials will appear here once added in the admin panel.</p>
                                    </div>
                                </div>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
          </section>
        </div>
    </div>
  </div>
</section>

@push('scripts')
<script>
jQuery(document).ready(function($) {
    "use strict";
    $("#9m-slider, #125m-slider, #14m-slider, #double_storey-slider").owlCarousel({
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 2],
        itemsMobile: [600, 1],
        navigation: false,
        navigationText: ["", ""],
        pagination: true,
        autoPlay: true,
        dots: true
    });
});
</script>
@endpush

@endsection