{{--
    Pandini Voyages - Booking Hold Countdown Component
    
    Usage:
    @include('components.booking-countdown', [
        'holdId' => $holdId,
        'expiresAt' => $expiresAt,
        'sticky' => true, // optional
        'compact' => false // optional
    ])
--}}

@props([
    'holdId',
    'expiresAt',
    'sticky' => false,
    'compact' => false
])

<div class="{{ $sticky ? 'countdown-sticky' : '' }}">
    <div 
        id="countdown-timer" 
        data-hold-countdown
        data-hold-id="{{ $holdId }}"
        data-expires-at="{{ $expiresAt }}"
        class="{{ $compact ? 'countdown-compact' : '' }}"
    >
        <!-- Countdown will be rendered here by JavaScript -->
        <div class="booking-countdown">
            <div class="countdown-icon">
                <i class="ti ti-clock"></i>
            </div>
            <div class="countdown-content">
                <div class="countdown-label">Loading hold status...</div>
                <div class="countdown-time">
                    <span class="countdown-minutes">--</span>
                    <span class="countdown-separator">:</span>
                    <span class="countdown-seconds">--</span>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="{{ asset('build/css/booking-countdown.css') }}">
@endpush

@push('scripts')
<script src="{{ asset('build/js/booking-countdown.js') }}"></script>
@endpush