@php
$icon = "/img/templates_v2/{$templateName}/icon-selpix.svg";
$albumSelpixBodyText = $_selpixBodyText ?? 'Me encantaría que formen parte de nuestros recuerdos especiales. Por eso, les comparto este álbum digital donde podrán subir todas las fotos que deseen compartir. ¡No dejen pasar ninguna oportunidad de capturar sus momentos favoritos! ¡Gracias por ser parte de este día tan especial!';
$showSelpixCountdown = $_showSelpixCountdown ?? false;
@endphp
<section id="selpix">
    @if (in_array(strtolower($invitation->template->name), ['graduation classic', 'classic']))
            <div class="decorative-slot decorative-slot-1"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-2"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-3"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-4"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-5"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-6"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-7"><img alt="decorative" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-8"><img alt="decorative" loading="lazy"></div>
        @endif
    <div class="container">
        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <div class="title">{{ $_selpixTitle ?? 'Álbum Digital' }}</div>
        <div class="text">
            {!! nl2br(e($albumSelpixBodyText)) !!}
        </div>
        @if($showSelpixCountdown)
        <div id="selpix-countdown">
            <div class="row">
                <div class="col-6 col-sm-3">
                    <div class="points">:</div>
                    <div class="number" id="days">00</div>
                    <div class="status">Dias</div>
                </div>
                <div class="col-6 col-sm-3">
                    <div class="points d-none d-sm-block">:</div>
                    <div class="number" id="hours">00</div>
                    <div class="status">Hrs</div>
                </div>
                <div class="col-6 col-sm-3">
                    <div class="points">:</div>
                    <div class="number" id="mins">00</div>
                    <div class="status">Min</div>
                </div>
                <div class="col-6 col-sm-3">
                    <div class="number" id="segs">00</div>
                    <div class="status">Seg</div>
                </div>
            </div>
        </div>
        @endif
        @isset($_selpixUrl)
            <a class="btn" href="{{$_selpixUrl ?? '#'}}" target="_blank">
                Ir al Álbum
            </a>
        @endisset

    </div>
</section>

@if($showSelpixCountdown)
<script type="text/javascript">
    // Set the date we're counting down to
    var countDownDate_selpix = new Date("{{$_countdownSelpix ?? now()->addYear()}}").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

    // Get today's date and time
    var now_selpix = new Date().getTime();

    // Find the distance between now_selpix and the count down date
    var distance_selpix = countDownDate_selpix - now_selpix;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance_selpix / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance_selpix % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance_selpix % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance_selpix % (1000 * 60)) / 1000);
    
    // Display the result in the element with id="demo"
    // document.getElementById("selpix-countdown").innerHTML = '<div class="text-gold fs-sm-48 fw-800 lh-1">' + days + '<br><span class="fs-sm-18 text-white fw-300 text-uppercase">días</span></div><div class="text-gold fs-sm-48 fw-800 lh-1">' + hours + '<br><span class="fs-sm-18 text-white fw-300 text-uppercase">horas</span></div><div class="text-gold fs-sm-48 fw-800 lh-1">' + minutes + '<br><span class="fs-sm-18 text-white fw-300 text-uppercase">minutos</span></div><div class="text-gold fs-sm-48 fw-800 lh-1">' + seconds + '<br><span class="fs-sm-18 text-white fw-300 text-uppercase">segundos</span></div>';
    
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("mins").innerHTML = minutes;
    document.getElementById("segs").innerHTML = seconds;
    

    // If the count down is finished, write some text
    if (distance_selpix < 0) {
        clearInterval(x);
        document.getElementById("selpix-countdown").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>
@endif