@extends('layout/app')


@push('css')
<link href="{{ asset('css/ice-fishing.css') }}" rel="stylesheet"/>
@endpush

@section('content')

<div class="container">
    <div class="toprow">

      <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 clas="row">
          <div class="d-flex col-12 justify-content-center">
            <div class="title-container">
              <img class="title" src="{{ asset('images/icefishingtitle.png') }}" alt="">
            </div>
          </div>
        </div>

        <div class="row mt-2">
          <div class="d-flex col-12 justify-content-center ml-3">
            <p class="timeperiod">January to February</p>
            <div class="symbol-container">
              <img class="symbol" src="{{ asset('images/symbol.png') }}" data-toggle="tooltip" data-placement="top" title="Click me">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="d-flex col-12 justify-content-center">
            <p class="rules">Tap on the images and catch 5 fish!</p>
          </div>
        </div>
      </div>

      <div class="mobile">

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

        <div class="row">
          <div class="d-flex col-12 justify-content-center ps-3 mt-2">
            <p class="timeperiod">January to February</p>
            <img class="symbol" src="{{ asset('images/symbol.png') }}">
          </div>
        </div>

        <div class="row">
          <div class="d-flex col-12 justify-content-center">
            <p class="rules">Tap on the images and catch 5 fish!</p>
          </div>
        </div>
      </div>
    </div>

    <div class="middlerow" align="center">

      <div class="row d-flex justify-content-center align-items-center game-hole">
        <div class="d-flex col-4 justify-content-center">
          <div class="hole-container">
            <img class="hole" id='imageFish1' src="{{ asset('images/holewithfishrod-2.png') }}" onclick="catchFish(1)">
            <img class="hole2" id='imageFish1' src="{{ asset('images/holewithfishrod-hover.png') }}" onclick="catchFish(1)" >
          </div>
          <h1 id="h1Fish1" style="display:none;"></h1>
        </div>
        <div class="d-flex col-4 justify-content-center">
          <div class="hole-container">
            <img class="hole" id='imageFish2' src="{{ asset('images/holewithfish-2.png') }}" onclick="catchFish(2)">
            <img class="hole2" id='imageFish2' src="{{ asset('images/holewithfishrod-hover.png') }}" onclick="catchFish(2)">
          </div>
          <h1 id="h1Fish2" style="display:none;"></h1>
        </div>
        <div class="d-flex col-4 justify-content-center">
          <div class="hole-container">
            <img class="hole" id='imageFish3' src="{{ asset('images/holewithoutfish-2.png') }}" onclick="catchFish(3)">
            <img class="hole2" id='imageFish3' src="{{ asset('images/holewithfishrod-hover.png') }}" onclick="catchFish(3)">
          </div>
          <h1 id="h1Fish3" style="display:none;"></h1>
        </div>
      </div>

      <div class="row">
        <div class="col-12 d-flex justify-content-center align-items-end stamp">
          <img class="stamp-bar" src="{{ asset('images/fish-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">From ice fishing to thrilling sled rides, there’s no shortage of fun winter activities at the Hwacheon Sancheoneo Ice Festival in Gangwon-do. Considered as one of the major winter festivals in South Korea, it’s also home to the world’s largest indoor ice sculpture exhibit. Click <a class="tnc" href="https://english.visitkorea.or.kr/enu/ATR/SI_EN_3_6.jsp?cid=1547131" 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');
    });
});
</script>

<script type="text/javascript">

  var stampCount = 0;

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

    // Game completed
    const game_response = await fetch('/game/complete?game=fish');
    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;

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

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

    array.find(element => {
      if (element[0] == 'stamp4' || element[0] == 'stamp5' ||element[0] == 'stamp6' ||element[0] == 'stamp7' ||element[0] == 'stamp8') {
        if (element[1] == 1) {
          count++;
        }
      }
    });


    fishRandomer();

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

    stampCount = count;

  })

  async function fishRandomer() {
    var Fish = Math.floor(Math.random() * 3) + 1;
    if (Fish == 1) {
      document.getElementById("imageFish1").src = "images/holewithfish-2.png";
      document.getElementById("imageFish2").src = "images/holewithoutfish-2.png";
      document.getElementById("imageFish3").src = "images/holewithoutfish-2.png";
      document.getElementById("h1Fish1").innerHTML = "Fish";
      document.getElementById("h1Fish2").innerHTML = "No Fish";
      document.getElementById("h1Fish3").innerHTML = "No Fish";
    }
    if (Fish == 2) {
      document.getElementById("imageFish1").src = "images/holewithoutfish-2.png";
      document.getElementById("imageFish2").src = "images/holewithfish-2.png";
      document.getElementById("imageFish3").src = "images/holewithoutfish-2.png";
      document.getElementById("h1Fish1").innerHTML = "No Fish";
      document.getElementById("h1Fish2").innerHTML = "Fish";
      document.getElementById("h1Fish3").innerHTML = "No Fish";
    }
    if (Fish == 3) {
      document.getElementById("imageFish1").src = "images/holewithoutfish-2.png";
      document.getElementById("imageFish2").src = "images/holewithoutfish-2.png";
      document.getElementById("imageFish3").src = "images/holewithfish-2.png";
      document.getElementById("h1Fish1").innerHTML = "No Fish";
      document.getElementById("h1Fish2").innerHTML = "No Fish";
      document.getElementById("h1Fish3").innerHTML = "Fish";
    }

    // get latest empty stamp (stamp4-stamp8)
    const response = await fetch('/user_stamps');
    const user = await response.json();
    const array = Object.entries(user.data);

    const found = array.find(element => {
      if (element[0] == 'stamp4' || element[0] == 'stamp5' ||element[0] == 'stamp6' ||element[0] == 'stamp7' ||element[0] == 'stamp8') {
        return element[1] == 0;
      } else {
        return null;
      }
    });

    if (found == null || typeof found == 'undefined') {
      removeRodAndFish();
    } else {
      setTimeout(fishRandomer, 2000);
    }
  }


  async function catchFish(fishNumber) {
    var h1Fish1 = document.getElementById("h1Fish1").innerHTML;
    var h1Fish2 = document.getElementById("h1Fish2").innerHTML;
    var h1Fish3 = document.getElementById("h1Fish3").innerHTML;
    var stamp_Id = document.getElementById('stamp');

    // get latest empty stamp (stamp4-stamp8)
    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] == 'stamp4' || element[0] == 'stamp5' ||element[0] == 'stamp6' ||element[0] == 'stamp7' ||element[0] == 'stamp8') {
        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 (fishNumber == 1) {
      if (h1Fish1 === 'Fish') {
        document.getElementById("imageFish1").src = "images/holewithfishrod-2.png";
        await request(data);
        addStamp();
      } else {
        document.getElementById("imageFish1").src = "images/holewithx-2.png";
      }
    }
    if (fishNumber == 2) {
      if (h1Fish2 === 'Fish') {
        document.getElementById("imageFish2").src = "images/holewithfishrod-2.png";
        await request(data);
        addStamp();
      } else {
        document.getElementById("imageFish2").src = "images/holewithx-2.png";
      }
    }
    if (fishNumber == 3) {
      if (h1Fish3 === 'Fish') {
        document.getElementById("imageFish3").src = "images/holewithfishrod-2.png";
        await request(data);
        addStamp();
      } else {
        document.getElementById("imageFish3").src = "images/holewithx-2.png";
      }
    }
  }

  async function request(data) {

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

    let game_res, res;

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

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

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

      // 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`;
    }

  }

  async function removeRodAndFish() {
    Array.from(document.getElementsByClassName("hole")).forEach(
      function(element, index, array) {
        element.src = 'images/holewithoutfish-2.png';
      }
    );
    Array.from(document.getElementsByClassName("hole2")).forEach(
      function(element, index, array) {
          element.remove();
      }
    );
  }

  $('#gamecompletedmodal,#scoremodal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#knowledgemodal').modal('show')
})

  async function addStamp() {
    if (stampCount == 0) {
      document.getElementById("stamp").src = "images/fish-stamp1.png";
      stampCount = 1;
    }
    else if (stampCount == 1) {
      document.getElementById("stamp").src = "images/fish-stamp2.png";
      stampCount = 2;
    }
    else if (stampCount == 2) {
      document.getElementById("stamp").src = "images/fish-stamp3.png";
      stampCount = 3;
    }
    else if (stampCount == 3) {
      document.getElementById("stamp").src = "images/fish-stamp4.png";
      stampCount = 4;
    }
    else if (stampCount == 4) {
      document.getElementById("stamp").src = "images/fish-stamp5.png";
      stampCount = 5;
    }
  }

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