@extends('layout/app')

@push('css')
<link href="{{ asset('css/spotdifferences.css') }}" rel="stylesheet"/>
@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="" width="65%">
          </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="d-flex justify-content-center row top-container" align="center">
      <div class="col-12">
        <img class="title" src="{{ asset('images/spotdifferencestitle.png') }}" alt="">
      </div>

      <div class="time-sym-container">
        <div class="d-flex col-12">
          <div class="row">
            <div class="col-3"></div>
            <div class="col-6">
              <p class="timeperiod">July</p>
            </div>
            <div class="col-3">
              <img class="symbol" src="{{ asset('images/symbol.png') }}" data-toggle="tooltip" data-placement="top" title="Click me">
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="d-flex col-12 justify-content-center">
          <p class="rules">Spot 5 differences between these two images!</p>
        </div>
      </div>
    </div>

  </div>

  <div class="mobile">

    <div class="d-flex justify-content-center row" align="center">
      <div class="col-12 p-0">
        <img class="title" src="{{ asset('images/spottitle-mobile.png') }}" alt="">
      </div>

      <div class="time-sym-container">
        <div class="d-flex col-12">
          <div class="row">
            <div class="col-3"></div>
            <div class="col-6">
              <p class="timeperiod">July</p>
            </div>
            <div class="col-3 ps-0">
              <img class="symbol" src="{{ asset('images/symbol.png') }}" data-toggle="tooltip" data-placement="top" title="Click me">
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="d-flex col-12 justify-content-center">
          <p class="rules">Spot 5 differences between these two images!</p>
        </div>
      </div>
    </div>

  </div>

  <div class="row space">
    <div class="col-xl-6">
      <img class="differences" src="{{ asset('images/spot1.png') }}" usemap="#spot1">
      <div id="blue-circle"></div>
      <div id="blue-circle2"></div>
      <div id="blue-circle4"></div>
      <div id="blue-circle6"></div>
      <div id="blue-circle8"></div>
    </div>

    <div class="col-xl-6">
      <img class="differences" src="{{ asset('images/spot2.png') }}" usemap="#spot1">
      <div id="blue-circle1"></div>
      <div id="blue-circle3"></div>
      <div id="blue-circle5"></div>
      <div id="blue-circle7"></div>
      <div id="blue-circle9"></div>
    </div>
  </div>

  <map name="spot1">
    <area id="spot1" autofocus shape="rect" coords="13,405,158,329" onclick="spotCheck(1)">
    <area id="spot2" shape="circle" coords="125,197,29" onclick="spotCheck(2)">
    <area id="spot3" shape="circle" coords="477,63,29" onclick="spotCheck(3)">
    <area id="spot4" shape="circle" coords="563,39,30" onclick="spotCheck(4)">
    <area id="spot5" shape="circle" coords="576,235,29" onclick="spotCheck(5)">
  </map>

  <div class="row">
    <div class="col-12 d-flex justify-content-center align-items-end stamp">
      <div class="stamp-container">
        <img  src="{{ asset('images/spotdiff-stampbar.png') }}" id="stamp">
      </div>
    </div>
  </div>

@include ('layout/bottomnavigation')

</div>

<!-- knowledge modal box-->
<div class="modal fade" id="knowledgemodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-outerbox">
      <div class="overlap-header">
        <h5 class="didyouknow">Did you know?</h5>
      </div>
      <div class="modal-content content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <h5 class="information">Immerse yourself in the exciting Boryeong Mud Festival to enjoy activities like mud baths, mud games, and more. The mud festival was established to promote Boryeong’s cosmetic products, as the mud is rich in minerals that are beneficial to the skin! Click <a class="tnc" href="https://english.visitkorea.or.kr/enu/ATR/SI_EN_3_6.jsp?cid=1924113" target="_blank">here</a> for more information.</h5>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- score modal box-->
<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>
            <h5 class="collected">Please check your email to verify</h5>
            <a href="/profile?luckydraw=true"><button type="button" class="joinluckydraw">Join Lucky Draw</button></a>
          </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>

<!-- game completed modal box-->
<div class="modal fade" id="gamecompletedmodal" 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="completed">You've collected 5 stamps for this game!</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('js')
<script type="text/javascript">

$(function () {
 $('[data-toggle="tooltip"]').tooltip()
})

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

$(document).ready(function(){
    $(".symbol").click(function(){
        $("#knowledgemodal").modal('show');
    });
});


var stampCount = 0;

  window.addEventListener('load', async function() {

    // Get circle area
    const spot_response = await fetch('spotdifferences/spot');
    const spot_res = await spot_response.json();

    if (spot_res.data.spot1 == 1) {
      document.getElementById('blue-circle').style.display = "block";
      document.getElementById('blue-circle1').style.display = "block";
    }
    if (spot_res.data.spot2 == 1) {
      document.getElementById('blue-circle2').style.display = "block";
      document.getElementById('blue-circle3').style.display = "block";
    }
    if (spot_res.data.spot3 == 1) {
      document.getElementById('blue-circle4').style.display = "block";
      document.getElementById('blue-circle5').style.display = "block";
    }
    if (spot_res.data.spot4 == 1) {
      document.getElementById('blue-circle6').style.display = "block";
      document.getElementById('blue-circle7').style.display = "block";
    }
    if (spot_res.data.spot5 == 1) {
      document.getElementById('blue-circle8').style.display = "block";
      document.getElementById('blue-circle9').style.display = "block";
    }
    // console.log(spot_res);

    // Game completed
    const game_response = await fetch('/game/complete?game=spot');
    const game_res = await game_response.json();

    // Stamp completed
    const response1 = await fetch('/count_stamp');
    const res = await response1.json();

    if (game_res.data == 'completed' && res.data == 'eligible') {
      $('#scoremodal').modal('show');
    } else if (game_res.data == 'completed' && res.data != 'eligible') {
      $('#gamecompletedmodal').modal('show');
    }

    var count = 0;
    // Count stamp on initial load (Stamp 9-13)

    // get latest empty stamp (Stamp 9-13)
    const response = await fetch('/user_stamps');
    const user = await response.json();

    const array = Object.entries(user.data);

    array.find(element => {
      if (element[0] == 'stamp9' || element[0] == 'stamp10' ||element[0] == 'stamp11' ||element[0] == 'stamp12' ||element[0] == 'stamp13') {
        if (element[1] == 1) {
          count++;
        }
      }
    });

    if (count == 0) {
      document.getElementById("stamp").src = "images/spotdiff-stampbar.png";
    } else if (count == 1) {
      document.getElementById("stamp").src = "images/spotdiff-stamp1.png";
    } else if (count == 2) {
      document.getElementById("stamp").src = "images/spotdiff-stamp2.png";
    } else if (count == 3) {
      document.getElementById("stamp").src = "images/spotdiff-stamp3.png";
    } else if (count == 4) {
      document.getElementById("stamp").src = "images/spotdiff-stamp4.png";
    } else if (count == 5) {
      document.getElementById("stamp").src = "images/spotdiff-stamp5.png";
    }

    stampCount = count;

  });

  function spotCheck(spotNumber) {

    // Disable after clicking the correct spot
    const spot = document.getElementById("spot" + spotNumber);
    spot.onclick = null;
    // Add the Stamp
    addStamp(spotNumber);
  }

  async function record(data)
    {
      $.ajax({
          url: "/spotdifferences/update",
          method: "POST",
          data: data,
          datatype: "JSON",
          success: function(data) {
            console.log(data);
          }
        });
    }

  async function addStamp(spotNumber) {

    // get latest empty stamp (stamp9-stamp13)

    // get latest empty stamp (stamp9-stamp13)
    const response = await fetch('/user_stamps');
    const user = await response.json();

    // console.log(user.data);
    const array = Object.entries(user.data);

    const found = array.find(element => {
      if (element[0] == 'stamp9' || element[0] == 'stamp10' ||element[0] == 'stamp11' ||element[0] == 'stamp12' ||element[0] == 'stamp13') {
        return element[1] == 0;
      } else {
        return null;
      }
    });

    if (found == null || typeof found == 'undefined') {
      document.getElementById("stamp").src = "images/fish-stamp5.png";
      stampCount = 5;
      console.log('completed');
      return;
    }

    var latest_stamp = found[0];
    let data = {'stamp' : latest_stamp, _token: $('meta[name="csrf-token"]').attr('content') };

    if (stampCount == 0) {
      var req = request(data, stampCount, spotNumber);
      stampCount = 1;
    }
    else if (stampCount == 1) {
      var req = request(data, stampCount, spotNumber);
      stampCount = 2;
    }
    else if (stampCount == 2) {
      var req = request(data, stampCount, spotNumber);
      stampCount = 3;
    }
    else if (stampCount == 3) {
      var req = request(data, stampCount, spotNumber);
      stampCount = 4;
    }
    else if (stampCount == 4) {
      var req = request(data, stampCount, spotNumber);
      stampCount = 5;
    }

    async function request(data, stampCount, spotNumber)
    {
      const response = await axios({
          method: 'post',
          url: '/users_stamps_update',
          data: data,
          headers: {
              'Content-Type': 'application/json',
          },
      });

      document.getElementById("stamp").src = `images/spotdiff-stamp${stampCount + 1}.png`;

      if (spotNumber == 1) {
        document.getElementById('blue-circle').style.display = "block";
        document.getElementById('blue-circle1').style.display = "block";
      }
      else if (spotNumber == 2) {
        document.getElementById('blue-circle2').style.display = "block";
        document.getElementById('blue-circle3').style.display = "block";
      }
      else if (spotNumber == 3) {
        document.getElementById('blue-circle4').style.display = "block";
        document.getElementById('blue-circle5').style.display = "block";
      }
      else if (spotNumber == 4) {
        document.getElementById('blue-circle6').style.display = "block";
        document.getElementById('blue-circle7').style.display = "block";
      }
      else if (spotNumber == 5) {
        document.getElementById('blue-circle8').style.display = "block";
        document.getElementById('blue-circle9').style.display = "block";
      }

      // Record spot in database
      let save = {'spot' : spotNumber, _token: $('meta[name="csrf-token"]').attr('content') };
      // console.log(data);
      record(save);

      let game_res, res;

      try {
        // Game completed
        const game_response = await fetch('/game/complete?game=spot');
        game_res = await game_response.json();

        // Stamp completed
        const response = await fetch('/count_stamp');
        res = await response.json();

      } catch (error) {
        console.log(error);
      } finally {
        if (game_res.data == 'completed' && res.data == 'eligible') {
          $('#scoremodal').modal('show');
        } else if (game_res.data == 'completed' && res.data != 'eligible') {
          $('#gamecompletedmodal').modal('show');
        }

        // update stampMap
        const stamp_response = await fetch('/stamp_number');
        stamp_res = await stamp_response.json();

        document.getElementById("stampMap").src = `images/map${stamp_res.data}.png`;
        document.getElementById("stampMap-2").src = `images/map${stamp_res.data}-${stamp_res.data}.png`;
      }
    }
  }
  $('#gamecompletedmodal,#scoremodal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#knowledgemodal').modal('show')
})

  $(document).ready(function() {
      $('map').imageMapResize();
  });

  $(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