@extends('layout/app')

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

@section('content')

<div class="container">

  <div class="toppart-container">

    <div class="row">
      <div class="d-flex col-6 justify-content-center">
        <div class="header-left">
          <a href="/">
            <img class="logo" src="{{ asset('images/gamelogoleftwhite.png') }}" alt="">
          </a>
        </div>
      </div>
      <div class="d-flex col-6 justify-content-center">
        <div class="header-right">
          <a href="/destination">
            <img class="logo" src="{{ asset('images/gamelogoright.png') }}" alt="">
          </a>
        </div>
      </div>
    </div>

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

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

    <div class="row justify-content-center">
      <div class="top-container">
        <div class="col-12 text-center">
          <p class="wish">WHAT IS YOUR WISH?</p><br>
        </div>
        <div class="col-12 text-center">
          <p class="pick desktop">Longing to visit Korea? Pick your preferred lantern colour below and share with us your Korea travel wish.</p>
          <p class="pick mobile">Longing to visit Korea? Share your Korea travel wish with us by lighting up a lantern.</p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="d-flex col-12 justify-content-center">
        <p class="floating">floating lanterns</p>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <img src="{{ asset('images/lantern.svg') }}">
      </div>
    </div>

    <div class="row">
      <div class="col-12 p-0">
        <img class="lanterns" src="{{ asset('images/lanterns.png') }}">
      </div>
    </div>

    <form action="{{ route('player.lantern.store') }}" method="POST">
      @csrf
      <div class="row justify-content-center">
        @if ($errors->any())
          <div class="alert alert-danger">
              <ul>
                  @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                  @endforeach
              </ul>
          </div>
        @endif
      </div>

    </div>

    <div class="bottompart-container">

      <div class="row justify-content-center">
        <div class="col-12 text-center subtitle">
          <p class="prefer">Pick your preferred lantern colour below and write your Korea travel wish. Hang your lantern and share your wish to collect both stamps.</p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="d-flex lanterncontainer">
          <div class="col-4">
            <input type="radio" name="preferences" id="lantern_1" class="input-hidden" value="lantern_1"/>
            <label for="lantern_1">
              <img src="{{ asset('images/lanterns1.png') }}" alt="" />
            </label>
            <!-- <img class="option" src="{{ asset('images/lanterns1.png') }}"> -->
          </div>
          <div class="col-4">
            <input type="radio" name="preferences" id="lantern_2" class="input-hidden" value="lantern_2"/>
            <label for="lantern_2">
              <img src="{{ asset('images/lanterns2.png') }}" alt="" />
            </label>
            <!-- <img class="option" src="{{ asset('images/lanterns2.png') }}"> -->
          </div>
          <div class="col-4">
            <input type="radio" name="preferences" id="lantern_3" class="input-hidden" value="lantern_3"/>
            <label for="lantern_3">
              <img src="{{ asset('images/lanterns3.png') }}" alt="" />
            </label>
            <!-- <img class="option" src="{{ asset('images/lanterns3.png') }}"> -->
          </div>
        </div>
      </div>

      <div class="question-container">
        <div class="row">
          <div class="col-12">
            <p class="question">The place I want to visit the most in Korea is...</p>
            <p class="not">(not more than 15 characters)</p>
          </div>
          <div class="col-12 text-center">
            <input type="text" id="place" name="place" placeholder="Input your answer here" required="required" maxlength="15"><br><br>
          </div>
          <div class="col-12">
            <p class="question">Tell us why you would like to visit this destination!</p>
            <p class="not">(not more than 250 characters)</p>
          </div>
          <div class="col-12 text-center">
            <input type="text" id="reason" name="reason" placeholder="Input your answer here" required="required" maxlength="250"><br><br>
          </div>
        </div>
      </div>

      <div class="step-container">
        <div class="row">

          <div class="d-flex col-12 justify-content-center">
            <p class="step">Step 1:</p>
          </div>
          <div class="d-flex col-12 justify-content-center">
            <div class="button-container">
              <button type="submit" class="submitbtn">
                <img src="{{ asset('images/button1.png') }}">
              </button>
              <!-- <a href=""><img src=""></a> -->
            </div>
          </div>
          <div class="d-flex col-12 justify-content-center">
            <p class="step">Step 2:</p>
          </div>
          <div class="d-flex col-12 justify-content-center">
            <div class="button-container">
              <button type="button" class="socialbtn">
                <img src="{{ asset('images/button2.png') }}">
              </button>
            </div>
          </div>

        </div>
      </div>
    </form>

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

  @include ('layout/bottomnavigation')

  </div>
</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">Each floating lantern at the Jinju Namgang Yudeung Festival carries a personal wish, with the lantern-lighting custom originating from a military strategy to prevent enemy troops from crossing the river. Admire the beautiful, multi-colour exhibition of lanterns, all rich in the cultural history of South Korea. <a class="tnc" href="">Click here</a> for more information.</h5>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- lantern modal box-->
<div class="modal fade" id="lanternmodal" 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="lantern-content">
            <img src="{{ asset('images/yourlantern.png') }}">
            <h5 class="lantern-text-content">Incheon has emerged as one of the world's most fashion forward cities</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- lantern share modal box-->
<div class="modal fade" id="lanternsharemodal" 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="lantern-content">
            <h5 class="thankyou">Thank you!</h5>
            <img src="{{ asset('images/yourlantern.png') }}">
            <h5 class="lantern-text-content">Incheon has emerged as one of the world's most fashion forward cities</h5>

            <h5 class="lantern-text-content">Share your wish with your friends and family:</h5>
            <div class="share-btn">
              <div class="row">
                <div class="d-flex col-12 justify-content-center">
                  <div class="row">
                    <div class="col-4">
                      <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.koreanminigames.com/" target="_blank">
                        <img src="{{ asset('images/facebook.png') }}">
                      </a>
                    </div>
                    <!-- <div class="col">
                      <a href="">
                        <img src="{{ asset('images/google.png') }}">
                      </a>
                    </div> -->
                    <!-- <div class="col">
                      <a href="">
                        <img src="{{ asset('images/insta.png') }}">
                      </a>
                    </div> -->
                    <div class="col-4">
                      <a href="https://twitter.com/share?url=https://www.koreanminigames.com/" target="_blank">
                        <img src="{{ asset('images/twitter.png') }}">
                      </a>
                    </div>
                    <div class="col-4">
                      <a href="https://api.whatsapp.com/send?text=https://www.koreanminigames.com/" target="_blank">
                        <img src="{{ asset('images/whatsapp.png') }}">
                      </a>
                    </div>
                  </div>
                </div>
              </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">
            <h5 class="congratulations">CONGRATULATIONS</h5>
            <h5 class="collected">You've collected all 15 stamps!</h5>
            <a href="/profile"><button type="button" class="joinluckydraw">Join Lucky Draw</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('js')
<script type="text/javascript">
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })

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

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

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

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

  $(".socialbtn").click( async function() {
    // show Modal
    $('#lanternsharemodal').modal('show');

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

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

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

    if (user.data.stamp14 == 1 && user.data.stamp15 == 0) {
      Image_Id.src = "{{ asset('images/lantern-stamp1.png') }}";
    } else if (user.data.stamp14 == 1 && user.data.stamp15 == 1) {
      Image_Id.src = "{{ asset('images/lantern-stamp2.png') }}";
    }

  });

  function request(data)
  {
    $.ajax({
        url: "/users_stamps_update",
        method: "POST",
        data: data,
        datatype: "JSON",
        success: function(data) {
          console.log(data);
        }
      });
  }
</script>
<script>
  window.onload = async function() {
    const response = await fetch('/user_stamps');
    const user = await response.json();

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

    if (user.data.stamp14 == 1 && user.data.stamp15 == 0) {
      Image_Id.src = "{{ asset('images/lantern-stamp1.png') }}";
    } else if (user.data.stamp14 == 1 && user.data.stamp15 == 1) {
      Image_Id.src = "{{ asset('images/lantern-stamp2.png') }}";
    }
  };
</script>

@endpush

@endsection