@extends('layout/app')

@push('css')
<link href="{{ asset('css/lanterns.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="toppart-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/gamelogoleftwhite.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/gamelogoleftwhite-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 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 space">
        <p class="timeperiod">Late September to early October</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 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>
    @if( $all->count() > 0 )
    <div class="row justify-content-center">
      @php
          $zeroes = sprintf('%04d', count($all));
          $splits = str_split($zeroes);
      @endphp
      <div class="d-flex visit">
        @foreach ($splits as $split)
        <div class="d-flex col-3 justify-content-center">
          <p class="count">{{ $split }}</p>
        </div>
        @endforeach
      </div>
    </div>
    @endif

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

    @if( $lanterns->count() > 0 )
    <div class="desktop">
			<div class="row">
				<div class="col-12">
					<img src="{{ asset('images/line.png') }}">
				</div>
			</div>
			<div class="row">
				@for ($i = 0; $i < 3; $i++)
					@if( isset($lanterns[$i]) )
						<div class="col-sm-4 col-6 space2" onclick="showLantern({{ $i }})">
							<div @if ($i == 1) class="hanglanterns-container animate__animated animate__headShake" @else class="hanglanterns-container-2 animate__animated animate__headShake" @endif >
								@if ($lanterns[$i]['preferences'] === 'lantern_1')
								<img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
								@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
								<img class="choose" src="{{ asset('images/hanglanterns2.png') }}" >
								@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
								<img class="choose"  src="{{ asset('images/hanglanterns3.png') }}" >
								@endif
								<div class="hanglanternstext-container">
									<div class="row">
										<div class="col-12">
											<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- modal -->
						<div class="modal fade" id="lanternmodal{{$i}}" 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">
												<div class="row">
													<div class="col-12">
														<img src="{{ asset('images/line.png') }}">
													</div>
												</div>
												<div class="row">
													<div class="col-12 space2">
														<div class="hanglanterns-container">
															@if ($lanterns[$i]['preferences'] === 'lantern_1')
																<img  src="{{ asset('images/hanglanterns1.png') }}" >
															@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
																<img src="{{ asset('images/hanglanterns2.png') }}" >
															@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
																<img src="{{ asset('images/hanglanterns3.png') }}" >
															@endif
															<div class="hanglanternstext-container">
																<div class="row">
																	<div class="col-12">
																		<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																	</div>
																</div>
																<div class="row">
																	<div class="col-12">
																		<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<h5 class="lantern-text-content  text-line">{{ $lanterns[$i]['reason'] }}</h5>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end modal -->
					@endif
				@endfor
			</div>
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
			<div class="row">
				@for ($i = 3; $i < 5; $i++)
					@if( isset($lanterns[$i]) )
					<div class="col-6 space2" onclick="showLantern({{ $i }})">
						<div class="hanglanterns-container-3 animate__animated animate__headShake">
							@if ($lanterns[$i]['preferences'] === 'lantern_1')
							<img class="choose" src="{{ asset('images/hanglanterns1.png') }}" >
							@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
							<img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
							@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
							<img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
							@endif
							<div class="hanglanternstext-container">
								<div class="row">
									<div class="col-12">
										<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
									</div>
								</div>
								<div class="row">
									<div class="col-12">
										<p class="place  text-line">{{ $lanterns[$i]['place'] }}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- modal -->
					<div class="modal fade" id="lanternmodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place  text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
				@endfor
			</div>
			<div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
			<div class="row">
				@for ($i = 5; $i < 8; $i++)
					@if( isset($lanterns[$i]) )
					<div class="col-sm-4 col-6 space2" onclick="showLantern({{ $i }})">
						<div @if ($i == 6) class="hanglanterns-container animate__animated animate__headShake" @else class="hanglanterns-container-2 animate__animated animate__headShake" @endif>
							@if ($lanterns[$i]['preferences'] === 'lantern_1')
							<img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
							@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
							<img class="choose"  src="{{ asset('images/hanglanterns2.png') }}">
							@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
							<img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
							@endif
							<div class="hanglanternstext-container">
								<div class="row">
									<div class="col-12">
										<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
									</div>
								</div>
								<div class="row">
									<div class="col-12">
										<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- modal -->
					<div class="modal fade" id="lanternmodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}" >
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
				@endfor
			</div>
			<div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
			<div class="row">
				@for ($i = 8; $i < 10; $i++)
					@if( isset($lanterns[$i]) )
					<div class="col-6 space2" onclick="showLantern({{ $i }})">
						<div class="hanglanterns-container-3 animate__animated animate__headShake">
							@if ($lanterns[$i]['preferences'] === 'lantern_1')
							<img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
							@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
							<img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
							@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
							<img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
							@endif
							<div class="hanglanternstext-container">
								<div class="row">
									<div class="col-12">
										<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
									</div>
								</div>
								<div class="row">
									<div class="col-12">
										<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- modal -->
					<div class="modal fade" id="lanternmodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
				@endfor
			</div>
		</div>

    <div class="mobile">
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
      <div class="row">
        @for ($i = 0; $i < 2; $i++)
        	@if( isset($lanterns[$i]) )
          <div class="col-6 space2" onclick="showMobileLantern({{ $i }})">
            <div class="hanglanterns-container animate__animated animate__headShake">
              @if ($lanterns[$i]['preferences'] === 'lantern_1')
              <img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_2')
              <img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_3')
              <img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
              @endif
              <div class="hanglanternstext-container">
                <div class="row">
                  <div class="col-12">
                    <p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- modal -->
					<div class="modal fade" id="lanternmobilemodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
        @endfor
      </div>
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
      <div class="row">
        @for ($i = 2; $i < 4; $i++)
        	@if( isset($lanterns[$i]) )
          <div class="col-6 space2" onclick="showMobileLantern({{ $i }})">
            <div class="hanglanterns-container animate__animated animate__headShake">
              @if ($lanterns[$i]['preferences'] === 'lantern_1')
              <img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_2')
              <img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_3')
              <img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
              @endif
              <div class="hanglanternstext-container">
                <div class="row">
                  <div class="col-12">
                    <p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- modal -->
					<div class="modal fade" id="lanternmobilemodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}" >
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
        @endfor
      </div>
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
      <div class="row">
        @for ($i = 4; $i < 6; $i++)
        	@if( isset($lanterns[$i]) )
          <div class="col-6 space2" onclick="showMobileLantern({{ $i }})">
            <div class="hanglanterns-container animate__animated animate__headShake">
              @if ($lanterns[$i]['preferences'] === 'lantern_1')
              <img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_2')
              <img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_3')
              <img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
              @endif
              <div class="hanglanternstext-container">
                <div class="row">
                  <div class="col-12">
                    <p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- modal -->
					<div class="modal fade" id="lanternmobilemodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}" style="cursor: pointer;">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
        @endfor
      </div>
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
      <div class="row">
        @for ($i = 6; $i < 8; $i++)
        	@if( isset($lanterns[$i]) )
          <div class="col-6 space2" onclick="showMobileLantern({{ $i }})">
            <div class="hanglanterns-container animate__animated animate__headShake">
              @if ($lanterns[$i]['preferences'] === 'lantern_1')
              <img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_2')
              <img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_3')
              <img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
              @endif
              <div class="hanglanternstext-container">
                <div class="row">
                  <div class="col-12">
                    <p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- modal -->
					<div class="modal fade" id="lanternmobilemodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}" style="cursor: pointer;">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
        @endfor
      </div>
      <div class="row">
        <div class="col-12">
          <img src="{{ asset('images/line.png') }}">
        </div>
      </div>
      <div class="row">
        @for ($i = 8; $i < 10; $i++)
        	@if( isset($lanterns[$i]) )
          <div class="col-6 space2" onclick="showMobileLantern({{ $i }})">
            <div class="hanglanterns-container animate__animated animate__headShake">
              @if ($lanterns[$i]['preferences'] === 'lantern_1')
              <img class="choose" src="{{ asset('images/hanglanterns1.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_2')
              <img class="choose" src="{{ asset('images/hanglanterns2.png') }}">
              @elseif ($lanterns[$i]['preferences'] === 'lantern_3')
              <img class="choose" src="{{ asset('images/hanglanterns3.png') }}">
              @endif
              <div class="hanglanternstext-container">
                <div class="row">
                  <div class="col-12">
                    <p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- modal -->
					<div class="modal fade" id="lanternmobilemodal{{$i}}" 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">
											<div class="row">
												<div class="col-12">
													<img src="{{ asset('images/line.png') }}">
												</div>
											</div>
											<div class="row">
												<div class="col-12 space2">
													<div class="hanglanterns-container">
														@if ($lanterns[$i]['preferences'] === 'lantern_1')
															<img src="{{ asset('images/hanglanterns1.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_2')
															<img src="{{ asset('images/hanglanterns2.png') }}" style="cursor: pointer;">
														@elseif ($lanterns[$i]['preferences'] === 'lantern_3')
															<img src="{{ asset('images/hanglanterns3.png') }}" style="cursor: pointer;">
														@endif
														<div class="hanglanternstext-container">
															<div class="row">
																<div class="col-12">
																	<p class="name">{{ \App\Models\Player::find($lanterns[$i]['player_id'])->name }}</p>
																</div>
															</div>
															<div class="row">
																<div class="col-12">
																	<p class="place text-line">{{ $lanterns[$i]['place'] }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<h5 class="lantern-text-content text-line">{{ $lanterns[$i]['reason'] }}</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal -->
					@endif
        @endfor
      </div>
    </div>
    </div>
    @endif

    <form action="{{ route('player.lantern.store') }}" method="POST">
      @csrf
    </div>

    <div id="form" 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 class="choose" 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 class="choose" 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 class="choose" src="{{ asset('images/lanterns3.png') }}" alt="" />
            </label>
            <!-- <img class="option" src="{{ asset('images/lanterns3.png') }}"> -->
          </div>
        </div>
      </div>

      @if($errors->lantern->has('preferences'))
        <div class="d-flex justify-content-center mt-8">
          <div style="color: red; margin-top: 10px;">Please select a lantern colour.</div>
        </div>
      @endif

      <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 30 characters)</p>
          </div>
          <div class="col-12 text-center">
            <input type="text" id="place" name="place" placeholder="Input your answer here" required="required" maxlength="30"><br><br>
            @if($errors->lantern->has('place'))
              <div class="d-flex justify-content-center mt-8">
                <div style="color: red; margin-top: 10px;">{{ $errors->lantern->first('place') }}</div>
              </div>
            @endif
          </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>
            @if($errors->lantern->has('reason'))
              <div class="d-flex justify-content-center mt-8">
                <div style="color: red; margin-top: 10px;">{{ $errors->lantern->first('reason') }}</div>
              </div>
            @endif
          </div>
        </div>
      </div>

      <div class="step-container">
        <div class="row">
          @php
            $share = 0;
            $stamp = \DB::table('user_stamps')->where('user_id', '=', Auth::guard('player')->user()->id)->pluck('stamp14')->first();

            if ($stamp == 1) {
                $share = 1;
            }
          @endphp
          <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" @if ($share == 1) disabled style="opacity: 0.5;" @endif>
                <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" @if ($share == 0) disabled style="opacity: 0.5;" @endif>
                <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. Click <a class="tnc" href="http://english.visitkorea.or.kr/enu/ATR/SI_EN_3_2_2.jsp?cate=&area=&dateStart=01-01-2013&startDate=20130101&dateEnd=&endDate=&keyword=&category=&areaCode=&gotoPage=8&stype=&cid=697197&out_service=" target="_blank">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>

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

						@if (\DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->exists())
            <div class="row">
              <div class="col-12 space2">
                <div class="hanglanterns-container">
                    @if (\DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->latest()->first()->preferences === 'lantern_1')
                      <img src="{{ asset('images/hanglanterns1.png') }}">
                    @elseif (\DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->latest()->first()->preferences === 'lantern_2')
                      <img src="{{ asset('images/hanglanterns2.png') }}">
                    @elseif (\DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->latest()->first()->preferences === 'lantern_3')
                      <img src="{{ asset('images/hanglanterns3.png') }}">
                    @endif
                    <div class="hanglanternstext-container">
                      <div class="row">
                        <div class="col-12">
                          <p class="name">{{ \App\Models\Player::find(Auth::guard('player')->user()->id)->name }}</p>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-12">
                          <!-- Latest submission from user -->
                          <p class="place">{{ \DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->latest()->first()->place }}</p>
                        </div>
                      </div>
                    </div>
									</div>
								</div>
							</div>
						  <h5 class="lantern-text-content text-line">{{ \DB::table('lanterns')->where('player_id', '=', Auth::guard('player')->user()->id)->latest()->first()->reason }}</h5>
          	@endif

            <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-3">
                      <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.koreanminigames.com/&quote=I%E2%80%99ve%20shared%20my%20Korea%20travel%20wish%20on%20koreanminigames.com%21%20Share%20yours%20to%20enter%20a%20lucky%20draw%20and%20win%20exciting%20prizes." target="_blank">
                        <img class="social-share" src="{{ asset('images/facebook.png') }}">
                      </a>
                    </div>
                    <div class="col-3">
                      <a href="mailto:">
                        <img class="social-share" src="{{ asset('images/email.png') }}">
                      </a>
                    </div>
                    <!-- <div class="col">
                      <a href="">
                        <img src="{{ asset('images/insta.png') }}">
                      </a>
                    </div> -->
                    <div class="col-3">
                      <a href="https://twitter.com/share?url=https://www.koreanminigames.com/&text=I%E2%80%99ve%20shared%20my%20Korea%20travel%20wish%20on%20koreanminigames.com%21%20Share%20yours%20to%20enter%20a%20lucky%20draw%20and%20win%20exciting%20prizes." target="_blank">
                        <img class="social-share" src="{{ asset('images/twitter.png') }}">
                      </a>
                    </div>
                    <div class="col-3">
                      <a href="https://api.whatsapp.com/send?text=I%E2%80%99ve%20shared%20my%20Korea%20travel%20wish%20on%20https%3A%2F%2Fwww.koreanminigames.com%20%21%20Share%20yours%20to%20enter%20a%20lucky%20draw%20and%20win%20exciting%20prizes" target="_blank">
                        <img class="social-share" 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>
            <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 2 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');
      });
  });

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

    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    if (urlParams.get('form') == 'submitted') {
      // Handler for .ready() called.
      $('html, body').animate({
          scrollTop: $('#form').offset().top
      }, 'slow');
    }
  });

	function showLantern(index) {
		$('#lanternmodal'+index).modal('show');
	}

  function showMobileLantern(index) {
    $('#lanternmobilemodal'+index).modal('show');
  }

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

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

  $(".socialbtn").click( async function() {
    // show Modal
    let data = {'stamp' : 'stamp15', _token: $('meta[name="csrf-token"]').attr('content') };
    request(data);

    $('#lanternsharemodal').modal('show');

  });

  async function request(data)
  {

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

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

    $('#lanternsharemodal').on('hidden.bs.modal', async function () {
      // Game completed
      const game_response = await fetch('/game/complete?game=lantern');
      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');
      } 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')
})
</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') }}";
    }
  };

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