@extends('Frontend.partials.layout')

@section('styles')
    <link rel="stylesheet" href="{{ asset('/css/util.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/countdown.css') }}">
@endsection

@section('content')
  <div class="bg-img1 size1 flex-w flex-c-m p-t-55 p-b-55 p-l-15 p-r-15">
    <div class="wsize1 bor1 bg1 p-t-175 p-b-45 p-l-15 p-r-15 respon1">
      <div class="wsize2 flex-w flex-c hsize1 cd100">
        <div class="flex-col-c-m size2 how-countdown">
          <span class="l1-txt1 p-b-9 days"></span>
          <span class="s1-txt1">{{__('action.waiting_days')}}</span>
        </div>

        <div class="flex-col-c-m size2 how-countdown">
          <span class="l1-txt1 p-b-9 hours"></span>
          <span class="s1-txt1">{{__('action.waiting_hours')}}</span>
        </div>

        <div class="flex-col-c-m size2 how-countdown">
          <span class="l1-txt1 p-b-9 minutes"></span>
          <span class="s1-txt1">{{__('action.waiting_minutes')}}</span>
        </div>

        <div class="flex-col-c-m size2 how-countdown">
          <span class="l1-txt1 p-b-9 seconds"></span>
          <span class="s1-txt1">{{__('action.waiting_seconds')}}</span>
        </div>
      </div>

    </div>
  </div>
@endsection


@section('scripts')
<script>

    var intervalTimeout = window.setInterval(function(){
      startCountDown();
    },1000);

  function startCountDown(){
    var startTime = "{{$data['startTime']}}";
    var timeZone = "{{$data['zone']}}";
    var diff = getTimeDifference(startTime,timeZone);

    $('.days').html(diff.days);
    $('.hours').html(diff.hours);
    $('.minutes').html(diff.mins);
    $('.seconds').html(diff.sec);

    if(diff.days <= 0 && diff.hours <= 0 && diff.mins <= 0 && diff.sec <=0){
      clearInterval(intervalTimeout);
      window.location.href = window.location.href;
    }

  }

  function getTimeDifference(datetime,timeZone){
    var today = new Date().toLocaleString("en-US", {timeZone: "Europe/Vienna"});
    //Europe/Vienna //Asia/Dhaka
    var endDate = new Date(datetime);
    today = new Date(today);

    const days = parseInt((endDate - today) / (1000 * 60 * 60 * 24));
    const hours = parseInt(Math.abs(endDate - today) / (1000 * 60 * 60) % 24);
    const minutes = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000 * 60) % 60);
    const seconds = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000) % 60);

    return {
      days : days,
      hours : hours,
      mins : minutes,
      sec : seconds
    }
  }
</script>

@endsection