@props(['variant' => 'danger', 'size' => 'default'])

@php
$deadlineDate = \Carbon\Carbon::parse(config('payment-correction.deadline_date'));
$gracePeriodDate = \Carbon\Carbon::parse(config('payment-correction.grace_deadline_date'));
$now = now();

$isBeforeDeadline = $now->isBefore($deadlineDate);
$isBeforeGracePeriod = $now->isBefore($gracePeriodDate);
$isPastGracePeriod = $now->isAfter($gracePeriodDate);

// Size variants
$sizeClasses = [
    'sm' => 'fs-9',
    'default' => 'fs-8',
    'lg' => 'fs-7 fs-md-6',
    'xl' => 'fs-6 fs-md-5'
];
$fontSize = $sizeClasses[$size] ?? $sizeClasses['default'];

// Variant classes
$variantClasses = [
    'danger' => 'bg-danger-subtle text-danger border-danger',
    'warning' => 'bg-warning-subtle text-warning border-warning',
    'info' => 'bg-info-subtle text-info border-info',
    'primary' => 'bg-primary-subtle text-primary border-primary',
];
$cardClass = $variantClasses[$variant] ?? $variantClasses['danger'];
@endphp

<div class="payment-correction-deadline-alert {{ $cardClass }} border-2 rounded-3 p-2 p-md-3 mb-2" style=" top: 70px; z-index: 1020;">
    <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-2 mb-lg-0">
            <div class="d-flex align-items-start">
                <div class="me-2">
                    <i class="uil uil-clock-eight fs-2"></i>
                </div>
                <div>
                    <h6 class="mb-1 fw-bold">
                        @if($isBeforeDeadline)
                            ⚠️ Payment Deadline Approaching
                        @elseif($isBeforeGracePeriod)
                            🚨 Grace Period Active
                        @else
                            ❌ Deadline Passed
                        @endif
                    </h6>
                    <p class="mb-1 small">
                        @if($isBeforeDeadline)
                            {{-- BEFORE DEADLINE: Only show main deadline, no grace period mention --}}
                            <strong>Payment Deadline:</strong> {{ $deadlineDate->format('F j, Y') }} at {{ $deadlineDate->format('g:i A') }}
                        @elseif($isBeforeGracePeriod)
                            {{-- AFTER DEADLINE: Reveal grace period as "last chance" --}}
                            <strong class="text-danger">⚠️ Main Deadline Missed!</strong><br>
                            <strong>Last Chance - Grace Period Ends:</strong> {{ $gracePeriodDate->format('F j, Y') }} at {{ $gracePeriodDate->format('g:i A') }}
                        @else
                            <strong>All deadlines have passed</strong>
                        @endif
                    </p>
                    <p class="mb-0 small opacity-75">
                        @if($isBeforeDeadline)
                            {{-- BEFORE DEADLINE: Strong warning without mentioning grace period --}}
                            <i class="uil uil-exclamation-triangle"></i>
                            <strong>Complete payment by {{ $deadlineDate->format('F j, Y') }} to avoid account restrictions or deletion.</strong>
                        @elseif($isBeforeGracePeriod)
                            {{-- GRACE PERIOD: Urgent warning --}}
                            <i class="uil uil-exclamation-triangle"></i>
                            <strong class="text-danger">After {{ $gracePeriodDate->format('F j, Y') }}, your UID will be permanently deleted!</strong>
                        @else
                            <i class="uil uil-ban"></i>
                            <strong>UIDs that haven't completed payment have been deleted.</strong>
                        @endif
                    </p>
                </div>
            </div>
        </div>
        
        @if(!$isPastGracePeriod)
        <div class="col-12 col-lg-6">
            <div class="countdown-timer-box p-2 bg-body rounded">
                <div class="text-center mb-1">
                    <strong class="fs-9 text-uppercase">
                        @if($isBeforeDeadline)
                            Time Until Deadline
                        @else
                            Grace Period Remaining
                        @endif
                    </strong>
                </div>
                <div class="d-flex justify-content-center gap-1 gap-md-2" 
                     data-countdown-target="{{ $isBeforeDeadline ? $deadlineDate->toIso8601String() : $gracePeriodDate->toIso8601String() }}">
                    <!-- Days -->
                    <div class="text-center flex-fill" style="max-width: 60px;">
                        <div class="countdown-value bg-danger text-white rounded py-1 px-1 fw-bold fs-6 lh-1" id="countdown-days">--</div>
                        <div class="countdown-label text-muted mt-1" style="font-size: 0.65rem;">Days</div>
                    </div>
                    <!-- Hours -->
                    <div class="text-center flex-fill" style="max-width: 60px;">
                        <div class="countdown-value bg-danger text-white rounded py-1 px-1 fw-bold fs-6 lh-1" id="countdown-hours">--</div>
                        <div class="countdown-label text-muted mt-1" style="font-size: 0.65rem;">Hours</div>
                    </div>
                    <!-- Minutes -->
                    <div class="text-center flex-fill" style="max-width: 60px;">
                        <div class="countdown-value bg-danger text-white rounded py-1 px-1 fw-bold fs-6 lh-1" id="countdown-minutes">--</div>
                        <div class="countdown-label text-muted mt-1" style="font-size: 0.65rem;">Mins</div>
                    </div>
                    <!-- Seconds -->
                    <div class="text-center flex-fill" style="max-width: 60px;">
                        <div class="countdown-value bg-danger text-white rounded py-1 px-1 fw-bold fs-6 lh-1" id="countdown-seconds">--</div>
                        <div class="countdown-label text-muted mt-1" style="font-size: 0.65rem;">Secs</div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@once
@push('scripts')
<script>
(function() {
    const countdownElements = document.querySelectorAll('[data-countdown-target]');
    
    countdownElements.forEach(element => {
        const targetDate = new Date(element.getAttribute('data-countdown-target'));
        
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;
            
            if (distance < 0) {
                element.querySelector('#countdown-days').textContent = '00';
                element.querySelector('#countdown-hours').textContent = '00';
                element.querySelector('#countdown-minutes').textContent = '00';
                element.querySelector('#countdown-seconds').textContent = '00';
                return;
            }
            
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            element.querySelector('#countdown-days').textContent = String(days).padStart(2, '0');
            element.querySelector('#countdown-hours').textContent = String(hours).padStart(2, '0');
            element.querySelector('#countdown-minutes').textContent = String(minutes).padStart(2, '0');
            element.querySelector('#countdown-seconds').textContent = String(seconds).padStart(2, '0');
        }
        
        // Update immediately
        updateCountdown();
        
        // Update every second
        setInterval(updateCountdown, 1000);
    });
})();
</script>
@endpush
@endonce