@extends('layouts.app')

@section('content')
    @php
        // ambil promo pertama untuk hero background
        $promoCover = $promo->first();
        $promoImage = $promoCover ? asset('storage/' . $promoCover->gambar) : asset('images/bg_1.jpg');

        // ambil gambar cover perumahan
        $gambar = $perumahan->gambar;
        $cover = $gambar[0]['galeri'] ?? 'default.jpg';

        // unit tersedia
        $unitTersedia = $unitRumahTersedia[$perumahan->id] ?? 0;
    @endphp

    <section class="hero-wrap hero-wrap-2" style="background-image: url({{ $promoImage }});"
        data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center">
                <div class="col-md-9 ftco-animate pb-0 text-center">
                    <p class="breadcrumbs">
                        <span class="mr-2"><a href="{{ url('') }}">Home <i class="fa fa-chevron-right"></i></a></span>
                        <span>{{ $title }} <i class="fa fa-chevron-right"></i></span>
                    </p>
                    <h1 class="mb-3 bread">{{ $perumahan->nama_perumahan }}</h1>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-section ftco-property-details">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="property-details">
                        @php
                            $gambarList = is_array($perumahan->gambar)
                                ? $perumahan->gambar
                                : json_decode($perumahan->gambar, true) ?? [];
                        @endphp

                        @if ($gambarList && count($gambarList))
                            <div id="carouselPerumahan{{ $perumahan->id }}" class="carousel slide" data-ride="carousel"
                                data-interval="4000">
                                <div class="carousel-inner">
                                    @foreach ($gambarList as $index => $gambar)
                                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                            <div class="img"
                                                style="background-image:url('{{ asset('storage/' . $gambar['galeri']) }}');
                            height:350px;background-size:cover;background-position:center;">
                                                <div class="rent-sale">
                                                    <span
                                                        class="btn btn-warning">{{ $unitTersedia > 0 ? "Masih Tersedia ($unitTersedia Unit)" : 'Habis Terjual' }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <a class="carousel-control-prev" href="#carouselPerumahan{{ $perumahan->id }}"
                                    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="#carouselPerumahan{{ $perumahan->id }}"
                                    role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Berikutnya</span>
                                </a>
                            </div>
                        @endif
                        <div class="text text-center">
                            <span class="subheading">{{ $perumahan->lokasi }}</span>
                            <h2>{{ $perumahan->nama_perumahan }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tab Menu --}}
            <div class="row ">
                <div class="col-md-12 pills">
                    <div class="bd-example bd-example-tabs">
                        <div class="d-flex">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-description-tab" data-toggle="pill"
                                        href="#pills-description" role="tab" aria-controls="pills-description"
                                        aria-expanded="true">Fitur</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-manufacturer-tab" data-toggle="pill"
                                        href="#pills-manufacturer" role="tab" aria-controls="pills-manufacturer"
                                        aria-expanded="true">Deskripsi</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-review-tab" data-toggle="pill" href="#pills-review"
                                        role="tab" aria-controls="pills-review" aria-expanded="true">SitePlan</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-marketing-tab" data-toggle="pill" href="#pills-marketing"
                                        role="tab" aria-controls="pills-marketing" aria-expanded="true">Marketing
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content" id="pills-tabContent">
                            {{-- Fitur --}}
                            <div class="tab-pane fade show active" id="pills-description" role="tabpanel"
                                aria-labelledby="pills-description-tab">
                                <div class="row">
                                    <div class="col-md-3 mb-4">
                                        <b>Kantor Pemasaran</b>
                                        <ul class="features">
                                            <li class="check">
                                                <span class="fa fa-check-circle"></span>
                                                Total Unit Tersedia :
                                                {{ $unitTersedia }}
                                            </li>
                                            <li class="check">
                                                <span class="fa fa-check-circle"></span>
                                                Lokasi :
                                                {{ $perumahan->lokasi }}
                                            </li>
                                            <li class="check">
                                                <span class="fa fa-check-circle"></span>
                                                {{ $perumahan->perusahaan->nama ?? '-' }}
                                            </li>
                                            <li class="check">
                                                <span class="fa fa-map-marker"></span>
                                                Maps Location :
                                                <div style="width: 100%; height: 200px; overflow: hidden;">
                                                    {!! $perumahan->map !!}
                                                </div>

                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3 mb-4">
                                        <b>Tipe Rumah</b>
                                        <ul class="features">
                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Tipe :
                                                {{ $perumahan->tipe }}
                                            </li>
                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Harga :
                                                Rp. {{ number_format($perumahan->harga, 0, ',', '.') }}
                                            </li>

                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Luas Bangunan :
                                                {{ $perumahan->luas_bangunan }} m 2
                                            </li>

                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Luas Lahan :
                                                {{ $perumahan->luas_lahan }} m 2
                                            </li>

                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Kamar Tidur :
                                                {{ $perumahan->kamar_tidur }}
                                            </li>

                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Kamar Mandi :
                                                {{ $perumahan->kamar_mandi }}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3 mb-4">
                                        <b>Spesifikasi Teknis</b>
                                        <ul class="features">
                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Atap :
                                                {{ $perumahan->atap }}
                                            </li>
                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Dinding :
                                                {{ $perumahan->dinding }}
                                            </li>
                                            <li class="check"><span class="fa fa-check-circle"></span>
                                                Lantai & Pondasi :
                                                {{ $perumahan->lantai_pondasi }}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3 mb-4">
                                        <b>Denah Unit</b>
                                        <ul class="features">
                                            <a href="{{ asset('storage/' . $perumahan->denah_unit) }}" target="_blank"
                                                rel="noopener noreferrer">
                                                <img style="width: 100%"
                                                    src="{{ asset('storage/' . $perumahan->denah_unit) }}"
                                                    alt="">
                                            </a>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {{-- Deskripsi --}}
                            <div class="tab-pane fade" id="pills-manufacturer" role="tabpanel"
                                aria-labelledby="pills-manufacturer-tab">

                                {{-- Deskripsi Perumahan --}}
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <div class="card shadow-sm">
                                            <div class="card-body">
                                                <h5 class="card-title mb-3">Deskripsi Perumahan</h5>
                                                <div class="card-text">
                                                    {!! $perumahan->deskripsi !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @php
                                    $gambarList = is_array($perumahan->gambar)
                                        ? $perumahan->gambar
                                        : json_decode($perumahan->gambar, true) ?? [];
                                @endphp

                                {{-- Gambar Unit --}}
                                @if ($gambarList && count($gambarList))
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <h5>Gambar Unit</h5>
                                        </div>

                                        @foreach ($gambarList as $index => $gambar)
                                            <div class="col-md-4 col-sm-6 mb-4">
                                                <div class="card shadow-sm h-100">
                                                    <a href="{{ asset('storage/' . $gambar['galeri']) }}" target="_blank"
                                                        rel="noopener noreferrer">
                                                        <img src="{{ asset('storage/' . $gambar['galeri']) }}"
                                                            class="card-img-top" style="height: 220px; object-fit: cover;"
                                                            alt="Gambar {{ $index + 1 }}">
                                                    </a>

                                                    <div class="card-body text-center p-2">
                                                        <small class="text-muted">
                                                            Gambar {{ $index + 1 }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="alert alert-info">
                                        Belum ada gambar unit.
                                    </div>
                                @endif
                                {{-- Embed Video Perumahan --}}
                                @if (!empty($perumahan->embed_video))
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <div class="card shadow-sm">
                                                <div class="card-body">
                                                    <h5 class="card-title mb-3">Video Perumahan</h5>

                                                    <div class="ratio ratio-16x9">
                                                        {!! $perumahan->embed_video !!}
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>


                            {{-- Review (dummy dulu, bisa ganti nanti) --}}
                            <div class="tab-pane fade" id="pills-review" role="tabpanel"
                                aria-labelledby="pills-review-tab">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="rating-wrap">
                                            <div class="wrap">
                                                @php
                                                    $tersedia = $semuaUnitRumah->where('status', 'tersedia')->count();
                                                    $booking = $semuaUnitRumah->where('status', 'booking')->count();
                                                    $terjual = $semuaUnitRumah->where('status', 'terjual')->count();
                                                @endphp

                                                <p>
                                                    <button class="btn btn-primary btn-block">
                                                        {{ $tersedia }} Tersedia
                                                    </button>
                                                    <button class="btn btn-info btn-block">
                                                        {{ $booking }} Booking
                                                    </button>
                                                    <button class="btn btn-danger btn-block">
                                                        {{ $terjual }} Terjual
                                                    </button>
                                                </p>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <h3 class="head">Site Plan {{ $perumahan->nama_perumahan }}</h3>
                                        <div style="position: relative; width: 100%; max-width: 800px; margin: auto;">
                                            <!-- Background siteplan -->
                                            <img width="100%"
                                                src="{{ asset('storage/' . $perumahan->background_siteplan) }}"
                                                alt="Siteplan">

                                            <!-- SVG Overlay -->
                                            <svg viewBox="{{ $perumahan->viewbox ?? '0 0 1280 1500' }}" id="svgPolygon"
                                                style="position: absolute; top:0; left:0; width:100%; height:100%;">
                                                @foreach ($siteplans as $siteplan)
                                                    @php
                                                        $status = $siteplan->rumah->status ?? 'tersedia';
                                                        $color = match ($status) {
                                                            'tersedia' => 'green',
                                                            'booking' => '#0096FF',
                                                            'terjual' => 'red',
                                                            default => 'gray',
                                                        };
                                                    @endphp
                                                    <polygon points="{{ $siteplan->koordinat_polygon }}"
                                                        fill="{{ $color }}" fill-opacity="0.75" stroke="#000"
                                                        stroke-width="1" data-ref="{{ $siteplan->id }}"
                                                        style="cursor:pointer; transition: fill-opacity 0.3s; display: block;"
                                                        data-rumah="
                                                        {{ $siteplan->rumah->blok->klaster->perumahan->nama_perumahan }}, Blok {{ $siteplan->rumah->blok->nama_blok }}, No {{ $siteplan->rumah->nomor_rumah }}, Status: {{ ucfirst($status) }},
                                                         ">
                                                    </polygon>
                                                @endforeach
                                            </svg>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            {{-- marketing  --}}

                            <div class="tab-pane fade" id="pills-marketing" role="tabpanel"
                                aria-labelledby="pills-marketing-tab">
                                <div class="col-md-12">
                                    <div class="row">
                                        <h3 class="head">Hubungi Marketing Profesional Kami</h3>

                                        <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="btn btn-block" target="_blank"
                                                                        href="{{ url('https://wa.me/62' . $item->no_wa) }}">{{ $item->user->name ?? 'Marketing ' . $item->id }}</a>
                                                                </h3>
                                                                <p class="h-info">
                                                                    <span class="location btn btn-block"><i
                                                                            class="fa fa-user"></i>
                                                                        {{ $item->pekerja->nama ?? '-' }}</span>
                                                                    <span class="details btn btn-block">
                                                                        <a class="btn btn-block" target="_blank"
                                                                            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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-section contact-section">
        <div class="container">
            <div class="row block-9 justify-content-center mb-5">
                <div class="col-md-8 mb-md-5">
                    <h2 class="text-center">Ada Pertanyaan ? <br>Jangan ragu untuk mengirim pesan Kepada kami,<br>
                        {{-- Segera di hubungi tim marketing kami --}}
                    </h2>
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('leads.create') }}" method="POST" class="bg-light p-5 contact-form">
                        @csrf
                        <div class="form-group">
                            <input type="text" name="nama_lengkap" class="form-control" placeholder="Nama Anda"
                                required>
                        </div>
                        <div class="form-group">
                            <input type="number" name="no_hp" class="form-control" placeholder="Nomor WhatsApp Anda"
                                required>
                        </div>
                        <div class="form-group">
                            <input type="text" name="sumber" class="form-control"
                                placeholder="Judul Pesan / Sumber Info">
                        </div>
                        <div class="form-group">
                            <textarea name="catatan" cols="30" rows="7" class="form-control"
                                placeholder="Tulis Pesan Anda Disini , nanti akan di hubungi tim marketing kami"></textarea>
                        </div>
                        {{-- Google reCAPTCHA --}}
                        <div class="form-group">
                            {!! NoCaptcha::renderJs() !!}
                            {!! NoCaptcha::display() !!}
                            @error('g-recaptcha-response')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Tooltip custom -->
    <style>
        .tooltip-custom {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 13px;
            white-space: nowrap;
            pointer-events: none;
            display: none;
            z-index: 9999;
        }
    </style>

    <div id="tooltip-custom" class="tooltip-custom"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tooltip = document.getElementById("tooltip-custom");

            document.querySelectorAll("polygon").forEach(function(poly) {
                poly.addEventListener("mousemove", function(e) {
                    tooltip.style.display = "block";
                    tooltip.textContent = poly.getAttribute("data-rumah");

                    // posisi tooltip mengikuti cursor
                    tooltip.style.left = e.pageX + 15 + "px";
                    tooltip.style.top = e.pageY + 15 + "px";
                });

                poly.addEventListener("mouseleave", function() {
                    tooltip.style.display = "none";
                });
            });
        });
    </script>

@endsection