@php
    $property = $post->postable;
    $files = $post->images_folder ? Storage::allFiles($post->images_folder) : [];
    $image = $files[0] ?? null;
    $type = '';
    if ($property) {
        if (isset($property->house_type)) {
            $type = (config('enums.property_type')[$property->property_type] ?? '') . ' - ' . (config('enums.house_type')[$property->house_type] ?? '');
        } elseif (isset($property->workplace_type)) {
            $type = (config('enums.property_type')[$property->property_type] ?? '') . ' - ' . (config('enums.workplace_type')[$property->workplace_type] ?? '');
        } elseif (isset($property->land_type)) {
            $type = (config('enums.property_type')[$property->property_type] ?? '') . ' - ' . (config('enums.land_type')[$property->land_type] ?? '');
        }
    }
    $detailUrl = $property ? route('post.show', ['slug' => $property->slug]) : route('home');
    $isCompleted = ($variant ?? '') === 'completed';
    $isActive = ($variant ?? '') === 'active';
    $countdownSeconds = $isActive && isset($post->diffinseconds) ? max(0, (int) $post->diffinseconds) : 0;
    $locationParts = array_filter([
        $property->country ?? null,
        $property->district ?? null,
        $property->neighborhood ?? null,
    ]);
@endphp

<article class="mk-property-card {{ $isActive ? 'mk-property-card-active' : '' }}">
    <a class="mk-property-link" href="{{ $detailUrl }}" title="&#304;lan detaylar&#305;">
        <div class="mk-property-media">
            @if($image)
                <img src="{{ asset('storage/'.$image) }}" alt="{{ $post->title }}">
            @else
                <img src="{{ asset('assets/img/no-image.jpg') }}" alt="{{ $post->title }}">
            @endif

            <span class="mk-property-badge {{ $isCompleted ? 'is-done' : ($isActive ? 'is-live' : '') }}">
                @if($isCompleted)
                    Tamamland&#305;
                @elseif($isActive)
                    E ihale
                @else
                    Teklif Bekleniyor
                @endif
            </span>

            @if($post->bank && ($post->bank->logo_path || file_exists(public_path('assets/img/card-logo/'. $post->bank->code .'.png'))))
                <span class="mk-bank-chip">
                    <img src="{{ $post->bank->logo_path ? asset('storage/'.$post->bank->logo_path) : asset('assets/img/card-logo/'. $post->bank->code .'.png') }}" alt="{{ $post->bank->name }}">
                </span>
            @endif

            @if($countdownSeconds > 0)
                <span class="mk-card-countdown" data-countdown-seconds="{{ $countdownSeconds }}">
                    <i class="far fa-clock"></i>
                    <strong data-countdown-text>--:--:--</strong>
                </span>
            @endif
        </div>

        <div class="mk-property-body">
            <div class="mk-property-head">
                <div class="mk-property-price">{{ number_format($post->current_price, 0, '.', '.') }} TL</div>
                <span>{{ $type }}</span>
            </div>

            <h3>{{ Str::limit($post->title, 70) }}</h3>

            @if(count($locationParts))
                <div class="mk-property-location">
                    <span>Konum</span>
                    <strong>{{ Str::upper(implode(' - ', $locationParts)) }}</strong>
                </div>
            @endif

            <div class="mk-property-facts">
                @if(isset($property->net_m2))
                    <span><i class="fas fa-vector-square"></i> {{ number_format($property->net_m2, 0, '.', '.') }} m&#178;</span>
                @endif
                @if(isset($property->room_count))
                    <span><i class="fas fa-door-open"></i> {{ config('enums.room_count')[$property->room_count] ?? '' }}</span>
                @endif
                @if(isset($property->floor))
                    <span><i class="fas fa-building"></i> {{ config('enums.floor')[$property->floor] ?? $property->floor }}</span>
                @endif
            </div>
            <div class="mk-property-code">
                @if(isset($post->code))
                    <span>&#304;lan Kodu:<strong>{{ $post->code }}</strong></span>
                @endif
                @if(isset($post->tender_code))
                    <span>&#304;hale Kodu:<strong>{{ $post->tender_code }}</strong></span>
                @endif
            </div>
        </div>
    </a>

    @if(Auth::user())
        @isset($favoritePosts)
            <button type="button" class="mk-fav btn_compare j_compare btn_favourite @if($property && in_array($property->post->id, $favoritePosts)) active @endif"
                id="{{ $property->slug ?? $post->code }}"
                data-slug="{{ $property->slug ?? '' }}"
                data-imovel="108"
                data-action="addCompare"
                title="@if($property && in_array($property->post->id, $favoritePosts)) Favorilerimden &#231;&#305;kar. @else Favorilerime ekle. @endif">
                <i class="fas fa-heart"></i>
            </button>
        @endisset
    @endif
</article>

@once
    <style>
        .mk-card-countdown {
            position: absolute;
            left: 14px;
            bottom: 14px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 8px;
            color: #fff;
            background: rgba(10, 25, 47, .88);
            box-shadow: 0 10px 24px rgba(10, 25, 47, .24);
            font-size: 12px;
            font-weight: 800;
            backdrop-filter: blur(10px);
        }

        .mk-card-countdown i {
            color: #fff;
            font-size: 13px;
        }

        .mk-card-countdown strong {
            color: #fff;
            font-size: 12px;
            letter-spacing: 0;
            white-space: nowrap;
        }
    </style>
    <script>
        (function () {
            function formatCountdown(totalSeconds) {
                totalSeconds = Math.max(0, totalSeconds);
                var days = Math.floor(totalSeconds / 86400);
                var hours = Math.floor((totalSeconds % 86400) / 3600);
                var minutes = Math.floor((totalSeconds % 3600) / 60);
                var seconds = totalSeconds % 60;
                var time = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');

                return days > 0 ? days + ' Gün ' + time : time;
            }

            function bootCardCountdowns() {
                document.querySelectorAll('[data-countdown-seconds]').forEach(function (node) {
                    if (node.dataset.countdownReady === '1') {
                        return;
                    }

                    node.dataset.countdownReady = '1';
                    var remaining = parseInt(node.dataset.countdownSeconds || '0', 10);
                    var text = node.querySelector('[data-countdown-text]');

                    function tick() {
                        if (text) {
                            text.textContent = formatCountdown(remaining);
                        }

                        remaining -= 1;
                    }

                    tick();
                    window.setInterval(tick, 1000);
                });
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', bootCardCountdowns);
            } else {
                bootCardCountdowns();
            }
        })();
    </script>
@endonce