@extends('app.home-master')

@section('content')
<div class="container">
      <div class="row">
         <div class="col-sm-3 col-xs-12">
            {{-- Quick Search --}}
               <div class="card">
                  <div class="card-header bg-darkblue">
                           Quick Search
                  </div>
                  <div class="card-body">
                     <form>
                        <div class="form-group">
                           <label for="formGroupExampleInput" class="text-uppercase">Sponsors</label>
                           <div class="input-group mb-3">
                                 <select class="custom-select" id="inputGroupSelect02">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                 </select>
                           </div>
                        </div>
                        <div class="form-group">
                           <label for="formGroupExampleInput2"  class="text-uppercase">Bonus Type</label>
                           <div class="input-group mb-3">
                                 <select class="custom-select" id="inputGroupSelect02">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                 </select>
                           </div>
                        </div>
                        <div class="form-group pb-2">
                           <label for="formGroupExampleInput2" class="text-uppercase">Country</label>
                           <div class="input-group mb-3">
                                 <select class="custom-select" id="inputGroupSelect02">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                 </select>
                           </div>
                        </div>
                        <button class="btn btn-dark mx-auto d-block btn-pri"><i class="fas fa-search" aria-hidden="true"></i>Search</button>
                     </form>
                  </div>
               </div>
         </div>
         <div class="col-sm-9 col-xs-12">
            {{-- BRANDS --}}
            @foreach($contest_list AS $contest)
            <div class="card opaque-white">
                  <div class="card-header bg-darkblue">
                        {{$contest->brand_title}}
                     </div>
                     <div class="card-body">
                        <h2 class="main-title">{{$contest->title}}</h2>
                       {{--Image With date,time,button--}}
                        <div class="container" style="position: relative; z-index: 0;">
                           <img src = "{{ asset('images/brand-sample.png')}}" class="img-fluid mx-auto d-block">
                           <div class="card opaque-white-timer border-0 timer-design">
                              <div class="card-body timer">
                                 
                                    <div class="row timer">
                                    {{-- TIMER --}}
                                         <div class="mx-auto">
                                             <div class="row">
                                                  <div class="col-xs-3 pt-3 px-1 xstimer">
                                       <div class="card bg-gray-dark">
                                          <div class="card-body p-1 timer-body">
                                             <p class="text-center text-timer" id="days{{$contest->id}}"></p>
                                          </div>
                                       </div>
                                       <p class="text-center text-uppercase p-1 text-date">days</p>
                                    </div>
   
                                    <div class="col-xs-3 pt-3 px-1 xstimer">
                                       <div class="card bg-gray-dark">
                                          <div class="card-body p-1 timer-body">
                                             <p class="text-center text-timer" id="hours{{$contest->id}}"></p>
                                          </div>
                                       </div>
                                       
                                       <p class="text-center text-uppercase p-1 text-date">hrs</p>
                                    </div>
   
                                    <div class="col-xs-3 pt-3 px-1 xstimer">
                                       <div class="card bg-gray-dark">
                                          <div class="card-body p-1 timer-body">
                                             <p class="text-center text-timer" id="minutes{{$contest->id}}"></p>
                                          </div>
                                       </div>
                                       <p class="text-center text-uppercase p-1 text-date">mins</p>
                                    </div>
   
                                    <div class="col-xs-3 pt-3 px-1 xstimer">
                                       <div class="card bg-gray-dark">
                                          <div class="card-body p-1 timer-body">
                                             <p class="text-center text-timer" id="seconds{{$contest->id}}"></p>
                                          </div>
                                       </div>
                                       <p class="text-center text-uppercase p-1 text-date">sec</p>
                                    </div>
                                             </div>
                                  
                                 </div>
                                  </div>
                                 
                              </div>
                           </div>
                           {{-- Date --}}
                           <div class="card opaque-white-timer border-0 date-design">
                              <div class="card-body date timer p-4">
                                 <ul>
                                    <li> Start Date: {{\Carbon\Carbon::parse($contest->startdate)->format('m-d-Y')}}</li>
                                    <li> End Date: {{\Carbon\Carbon::parse($contest->enddate)->format('m-d-Y')}}</li>
                                 </ul>
                              </div>
                           </div>
                           {{-- Button --}}
                           <div class="play-button-pos text-center">
                                 <button class="play-button" data-toggle="modal" data-target="#registerContest" data-id={{$contest->id}}>
                                    <img src={{asset('images/play-button.png')}}>
                                    <p class="centered">Go!</p>
                                 </button>
                           </div>
                        </div>
                       {{--Description And Details--}}
                        <div class="container global-description">
                           <div class="row">
                              <div class="col-sm-12">
                                 <h3 class="sub-title"> Global Description:</h3>
                                 <div class="content-text">
                                    <p class="content-text">{{$contest->global_desc}}</p>
                                 </div>
                              </div>
                              <div class="col-sm-12">
                                   <h3 class="sub-title"> Details:</h3>
                                    <div class="content-text">
                                       <p class="content-text">{{$contest->details}}</p>
                                    </div>
                              </div>
                              <div class="col-sm-12">
                              <h3 class="sub-title"> Price Value: <span class="content-text">USD${{$contest->price}}</span></h3>
                                 <p class="content-text text-center">View Winning Participants <a href="">Here</a></p>
                              </div>
                           </div>
   
                        </div>
                     </div>
            </div>
            @endforeach
         </div>
      </div>
   </div>


   {{-- Modal --}}
   <div class="modal fade" id="registerContest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
            
           </div>
         </div>
       </div>
@endsection
@section('js')
   <script type="text/javascript">	
   // Modal
   $(document).ready(function(){
    $('#registerContest').on('shown.bs.modal', function (e) {
       
         var contest_id = $(e.relatedTarget).data('id');
         console.log(contest_id);
         $.ajax({
            type : 'POST',
            headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
            url : "{{route('gamble.ajax')}}", 
            data :   {id:contest_id},
            success : function(data){
               $('.modal-content').html(data);
            }
        });
      })
   });
   
   //TIMER
   var contest = @json($contest_list);
   function makeTimer() {
         contest.forEach(data => {
            var endTime = new Date(data['enddate']);			
               endTime = (Date.parse(endTime) / 1000);
               var now = new Date();
               now = (Date.parse(now) / 1000);

               var timeLeft = endTime - now;

               var days = Math.floor(timeLeft / 86400); 
               var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
               var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
               var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
      
               if (hours < "10") { hours = "0" + hours; }
               if (minutes < "10") { minutes = "0" + minutes; }
               if (seconds < "10") { seconds = "0" + seconds; }

               $("#days"+data['id']).html(days);
               $("#hours"+data['id']).html(hours);
               $("#minutes"+data['id']).html(minutes);
               $("#seconds"+data['id']).html(seconds);
         });		

      };

      setInterval(function() { makeTimer(); }, 1000);


   </script>
@endsection