@extends('layout/app')

@push('css')
<link href="{{ asset('css/cherry-blossom.css') }}" rel="stylesheet"/>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
@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 clas="row">
      <div class="d-flex col-12 justify-content-center">
        <img class="title" src="{{ asset('images/cherryblossomtitle.png') }}" alt="">
      </div>
    </div>

    <div class="row">
      <div class="d-flex col-12 justify-content-center space2">
        <p class="timeperiod">End of March to early April</p>
        <img class="symbol" src="{{ asset('images/symbol.png') }}" data-toggle="tooltip" data-placement="top" title="Click me">
      </div>
    </div>

    <div class="row">
      <div class="d-flex col justify-content-center">
          <p class="rules">Grow your cherry blossom tree until fully bloomed!</p>
      </div>
    </div>


    <div class="game-container">

      <div class="row">
        <div class="col-4">
          <div class="row">
            <div class="d-flex col-12 justify-content-center space">
              <img id="step1" class="ness animate__pulse animate__infinite" src="{{ asset('images/sunlight.png') }}" alt="" onclick="treegrow()" ondragstart="dragStart(event)" draggable="true" >
            </div>
          </div>
          <div class="row">
            <div class="d-flex col-12 justify-content-center space">
              <img id="step2" class="ness animate__pulse animate__infinite" src="{{ asset('images/water.png') }}" alt="" onclick="treegrow()" ondragstart="dragStart(event)" draggable="true" >
            </div>
          </div>
          <div class="row">
            <div class="d-flex col-12 justify-content-center space">
              <img id="step3" class="ness animate__pulse animate__infinite" src="{{ asset('images/fertilise.png') }}" alt="" onclick="treegrow()" ondragstart="dragStart(event)" draggable="false">
            </div>
          </div>
        </div>

        <div class="col-8">

          <div class="tree-container">
            <div class="row">
              <div class="col-12 p-0">
                <img src="{{ asset('images/soil.png') }}" alt="" id="tree" ondrop="treegrow()" ondragover="allowDrop(event)">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="d-flex stamp-container mt-2 ml-5">
              <div class="col-12">
                <div class="stamp-container">
                  <img class="stamp" id="stamp" src="{{ asset('images/cherry-stampbar.png') }}" alt="">
                  <img class="stamp" id="stamp1" src="{{ asset('images/cherry-stamp1.png') }}" alt="">
                  <img class="stamp" id="stamp2" src="{{ asset('images/cherry-stamp2.png') }}" alt="">
                  <img class="stamp" id="stamp3" src="{{ asset('images/cherry-stamp3.png') }}" alt="">
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>



  <div class="mobile">

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

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

    <div class="row">
      <div class="d-flex col-12 justify-content-center">
          <p class="rules">Grow your cherry blossom tree until fully bloomed!</p>
      </div>
    </div>

    <div class="row">
      <div class="d-flex col-4 justify-content-center">
        <img id="step1mobile" class="ness animate__pulse animate__infinite" src="{{ asset('images/sunlight.png') }}" alt="" onclick="treegrow();">
      </div>
      <div class="d-flex col-4 justify-content-center">
        <img id="step2mobile" class="ness animate__pulse animate__infinite" src="{{ asset('images/water.png') }}" alt="" onclick="treegrow();">
      </div>
      <div class="d-flex col-4 justify-content-center">
        <img id="step3mobile" class="ness animate__pulse animate__infinite" src="{{ asset('images/fertilise.png') }}" alt="" onclick="treegrow();">
      </div>
    </div>

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

    <div class="row justify-content-center ps-2 pe-2">
      <div class="d-flex stamp-container">
        <div class="col-12">
          <img class="stamp"  id="stampmobile" src="{{ asset('images/cherry-stampbar.png') }}" alt="">
          <img class="stamp" id="stamp1mobile" src="{{ asset('images/cherry-stamp1.png') }}" alt="">
          <img class="stamp" id="stamp2mobile" src="{{ asset('images/cherry-stamp2.png') }}" alt="">
          <img class="stamp" id="stamp3mobile" src="{{ asset('images/cherry-stamp3.png') }}" alt="">
        </div>
      </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">Transport yourself to the Jinhae Gunhangje Cherry Blossom Festival, one of South Korea's largest spring festivals! It was established to honour Yi Sun-shin, a famed naval admiral during the Imjin War. Don’t miss the Korea Naval Academy and Korea Naval Base, which are only open to the public during this time. Click <a class="tnc" href="https://english.visitkorea.or.kr/enu/ATR/SI_EN_3_6.jsp?cid=1630721" 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 3 stamps for this game!</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('js')
<script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>

<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');
      });
  });

  $(window).on('load', async function() {
    // Game completed
    const game_response = await fetch('/game/complete?game=cherry');
    const game_res = await game_response.json();

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

    if (game_res.data == 'completed' && res.data == 'eligible') {
      // $('#scoremodal').modal('show');
      setTimeout(function(){ $('#scoremodal').modal('show'); }, 2500);
    } else if (game_res.data == 'completed' && res.data != 'eligible') {
      // $('#gamecompletedmodal').modal('show');
      setTimeout(function(){ $('#gamecompletedmodal').modal('show'); }, 2500);
    }
  });
  $('#gamecompletedmodal,#scoremodal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#knowledgemodal').modal('show')
})
</script>
<script>
  async function treegrow() {
    var Image_Id = document.getElementById('tree');
    // tree.classList.add("fade-in");
    // setTimeout(function(){tree.classList.remove("fade-in");}, 2000);

    var Image_Id_Mobile = document.getElementById('tree2');
    // tree2.classList.add("fade-in");
    // setTimeout(function(){tree2.classList.remove("fade-in");}, 2000);

    if (Image_Id.src.match("{{ asset('images/soil.png') }}")) {
      Image_Id.src = "{{ asset('images/cherry/tree-stage1.gif') }}";
      var step = document.getElementById("step1");
      step.style.opacity = "0.5";
      document.getElementById("step1").setAttribute("onclick", "");
      document.getElementById('step1').setAttribute('draggable',false);
      document.getElementById('step2').setAttribute('draggable',true);
      Image_Id_Mobile.src = "{{ asset('images/cherry/tree-stage1.gif') }}";
      var stepMobile = document.getElementById("step1mobile");
      stepMobile.style.opacity = "0.5";
      document.getElementById("step1mobile").setAttribute("onclick", "");
      var stamp = document.getElementById("stamp");
      stamp.style.display = "none";
      var stamp2 = document.getElementById("stamp1");
      stamp2.style.display = "block";
      var stampMobile = document.getElementById("stampmobile");
      stampMobile.style.display = "none";
      var stampMobile2 = document.getElementById("stamp1mobile");
      stampMobile2.style.display = "block";

      var step = document.getElementById("step2");
      step.style.opacity = 1;
      step.style.pointerEvents = "all";
      var step = document.getElementById("step2mobile");
      step.style.opacity = 1;
      step.style.pointerEvents = "all";

      var element = document.getElementById("step2mobile");
      element.classList.add("animate__animated");
      var element = document.getElementById("step2");
      element.classList.add("animate__animated");
      var element = document.getElementById("step1mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step1");
      element.classList.remove("animate__animated");

      let data = {'stamp' : 'stamp1', _token: $('meta[name="csrf-token"]').attr('content') };
      await request(data);
    }
    else if (Image_Id.src.match( "{{ asset('images/cherry/tree-stage1.gif') }}")) {
      Image_Id.src =  "{{ asset('images/cherry/tree-stage2.gif') }}";
      document.getElementById('step2').setAttribute('draggable',false);
      document.getElementById('step3').setAttribute('draggable',true);
      Image_Id_Mobile.src =  "{{ asset('images/cherry/tree-stage2.gif') }}";
      var stepMobile = document.getElementById("step2mobile");
      stepMobile.style.opacity = "0.5";
      document.getElementById("step2").setAttribute("onclick", "");
      var step = document.getElementById("step2");
      step.style.opacity = "0.5";
      document.getElementById("step2mobile").setAttribute("onclick", "");
      var stamp = document.getElementById("stamp1");
      stamp.style.display = "none";
      var stamp2 = document.getElementById("stamp2");
      stamp2.style.display = "block";
      var stampMobile = document.getElementById("stamp1mobile");
      stampMobile.style.display = "none";
      var stampMobile2 = document.getElementById("stamp2mobile");
      stampMobile2.style.display = "block";

      var step = document.getElementById("step3");
      step.style.opacity = 1;
      step.style.pointerEvents = "all";
      var step = document.getElementById("step3mobile");
      step.style.opacity = 1;
      step.style.pointerEvents = "all";

      var element = document.getElementById("step3mobile");
      element.classList.add("animate__animated");
      var element = document.getElementById("step3");
      element.classList.add("animate__animated");
      var element = document.getElementById("step2mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step2");
      element.classList.remove("animate__animated");


      let data = {'stamp' : 'stamp2', _token: $('meta[name="csrf-token"]').attr('content') };
      await request(data);
    }
    else if (Image_Id.src.match( "{{ asset('images/cherry/tree-stage2.gif') }}")) {
      Image_Id.src = "{{ asset('images/cherry/tree-stage3.gif') }}";
      var step = document.getElementById("step3");
      step.style.opacity = "0.5";
      document.getElementById("step3").setAttribute("onclick", "");
      document.getElementById('step3').setAttribute('draggable',false);
      Image_Id_Mobile.src = "{{ asset('images/cherry/tree-stage3.gif') }}";
      var stepMobile = document.getElementById("step3mobile");
      stepMobile.style.opacity = "0.5";
      document.getElementById("step3mobile").setAttribute("onclick", "");
      var stamp = document.getElementById("stamp2");
      stamp.style.display = "none";
      var stamp2 = document.getElementById("stamp3");
      stamp2.style.display = "block";
      var stampMobile = document.getElementById("stamp2mobile");
      stampMobile.style.display = "none";
      var stampMobile2 = document.getElementById("stamp3mobile");
      stampMobile2.style.display = "block";

      var element = document.getElementById("step3mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step3");
      element.classList.remove("animate__animated");

      let data = {'stamp' : 'stamp3', _token: $('meta[name="csrf-token"]').attr('content') };
      await request(data);
    }
  }

  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, stamp_res;

    try {
      // Game completed
      const game_response = await fetch('/game/complete?game=cherry');
      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');
        setTimeout(function(){ $('#scoremodal').modal('show'); }, 3000);
      } else if (game_res.data == 'completed' && res.data != 'eligible') {
        // $('#gamecompletedmodal').modal('show');
        setTimeout(function(){ $('#gamecompletedmodal').modal('show'); }, 3000);
      }

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

</script>
<script>
  var stampCount = 0;

  function nextStamp(stampID) {
    var stamp = document.getElementById(stampID);
    stamp.style.opacity = "1";
  }

  function nextStep (stepID) {
    var step = document.getElementById(stepID);
    step.style.opacity = 0.5;
    step.style.pointerEvents = "none";
  }

  window.onload = async function() {
    const response = await fetch('/user_stamps');
    const user = await response.json();

    var stamp0 = document.getElementById('stamp');
    var stamp1 = document.getElementById('stamp1');
    var stamp2 = document.getElementById('stamp2');
    var stamp3 = document.getElementById('stamp3');
    var stamp0mobile = document.getElementById('stampmobile');
    var stamp1mobile = document.getElementById('stamp1mobile');
    var stamp2mobile = document.getElementById('stamp2mobile');
    var stamp3mobile = document.getElementById('stamp3mobile');
    var step1 = document.getElementById("step1");
    var step2 = document.getElementById("step2");
    var step3 = document.getElementById("step3");

    console.log(user);
    if (user.data.stamp1 == 1) {
      nextStamp('stamp1');
      nextStep('step1');
      nextStamp('stamp1mobile');
      nextStep('step1mobile');
      stamp0.style.display = "none";
      stamp1.style.display = "block";
      stamp2.style.display = "none";
      stamp3.style.display = "none";
      stamp0mobile.style.display = "none";
      stamp1mobile.style.display = "block";
      stamp2mobile.style.display = "none";
      stamp3mobile.style.display = "none";
      step1.style.opacity = 0.5;
      step1.style.pointerEvents = "none";
      step2.style.opacity = 1;
      step2.style.pointerEvents = "all";
      step3.style.opacity = 0.5;
      step3.style.pointerEvents = "none";
      countStamp();

      var element = document.getElementById("step2mobile");
      element.classList.add("animate__animated");
      var element = document.getElementById("step2");
      element.classList.add("animate__animated");
      var element = document.getElementById("step1mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step1");
      element.classList.remove("animate__animated");

    }

    if (user.data.stamp2 == 1) {
      nextStamp('stamp2');
      nextStep('step2');
      nextStamp('stamp2mobile');
      nextStep('step2mobile');
      stamp0.style.display = "none";
      stamp1.style.display = "none";
      stamp2.style.display = "block";
      stamp3.style.display = "none";
      stamp0mobile.style.display = "none";
      stamp1mobile.style.display = "none";
      stamp2mobile.style.display = "block";
      stamp3mobile.style.display = "none";
      countStamp();

      var element = document.getElementById("step3mobile");
      element.classList.add("animate__animated");
      var element = document.getElementById("step3");
      element.classList.add("animate__animated");
      var element = document.getElementById("step2mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step2");
      element.classList.remove("animate__animated");
    }

    if (user.data.stamp3 == 1) {
      nextStamp('stamp3');
      nextStep('step3');
      nextStamp('stamp3mobile');
      nextStep('step3mobile');
      stamp0.style.display = "none";
      stamp1.style.display = "none";
      stamp2.style.display = "none";
      stamp3.style.display = "block";
      stamp0mobile.style.display = "none";
      stamp1mobile.style.display = "none";
      stamp2mobile.style.display = "none";
      stamp3mobile.style.display = "block";
      countStamp();

      var element = document.getElementById("step3mobile");
      element.classList.remove("animate__animated");
      var element = document.getElementById("step3");
      element.classList.remove("animate__animated");
    }

    if (stampCount == 0) {
      nextStep('step2');
      nextStep('step3');
      nextStep('step2mobile');
      nextStep('step3mobile');
      stamp0.style.display = "block";
      stamp1.style.display = "none";
      stamp2.style.display = "none";
      stamp3.style.display = "none";
      stamp0mobile.style.display = "block";
      stamp1mobile.style.display = "none";
      stamp2mobile.style.display = "none";
      stamp3mobile.style.display = "none";

      var element = document.getElementById("step1mobile");
      element.classList.add("animate__animated");
      var element = document.getElementById("step1");
      element.classList.add("animate__animated");
    }
  };

  function countStamp()
  {
    var Image_Id = document.getElementById('tree');
    var Image_Id_Mobile = document.getElementById('tree2');


    if (stampCount == 0) {
      Image_Id.src = "{{ asset('images/cherry/tree-stage1.gif') }}";
      Image_Id_Mobile.src = "{{ asset('images/cherry/tree-stage1.gif') }}";
      stampCount = 1;
    } else if (stampCount == 1) {
      Image_Id.src ="{{ asset('images/cherry/tree-stage2.gif') }}";
      Image_Id_Mobile.src ="{{ asset('images/cherry/tree-stage2.gif') }}";
      stampCount = 2;
    } else if (stampCount == 2) {
      Image_Id.src = "{{ asset('images/cherry/tree-stage3.gif') }}";
      Image_Id_Mobile.src = "{{ asset('images/cherry/tree-stage3.gif') }}";
      stampCount = 3;
    }
  }
</script>
<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

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