@php
   $hackathons = DB::table('hackathon')->orderBy('id', 'desc')->get();

   $categories = DB::table('hackathon')->distinct('category')->pluck('category');

   $topThree = [];
   foreach ($hackathons as $value) {
      if(count($topThree) < 4){
         $date1=date_create(date("M j, Y"));
         $date2=date_create($value->start_time);
         $diff=date_diff($date1,$date2)->format("%R%a");      
         if($diff <= 0){
            $date2=date_create($value->end_time);
            $diff=date_diff($date1,$date2)->format("%R%a");
            if($diff > 0){
               $topThree[] = $value;
            }
         }
      }else{
         break;
      }
     
   }


   
@endphp



         <section class="hackathons">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-lg-7 col-md-9">
                     <div class="banner-heading">
                        <h1>DataTrained Hackathon</h1>
                       
                        <p>Hackathons which help you put your coding skills to work. Solve interesting business problems and real-world challenges.</p>
                        
                      
                           <a href="#hackathon-list" class="fill-btn" >Get Started</a>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <section class="top-hackathones">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-lg-12">
                     <div class="place-heading mb-5">
                        <h2>Latest Hackathons</h2>
                     </div>
                  </div>
               </div>
               <div class="row justify-content-center">
                  @foreach ($topThree as $item)
                     @php
                        $count = $item->id;
                        $date1=date_create(date("M j, Y"));
                        $date2=date_create($item->start_time);
                        $date = null;
                        $diff=date_diff($date1,$date2)->format("%R%a");
                        $class = '';
                        if($diff > 0){
                           $date = $item->start_time;
                           $class = 'upcoming';
                        }else{
                           $date = $item->end_time;
                           $class = 'live';
                        }
                     @endphp

                     <div class="col-lg-4 col-md-6 mb-4">
                        <div class="big-box">
                           <img data-lazysrc="{{asset($item->small_banner)}}" alt="{{$item->title}}">
                           <div class="content-box">
                              <h3>{{$item->title}}</h3>
                              <p>{{$item->short_description}}</p>
                              <div class="timing-box">
                                 @if ($class == 'upcoming')
                                    <p>Starts In</p>
                                 @else
                                    <p>Ends In</p>
                                 @endif

                                 
                                 <div class="timer-design clockdiv" data-date="Jan 1, 2022 12:00:00">
                                    <div>
                                       <span class="days" id="top-days{{ $count }}"></span>
                                       <div class="smalltext">days</div>
                                    </div>
                                    <div>
                                       <i class="fa fa-ellipsis-v"></i>
                                    </div>
                                    <div>
                                       <span class="hours" id="top-hours{{ $count }}"></span>
                                       <div class="smalltext">hours</div>
                                    </div>
                                    <div>
                                       <i class="fa fa-ellipsis-v"></i>
                                    </div>
                                    <div>
                                       <span class="minutes" id="top-minutes{{ $count }}"></span>
                                       <div class="smalltext">minutes</div>
                                    </div>
                                    <div>
                                       <i class="fa fa-ellipsis-v"></i>
                                    </div>
                                    <div>
                                       <span class="seconds last" id="top-seconds{{ $count }}"></span>
                                       <div class="smalltext" >seconds</div>
                                    </div>
                                 </div>
                                 <a href="{{url('hackathon/'.$item->url)}}" class="fill-btn">Explore</a>

                                 <script>
                        
                                    var countDownDate{{$count}} = new Date("{{ $date }}").getTime();
                                    
                                    if(countDownDate{{$count}}){
                                    
            
                                    var x{{ $count }} = setInterval(function () {
            
                                    // Get today's date and time
            
                                    var now{{ $count }} = new Date().getTime();
            
                                    // Find the distance between now and the count down date
            
                                    var distance{{ $count }} = countDownDate{{ $count }} - now{{ $count }};
            
                                    // Time calculations for days, hours, minutes and seconds
            
                                    var days{{ $count }} = Math.floor(distance{{ $count }} / (1000 * 60 * 60 * 24));
            
                                    var hours{{ $count }} = Math.floor(
            
                                       (distance{{ $count }} % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            
                                    );
            
                                    var minutes{{ $count }} = Math.floor(
            
                                       (distance{{ $count }} % (1000 * 60 * 60)) / (1000 * 60)
            
                                    );
            
                                    var seconds{{ $count }} = Math.floor((distance{{ $count }} % (1000 * 60)) / 1000);
            
                                       document.getElementById("top-days{{ $count }}").innerHTML = days{{ $count }};
                                       document.getElementById("top-hours{{ $count }}").innerHTML = hours{{ $count }};
                                       document.getElementById("top-minutes{{ $count }}").innerHTML = minutes{{ $count }};
                                       document.getElementById("top-seconds{{ $count }}").innerHTML = seconds{{ $count }};
                                    },1000);
                                    }
                                 </script>

                              </div>
                           </div>
                        </div>
                     </div>

                  @endforeach
                  
               </div>
            </div>
         </section>
         <section class="all-hackathons top-hackathones" id="hackathon-list">
            <div class="container-fluid">
               <div class="row justify-content-center">
                  <div class="col-lg-7">
                     <div class="place-heading">
                        <h3>Choose from a wide range of competitions</h3>
                        <p>Pick your competition to participate in from these categories. RSVP to events to meet like minded data scientists</p>
                     </div>
                  </div>
                  <div class="col-lg-12">
                     <ul class="blog-tag-list">
                        <li onclick="sortHackathon('all')"><a href="javascript:void(0)">All Competitions</a></li>
                        @foreach ($categories as $cat)
                           <li onclick="sortHackathon('{{$cat}}')"><a href="javascript:void(0)" style="text-transform: capitalize;">{{ str_replace("-", " ", $cat);}}</a></li>
                        @endforeach
                        
                        <li onclick="sortHackathon('upcoming')" id="upcoming-li"><a href="javascript:void(0)">Upcoming</a></li>
                        <li onclick="sortHackathon('live')" id="live-li"><a href="javascript:void(0)">Active</a></li>
                        <li onclick="sortHackathon('expired')" id="expired-li"><a href="javascript:void(0)">Expired</a></li>
                     </ul>
                  </div>
                  <div class="col-lg-12">
                     <div class="row">

                        @foreach ($hackathons as $item)    

                        @php
                           $count = $item->id;
                           $date1=date_create(date("M j, Y"));
                           $date2=date_create($item->start_time);
                           $date = null;
                           $diff=date_diff($date1,$date2)->format("%R%a");
                           $class = '';
                           if($diff > 0){
                              $class = 'upcoming';
                              $date = $item->start_time;
                           }else{
                              $date2=date_create($item->end_time);
                              $diff=date_diff($date1,$date2)->format("%R%a");
                              if($diff > 0){
                                 $class = 'live';
                                 $date = $item->end_time;
                              }else{
                                
                                 $class = 'expired';
                              }
                           }
                        @endphp  
                           <div class="col-lg-4 col-md-6 col-12 mb-4 no-px-xs hackathon-list  active  {{$item->category}} {{$class}}">
                              <div class="big-box">
                                 <img data-lazysrc="{{asset($item->small_banner)}}" alt="{{$item->title}}">
                                 <div class="content-box">
                                    <h3>{{$item->title}}</h3>
                                    <p>{{$item->short_description}}</p>
                                    <div class="timing-box">
                                       @if ($class == 'upcoming')
                                          <p>Starts In</p>
                                       @else
                                           @if ($class == 'live')
                                             <p>Ends In</p>
                                           @else
                                             <p>Expired</p>
                                           @endif
                                       @endif
                                       @if ($class != 'expired')
                                           
                                          <div class="timer-design clockdiv" data-date="Jan 1, 2022 12:00:00">
                                             <div>
                                                <span class="days" id="days{{$count}}"></span>
                                                <div class="smalltext">days</div>
                                             </div>
                                             <div>
                                                <i class="fa fa-ellipsis-v"></i>
                                             </div>
                                             <div>
                                                <span class="hours" id="hours{{$count}}"></span>
                                                <div class="smalltext">hours</div>
                                             </div>
                                             <div>
                                                <i class="fa fa-ellipsis-v"></i>
                                             </div>
                                             <div>
                                                <span class="minutes" id="minutes{{$count}}"></span>
                                                <div class="smalltext">minutes</div>
                                             </div>
                                             <div>
                                                <i class="fa fa-ellipsis-v"></i>
                                             </div>
                                             <div>
                                                <span class="seconds last" id="seconds{{$count}}"></span>
                                                <div class="smalltext">seconds</div>
                                             </div>
                                          </div>
                                       @endif
                                    
                                       <a href="{{url('hackathon/'.$item->url)}}" class="fill-btn">Explore</a>

                                       <script>
                         
                                          var countDownDate{{$count}} = new Date("{{ $date }}").getTime();
                                          
                                          if(countDownDate{{$count}}){
                                            
                  
                                          var x{{ $count }} = setInterval(function () {
                  
                                          // Get today's date and time
                  
                                          var now{{ $count }} = new Date().getTime();
                  
                                          // Find the distance between now and the count down date
                  
                                          var distance{{ $count }} = countDownDate{{ $count }} - now{{ $count }};
                  
                                          // Time calculations for days, hours, minutes and seconds
                  
                                          var days{{ $count }} = Math.floor(distance{{ $count }} / (1000 * 60 * 60 * 24));
                  
                                          var hours{{ $count }} = Math.floor(
                  
                                             (distance{{ $count }} % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                  
                                          );
                  
                                          var minutes{{ $count }} = Math.floor(
                  
                                             (distance{{ $count }} % (1000 * 60 * 60)) / (1000 * 60)
                  
                                          );
                  
                                          var seconds{{ $count }} = Math.floor((distance{{ $count }} % (1000 * 60)) / 1000);
                  
                                             document.getElementById("days{{ $count }}").innerHTML = days{{ $count }};
                                             document.getElementById("hours{{ $count }}").innerHTML = hours{{ $count }};
                                             document.getElementById("minutes{{ $count }}").innerHTML = minutes{{ $count }};
                                             document.getElementById("seconds{{ $count }}").innerHTML = seconds{{ $count }};
                                          },1000);
                                          }
                                       </script>

                                    </div>
                                 </div>
                              </div>
                           </div>
                        @endforeach

                     </div>
                  </div>
               </div>
            </div>
         </section>


        


      {{-- <script src="js/timer.js"></script> --}}
      <script type="text/javascript">
         function sortHackathon(category) {

            $(".hiring").removeClass("d-none");
            $(".prize-money").removeClass("d-none");
            $(".practice").removeClass("d-none");
            $(".skill-test").removeClass("d-none");
            $(".event").removeClass("d-none");

            if (category == "hiring") {
               $(".prize-money").addClass("d-none");
               $(".practice").addClass("d-none");
               $(".skill-test").addClass("d-none");
               $(".event").addClass("d-none");
            } else if (category == "prize-money") {
               $(".hiring").addClass("d-none");
               $(".practice").addClass("d-none");
               $(".skill-test").addClass("d-none");
               $(".event").addClass("d-none");
            } else if (category == "practice") {
               $(".hiring").addClass("d-none");
               $(".prize-money").addClass("d-none");
               $(".skill-test").addClass("d-none");
               $(".event").addClass("d-none");
            } else if (category == "skill-test") {
               $(".hiring").addClass("d-none");
               $(".prize-money").addClass("d-none");
               $(".practice").addClass("d-none");
               $(".event").addClass("d-none");
            } else if (category == "event") {
               $(".hiring").addClass("d-none");
               $(".prize-money").addClass("d-none");
               $(".practice").addClass("d-none");
               $(".skill-test").addClass("d-none");
            } else if (category == "upcoming") {
               $(".live").addClass("d-none");
               $(".expired").addClass("d-none");
            } else if (category == "live") {
               $(".upcoming").addClass("d-none");
               $(".expired").addClass("d-none");
            } else if (category == "expired") {
               $(".upcoming").addClass("d-none");
               $(".live").addClass("d-none");
            }
         }

   
        
      document.addEventListener('DOMContentLoaded', function() {
         if (!$('.hackathon-list').hasClass("upcoming")) {
            $('#upcoming-li').remove();
         }
         if (!$('.hackathon-list').hasClass("live")) {
            $('#live-li').remove();
         }
         if (!$('.hackathon-list').hasClass("expired")) {
            $('#expired-li').remove();
         }
         }, false);

      </script>