@extends('layouts.app')

@section('content')
    <section id="heroCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            @foreach ($promo as $key => $item)
                <li data-target="#heroCarousel" data-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}">
                </li>
            @endforeach
        </ol>

        <div class="carousel-inner">
            @foreach ($promo as $key => $item)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}"
                    style="background-image: url('{{ asset('storage/' . $item->gambar) }}'); background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;">
                    <div class="overlay"></div>
                    <div class="container">
                        <div class="row no-gutters slider-text align-items-center">
                            <div class="col-lg-7 col-md-6 ftco-animate d-flex align-items-end">
                                <div class="text text-white">
                                    <h1 class="mb-4">{{ $item->judul_promo }}</h1>
                                    <p style="font-size: 18px;">
                                        {!! Str::limit(strip_tags($item->deskripsi), 100) !!}
                                        <a href="{{ url('promo/detail/' . $item->slug) }}">Baca Selengkapnya</a>
                                    </p>
                                    @if ($item->link)
                                        <p><a href="{{ url('promo/detail/' . $item->slug) }}"
                                                class="btn btn-primary py-3 px-4">Lihat Promo Saat Ini</a>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Sebelumnya</span>
        </a>
        <a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Berikutnya</span>
        </a>
    </section>

    <section class="ftco-section ftco-no-pb ftco-no-pt bg-primary">
        <div class="container">
            <div class="row d-flex no-gutters">
                <div class="col-md-3 d-flex align-items-stretch ftco-animate">
                    <div class="media block-6 services services-bg d-block text-center px-4 py-5">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-business"></span>
                        </div>
                        <div class="media-body py-md-4">
                            <h3>Dipercaya Ribuan Keluarga</h3>
                            <p>Kami telah membantu banyak keluarga menemukan rumah impian mereka dengan aman dan nyaman.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 d-flex align-items-stretch ftco-animate">
                    <div class="media block-6 services services-bg services-darken d-block text-center px-4 py-5">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-home"></span>
                        </div>
                        <div class="media-body py-md-4">
                            <h3>Pilihan Properti Beragam</h3>
                            <p>Tersedia berbagai tipe rumah dan perumahan sesuai kebutuhan dan anggaran Anda.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 d-flex align-items-stretch ftco-animate">
                    <div class="media block-6 services services-bg services-lighten d-block text-center px-4 py-5">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-stats"></span>
                        </div>
                        <div class="media-body py-md-4">
                            <h3>Pembiayaan Mudah</h3>
                            <p>Kami bekerja sama dengan berbagai bank untuk memudahkan proses KPR dan cicilan rumah Anda.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 d-flex align-items-stretch ftco-animate">
                    <div class="media block-6 services services-bg d-block text-center px-4 py-5">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-quarantine"></span>
                        </div>
                        <div class="media-body py-md-4">
                            <h3>Harga Terjamin</h3>
                            <p>Dapatkan kepastian harga tanpa biaya tersembunyi, sesuai kesepakatan sejak awal.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 heading-section text-center ftco-animate mb-5">
                    <span class="subheading">Apa yang Kami Tawarkan</span>
                    <h2 class="mb-2">Properti Unggulan</h2>
                </div>
            </div>
            <div class="row ftco-animate">
                <div class="col-md-12">
                    <div class="carousel-properties owl-carousel">
                        @foreach ($perumahan as $item)
                            @php
                                $gambar = $item->gambar;
                                $cover = $gambar[0]['galeri'] ?? 'default.jpg';
                                $unitTersedia = $unitRumah[$item->id] ?? 0;
                            @endphp
                            <div class="item">
                                <div class="property-wrap ftco-animate">
                                    <a href="{{ url('perumahan/detail/' . $item->id) }}" class="img"
                                        style="background-image: url('{{ asset('storage/' . $cover) }}');">
                                        <div class="rent-sale">
                                            <span class="sale">
                                                {{ $unitTersedia > 0 ? "Masih Tersedia ($unitTersedia Unit)" : 'Habis Terjual' }}
                                            </span>
                                        </div>
                                    </a>
                                    <div class="text">
                                        <h3><a
                                                href="{{ url('perumahan/detail/' . $item->id) }}">{{ $item->nama_perumahan }}</a>
                                        </h3>
                                        <span class="location"><i class="fa fa-map-marker"></i> {{ $item->lokasi }}</span>
                                        <p class="mt-2">{!! Str::limit(strip_tags($item->deskripsi), 40) !!}</p>

                                        <a href="{{ url('perumahan/detail/' . $item->id) }}"
                                            class="d-flex align-items-center justify-content-center btn-custom mt-3">
                                            <span class="fa fa-link"></span>
                                        </a>

                                        <div class="list-team d-flex align-items-center mt-2 pt-2 border-top">
                                            <div class="d-flex align-items-center">
                                                <div class="img"
                                                    style="background-image: url('{{ asset('template/images/person_1.jpg') }}');">
                                                </div>
                                                <h3 class="ml-2">Admin</h3>
                                            </div>
                                            <span class="text-right">
                                                <a href="{{ url('perumahan/detail/' . $item->id) }}"
                                                    class="btn btn-primary">
                                                    <i class="fa fa-eye"></i> Lihat Detail
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="ftco-section services-section bg-darken">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center heading-section heading-section-white ftco-animate">
                    <span class="subheading">Alur Proses</span>
                    <h2 class="mb-3">Bagaimana Cara Kerjanya</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 services services-2">
                        <div class="media-body py-md-4 text-center">
                            <div class="icon mb-1 d-flex align-items-center justify-content-center"><span>01</span>
                                <img src="{{ url('template/images/blob.svg') }}" alt="">
                            </div>
                            <h3>Survey & Evaluasi Properti</h3>
                            <p>Kami membantu Anda menilai dan memilih properti sesuai kebutuhan serta anggaran Anda.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 services services-2">
                        <div class="media-body py-md-4 text-center">
                            <div class="icon mb-1 d-flex align-items-center justify-content-center"><span>02</span>
                                <img src="{{ url('template/images/blob.svg') }}" alt="">
                            </div>
                            <h3>Bertemu dengan Agen</h3>
                            <p>Diskusikan kebutuhan Anda langsung dengan agen profesional kami yang siap membantu.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 services services-2">
                        <div class="media-body py-md-4 text-center">
                            <div class="icon mb-1 d-flex align-items-center justify-content-center"><span>03</span>
                                <img src="{{ url('template/images/blob.svg') }}" alt="">
                            </div>
                            <h3>Proses Kesepakatan</h3>
                            <p>Kami memfasilitasi proses negosiasi hingga tercapai kesepakatan terbaik untuk Anda.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 services services-2">
                        <div class="media-body py-md-4 text-center">
                            <div class="icon mb-1 d-flex align-items-center justify-content-center"><span>04</span>
                                <img src="{{ url('template/images/blob.svg') }}" alt="">
                            </div>
                            <h3>Miliki Properti Impian</h3>
                            <p>Setelah proses selesai, kini Anda bisa segera menempati properti idaman bersama keluarga.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <section class="ftco-section ftco-no-pb ftco-no-pt">
        <div class="container">
            <div class="row">
                <div class="col-md-7 order-md-last d-flex align-items-stretch">
                    <div class="img w-100 img-2 ml-md-2">
                        <img style="width: 100%" src="{{ asset('storage/' . $aboutApp->logo) }}" alt="">
                    </div>
                </div>
                <div class="col-md-5 wrap-about py-md-5 ftco-animate">
                    <div class="heading-section pr-md-5">
                        <h3 class="mb-4">
                            <b>{{ $aboutApp->nama }}</b>
                        </h3>

                        <p>{{ $aboutApp->nama }} Perumahan Subsidi Jambi adalah pengembang perumahan yang berkomitmen
                            menghadirkan hunian
                            berkualitas
                            dengan desain modern, nyaman, dan harga terjangkau bagi masyarakat yang ingin punya hunian di
                            Jambi.
                        </p>

                        <p>Kami percaya bahwa rumah bukan hanya bangunan, tetapi tempat tumbuhnya kebahagiaan dan cerita
                            keluarga.
                            Dengan lokasi yang strategis, fasilitas memadai, serta lingkungan yang asri,
                            setiap proyek perumahan kami dirancang untuk memberikan nilai tambah jangka panjang bagi para
                            penghuni.</p>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    {{-- <section class="ftco-counter img" id="section-counter">
        <div class="container">
            <div class="row pt-md-5">
                <div class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate">
                    <div class="block-18 py-5 mb-4">
                        <div class="text text-border d-flex align-items-center">
                            <strong class="number" data-number="1000">0</strong>
                            <span>Area <br>Population</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate">
                    <div class="block-18 py-5 mb-4">
                        <div class="text text-border d-flex align-items-center">
                            <strong class="number" data-number="2500">0</strong>
                            <span>Total <br>Properties</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate">
                    <div class="block-18 py-5 mb-4">
                        <div class="text text-border d-flex align-items-center">
                            <strong class="number" data-number="500">0</strong>
                            <span>Average <br>House</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate">
                    <div class="block-18 py-5 mb-4">
                        <div class="text d-flex align-items-center">
                            <strong class="number" data-number="67">0</strong>
                            <span>Total <br>Branches</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="ftco-section ftco-agent">
        <div class="container">
            <div class="row justify-content-center pb-5">
                <div class="col-md-12 heading-section text-center ftco-animate">
                    <span class="subheading">Tim Kami</span>
                    <h2 class="mb-4">Marketing Profesional</h2>
                </div>
            </div>
            <div class="row">
                @forelse ($marketingKami as $item)
                    @php
                        $foto = $item->foto ? asset('storage/' . $item->foto) : url('template/images/default-user.jpg'); // fallback foto
                    @endphp

                    <div class="col-md-3 ftco-animate">
                        <div class="agent">
                            <div class="img">
                                <img style="height: 400px;width:100%" src="{{ $foto }}" class="img-fluid"
                                    alt="{{ $item->nama ?? 'Marketing' }}">
                                <div class="desc">
                                    <h3><a class=""
                                            href="{{ url('https://wa.me/62' . $item->no_wa) }}">{{ $item->user->name ?? 'Marketing ' . $item->id }}</a>
                                    </h3>
                                    <p class="h-info">
                                        <span class="location "><i class="fa fa-user"></i>
                                            {{ $item->pekerja->nama ?? '-' }}</span>
                                        <span class="details ">
                                            <a class="fa fa-whatsapp"
                                                href="{{ url('https://wa.me/62' . $item->no_wa) }}">
                                                {{ $item->no_wa ?? '-' }}</a>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12 text-center">
                        <p>Belum ada data marketing.</p>
                    </div>
                @endforelse
            </div>
            <div class="ftco-animate">
                <p class="text-center mt-2">
                    <a href="{{ url('marketing/') }}" class="btn btn-primary py-2 px-3">
                        Lihat Lebih banyak</a>
                </p>
            </div>
        </div>
    </section>

    <section class="ftco-section ftco-no-pt">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-md-7 heading-section text-center ftco-animate">
                    <span class="subheading">Artikel</span>
                    <h2>Artikel Terbaru</h2>
                </div>
            </div>
            <div class="row d-flex">
                @forelse ($artikel as $item)
                    @php
                        $gambarList = $item->gambar;
                        $cover = collect($gambarList)->firstWhere('judul', 'Cover');
                        $coverUrl = $cover
                            ? asset('storage/' . $cover['galeri'])
                            : url('template/images/default-artikel.jpg');
                    @endphp
                    <div class="col-md-3 d-flex ftco-animate">
                        <div class="blog-entry justify-content-end">
                            <div class="text">
                                <a href="{{ url('artikel/detail', $item->slug) }}" class="block-20 img"
                                    style="background-image: url('{{ $coverUrl }}');">
                                </a>
                                <div class="meta mb-3">
                                    <div><a href="#">{{ date('d M Y', strtotime($item->created_at)) }}</a></div>
                                    <div><a href="#">Admin </a></div>
                                    <div>
                                        <a href="#" class="meta-chat">
                                            <span class="fa fa-comment"></span> {{ rand(10, 500) }}
                                        </a>
                                    </div>
                                </div>
                                <h3 class="heading">
                                    <a href="{{ url('artikel/detail', $item->slug) }}">
                                        {{ $item->judul }}
                                    </a>
                                </h3>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12 text-center">
                        <p>Belum ada artikel tersedia.</p>
                    </div>
                @endforelse
            </div>
            <div class="ftco-animate">
                <p class="text-center mt-2">
                    <a href="{{ url('artikel/') }}" class="btn btn-primary py-2 px-3">
                        Lihat Lebih banyak</a>
                </p>
            </div>
        </div>
    </section>

    <section class="ftco-section testimony-section bg-light">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-md-7 text-center heading-section ftco-animate">
                    <span class="subheading">Testimoni</span>
                    <h2 class="mb-3">Apa Kata Mereka</h2>
                </div>
            </div>
            <div class="row ftco-animate">
                <div class="col-md-12">
                    <div class="carousel-testimony owl-carousel">
                        @foreach ($testimoni as $item)
                            <div class="item">
                                <div class="testimony-wrap py-4">
                                    <div class="text">
                                        <span class="fa fa-quote-left"></span>
                                        <p class="mb-4">"{{ $item->keterangan }}"</p>
                                        <div class="d-flex align-items-center">
                                            <div class="user-img"
                                                style="background-image: url('{{ asset('storage/' . $item->gambar) }}')">
                                            </div>
                                            <div class="pl-3">
                                                <p class="name">{{ $item->nama }}</p>
                                                <span class="position">{{ $item->jabatan ?? 'Pelanggan Kami' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection