@extends('layout.app')

@push('css')
<link href="{{ asset('css/profile.css') }}" rel="stylesheet"/>
<style>
  .error {
    font-size: 0.7rem;
    color: red;
  }
</style>
@endpush

@section('content')

<div class="container">

  <div class="d-none d-md-block">
    <div class="row">
      <div class="d-flex col-6 justify-content-center">
        <div class="header-left">
          <a href="/">
            <img class="logo" src="{{ asset('images/gamelogoleft.png') }}" alt="">
          </a>
        </div>
      </div>
      <div class="d-flex col-6 justify-content-center">
        <div class="header-right">
          <a href="/profile">
            <img class="logo2" id="stampMap" src="{{ asset('images/map0.png') }}" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="d-md-none">
    <div class="row">
      <div class="d-flex col-6 justify-content-center">
        <div class="header-left">
          <a href="/">
            <img class="" src="{{ asset('images/gamelogoleft-2.png') }}" alt="">
          </a>
        </div>
      </div>
      <div class="d-flex col-6 justify-content-center">
        <div class="header-right">
          <a href="/profile">
            <img class="logo2-2" id="stampMap-2" src="{{ asset('images/map0-0.png') }}" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="desktop">

  <div class="row">
    <div class="d-flex col-12 justify-content-center">
      <h1 class="subtitle">My Stamps</h1>
    </div>
    <div class="d-flex col-12 justify-content-center">
      <p class="rules">Collect {{ $remainder }} more stamps to enter our lucky draw!</p>
    </div>
    <div class="d-flex col-12 justify-content-center">
      <button class="join-btn"><a href="/destination">Play Mini Games</a></button>
    </div>
  </div>


    <div class="row">
      <div class="d-flex col-12 justify-content-center">
        <div class="stampbook-container">
          <img id="stamp" src="{{ asset('images/nostamp.png') }}" alt="">
            <div class="booktext-container">
              @if ($remainder != 0 || $redemptions == 1 || $verified == 0)
                <button class="join-btn" style="opacity: 0.5;" onclick="showNotVerified({{ $verified }})">Join Lucky Draw</button>
              @else
                <button id="lucky-draw" class="join-btn" onclick="showModalLuckyDraw()">Join Lucky Draw</button>
              @endif
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="mobile">

      <div class="row">
        <div class="d-flex col-12 justify-content-center">
          <h1 class="subtitle">My Stamps</h1>
        </div>
        <div class="d-flex col-12 justify-content-center">
          <p class="rules">Collect {{ $remainder }} more stamps to enter our lucky draw!</p>
        </div>
        <div class="d-flex col-12 justify-content-center">
          <button class="join-btn space"><a href="/destination">Play Mini Games</a></button>
        </div>
      </div>

      <div class="row">
        <div class="d-flex col-12 justify-content-center ps-0">
          <div class="stampbook-container">
            <img id="stamp_mobile" src="{{ asset('images/nostamp-mobile.png') }}" alt="">


          </div>
        </div>
      </div>
      <div class="row">
        <div class="d-flex col-12 justify-content-center">
        @if ($remainder != 0 || $redemptions == 1 || $verified == 0)
        <button class="join-btn-mobile" style="opacity: 0.5;" onclick="showNotVerified({{ $verified }})">Join Lucky Draw</button>
        @else
        <button id="lucky-draw-mobile " class="join-btn-mobile" onclick="showModalLuckyDraw()">Join Lucky Draw</button>
        @endif
      </div>
        <div class="d-flex col-12 justify-content-center">
          <img class="snackbox" src="{{ asset('images/snackbox2.png') }}" alt="">
        </div>
        <div class="col-12">
          <p class="reward-mobile">The first 400 participants who have collected all 15 stamps will be rewarded with a Korean snack box worth RM30!</p>
        </div>
      </div>

    </div>

    <!--
    @if ($remainder != 0)
        <p>Collect {{ $remainder }} more to enter lucky draw</p>
    @endif

    @foreach ($stamps->toArray() as $column => $value)
        @if ($column != 'id' && $column != 'user_id' && $column != 'created_at' && $column != 'updated_at')
            <td>[{{ $column }} - </td>
            <td>{{ $value }}]</td>
        @endif
    @endforeach

    <button class="btn btn-primary" @if ($remainder != 0) disabled @endif>Join Lucky Draw</button>

    -->
</div>

<!-- stamp form modal box-->
<div class="modal fade" id="stampformmodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-lantern">
    <div class="modal-outerbox">
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="stamp-content">
            <form action="{{ route('player.redemption.store') }}" method="POST">
              @csrf
              <div class="row">
                <div class="col-12">
                  <p class="please">Please fill in your details below for the lucky draw.</p>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <label for="fullname">Full Name</label><br>
                  <input class="input" type="text" id="name" name="name" value="{{ old('name') }}" required>
                  @if($errors->redemptions->has('name'))
                    <div class="error">{{ $errors->redemptions->first('name') }}</div>
                  @endif
                </div>
                <div class="col-lg-7">
                  <label for="email">Email</label><br>
                  <input class="input" type="email" id="email" name="email" value="{{ old('email') }}" required>
                  @if($errors->redemptions->has('email'))
                    <div class="error">{{ $errors->redemptions->first('email') }}</div>
                  @endif
                </div>
                <div class="col-lg-5">
                  <label for="phone">Phone Number</label><br>
                  <input class="input" type="text" id="phone" name="phone" value="{{ old('phone') }}" required>
                  @if($errors->redemptions->has('phone'))
                    <div class="error">Please use this format as an example: 0123456789 or 01123456789</div>
                  @endif
                </div>
                <div class="col-12">
                  <label for="birth">Date of Birthday </label><br>
                    <SELECT id ="date" name="dd" >
                    </SELECT>
                    <SELECT  id ="month" name="mm" onchange="change_month(this)">
                    </SELECT>
                    <SELECT id ="year" name="yyyy" onchange="change_year(this)">
                    </SELECT>
                </div>
                <div class="col-12">
                  <label for="address">Mailing Address</label><br>
                  <input class="input" type="text" id="address" name="address" value="{{ old('address') }}" required><br>
                  <input class="input" type="text" id="address2" name="address2" value="{{ old('address2') }}">
                  @if($errors->redemptions->has('address'))
                    <div class="error">{{ $errors->redemptions->first('address') }}</div>
                  @endif
                  @if($errors->redemptions->has('address2'))
                    <div class="error">{{ $errors->redemptions->first('address2') }}</div>
                  @endif
                </div>
                <div class="col-12">
                  <p class="question">1. Which Korean festival would you most like to visit?</p><br>
                  <input class="input" type="text" id="festival" name="festival" value="{{ old('festival') }}" required>
                  @if($errors->redemptions->has('festival'))
                    <div class="error">{{ $errors->redemptions->first('festival') }}</div>
                  @endif
                </div>
                <div class="col-12">
                  <p class="question">2. Do you prefer to:</p>
                </div>
                <div class="col-lg-6">
                  <input type="radio" id="book" name="preferences" value="Book with a travel agency">
                    <label for="agency">Book with a travel agency</label>
                </div>
                <div class="col-lg-6">
                  <input type="radio" id="plan" name="preferences" value="Plan your own trip">
                    <label for="own">Plan your own trip</label><br>
                </div>
                @if($errors->redemptions->has('preferences'))
                    <div class="error">{{ $errors->redemptions->first('preferences') }}</div>
                @endif
                <div class="d-flex col-12 justify-content-center">
                  <input class="submitbtn" type="submit" value="Submit">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- thankyou modal box-->
<div class="modal fade" id="thankyoumodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-lantern">
    <div class="modal-outerbox">
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="stamp-content">
            <h5 class="thankyou">THANK YOU FOR YOUR PARTICIPATION!<h5>
              <div class="img-container">
                <img src="{{ asset('images/homepage-title.png') }}" alt="">
              </div>
              <p class="lucky">You’re eligible for the lucky draw! Lucky draw winners and redemption prize winners will be contacted via email.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--score box modal-->
<div class="modal fade" id="scoremodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-lantern">
    <div class="modal-outerbox">
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="modalbody-container">
            <h5 class="congratulations">CONGRATULATIONS</h5>
            <h5 class="collected">You've collected all 15 stamps!</h5>
            <a href="/profile?luckydraw=true"><button type="button" class="joinluckydraw">Join Lucky Draw</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--not verified box modal-->
<div class="modal fade" id="notverifiedmodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-lantern">
    <div class="modal-outerbox">
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="modalbody-container">
            <h5 class="congratulations">Account Not Verified</h5>
            <h5 class="collected">Please check the email <strong style="color:red">( {{ Auth::guard('player')->user()->email }} ) </strong>that you registered with to verify your account</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- stamp left modal box-->
<div class="modal fade" id="stampleftmodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-lantern">
    <div class="modal-outerbox">
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="modalbody-container">
            <h5 class="left">Loren impsum</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('js')

<script type="text/javascript">
  function showNotVerified(verified) {
    console.log(verified);
    if (verified == 0) {
      $('#notverifiedmodal').modal('show');
    }
}

  function showModalLuckyDraw() {
    $("#stampformmodal").modal('show');
  }

</script>
<script type="text/javascript">
$(window).on('load', function() {
  $('#scoremodal').modal('hide');
});



$(window).on('load', function() {
      $('#stampformmodal').modal('hide');
   });

$(window).on('load', function() {
    const number = {{ $remainder }};


    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    if (urlParams.get('error') == 'redemptions') {
      $("#stampformmodal").modal('show');
    } else {
      if (number == 0) {
        $('#thankyoumodal').modal('show');
      }
    }

    console.log('{{ Auth::guard('player')->user()->email }}');
  });

$(document).ready(function(){
  $("#lucky-draw").click(function(){
      $("#stampformmodal").modal('show');
  });
  $("#lucky-draw-mobile").click(function(){
      $("#stampformmodal").modal('show');
  });
});

// Replace image
const number = {{ $remainder }};
const stamps = 'stamp' + (Number(15) - Number(number));

var Image_Id = document.getElementById('stamp');
var Image_Id_mobile = document.getElementById('stamp_mobile');

if (stamps != 'stamp0') {
  Image_Id.src = `{{ asset('images/${stamps}.png') }}`;
  Image_Id_mobile.src = `{{ asset('images/${stamps}-mobile.png') }}`;
}

var Days = [31,28,31,30,31,30,31,31,30,31,30,31];// index => month [0-11]
$(document).ready(function(){
    var option = '<option value="date">Date</option>';
    var selectedDay="date";
    for (var i=1;i <= Days[0];i++){ //add option days
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#date').append(option);
    $('#date').val(selectedDay);

    var option = '<option value="month">Month</option>';
    var selectedMon ="month";
    for (var i=1;i <= 12;i++){
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#month').append(option);
    $('#month').val(selectedMon);

    var d = new Date();
    var option = '<option value="year">Year</option>';
    selectedYear ="year";
    for (var i=1930;i <= d.getFullYear();i++){// years start i
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#year').append(option);
    $('#year').val(selectedYear);
});
function isLeapYear(year) {
    year = parseInt(year);
    if (year % 4 != 0) {
	      return false;
	  } else if (year % 400 == 0) {
	      return true;
	  } else if (year % 100 == 0) {
	      return false;
	  } else {
	      return true;
	  }
}

$(window).on('load', function() {
  $('#stampleftmodal').modal('hide');
});

</script>
<script type="text/javascript">
  window.addEventListener('load', async function() {

    const response1 = await fetch('/count_stamp');
    const res = await response1.json();
    var count = 0;

    const response = await fetch('/user_stamps');
    const user = await response.json();

    const array = Object.entries(user.data);
    if( array.length > 0 ){
      if (array[2][1] == 1) {count++;}
      if (array[3][1] == 1) {count++;}
      if (array[4][1] == 1) {count++;}
      if (array[5][1] == 1) {count++;}
      if (array[6][1] == 1) {count++;}
      if (array[7][1] == 1) {count++;}
      if (array[8][1] == 1) {count++;}
      if (array[9][1] == 1) {count++;}
      if (array[10][1] == 1) {count++;}
      if (array[11][1] == 1) {count++;}
      if (array[12][1] == 1) {count++;}
      if (array[13][1] == 1) {count++;}
      if (array[14][1] == 1) {count++;}
      if (array[15][1] == 1) {count++;}
      if (array[16][1] == 1) {count++;}

      if (count == 1) {document.getElementById("stampMap").src = "images/map1.png";}
      if (count == 2) {document.getElementById("stampMap").src = "images/map2.png";}
      if (count == 3) {document.getElementById("stampMap").src = "images/map3.png";}
      if (count == 4) {document.getElementById("stampMap").src = "images/map4.png";}
      if (count == 5) {document.getElementById("stampMap").src = "images/map5.png";}
      if (count == 6) {document.getElementById("stampMap").src = "images/map6.png";}
      if (count == 7) {document.getElementById("stampMap").src = "images/map7.png";}
      if (count == 8) {document.getElementById("stampMap").src = "images/map8.png";}
      if (count == 9) {document.getElementById("stampMap").src = "images/map9.png";}
      if (count == 10) {document.getElementById("stampMap").src = "images/map10.png";}
      if (count == 11) {document.getElementById("stampMap").src = "images/map11.png";}
      if (count == 12) {document.getElementById("stampMap").src = "images/map12.png";}
      if (count == 13) {document.getElementById("stampMap").src = "images/map13.png";}
      if (count == 14) {document.getElementById("stampMap").src = "images/map14.png";}
      if (count == 15) {document.getElementById("stampMap").src = "images/map15.png";}

      if (count == 1) {document.getElementById("stampMap-2").src = "images/map1-1.png";}
      if (count == 2) {document.getElementById("stampMap-2").src = "images/map2-2.png";}
      if (count == 3) {document.getElementById("stampMap-2").src = "images/map3-3.png";}
      if (count == 4) {document.getElementById("stampMap-2").src = "images/map4-4.png";}
      if (count == 5) {document.getElementById("stampMap-2").src = "images/map5-5.png";}
      if (count == 6) {document.getElementById("stampMap-2").src = "images/map6-6.png";}
      if (count == 7) {document.getElementById("stampMap-2").src = "images/map7-7.png";}
      if (count == 8) {document.getElementById("stampMap-2").src = "images/map8-8.png";}
      if (count == 9) {document.getElementById("stampMap-2").src = "images/map9-9.png";}
      if (count == 10) {document.getElementById("stampMap-2").src = "images/map10-10.png";}
      if (count == 11) {document.getElementById("stampMap-2").src = "images/map11-11.png";}
      if (count == 12) {document.getElementById("stampMap-2").src = "images/map12-12.png";}
      if (count == 13) {document.getElementById("stampMap-2").src = "images/map13-13.png";}
      if (count == 14) {document.getElementById("stampMap-2").src = "images/map14-14.png";}
      if (count == 15) {document.getElementById("stampMap-2").src = "images/map15-15.png";}
    }
  })

</script>

@endpush

@endsection