@if(isset($active_competition))

@if($active_competition != null && date_create($active_competition->end_date)->modify('-'.$active_competition->closing.' days')->format('Y-m-d') >= now())

<input id="active_competition_end_date" type="hidden" value="{{ date_create($active_competition->end_date)->modify('-'.$active_competition->closing.' days')->format('Y-m-d') }}">
    
<div class="counter p-3">
    <div class="container m-0 ms-auto p-0 px-sm-3">
        <div class="row">
            <div class="col-12 col-lg-12 col-xl-3 text-center text-xl-start my-auto" style="font-weight: 600;">
                {!! __('counter.title') !!}
            </div>
            <div class="col-12 col-lg-12 col-xl-6">
                <div class="container">
                    <div class="row mb-3 mb-xl-0">
                        <div class="col-12 mt-2 mt-lg-auto col-xl-4 text-center text-xl-end text-uppercase my-auto font-size-h2 fw-bold">
                            {!! __('counter.endCompetition') !!}
                        </div>
                        <div class="col-12 col-xl-8 my-auto p-0 px-sm-3">
                            <div class="container p-0 px-sm-3">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="float-end mb-2">
                                            <div class="text-center cd_day text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">0</div>
                                            <div class="text-center" style="font-size: 0.6rem;">{!! __('counter.day') !!}</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="text-center mb-2">
                                            <div class="text-center text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">:</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="text-center mb-2">
                                            <div class="text-center cd_hours text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">0</div>
                                            <div class="text-center" style="font-size: 0.6rem;">{!! __('counter.hour') !!}</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="text-center mb-2">
                                            <div class="text-center text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">:</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="float-start mb-2">
                                            <div class="text-center cd_minutes text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">0</div>
                                            <div class="text-center" style="font-size: 0.6rem;">{!! __('counter.minute') !!}</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="text-center mb-2">
                                            <div class="text-center text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">:</div>
                                        </div>
                                    </div>
                                    <div class="col-auto text-cd text-uppercase p-1">
                                        <div class="float-end mb-2">
                                            <div class="text-center cd_seconds text-responsive" style="font-size: 2.0rem; font-weight: 600; height: 42px;">0</div>
                                            <div class="text-center" style="font-size: 0.6rem;">{!! __('counter.sec') !!}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-12 col-xl-3 my-auto text-center">
                <a class="btn btn-primary btn-yellow" href="@if(auth()->user()) {{ route('user.registration.create', app()->getLocale()) }} @else javascript:void(0); @endif" class="btn btn-primary" @if(!auth()->user()) 
                    onclick="formModalNew({
                        'url': '{{ route('login_player', app()->getLocale()) }}',
                        'title': '{!! __('link.login') !!}',
                        'button': '{!! __('button.go') !!}',
                        'modalFooterVisible': false,
                        'sendButtonClass': '',
                        'leftBgImage': '',
                        'leftContent': false,
                    },function () {}, function () {}, function () { window.location='{{ route('home', app()->getLocale())}}'; } );" @endif>{!! __('button.uploadVideo') !!}</a>
            </div>
        </div>
    </div>
</div>
@else
    <div>
        {!! __('message.error.noActiveCompetition') !!}
    </div>
@endif

{{--
{!! __('content.payment.competition.start') !!}: {!! $active_competition->start_date !!}

{!! __('content.payment.competition.end') !!}: {!! date_create($active_competition->end_date)->modify('-'.$active_competition->closing.' days')->format('Y-m-d') !!}
--}}

@push('scripts')
<script>
    $( document ).ready(function() {
        count_down($('#active_competition_end_date').val());
    });
</script>
@endpush

@endif