@extends('layout/app')

@push('css')
<link href="{{ asset('css/destination.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="col-2"></div>
      <div class="d-flex col-4 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="row mt-5">
    <div class="col-lg-6 align-self-center space">
      <div class="row">
        <div class="d-none d-lg-block d-flex col-12 justify-content-center">
          <div class="title-img-container text-center">
            <img class="maptitle-desktop" src="{{ asset('images/maptitle.png') }}" alt="">
          </div>
        </div>
        <div class="d-lg-none d-flex col-12 justify-content-center">
          <div class="title-img-container">
            <img src="{{ asset('images/maptitle-mobile.png') }}" alt="">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="d-flex col-12 justify-content-center">
          <p class="rules">Tap the map to explore the selected festival</p>
        </div>
      </div>
      <!--
      <div class="row">
        <div class="d-flex col-12 justify-content-center">
          <a href="{{ route('player.profile') }}">
            <button class="submitbtn-logged" type="button">Profile</button>
          </a>
        </div>
      </div>-->
    </div>
    <div class="d-flex col-lg-5 justify-content-center">
      <div class="map-img-container">
        <img class="map" src="{{ asset('images/map/maponly.png') }}" alt="" usemap="#map">

        <img src="{{ asset('images/map/ice fishing location.png') }}" id="marker1" class="mapMarker1 animate__animated animate__bounce animate__infinite">
        <img src="{{ asset('images/map/mud location.png') }}" id="marker2" class="mapMarker2 animate__animated animate__bounce animate__infinite">
        <img src="{{ asset('images/map/cherry blossom location.png') }}" id="marker3"class="mapMarker3 animate__animated animate__bounce animate__infinite">
        <img src="{{ asset('images/map/lantern location.png') }}" id="marker4" class="mapMarker4 animate__animated animate__bounce animate__infinite">

        <img src="{{ asset('images/map/ice fishing.png') }}" id="marker1-1" class="mapMarker1-1">
        <img src="{{ asset('images/map/mud.png') }}" id="marker2-1" class="mapMarker2-1">
        <img src="{{ asset('images/map/cherry blossom.png') }}" id="marker3-1"class="mapMarker3-1">
        <img src="{{ asset('images/map/lantern.png') }}" id="marker4-1" class="mapMarker4-1">

        <img src="{{ asset('images/map/ice fishing map.png') }}" id="markerIceFishing" class="mapMarker1-2">
        <img src="{{ asset('images/map/mud map.png') }}" id="markerMud" class="mapMarker2-2">
        <img src="{{ asset('images/map/cherry blossom map.png') }}" id="markerCherry"class="mapMarker3-2">
        <img src="{{ asset('images/map/lantern map.png') }}" id="markerLantern" class="mapMarker4-2">
      </div>
    </div>
    <div class="col-1"></div>
  </div>

  <map name="map">
    <!--icefishing-->
    <area id="location1" autofocus shape="poly" coords="244,58,319,29,410,67,441,214,309,251,262,156">
    <!--mud-->
    <area id="location2" shape="poly" coords="220,411,236,382,191,309,124,276,81,305,91,374,140,441">
    <!--lanterns-->
    <area id="location3" shape="poly" coords="324,467,345,521,348,560,409,642,336,667,264,690,252,644,269,499,280,464,304,443">
    <!--cherry-->
    <area id="location4" shape="poly" coords="438,465,491,508,468,575,451,604,365,596,378,525,385,483">
  </map>

</div>

<!--icefishingBox-->
<div class="modal fade" id="icefishingBox" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-outerbox">
      <div class="overlap-header">
        <h5 class="arrival">Ice Fishing Festival</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">
          <div class="modal-container">
            <div class="row">
              <div class="col-12">
                <img class="modal-image" src="{{ asset('images/icefishingmodal.png') }}" alt="">
              </div>
              <div class="col-12">
                <p class="information">Brr! We’re bringing winter to you with the Hwacheon Sancheoneo Ice Festival. Get a first-hand virtual experience at ice fishing right now.</p>
              </div>
              <div class="d-flex col-12 justify-content-end">
                <a href="/icefishing"><img class="gobutton" src="{{ asset('images/gobutton.png') }}" alt=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--mudBox-->
<div class="modal fade" id="mudBox" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-outerbox">
      <div class="overlap-header">
        <h5 class="arrival">Mud Festival</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">
          <div class="modal-container">
            <div class="row">
              <div class="col-12">
                <img class="modal-image" src="{{ asset('images/mudmodal.png') }}" alt="">
              </div>
              <div class="col-12">
                <p class="information">Immerse yourself in nutrient-rich mud at the Boryeong Mud Festival. Take a peek at Boryeong through our mini game.</p>
              </div>
              <div class="d-flex col-12 justify-content-end">
                <a href="/spotdifferences"><img class="gobutton" src="{{ asset('images/gobutton.png') }}" alt=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--lanternBox-->
<div class="modal fade" id="lanternBox" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-outerbox">
      <div class="overlap-header">
        <h5 class="arrival">Lantern Festival</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">
          <div class="modal-container">
            <div class="row">
              <div class="col-12">
                <img class="modal-image" src="{{ asset('images/lanternmodal.png') }}" alt="">
              </div>
              <div class="col-12">
                <p class="information">Beautiful floating lanterns are the highlight of the Jinju Namgang Yudeung Festival. Make a wish and light your lantern here!</p>
              </div>
              <div class="d-flex col-12 justify-content-end">
                <a href="/lanterns"><img class="gobutton" src="{{ asset('images/gobutton.png') }}" alt=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--cherryblossomnBox-->
<div class="modal fade" id="cherryblossomBox" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-outerbox">
      <div class="overlap-header">
        <h5 class="arrival2">Cherry Blossom Festival</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">
          <div class="modal-container">
            <div class="row">
              <div class="col-12">
                <img class="modal-image" src="{{ asset('images/cherryblossommodal.png') }}" alt="">
              </div>
              <div class="col-12">
                <p class="information">Experience the ultimate beauty of Korea at the Jinhae Gunhangje Cherry Blossom Festival! Grow your very own cherry blossom tree and admire its beautiful blooms here.</p>
              </div>
              <div class="d-flex col-12 justify-content-end">
                <a href="/cherryblossom"><img class="gobutton" src="{{ asset('images/gobutton.png') }}" alt=""></a>
              </div>
            </div>
          </div>
        </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">
            <div class="row">
              <div class="col-12">
                <h5 class="congratulations">CONGRATULATIONS</h5>
              </div>
              <div class="col-12">
                <h5 class="collected">You've collected all 15 stamps!</h5>
              </div>
              <div class="col-12">
                <h5 class="collected">Please check your email to verify</h5>
              </div>
              <div class="col-12">
                <a href="/profile?luckydraw=true"><button type="button" class="joinluckydraw">Join Lucky Draw</button></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--update email modal-->
<div class="modal fade" id="emailupdatemodal" 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">
            <form action="{{ route('player.update.email') }}" method="POST">
              @csrf
              <div class="row">
                <div class="col-12">
                  <h5 class="congratulations">Please update your email</h5>
                </div>
                <div class="col-12">
                  <input class="emailbox" type="email" id="email" name="email">
                  @if($errors->update_email->has('email'))
                      <div class="error">{{ $errors->update_email->first('email') }}</div>
                  @endif
                </div>
                <div class="col-12">
                  <button type="submit" class="submitemail">SUBMIT</button>
                </div>
              </div>
            </div>
          </form>
        </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">
$(document).ready(function(){
    $("#location1").click(function(){
        $("#icefishingBox").modal('show');
    });
    $("#marker1").click(function(){
        $("#icefishingBox").modal('show');
    });
    $("#marker1-1").click(function(){
        $("#icefishingBox").modal('show');
    });
});

$(document).ready(function(){
    $("#location2").click(function(){
        $("#mudBox").modal('show');
    });
    $("#marker2").click(function(){
        $("#mudBox").modal('show');
    });
    $("#marker2-1").click(function(){
        $("#mudBox").modal('show');
    });
});

$(document).ready(function(){
    $("#location3").click(function(){
        $("#lanternBox").modal('show');
    });
    $("#marker4").click(function(){
        $("#lanternBox").modal('show');
    });
    $("#marker4-1").click(function(){
        $("#lanternBox").modal('show');
    });
});

$(document).ready(function(){
    $("#location4").click(function(){
        $("#cherryblossomBox").modal('show');
    });
    $("#marker3").click(function(){
        $("#cherryblossomBox").modal('show');
    });
    $("#marker3-1").click(function(){
        $("#cherryblossomBox").modal('show');
    });
});

$(window).on('load', async function() {
  const response = await fetch('/check/email');
  const res = await response.json();
  if (res.data == 'change') {
    $('#emailupdatemodal').modal({ backdrop: 'static', keyboard: false });
    $('#emailupdatemodal').modal('show');
  }

  // Check if game is completed
  let image, marker;

  // Ice fishing
  const fish_response = await fetch('/game/complete?game=fish');
  const fish_res = await fish_response.json();

  // Spot
  const spot_response = await fetch('/game/complete?game=spot');
  const spot_res = await spot_response.json();

  // Cherry
  const cherry_response = await fetch('/game/complete?game=cherry');
  const cherry_res = await cherry_response.json();

  // Lantern
  const lantern_response = await fetch('/game/complete?game=lantern');
  const lantern_res = await lantern_response.json();

  if (cherry_res.data == 'completed') {
    /*image = document.getElementById('marker3-1');
    image.src = `{{ asset('images/map/cherryblossomglow.png') }}`;*/
    // marker = document.getElementById('marker3');
    // marker.classList.remove('animate__animated');
  }
  if (fish_res.data == 'completed')  {
    /*image = document.getElementById('marker1-1');
    image.src = `{{ asset('images/map/icefishingglow.png') }}`;*/
  }
  if (spot_res.data == 'completed')  {
    /*image = document.getElementById('marker2-1');
    image.src = `{{ asset('images/map/mudglow.png') }}`;*/
  }
  if (lantern_res.data == 'completed')  {
    /*image = document.getElementById('marker4-1');
    image.src = `{{ asset('images/map/lanternglow.png') }}`;*/
  }
});

$(window).on('load', async function() {
  const response = await fetch('/count_stamp');
  const res = await response.json();
  // console.log(res);
  if (res.data == 'eligible') {
    $('#scoremodal').modal('show');
  }
});

$(document).ready(function() {
    $('map').imageMapResize();
});
</script>


<script>
function getSearchParameters() {
    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

$(window).on('load', function() {
  var SubmitParameter = params.signup;
  if (SubmitParameter == 'submitted') {
    // fbq('track', 'CompleteRegistration');
  }
});

$(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++;
        document.getElementById("markerCherry").src = "images/map/cherry blossom map glow.png";
        markerCherry.classList.remove("mapMarker3-2");
        markerCherry.classList.add("mapMarker3-3");
        marker3.classList.remove("animate__animated");
      }
      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++;
        document.getElementById("markerIceFishing").src = "images/map/ice fishing map glow.png";
        markerIceFishing.classList.remove("mapMarker1-2");
        markerIceFishing.classList.add("mapMarker1-3");
        marker1.classList.remove("animate__animated");
      }
      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++;
        document.getElementById("markerMud").src = "images/map/mud map glow.png";
        markerMud.classList.remove("mapMarker2-2");
        markerMud.classList.add("mapMarker2-3");
        marker2.classList.remove("animate__animated");
      }
      if (array[15][1] == 1) {count++;}
      if (array[16][1] == 1) {count++;
        document.getElementById("markerLantern").src = "images/map/lantern map glow.png";
        markerLantern.classList.remove("mapMarker4-2");
        markerLantern.classList.add("mapMarker4-3");
        marker4.classList.remove("animate__animated");
      }

      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