{{-- CTA Template 1 - Call to Action with Countdown --}}
<div class="cta1-section-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 m-auto">
                <div class="cta1-main-boxarea">
                    <div class="timer-btn-area">
                        <div class="timer">
                            <div class="time-box">
                                <span id="days1" class="time-value">--</span>
                                <br />
                                <span class="time-label">{{ __('JOURS') }}</span>
                            </div>
                            <div class="space14"></div>
                            <div class="time-box">
                                <span id="hours1" class="time-value">--</span>
                                <br />
                                <span class="time-label">{{ __('HEURES') }}</span>
                            </div>
                            <div class="space14"></div>
                            <div class="time-box">
                                <span id="minutes1" class="time-value">--</span>
                                <br />
                                <span class="time-label">{{ __('MINUTES') }}</span>
                            </div>
                            <div class="space14"></div>
                            <div class="time-box" style="margin: 0 26px 0 0">
                                <span id="seconds1" class="time-value">--</span>
                                <br />
                                <span class="time-label">{{ __('SECONDES') }}</span>
                            </div>
                        </div>
                        <div class="btn-area1">
                            @if ($event->ticketTypes && count($event->ticketTypes) > 0)
                                <a href="{{ route('registration.form', $event) }}" class="vl-btn1">{{ __('Acheter un billet') }}</a>
                            @elseif($event->registration_url)
                                <a href="{{ $event->registration_url }}" class="vl-btn1" target="_blank">{{ __('S\'inscrire') }}</a>
                            @else
                                <a href="#" class="vl-btn1">{{ __('Réserver ma place') }}</a>
                            @endif
                        </div>
                    </div>
                    <ul>
                        <li>
                            <a href="#"><img src="{{ asset('assets/img/icons/calender1.svg') }}" alt="" />
                                @if($event->start_date)
                                    {{ $event->start_date->format('d F Y') }}
                                    @if($event->end_date)
                                        - {{ $event->end_date->format('H:i') }}
                                    @endif
                                @else
                                    {{ __('Date à confirmer') }}
                                @endif
                            </a>
                        </li>
                        @if($event->location)
                        <li class="m-0">
                            <a href="#"><img src="{{ asset('assets/img/icons/location1.svg') }}" alt="" />{{ $event->location }}</a>
                        </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Countdown script for CTA section
document.addEventListener('DOMContentLoaded', function() {
    @if($event->start_date)
    // Set the date we're counting down to
    var countDownDate = new Date("{{ $event->start_date }}").getTime();
    
    // Update the count down every 1 second
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Display the result
        document.getElementById("days1").innerHTML = days;
        document.getElementById("hours1").innerHTML = hours;
        document.getElementById("minutes1").innerHTML = minutes;
        document.getElementById("seconds1").innerHTML = seconds;
        
        // If the count down is finished, display message
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("days1").innerHTML = "0";
            document.getElementById("hours1").innerHTML = "0";
            document.getElementById("minutes1").innerHTML = "0";
            document.getElementById("seconds1").innerHTML = "0";
        }
    }, 1000);
    @else
    // Si pas de date, afficher des valeurs par défaut
    document.getElementById("days1").innerHTML = "--";
    document.getElementById("hours1").innerHTML = "--";
    document.getElementById("minutes1").innerHTML = "--";
    document.getElementById("seconds1").innerHTML = "--";
    @endif
});
</script>