@php
    $timeout = $booking->timeout_at ? \Carbon\Carbon::parse($booking->timeout_at) : null;
    $isExpired = $timeout ? $timeout->isPast() : false;
    
    // Default country code if missing
    $hostPhone = $booking->detail && $booking->detail->createdBy ? ($booking->detail->createdBy->country_code . $booking->detail->createdBy->contact_no) : '';
    $custPhone = $booking->customer ? ($booking->customer->country_code . $booking->customer->contact_no) : '';
@endphp

<div class="kanban-card {{ $borderClass }} {{ ($timeout && $timeout->diffInMinutes(now()) < 30 && !$isExpired) ? 'pulse-danger' : '' }}">
    <!-- Header: ID & Timer -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span class="font-weight-bold text-dark">#{{ $booking->unique_id ?? $booking->id }}</span>
        @if($timeout)
            <span class="badge {{ $isExpired ? 'badge-danger' : 'badge-light border' }} px-2 py-1" style="font-size: 11px;">
                <i class="far fa-clock"></i> 
                @if($isExpired)
                    انتهت المهلة
                @else
                    متبقي {{ $timeout->diffForHumans(null, \Carbon\CarbonInterface::DIFF_ABSOLUTE) }}
                @endif
            </span>
        @endif
    </div>

    <!-- Customer Section -->
    <div class="mb-3">
        <small class="text-muted d-block mb-1">الزبون</small>
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center text-truncate pr-2">
                <div class="bg-light rounded-circle d-flex justify-content-center align-items-center text-secondary mr-2" style="width: 32px; height: 32px;">
                    <i class="fa fa-user"></i>
                </div>
                <span class="font-weight-bold text-truncate" style="max-width: 150px;">
                    {{ $booking->customer ? (trim($booking->customer->first_name . ' ' . $booking->customer->last_name) ?: $booking->customer->full_name) : 'غير معروف' }}
                </span>
            </div>
            @if($custPhone)
                <a href="https://wa.me/{{ str_replace('+', '', $custPhone) }}" target="_blank" class="btn btn-sm btn-outline-success rounded-circle" title="مراسلة الزبون" style="width: 30px; height: 30px; padding: 4px;">
                    <i class="fab fa-whatsapp"></i>
                </a>
            @endif
        </div>
    </div>

    <!-- Host & Property Section -->
    <div class="mb-3 p-2 bg-light rounded">
        <small class="text-muted d-block mb-1">العقار والمضيف</small>
        <div class="d-flex align-items-center justify-content-between">
            <div class="text-truncate pr-2">
                <div class="font-weight-bold text-truncate text-primary" style="max-width: 180px;">
                    <i class="fa fa-home"></i> {{ $booking->detail->title ?? 'غير معروف' }}
                </div>
                <small class="text-muted d-block text-truncate mt-1" style="max-width: 180px;">
                    <i class="fa fa-user-tie"></i> {{ $booking->detail && $booking->detail->createdBy ? $booking->detail->createdBy->full_name : 'غير معروف' }}
                </small>
            </div>
            @if($hostPhone)
                <a href="https://wa.me/{{ str_replace('+', '', $hostPhone) }}" target="_blank" class="btn btn-sm btn-outline-success rounded-circle bg-white" title="مراسلة المضيف" style="width: 30px; height: 30px; padding: 4px;">
                    <i class="fab fa-whatsapp"></i>
                </a>
            @endif
        </div>
    </div>

    <!-- Financials & Dates -->
    <div class="d-flex justify-content-between align-items-end mb-3 border-top pt-2">
        <div dir="ltr" class="text-right">
            <small class="text-muted d-block">Check-in</small>
            <span class="font-weight-bold" style="font-size: 13px;">{{ \Carbon\Carbon::parse($booking->start_date)->format('M d') }}</span>
        </div>
        <div class="text-center px-2">
            <i class="fa fa-arrow-right text-muted" style="font-size: 10px;"></i>
        </div>
        <div dir="ltr" class="text-left">
            <small class="text-muted d-block">Check-out</small>
            <span class="font-weight-bold" style="font-size: 13px;">{{ \Carbon\Carbon::parse($booking->end_date)->format('M d') }}</span>
        </div>
    </div>
    
    <div class="text-center mb-3">
        <h5 class="font-weight-bold text-success mb-0">{{ number_format($booking->total_amount, 2) }} <small class="text-muted">LYD</small></h5>
    </div>

    <!-- Actions -->
    <div class="d-flex gap-2">
        <a href="{{ route('tblBookingResorts.show', [$booking->id]) }}" class="btn btn-primary btn-sm flex-grow-1" style="border-radius: 6px;">
            <i class="far fa-eye"></i> فتح التفاصيل
        </a>
        @if($booking->state_id != 12 && $booking->state_id != 7)
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmCancellation({{ $booking->id }})" style="border-radius: 6px; margin-right: 5px;">
                <i class="fas fa-times"></i> إلغاء
            </button>
        @endif
    </div>
</div>