

<?php $__env->startSection('title', 'Welcome Page'); ?>

<?php $__env->startSection('frontend_app'); ?>
    <main>
      <section class="relative w-full mb-48 md:mb-40 lg:mb-44">
        <figure class="relative z-0">
          <img
            draggable="false"
            class="w-full h-[450px] md:h-[500px] object-cover object-center"
            src="https://img.freepik.com/free-photo/cityscape_1127-3754.jpg?t=st=1753176973~exp=1753180573~hmac=9c2ab389eea2cbff0ff0b5c729d3d49c5abe921ddbbc44f35d626dc8569a77a6&w=1380"
            alt=""
          />
        </figure>
        <div
          class="bg-[var(--soft-white)] shadow-sm mx-auto w-full max-w-sm md:max-w-3xl lg:max-w-5xl rounded-md p-5 md:p-9 absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 z-10"
        >
          <h1
            class="text-lg md:text-xl lg:text-2xl font-bold mb-5 line-clamp-2"
          >
            Unlock the Door to Ultra‑Luxury Homes—Find Yours Now
          </h1>

         <form
    id="searchForm"
    method="post"
    action=""
    class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 items-end select-none"
>
    <?php echo csrf_field(); ?>

    <!-- Location (States) -->
    <div class="relative space-y-1">
        <label for="location" class="opacity-60 ps-1 text-sm md:text-base">Location</label>
        <select
            id="location"
            name="location"
            required
            class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
        >
            <option value="">Select Location</option>
            <?php $__currentLoopData = $data['states']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $state): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($state); ?>"><?php echo e($state); ?></option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
            <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
            </svg>
        </div>
    </div>

    <!-- Property Type -->
    <div class="relative space-y-1">
        <label for="propertyType" class="opacity-60 ps-1 text-sm md:text-base">Property Type</label>
        <select
            id="propertyType"
            name="propertyType"
            required
            class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
        >
            <option value="">Select Property Type</option>
            <?php $__currentLoopData = $data['property_types']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($type): ?>
                    <option value="<?php echo e($type); ?>"><?php echo e($type); ?></option>
                <?php endif; ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
            <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
            </svg>
        </div>
    </div>

    <!-- Property Mode (Category Names) -->
    <div class="relative space-y-1">
        <label for="propertyMode" class="opacity-60 ps-1 text-sm md:text-base">Property Mode</label>
        <select
            id="propertyMode"
            name="propertyMode"
            required
            class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
        >
            <option value="">Select Mode</option>
            <?php $__currentLoopData = $data['category_names']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $mode): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($mode); ?>"><?php echo e(ucfirst($mode)); ?></option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
            <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
            </svg>
        </div>
    </div>

    <!-- Submit Button -->
    <button
        type="submit"
        class="mt-2 sm:mt-0 bg-[var(--primary-color)] text-white px-6 py-3 rounded-md focus:outline-none flex items-center justify-center gap-x-2 hover:scale-95 transition-all duration-200"
    >
        <img
            draggable="false"
            class="size-6 select-none pointer-events-none"
            src="<?php echo e(asset('/assets/images/icons/search.gif')); ?>"
            alt="Search Icon"
        />
        Search
    </button>
</form>

        </div>
      </section>
      <section>
        <div class="lg:container mx-auto px-4 md:px-10 lg:px-32">
          <p
            class="text-[var(--primary-color)] text-center mb-3 font-medium text-base md:text-lg"
          >
            Find rental properties anywhere
          </p>
          <h2
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 md:mb-8 lg:mb-8"
          >
            Discover Popular Property
          </h2>
          <!-- Filter Section -->
          <div class="flex justify-between items-center gap-x-5 mb-7 px-2">
            <!-- Heading or Line on Left -->
            <div class="flex items-center gap-x-1">
              <p id="propertyCount" class="text-gray-500 text-sm font-medium">
                Showing 6 out of 6 properties.
              </p>
            </div>

            <!-- Filter Dropdown on Right -->
            <div class="relative">
              <button
                class="text-sm md:text-base px-4 py-2 bg-[var(--primary-color)] text-white font-medium rounded-lg flex items-center gap-x-2 whitespace-nowrap select-none group hover:bg-[var(--primary-color)]/90 transition-all duration-200"
                id="filterBtn"
              >
                <span class="filter-text">Filter</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-5 lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal"
                >
                  <line x1="21" x2="14" y1="4" y2="4" />
                  <line x1="10" x2="3" y1="4" y2="4" />
                  <line x1="21" x2="12" y1="12" y2="12" />
                  <line x1="8" x2="3" y1="12" y2="12" />
                  <line x1="21" x2="16" y1="20" y2="20" />
                  <line x1="12" x2="3" y1="20" y2="20" />
                  <line x1="14" x2="14" y1="2" y2="6" />
                  <line x1="8" x2="8" y1="10" y2="14" />
                  <line x1="16" x2="16" y1="18" y2="22" />
                </svg>
              </button>
              <div
                id="filterMenu"
                class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-lg hidden z-20"
              >
                <ul class="p-2">
                  <!-- Filter options -->
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Sale"
                  >
                    For Sale
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Rent"
                  >
                    For Rent
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Lease"
                  >
                    For Lease
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="All"
                  >
                    All
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div
            id="propertyCards"
            class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-7"
          >
            <!-- Property Cards Will Be Injected Here -->
          </div>
          <p
            class="text-[var(--primary-color)] text-center mb-3 font-medium text-base md:text-lg mt-16 md:mt-28"
          >
            Browse some of our
          </p>
          <h2
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 md:mb-8 lg:mb-8"
          >
            Recently Added Projects
          </h2>
          <div
            id="popularPropertyCards"
            class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-7"
          >
            <!-- Code is injected from index.js -->
          </div>
          <div
            class="my-16 bg-[var(--primary-color)] rounded-xl p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-y-4 gap-x-6 relative overflow-hidden"
          >
            <div>
              <img
                draggable="false"
                class="aspect-video object-cover rounded-lg"
                src="https://img.freepik.com/free-photo/medium-shot-couple-talking-real-estate-agent_23-2150322073.jpg?t=st=1753248208~exp=1753251808~hmac=8ca1f284565209337f3da0c5831bca1d1aaf0259c4721b316b67679fad2b0e1d&w=1380"
                alt=""
              />
            </div>
            <div
              class="p-2 md:p-5 flex flex-col justify-center items-start gap-y-3 relative z-10"
            >
              <h3
                class="text-white text-2xl md:text-3xl lg:text-4xl font-semibold"
              >
                Ready to find your dream property?
              </h3>
              <p class="text-white/80 text-lg mt-2">
                Whether you're looking for a home or a smart investment, our
                team is here to guide you every step of the way. Let's make it
                happen!
              </p>
              <div class="mt-2">
                <a
                  draggable="false"
                  href="property-details.html"
                  class="bg-white inline-block select-none text-[var(--primary-color)] px-6 py-3 rounded-md hover:scale-95 transition-all duration-200 font-medium"
                  >Get in Touch</a
                >
              </div>
            </div>
            <div
              class="bg-transparent size-96 border-[60px] border-white rounded-full absolute top-[90%] md:top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-0 opacity-30 md:scale-125"
            ></div>
          </div>
        </div>
      </section>
    </main>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('frontend.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH E:\Sw_arif\realState\resources\views/frontend/page/index.blade.php ENDPATH**/ ?>