<!DOCTYPE html>
<html lang="en">
<?php $session = service('session'); ?>
    <!-- header -->
    <?= $this->include('header') ?>
<body data-bs-theme="dark">
    <div class="container" id="notLoggedInMsg">
        <div class="row text-center">
            <div class="col">
                <h1>Login to proceed</h1>
            </div>
        </div>
    </div>
    <!-- lost modal -->
    <div class="modal fade" tabindex="-1" id="lostModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bust</h5>
                </div>
                <div class="modal-body">
                    <p>Happens</p>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="location.reload()" class="btn btn-primary" data-bs-dismiss="modal">Go again</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" id="wonModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">GG EZ</h5>
                </div>
                <div class="modal-body">
                    <img src="https://media3.giphy.com/media/iPg2OZbNXc7uM/200w.gif?cid=6c09b952m6mxqda5hae168hfc817k1nrkj3pzjfl1z2sugs7&ep=v1_gifs_search&rid=200w.gif&ct=g" alt="">
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="location.reload()" class="btn btn-primary" data-bs-dismiss="modal">Go again</button>
                </div>
            </div>
        </div>
    </div>
    <!-- hidden ja nav logged in -->
    <!-- game -->
    <div class="container text-center" hidden id="blackjackContainer">
        <div class="row align-items-stretch">

            <div class="col-lg-8 col-sm-12 col-md-10 mx-auto mb-3 rounded-3 p-3 bg-secondary d-flex flex-column">
                <div class="row justify-content-center ">
                    <h3 class="mb-4 display-4 playerHeading">Dealer</h3>
                    <div class="row justify-content-center mt-auto" id="dealerRow">
                        <div class="col cardImg" id="dealerCard1">
                            <img src="/kartisBack/cardBackRed.png" alt="Karts1" class="img-fluid playingCards">
                        </div>
                        <div class="col cardImg"id="dealerCard2">
                            <img src="/kartisBack/cardBackRed.png" alt="Karts2" class="img-fluid playingCards">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-sm-12 col-md-10 mx-auto rounded-3 p-3 bg-secondary d-flex flex-column">
                <h3 class="mb-4 display-4 playerHeading">You</h3>    
                <div class="row justify-content-center" id="playerCardRow">
                </div>
                <div class="row pt-4 justify-content-center mt-auto">
                    <div class="col-4 d-grid">
                        <button class="btn btn-success btn-lg" onclick="blackjack('hit')">Hit</button>
                    </div>
                    <div class="col-4 d-grid">
                        <button class="btn btn-danger btn-lg" onclick="blackjack('stand')">Stand</button>
                    </div>
                </div>
            </div>  
        </div> 
    </div>
<?php
    
    // paradas game ja logged in
    $logged_in = $session->get('logged_in');
    if($logged_in){
        echo "<script>
        document.getElementById('blackjackContainer').hidden = false;
        document.getElementById('notLoggedInMsg').hidden = true;

        let startBlackjack = true;
        </script>";
    }

?>


</body>
    <!-- footer -->
    <?= $this->include('footer') ?>

    
</html>
