@include('layout.header')

<style>
    .envelope_container {
        display:flex;
        flex: 1;
        justify-content: center;
        align-items:center;
        height: 100vh;
    }

    @media only screen and (max-width: 767px) {
        .envelope_image {
            width:300px;
            max-height:430px;
            margin-top: 95px; 
        }
    }
    
    @media only screen and (min-width: 768px) {
        .envelope_image {
            width:300px;
            max-height:auto;
            margin-top: 40px; 
        }
    }


    .action_container {
        position: relative;
        left: 115px;
        top: -190px;
    }
    .amount_heading {
        color: yellow;
        margin-bottom: 20px;
        font-size: 55px;
    }
    .continue_button {
        border: 1px solid yellow;
        background: greenyellow;
        font-weight: 700;
    }
</style>
<div class="recharge transaction">
    <div style="display:flex;">
        <div class="envelope_container">
            <div>
                <img src="{{ asset('/assets/img/red-envelope1.jpg') }}" class="envelope_image">
                <div class="action_container">
                    <h1 class="amount_heading">₹{{$envelope->amount}}</h1>
                    <button class="btn continue_button" onclick="verifyEnvelope()">Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="snackbar" style="z-index:1100;"></div>

<script>
    let code = "{{$code}}";

    function verifyEnvelope() {
    $.ajax({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        url: "/user/envelope/verify",
        method: "POST",
        data: {
            code
        },
        success: function (data) {
            if (data.status == "success") {
                toastShow(data.message);
                window.location.href = "/user/redEnvelope";
            } else {
                toastShow(data.message);
            }
        },
    });
}
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="{{asset('assets/js/jquery.validate.min.js')}}"></script>
<script src="{{asset('assets/js/custom.js')}}"></script>

<script>
    $(document).ready(function() {
        $(".slider").slick({
            infinite: true,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000
        });
    });
</script>
</body>

</html>