@extends('layouts.app', ['bodyClass' => 'build-to-win','sectionClass' => 'game-screen'])

@section('content')
    <article class="content">
        <div class="text-center">
            <div class="puzzle-wrap mb-timer">
                <div class="title">
                    <h3>Drag and drop in the right order to complete the puzzle<span class="d-block"></span></h3>
                </div>
                <!--  -->
                <div class="puzzle-img-wrap">
                    <div class="timer" id="timer">
                        <div id="clock-container">
                            <div id="countdown"><span class="countdown_text" id="countdown_text">10</span> <span
                                    class="sec-text">Sec</span> </div>
                            <div id="clock-face">
                                <div id="needle"></div>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="order-block">
                        <div class="list products" id="productList"></div>
                        <div class="zone-wrapper">
                            <div class="drop-zone main-drop-zone" id="mainDropZone" onDragEnter="dragEnter( event )"
                                onDragOver="dragOver( event )" onDragLeave="dragLeave( event )" onDrop="dragDrop( event )">
                            </div>
                            <div class="hidden-slots" id="hiddenSlots"></div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="pzle-ftr pt-3 w-80">
                    <h5>You have <strong>10 seconds</strong> to <span class="d-block">complete the puzzle!</span></h5>
                </div>
            </div>
        </div>
    </article>
@endsection

@section('modals')
    <div class="modal fade" id="gameOverModal" data-bs-keyboard="false"  tabindex="-1" role="dialog" aria-labelledby="gameOverModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-center">
                        <div class="title-sm">Oops..</div>
                        <div class="title">Time's up!</div>
                        <div class="title-sm">You did not complete the puzzle</div>
                    </div>
                    <div class="btn1" id="Next"> <a href="https://playspintowin.com/public/">Home</a> </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="winModal" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="winModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-center">
                        <div class="title-sm">Puzzle completed</div>
                        <div class="title">Congratulations!</div>
                    </div>
                    <div class="btn1" id="Next"> <a href="{{ route('player.puzzle.submit', [$uuid]) }}">Next</a> </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src='{{ asset('js/puzzle/index.js') }}'></script>
    <script src='{{ asset('js/puzzle/game.js') }}'></script>
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/buildtowin.css')}}">
@endsection