@extends('layouts.master')
@push('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@section('title', config("app.name") . " | Coin Flip")
@section('background-image', asset("assets/images/donate.jpg"))
@section('css')
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/wheel/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/wheel/css/coin-flip.css?v=2') }}">
    <style type="text/css">
        body {font-family: 'Lato', sans-serif; background: #000 !important;}
        h1, h4 {font-family: inherit;}
        .modal {font-family: 'Lato', sans-serif;}

        #message-paragraph {
            margin-top: 1em;
            padding: 0.75em;
            background: #fff;
            color: #000;
            border-radius: 12px;
            text-align: center;
            font-size: 1.5em;
        }

        .input-container {
            height: auto;
            width: 500px;
            margin: 0 auto;
            margin-bottom: 1em;
        }

        #epValue {
            margin: 0 auto;
            border-radius: 4px;
            border: none;
            width: 500px;
            padding: 0.50em 1em;
        }

        .current-ep {
            text-align: center;
            font-size: 24px;
        }

        .current-zp {
            text-align: center;
            font-size: 24px;
        }

    </style>
@endsection
@section('content')
    <div class="wrapper">
        <form class="flipForm">
            <h2 class="current-ep">You have: <span class="ep-value counter">{{ number_format($user_ep['EVENT_POINT']) }}</span> EP</h2>
            <h2 class="current-zp">You have: <span class="zp-value counter">{{ number_format($user_zp['CurrZP']) }}</span> ZP</h2>
            <h5 style="text-align: center">Check history <a href="/coin-flip/history">here</a></h5>
            <div class="input-container">
                <input name="epValue" id="epValue" placeholder="Enter your EP value, you will get it back in ZP divided by 4" type="number" required>
            </div>
            <h1 class="result">Flip a Coin</h1>
            <div class="coin-container">
                <div id="coin">
                    <div class="coin-side heads">

                    </div>
                    <div class="coin-side tails">
                        
                    </div>
                </div>
            </div>
            <div class="btn-container">
                <a href="#" class="btn js-flip-coin">Flip Coin</a>
            </div>
        </form>
    </div>
@endsection
@section('js')
    <script>
        jQuery(document).ready(function($) {
            // Flip a Coin
            function flipCoin(e) {
                e.preventDefault();

                // Set up variables
                var flipTime = 1500; // Flip the coin for 1.5 seconds.
                var $theCoin = $('#coin');
                var $flipTrigger = $('.js-flip-coin');
                var heads = 'is-heads';
                var tails = 'is-tails';
                var flipping = 'is-flipping';

                // Result Text
                function theResult(string) {
                    var $result = $('.result');
                    $result.text(string);
                }

                // Button Text
                function btnText(string) {
                    $flipTrigger.text(string);
                }

                const epValue = $("#epValue").val();
                if(epValue.length === 0){
                    alert("Fill the input first!");
                    return;
                } else {
                    if(epValue < 1000){
                        alert("Only values above 1000 EP are allowed");
                        return;
                    }
                }

                theResult('Flipping Coin...');
                btnText('Flipping...');

                $.ajaxSetup({
                    url: "/coin-flip/do",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data: {
                        epValue: epValue
                    },
                    success: function(data){
                        const flipResult = data['flipResult'];
                        const message = data['message'];
                        const newEP = data['newEP'];
                        const newZP = data['newZP'];
                        // Do this if the coin isn't currently flipping
                        if(!$flipTrigger.hasClass(flipping)) {

                            // The coin has landed
                            function coinLanded(result) {
                                $theCoin.addClass(result);
                                $theCoin.removeClass(flipping);
                                $flipTrigger.removeClass(flipping);
                            }

                            // The coin is flipping, change the button
                            $flipTrigger.addClass(flipping);

                            // The results are in...
                            function coinResult() {
                                // 50:50 chance
                                if(flipResult == 0) {
                                    // Heads
                                    coinLanded(heads);
                                    theResult('Landed on Global Risk!');
                                    btnText('Flip Coin');
                                } else if(flipResult == 1) {
                                    // Tails
                                    coinLanded(tails);
                                    theResult('Landed on Black List!');
                                    btnText('Flip Coin');
                                } else if (flipResult == 2) {
                                    theResult('An error occurred');
                                    alert("An error occurred");
                                }

                                $('.ep-value').text(newEP);
                                $('.zp-value').text(newZP);
                                $('#epValue').val('');



                                if($("#message-paragraph").length){
                                    $('#message-paragraph').text(message);
                                } else {
                                    $(".wrapper").append("<p id='message-paragraph'>" + message + "</p>");
                                }

                            }

                            // Start Over
                            if($theCoin.hasClass(heads) || $theCoin.hasClass(tails)) {
                                $theCoin.removeClass(heads).removeClass(tails);
                            }

                            // Flipping the Coin...
                            $theCoin.addClass(flipping);
                            setTimeout(coinResult, flipTime);
                        }
                    },
                    error: function() {
                        let message = "Something went wrong, please contact the administrator."
                        if($("#message-paragraph").length){
                            $('#message-paragraph').text(message);
                        } else {
                            $(".wrapper").append("<p id='message-paragraph'>" + message + "</p>");
                        }
                    }
                });
            }

            // Let's flip it!
            $('.js-flip-coin').on('click', flipCoin);
            $('#coin').on('click', flipCoin);
            $('.flipForm').submit(flipCoin);
        }(jQuery));
    </script>
@endsection