@extends('layouts.frontend.master')
@section('title', ($contest->contest_number ?? $contest->contest_no).' - '.$contest->title)

@section('css')
@endsection

@section('style')
@endsection

@section('content')
    <!-- inner-hero-section start -->
    <div class="inner-hero-section">
        <div class="bg-shape">
            <img src="{{asset('frontend/assets/images/elements/inner-hero-shape.png')}}" alt="image" />
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="page-list">
                        <li><a href="{{route('home')}}">Home</a></li>
                        <li><a href="{{route('contest-listing')}}">Contest List</a></li>
                        <li class="active">Contest No: {{($contest->contest_number ?? $contest->contest_no) ?? ''}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- inner-hero-section end -->

    <!-- contest-details-section start -->
    <section class="pb-120 mt-minus-300">
        <div class="container">
            <div class="row justify-content-center">
                {{-- {{dd($ticketSoldOut, $contest->qty)}} --}}
                @if($endDate > now() && $ticketSoldOut != $contest->qty)
                    <div class="col-lg-6">
                        <div class="clock-wrapper">
                            <p class="mb-2">This competition ends in:</p>
                            <div class="clock" data-clock="{{date('Y/m/d', strtotime($endDate))}}"></div>
                        </div>
                        <!-- clock-wrapper end -->
                    </div>
                @endif
                <div class="col-lg-12">
                    <div class="contest-cart">
                        <div class="contest-cart__left">
                            <div class="contest-cart__slider-area">
                                <div class="contest-cart__thumb-slider">
                                    @if(count($contest->images))
                                        @foreach ($contest->images as $key => $image)
                                            <div class="single-slide">
                                                @if(!empty($image->path) && Storage::exists($image->path))
                                                    <img src="{{asset(Storage::url($image->path))}}" alt="{{$contest->title.' Banner Image'}}">
                                                @else
                                                    <img src="{{asset('frontend/assets/images/contest/s1.png')}}" alt="image" />
                                                @endif
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="single-slide">
                                            <img src="{{asset('frontend/assets/images/contest/s1.png')}}" alt="image" />
                                        </div>
                                    @endif
                                </div>
                                <!-- contest-cart__thumb-slider end -->
                                <div class="contest-cart__nav-slider">
                                    @if(count($contest->images))
                                        @foreach ($contest->images as $key => $image)
                                            <div class="single-slide">
                                                @if(!empty($image->path) && Storage::exists($image->path))
                                                    <img src="{{asset(Storage::url($image->path))}}" alt="{{$contest->title.' Banner Image'}}">
                                                @else
                                                    <img src="{{asset('frontend/assets/images/contest/s1.png')}}" alt="image" />
                                                @endif
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="single-slide">
                                            <img src="{{asset('frontend/assets/images/contest/s1.png')}}" alt="image" />
                                        </div>
                                    @endif
                                </div>
                                <!-- contest-cart__nav-slider end -->
                            </div>
                        </div>

                        <!-- contest-cart__left end -->
                        <div class="contest-cart__right">
                            <h4 class="subtitle">Enter now for a chance to win</h4>
                            <h3 class="contest-name">{{$contest->title}}</h3>
                            <p>This competition has a maximum of {{$contest->qty}} entries.</p>
                            <div class="contest-num">Contest no: <span> {{($contest->contest_number ?? $contest->contest_no) ?? ''}}</span></div>
                            <h4>Tickets Sold</h4>

                            @php
                                $soldTickets = $contest->orderTickets->count();
                                $remainingContests = $contest->qty - $contest->orderTickets->count();
                            @endphp


                            <div class="ticket-amount">
                                <span class="left">{{$soldTickets}}</span>
                                <span class="right">{{$contest->qty}}</span>
                                <div class="progressbar" data-perc="{{($soldTickets / $contest->qty) * 100}}%">
                                    <div class="bar"></div>
                                </div>
                                <p>Only {{$remainingContests}} remaining!</p>
                            </div>


                            @if($endDate > now() && $ticketSoldOut != $contest->qty)
                                 <div class="ticket-price">
                                    <span class="amount">${{$contest->price}}</span>
                                    <small>Per ticket</small>
                                </div>

                                <div class="d-flex flex-wrap align-items-center mb-30">
                                    <div class="select-quantity">
                                        <input type="hidden" id="contest_id" value="{{$contest->id}}" />
                                        <span class="caption">Quantity</span>
                                        <div class="quantity">
                                            <input type="number" id="quantity" min="1" max="{{$remainingContests}}" step="1" value="1" readonly />
                                        </div>
                                    </div>
                                    <!-- select-quantity end -->
                                    <div class="mt-sm-0 mt-3">
                                        <a href="javascript:0;" id="buyTicketsButton" class="cmn-btn style--three">buy tickets</a>
                                    </div>

                                    <div class="text-center text-white" id="cartMessage"></div>
                                </div>
                            @else
                                <div class="d-flex flex-wrap align-items-center mb-30 text-center flex-column p-5 text-white">
                                    @if(!empty($soldOutImg))
                                        <img src="{{$soldOutImg}}" />
                                    @else
                                        Contest Expired OR Ticket SoldOut.
                                    @endif
                                </div>
                            @endif
                            {{-- {!! Share::page(route('contest-details', ['id' => $contest->id, 'slug' => $contest->slug]))->facebook()->twitter()->linkedin() !!} --}}
                            <ul class="social-links align-items-center">
                                <li>Share :</li>
                                <li>
                                    {{-- <a href="#0"><i class="fab fa-facebook-f"></i></a> --}}
                                    <a class="w-inline-block social-share-btn fb" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"><i class="fab fa-facebook-f"></i></a>
                                </li>
                                <li>
                                    {{-- <a href="#0"><i class="fab fa-twitter"></i></a> --}}
                                    <a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li>
                                    {{-- <a href="#0"><i class="fab fa-linkedin-in"></i></a> --}}
                                    <a class="w-inline-block social-share-btn lnk" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"><i class="fab fa-linkedin-in"></i></a>
                                </li>
                            </ul>
                        </div>
                        <!-- contest-cart__right end -->
                    </div>
                    <!-- contest-cart end -->
                </div>
                <!-- col-lg-12 end -->
                <div class="col-lg-10">
                    <div class="contest-description">
                        <ul class="nav nav-tabs justify-content-center mb-30 pb-4 border-0" id="myTab" role="tablist">
                            {{-- <li class="nav-item" role="presentation">
                                <a class="cmn-btn active" id="description-tab" data-toggle="tab" href="#description"
                                    role="tab" aria-controls="description" aria-selected="true"><span
                                        class="mr-3"></span> description</a>
                            </li> --}}
                            <li class="nav-item" role="presentation">
                                <a class="cmn-btn" id="details-tab" data-toggle="tab" href="#details" role="tab"
                                    aria-controls="details" aria-selected="false"><span class="mr-3"></span>competition
                                    details</a>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">
                            {{-- <div class="tab-pane fade show active" id="description" role="tabpanel"
                                aria-labelledby="description-tab">
                                <div class="content-block">
                                    <h3 class="title">Vehicle Overview</h3>
                                    <p>
                                        {!! $contest->description !!}
                                    </p>
                                </div>
                                <!-- content-block end -->
                                <div class="content-block">
                                    <h3 class="title">Specifications</h3>
                                    <div class="row mb-none-30">
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/1.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>0-62mph</p>
                                                    <span>4.0 secs</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/2.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>Top Speed</p>
                                                    <span>181 mph</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/3.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>Power</p>
                                                    <span>542 bhp</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/4.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>Displacement</p>
                                                    <span>4.0ltr</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/5.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>bhp</p>
                                                    <span>691</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                        <div class="col-lg-4 col-sm-6 mb-30">
                                            <div class="icon-item">
                                                <div class="icon-item__thumb">
                                                    <img src="{{asset('frontend/assets/images/icon/specification/6.png')}}" alt="image" />
                                                </div>
                                                <div class="icon-item__content">
                                                    <p>Year</p>
                                                    <span>2019</span>
                                                </div>
                                            </div>
                                            <!-- icon-item end -->
                                        </div>
                                    </div>
                                </div>
                                <!-- content-block end -->
                            </div> --}}
                            <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                                <div class="content-block">
                                    <h3 class="title">Competition Details</h3>
                                    <p>
                                        {!! $contest->competition_details !!}
                                    </p>
                                </div>
                                <!-- content-block end -->
                            </div>
                        </div>
                        <!-- tab-content end -->
                    </div>
                    <!-- contest-description end -->
                </div>
            </div>
        </div>
    </section>
    <!-- contest-details-section end  -->
@endsection

@section('script')

@if($endDate)
    <script>

        function startCountdown(endDate) {
            var countDownDate = new Date(endDate).getTime();

            var x = setInterval(function() {
                var now = new Date().getTime();
                var distance = countDownDate - now;
                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);

                document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("timer").innerHTML = "EXPIRED";
                }
            }, 1000);
        }


        // Retrieve the end date passed from the controller
        var endDate = '{{ $endDate->toIso8601String() }}';
        // Start the countdown with the retrieved end date
        startCountdown(endDate);


        $(document).ready(function(){
            $("#buyTicketsButton").click(function(e){
                $(this).text('Adding To Cart..').attr('disabled', 'disabled');
                e.preventDefault();
                let contest_id = $("#contest_id").val();
                let quantity = $("#quantity").val();
                let cartDetails = {
                    contest_id: contest_id,
                    quantity: quantity,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                $.ajax({
                    url : "{{route('frontend.add.cart')}}",
                    method : 'POST',
                    data : cartDetails,
                    success:function(response){
                        if(response.status === true){
                            getCartItemsCount($("#getCartItemsURL").val());
                        }

                        $("#cartMessage").text(response.message);
                        $("#buyTicketsButton").text('buy tickets').removeAttr('disabled');
                        setInterval(() => {
                            $("#cartMessage").text("")
                        }, 3000);
                        return true;
                    },
                    error:function(err){
                        console.log(err);
                        $("#buyTicketsButton").text('buy tickets').removeAttr('disabled');
                        return false;
                    }
                });
            });
        });
    </script>
@endif
@endsection