@php
   $date1=date_create(date("M j, Y"));
   $date2=date_create($hackathon->start_time);
   $date = null;
   $diff=date_diff($date1,$date2)->format("%R%a");
   $class = '';
   if($diff > 0){
      $class = 'upcoming';
      $date = $hackathon->start_time;
   }else{
      $date2=date_create($hackathon->end_time);
      $diff=date_diff($date1,$date2)->format("%R%a");
      if($diff > 0){
         $class = 'live';
         $date = $hackathon->end_time;
      }else{
         $class = 'expired';
      }
   }
@endphp


@php
    $metas = '<title>'.$hackathon->title.'</title><meta name="description" content="'.$hackathon->title.' | '.$hackathon->category.'">'
@endphp
@extends('master')
@section('main_content')

<section class="hackathons explore-hackathone explore-hk" style="background-image: url({{asset($hackathon->large_banner)}});">
</section>



<section class="banner-hack-details">
   <div class="container-fluid">
      <div class="row">
         <div class="col-lg-12">
            <div class="detail-box">
               <div class="box">
                  <img data-lazysrc="{{asset('images/hackathons/active.png')}}" alt="">
                  <p style="text-transform: capitalize;">{{ $class;}}</p>
               </div>
               <div class="box">
                  <img data-lazysrc="{{asset('images/hackathons/date.png')}}" alt="">
                  <p>{{ date_create($hackathon->start_time)->format('j M, Y') }}</p>
               </div>
               <div class="box">
                  <img data-lazysrc="{{asset('images/hackathons/last-date.png')}}" alt="">
                  <p>{{ date_create($hackathon->end_time)->format('j M, Y') }}</p>
               </div>
               <div class="box">
                  <img data-lazysrc="{{asset('images/hackathons/user.png')}}" alt="">
                  <p>{{$hackathon->individual_participants}}+</p>
               </div>
               <div class="box">
                  <img data-lazysrc="{{asset('images/hackathons/skill-test.png')}}" alt="">
                  <p style="text-transform: capitalize;">{{ str_replace("-", " ", $hackathon->category);}}</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="explore-hackathone" style="padding: 40px 0">
   <div class="container-fluid">
      <div class="row justify-content-center">
         <div class="col-lg-8">
            <div class="banner-heading text-center">
               <h1 style="font-size: 34px; text-transform: capitalize;">{{$hackathon->title}}</h1>
               <p>{{$hackathon->short_description}}</p>
               <div class="hack-timer" style="margin-bottom: 40px;">
                  <div class="timer-design clockdiv" data-date="Jan 1, 2022 12:00:00" style="margin:25px auto;">
                     <div>
                        <span class="days" id="days"></span>
                        <div class="smalltext">Days</div>
                     </div>
                     <div class="icon">
                        <i class="fa fa-ellipsis-v"></i>
                     </div>
                     <div>
                        <span class="hours" id="hours"></span>
                        <div class="smalltext">Hours</div>
                     </div>
                     <div class="icon">
                        <i class="fa fa-ellipsis-v"></i>
                     </div>
                     <div>
                        <span class="minutes" id="minutes"></span>
                        <div class="smalltext">Minutes</div>
                     </div>
                     <div class="icon">
                        <i class="fa fa-ellipsis-v"></i>
                     </div>
                     <div>
                        <span class="seconds last" id="seconds"></span>
                        <div class="smalltext">Seconds</div>
                     </div>
                  </div>
               </div>
               <a href="#" class="fill-btn" id="register-now-btn" data-toggle="modal" data-target="#hackathon-register">Register Now</a>


               <script>
                         
                  var countDownDate = new Date("{{ $date }}").getTime();
                  
                  if(countDownDate){
                    

                  var x = setInterval(function () {

                  // Get today's date and time

                  var now = new Date().getTime();

                  // Find the distance between now and the count down date

                  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);

                     document.getElementById("days").innerHTML = days;
                     document.getElementById("hours").innerHTML = hours;
                     document.getElementById("minutes").innerHTML = minutes;
                     document.getElementById("seconds").innerHTML = seconds;
                  },1000);
                  }
               </script>

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


<section class="hackathons-all-details">
   <div class="container-fluid">
      <div class="border-box">
         <div class="row">
            <div class="col-lg-12">
               <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item">
                     <a class="nav-link active" href="#about-hk" aria-controls="about-hk" role="tab" data-toggle="tab">About</a>
                  </li>
                  <li class="nav-item d-non">
                     <a class="nav-link" href="#prblm-hk" aria-controls="prblm-hk" role="tab" data-toggle="tab">Problem Statement</a>
                  </li>
                  <li class="nav-item d-non">
                     <a class="nav-link" href="#dwnld-hk" aria-controls="dwnld-hk" role="tab" data-toggle="tab">Download</a>
                  </li>
                  <li class="nav-item d-non">
                     <a class="nav-link" href="#eval-hk" aria-controls="eval-hk" role="tab" data-toggle="tab">Evaluation</a>
                  </li>
                  <li class="nav-item d-non">
                     <a class="nav-link" href="#sol-hk" aria-controls="sol-hk" role="tab" data-toggle="tab">Solution Checker</a>
                  </li>
                  <li class="nav-item d-non">
                     <a class="nav-link" href="#sub-hk" aria-controls="sub-hk" role="tab" data-toggle="tab">My Submissions</a>
                  </li>
                  {{-- <li class="nav-item d-non">
                     <a class="nav-link" href="#leader-hk" aria-controls="leader-hk" role="tab" data-toggle="tab">Leaderboard</a>
                  </li> --}}
               </ul>
            </div>
            <div class="col-lg-12">
               <div class="tab-content">
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade show active" id="about-hk">
                     {!! $hackathon->about !!}
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="prblm-hk">
                     {!! $hackathon->problem_statement !!}
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="dwnld-hk">
                     <div class="table-responsive">
                        <table class="table table-striped">
                           <tbody>
                              @php
                                  $fileCount = 0;
                              @endphp
                              @if($hackathon->test_file)
                                 <tr>
                                    <td>{{++$fileCount}}</td>
                                    <td>Test File</td>
                                    <td><a href="{{asset($hackathon->test_file)}}" download class="fill-btn"><i class="fa fa-download"></i>Download</a></td>
                                 </tr>    
                              @endif
                              @if ($hackathon->train_file)
                                 <tr>
                                    <td>{{++$fileCount}}</td>
                                    <td>Train File</td>
                                    <td><a href="{{asset($hackathon->train_file)}}" download class="fill-btn"><i class="fa fa-download"></i>Download</a></td>
                                 </tr>    
                              @endif
                             
                              @if ($hackathon->sample_submission)
                                 <tr>
                                    <td>{{++$fileCount}}</td>
                                    <td>Sample Submission</td>
                                    <td><a href="{{asset($hackathon->sample_submission)}}" download class="fill-btn"><i class="fa fa-download"></i>Download</a></td>
                                 </tr>
                              @endif
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="eval-hk">
                     {!! $hackathon->evaluation !!}
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="sol-hk">
                     <form action="{{url('solution-checker')}}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                        <input type="hidden" name="hackathon_id" id="hackathon_id" value="{{ $hackathon->id }}" />
                        <input type="hidden" name="user_id" id="user_id"  />
                        <div class="row">
                           <div class="form-group col-md-6">
                              <label for="">Code File * (only .ipynb file accepted)</label>
                              <input type="file" name="code_file" class="form-control-file" id="exampleFormControlFile1" accept=".ipynb" required>
                           </div>
                           <div class="form-group col-md-6">
                              <label for="">Solution File * (only .csv file accepted)</label>
                              <input type="file" name="solution_file" class="form-control-file" id="exampleFormControlFile2"  accept=".csv" required>
                           </div>
                           <div class="form-group col-md-12">
                              <label for="">Solution Description *</label>
                              <input type="text" class="form-control"name="description" placeholder="Solution Description *" required>
                           </div>
                           <div class="form-group col-md-12">
                              <label for="code_public">Do you want to show your code on leaderboard? *</label><br>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="code_public" id="code_public" value="no">
                                 <label class="form-check-label" for="inlineRadio1">No</label>
                              </div>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="code_public" id="code_public" value="yes">
                                 <label class="form-check-label" for="inlineRadio2">Yes</label>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <button type="submit" class="fill-btn">Submit Solution</button>
                           </div>
                        </div>
                     </form>
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="sub-hk">
                     <div class="row justify-content-center">
                        <div class="col-lg-10">
                           <div class="table-responsive">
                              <table class="table">
                                 <thead class="thead-light">
                                    <tr>
                                       <th scope="col">S.No.</th>
                                       <th scope="col">Description</th>
                                       <th scope="col">Code File</th>
                                       <th scope="col">Solution File</th>
                                    </tr>
                                 </thead>
                                 <tbody id="mySubmission">
                                    
                                 </tbody>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div role="tablist" aria-labelledby="home-tab" class="tab-pane fade" id="leader-hk">
                     <div class="row justify-content-center">
                        <div class="col-lg-10">
                           <div class="table-responsive">
                              <table class="table">
                                 <thead class="thead-light">
                                    <tr>
                                       <th scope="col">Rank</th>
                                       <th scope="col">User</th>
                                       <th scope="col">Points</th>
                                       <th scope="col">Score</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <tr>
                                       <td>1</td>
                                       <td><a href="#"><img data-lazysrc="{{asset('images/hackathons/user-1.jpg')}}" alt="">  Mark</a></td>
                                       <td>10</td>
                                       <td>1000</td>
                                    </tr>
                                    <tr>
                                       <td>2</td>
                                       <td><a href="#"><img data-lazysrc="{{asset('images/hackathons/user-2.jpg')}}" alt="">  Emma</a></td>
                                       <td>8</td>
                                       <td>900</td>
                                    </tr>
                                    <tr>
                                       <td>3</td>
                                       <td><a href="#"><img data-lazysrc="{{asset('images/hackathons/user-3.jpg')}}" alt="">  Sophia</a></td>
                                       <td>6</td>
                                       <td>8000</td>
                                    </tr>
                                 </tbody>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>


<div class="modal fade register-form" id="hackathon-register" tabindex="-1" aria-labelledby="register-formLabel" aria-hidden="true">

   <div class="modal-dialog modal-dialog-centered">

      <div class="modal-content">

         <div class="modal-body">

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

            <span aria-hidden="true">&times;</span>

            </button>

            <div class="register-heading">

               <h5>Generate OPT</h5>

            </div>

           <form action="">
              <div>
               <div id="error-message" style="color:red;"></div>
               <label for="email">Email</label>
               <input type="email" name="email" id="hackathon_email">
               <button onclick="generateOtp()" type="button" id="generate-otp-btn">Generate OTP</button>
              </div>

              <div id="verfy-otp">
              
              </div>
             
           </form>

         </div>

      </div>

   </div>

</div>


<script>

function generateOtp(){
   let email = document.getElementById('hackathon_email').value;
   if(!email){
      return 0;
   }
   $('#generate-otp-btn').html('Sending...')
            
            $.ajax({
                url: '{{url("api/hackathon-session")}}',
                dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: {email },
                success: function( data, textStatus, jQxhr ){
                  $('#generate-otp-btn').html('Resend OTP')
                    document.getElementById('verfy-otp').innerHTML = `
                    <label for="email">OTP</label>
                        <input type="text" name="otp" id="hackathon_otp">
                        <button onclick="verifyOtp()" type="button" id="verify-otp-btn">Verify OTP</button>
                    `
                },
                error: function( jqXhr, textStatus, errorThrown ){
                  $('#error-message').html('failed! please try again')
                  $('#generate-otp-btn').html('Generate OTP')
                }
            });
        }

        function verifyOtp(){
         $('#verify-otp-btn').html('verifing...')
         let email = document.getElementById('hackathon_email').value;
         let otp = document.getElementById('hackathon_otp').value;
        
         $.ajax({
                url: '{{url("api/hackathon-session-otp-verify")}}',
                dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: {email, otp },
                success: function( data, textStatus, jQxhr ){
                  let res = JSON.parse(data); 
                
                  localStorage.setItem('hackathon', res.hackathon);
                  location.reload();
                },
                error: function( jqXhr, textStatus, errorThrown ){
                  $('#error-message').html('Wrong OTP')
                  $('#verify-otp-btn').html('Verify OTP')
                }
            });

        }


        function verifySession(email){
        
         $.ajax({
                url: '{{url("api/hackathon-session-verify")}}',
                dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: {email },
                success: function( data, textStatus, jQxhr ){
                 
                  $('#register-now-btn').remove();
                  $('.nav-item').removeClass('d-non');
                  $('#user_id').val(email);
                  getMysubmission(email, '{{$hackathon->id}}')
                 
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    
                }
            });

        }
        function getMysubmission(user_id, hackathon_id){
        
         $.ajax({
                url: '{{url("api/get-hackathon-submission")}}',
                dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: {user_id, hackathon_id },
                success: function( data, textStatus, jQxhr ){
                 

                
                  let res = JSON.parse(data);
                 
                  let base_url = window.location.origin;
                  let trdata = '';
                  res.forEach((data, index)=>{
                     trdata += `<tr>
                                    <td>${index+1}</td>
                                    <td>${data.description}</td>
                                    <td><a href="${base_url}${data.code_file}" download class="fill-btn"><i class="fa fa-download"></i>Download</a></td>
                                    <td><a href="${base_url}${data.solution_file}" download class="fill-btn"><i class="fa fa-download"></i>Download</a></td>
                                 </tr>`;
                  })

                  $("#mySubmission").html(trdata);
                
                 
                },
                error: function( jqXhr, textStatus, errorThrown ){
                   
                }
            });

        }

         document.addEventListener('DOMContentLoaded', function() {
            let email = localStorage.getItem('hackathon');
            if(email){
                  verifySession(email);
            }
         }, false);
</script>


@endsection