@extends('layouts.appInnerWithoutSearch')
@section('seoTitle')
{{ $title }} - {{ env('APP_NAME') }}
@endsection
@section('title')
{{ $title }}
@endsection
@section('contentInner')
    @if (!$images->isEmpty())
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full mx-auto justify-center">
    @foreach ($images as $item)
    <a href="{{ Storage::url($item->image) }}" target="_blank">
    <div class="max-w-xs container bg-white rounded-xl shadow-lg transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden p-2 mx-auto">
        {{-- <div>
          <h1 class="text-xl my-4 text-orange-500 ml-4 font-bold text-gray-800 cursor-pointer hover:text-gray-900 transition duration-100">HouseKeeping</h1>

        </div> --}}
        <img class="cursor-pointer w-full object-cover rounded-lg" src="{{ Storage::url($item->image) }}" alt="{{ $item->title }}" style="height:180px" loading="lazy" />

          {{-- <div class="flex justify-center items-center space-x-2 p-3">
            <h2 class="font-bold cursor-pointer text-blue-500 text-center">{{ $item->title }}</h2>
          </div> --}}
          {{-- <div class="flex space-x-2">
            <div class="flex space-x-1 items-center">
              <span class="text-green-600">22</span>
            </div>
          </div> --}}
        </div>
    </a>
      {{-- <div class="col-md-3 col-sm-12">
<div class="card">
    <div class="card-body  m-auto">
<a href="/storage/{{ $item->image }}" target="_blank"><img src="/storage/{{ $item->image }}" alt="" style="max-height: 150px" class="img-responsive"></a>
    </div>
    <div class="card-footer text-center">
        <h5>{{ $item->title }}</h5>
    </div>
</div>

    </div> --}}
    @endforeach
</div>
    @endif
@endsection