@props(['property', 'ownerName'])
<div class="bg-white  rounded-2xl mb-3 w-[330px] mx-auto flex-grow d-flex flex-column" style="max-width: 370px;">
    <div class="relative">
        {{-- Your image block --}}
        <div class="rounded-3xl overflow-hidden">
            @if ($property->images != null)
                @php $images = json_decode($property->images, true); @endphp
                <img class="d-block w-100 h-[210px] object-cover" src="{{ $images[0]['@value'] }}" alt="{{$property->name}}"
                    onerror="this.onerror=null; this.src='https://placeholder.pics/svg/330x210/DEDEDE/555555/not%20found';">
            @else
                <img class="d-block w-100 h-[210px] object-cover"
                    src="https://placeholder.pics/svg/330x210/DEDEDE/555555/not%20found" alt="placeholder">
            @endif
        </div>
        @if ($property->is_active == '1')
            <span
                class="px-2 py-1 bg-success shadow-md text-white text-xs  rounded-full absolute top-3 right-3 z-1">Connecté</span>
        @else
            <span class="px-2 py-1 bg-danger shadow-md text-white text-xs rounded-full absolute top-3 right-3 z-1">Non
                connecté</span>
        @endif
        {{-- Pencil dropdown in bottom right of image --}}
        <div x-data="{ open: false }" class="absolute bottom-2 right-2 z-50">
            <!-- Toggle button -->
            <button @click="open = !open" @click.outside="open = false"
                class="rounded-full px-2.5 py-1.5 bg-white border shadow-md hover:bg-gray-100">
                <i class="fa-solid fa-pencil"></i>
            </button>

            <!-- Dropdown menu -->
            <div x-show="open" x-transition x-cloak
                class="absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded-md shadow-lg py-1 text-sm z-99">
                <a href="{{ route('property.edit', $property->id) }}"
                    class="block px-4 py-2 hover:bg-gray-100 text-gray-700">
                    <i class="fa fa-edit mr-2"></i> Modifier
                </a>
                {{-- <a
                    href="{{ route('sign.property.contrat', ['id' => \App\Services\IdEncoderService::encode($property->id)]) }}"
                    target="_blank" class="block px-4 py-2 hover:bg-gray-100 text-gray-700">
                    <i class="fa-solid fa-link mr-2"></i> Ouvrir lien du contrat
                </a> --}}
                <button type="button" data-id="{{ $property->id }}" data-available="{{ $property->is_available }}"
                    class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 availability-btn">
                    <i class="fa fa-toggle-on mr-2"></i> Disponibilité
                </button>
                <button type="button" data-id="{{ $property->id }}"
                    class="block w-full text-left px-4 py-2  hover:bg-gray-100 text-danger delete-btn">
                    <i class="fa fa-trash mr-2"></i> Supprimer
                </button>
            </div>
        </div>
    </div>

    <h5 class="text-lg font-semibold my-2 pl-1"> <a href="{{ route('property.show', $property->id) }}">
            {{ \Illuminate\Support\Str::limit($property->name, 35, '...') }}
        </a>
    </h5>
    <div class="flex justify-between mt-auto px-2">

        <div class="flex flex-col gap-1">
            <div class="flex items-center mb-1 gap-2 text-xs text-gray-600">
                @if ($property->sdb_number)

                    <div class="flex items-center gap-0.5">
                        <i class="fa-solid fa-bath"></i> {{ $property->sdb_number }}
                    </div>
                @endif
                @if ($property->bed_double_number)

                    <div class="flex items-center gap-0.5">
                        <i class="fa-solid fa-bed"></i><i class="fa-solid fa-bed ml-0.5"></i>
                        {{ $property->bed_double_number }}
                    </div>
                @endif
                @if ($property->bed_simple_number)
                    <div class="flex items-center gap-0.5">
                        <i class="fa-solid fa-bed"></i>
                        {{ $property->bed_simple_number }}
                    </div>
                @endif
            </div>
            <div class="flex items-center space-x-2 text-sm text-gray-700 capitalize">
                <i class="fa-solid fa-location-dot text-gray-500"></i>

                <p class="text-gray-600">
                    {{ \Illuminate\Support\Str::limit($property->street, 30, '...') }}

                </p>
            </div>

            <div class="flex items-center space-x-2 text-sm text-gray-700 capitalize">
                <i class="fa-solid fa-user-tie text-gray-500"></i>
                <span>{{ $ownerName ?? 'pas trouvé' }}</span>
            </div>


        </div>
        <div class="flex flex-col gap-1.5 text-right">


            @if ($property->is_available == '1')
                <span class="text-[#31B08F] ">Actif</span>
            @else
                <span class="text-danger">Non actif</span>
            @endif
            <p class="text-xs text-gray-500">{{ $property->uid }}</p>
            @if ($property->current_price)

                <p class="font-semibold text-gray-800">{{ $property->current_price }} TND <span
                        class="text-xs font-normal">/<i class="fa-solid fa-moon"></i></span></p>
            @endif


        </div>

    </div>

</div>