@extends('User.layout')
<style>
    :root {
        --coin-size: 100px;
        /* Size of the coin */
        --spin-duration: 6s;
        /* Total duration of the spinning */
        --spin-count: 5;
        /* Number of spins at the start */
        --pause-duration: 2s;
        /* Pause duration before restarting */
        --coin-color-light: #ffd700;
        /* Light gold color */
        --coin-color-dark: #daa520;
        /* Dark gold color */
    }

    section {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }



    .coin {
        /* width: var(--coin-size);
            height: var(--coin-size);
            border-radius: 50%;
            margin: 50px auto; */
        animation: spin calc(var(--spin-duration) + var(--pause-duration)) cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
        /* transform-style: preserve-3d;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.5);
            background: radial-gradient(circle,
                    var(--coin-color-light),
                    var(--coin-color-dark)); */
    }

    /* Apply image if a coin image is set */
    .coin img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: none;
    }

    .coin.has-image {
        background: none;
        /* Remove gradient background */
        box-shadow: none;
        /* Optional: remove shadow for image */
    }

    .coin.has-image img {
        display: block;
        /* Show image when using an image coin */
    }

    @keyframes spin {
        0% {
            transform: rotateY(0deg);
        }

        80% {
            transform: rotateY(calc(360deg * var(--spin-count)));
            /* Spins quickly and slows down */
        }

        100% {
            transform: rotateY(calc(360deg * var(--spin-count)));
            /* Holds the position */
        }
    }

    .coin-wrapper {
        min-height: 200px;
        background-color: #66006630;
        border-radius: 16px;
        padding: 20px;
    }

    /* Card Style */
    .coin-card {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    /* Hover effect */
    .coin-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    /* Coin image */
    .coin-img {
        height: 100px;
        width: auto;
        transition: transform 0.3s ease;
    }

    /* Slight zoom on hover */
    .coin-card:hover .coin-img {
        transform: scale(1.1);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .coin-wrapper {
            padding: 15px;
        }

        .coin-card {
            padding: 20px;
        }

        .coin-img {
            height: 80px;
        }
    }
</style>
<style>
    .playbtn {
        position: relative;
        display: inline-block;
        padding: 15px;
        /* margin: 40px 0; */
        color: #ffffff;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
        font-weight: 600;
        letter-spacing: 4px;
        overflow: hidden;
    }

    .playbtn:hover {
        background: #ffffff;
        color: #000000;
        box-shadow: 0 0 5px #fff, 0 0 25px #fff, 0 0 50px #fff, 0 0 200px #fff;
        -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
    }

    .playbtn span {
        position: absolute;
        display: block;
    }

    .playbtn span:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, transparent, #fff);
        animation: animate1 1s linear infinite;
    }

    @keyframes animate1 {
        0% {
            left: -100%;
        }

        50%,
        100% {
            left: 100%;
        }
    }

    .playbtn span:nth-child(2) {
        top: -100%;
        right: 0;
        width: 10px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #fff);
        animation: animate2 1s linear infinite;
        animation-delay: 0.25s;
    }

    @keyframes animate2 {
        0% {
            top: -100%;
        }

        50%,
        100% {
            top: 100%;
        }
    }

    .playbtn span:nth-child(3) {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(270deg, transparent, #fff);
        animation: animate3 1s linear infinite;
        animation-delay: 0.5s;
    }

    @keyframes animate3 {
        0% {
            right: -100%;
        }

        50%,
        100% {
            right: 100%;
        }
    }

    .playbtn span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 10px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #fff);
        animation: animate4 1s linear infinite;
        animation-delay: 0.75s;
    }

    @keyframes animate4 {
        0% {
            bottom: -100%;
        }

        50%,
        100% {
            bottom: 100%;
        }
    }

    .card {
        background-color: #0A1F44 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }
</style>
<style>
    .wallet-card {
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    /* Hover micro interaction */
    .wallet-card:hover {
        transform: translateY(-2px) scale(1.02);
    }

    /* Subtle glow pulse */
    .wallet-amount {
        display: inline-block;
        font-weight: 600;
        animation: walletGlow 2s infinite ease-in-out;
    }

    /* Glow animation */
    @keyframes walletGlow {
        0% {
            text-shadow: 0 0 0px rgba(255, 0, 0, 0.3);
        }

        50% {
            text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
        }

        100% {
            text-shadow: 0 0 0px rgba(255, 0, 0, 0.3);
        }
    }

    /* Update flash effect */
    .wallet-update {
        animation: flashUpdate 0.6s ease;
    }

    @keyframes flashUpdate {
        0% {
            color: #28c76f;
        }

        100% {
            color: inherit;
        }
    }

    .news-marquee {
        width: 100%;
        overflow: hidden;
        background: #111;
        color: #fff;
        padding: 10px 0;
        position: relative;
        border-radius: 6px;
    }

    /* Track */
    .marquee-track {
        display: flex;
        width: max-content;
        animation: scrollLeft 20s linear infinite;
    }

    /* Each item */
    .marquee-item {
        margin-right: 50px;
        font-weight: 500;
        white-space: nowrap;
        transition: color 0.3s ease;
    }

    /* Hover effect */
    .marquee-item:hover {
        color: #ffc107;
    }

    /* Pause on hover */
    .news-marquee:hover .marquee-track {
        animation-play-state: paused;
    }

    /* Animation */
    @keyframes scrollLeft {
        0% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-50%);
        }
    }
</style>
@section('content')

    <h5><button type="button" class="btn btn-icon bg-white me-2" style="box-shadow:0px 9px 12px -2px #66328E1F;"
            onclick="history.back()">

            <i class="ti tabler-chevron-left text-dark"></i>

        </button>Unit Purchase</h5>


    <div class="news-marquee">
        <div class="marquee-track">
            <span class="marquee-item">📢 Purchasing three units at a time can help you earn higher profits.</span>


            <!-- Duplicate for seamless loop -->
            <span class="marquee-item">📢 Purchasing three units at a time can help you earn higher profits.</span>
            <span class="marquee-item">📢 Purchasing three units at a time can help you earn higher profits.</span>
            <span class="marquee-item">📢 Purchasing three units at a time can help you earn higher profits.</span>

        </div>
    </div>
    <div class="card p-8 border-1" style="border:1px solid #660066">
        <div class="row justify-content-between">
            <div class="col-lg-9">

                <div class="d-flex justify-content-between align-items-center mb-3">

                    <h5 class="wallet-card mb-0 text-white">
                        <i class="ti tabler-wallet me-1"></i>
                        Available Wallet :
                        <span class="text-danger"> {{$availableWallet}}</span>
                    </h5>
<!--
                    <div>
                        <label class="form-label">Choose Date For Gold Rate</label>
                        <input type="date" name="date" class="form-control bg-light">
                    </div> -->

                </div>

                <form id="investForm" method="POST" action="{{ route('add_investment_form') }}">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $user->id }}">

                    <div class="row">

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">
                                <i class="ti tabler-currency-bitcoin text-warning me-1"></i>
                                Coin
                            </label>

                            <input type="text" class="form-control bg-light" name="coin" readonly value="8grm">
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">
                                <i class="ti tabler-chart-line text-success me-1"></i>
                                Coin Price
                            </label>

                            <input type="text" class="form-control bg-light" name="coin_price" readonly
                                value="{{ number_format($coinPrice, 2) }}">
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">
                                <i class="ti tabler-receipt-tax text-danger me-1"></i>
                                GST
                            </label>

                            <input type="text" class="form-control bg-light" name="gst" value="{{ $gstAmount }}" readonly>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">
                                <i class="ti tabler-tools text-info me-1"></i>
                                Making Charge
                            </label>

                            <input type="text" class="form-control bg-light" name="making_charge" placeholder="0.00"
                                value="{{ number_format($makingCharge, 2) }}" readonly>
                        </div>

                    </div>

                    <h5 class="mb-0 text-center text-white mt-3">
                        <i class="ti tabler-coins text-warning me-1"></i>
                        Total Coin Value :
                        <span class="text-danger"> {{$amount}}</span>
                    </h5>

                    <div class="d-flex justify-content-center gap-3 mt-4 ">
                        <a class="playbtn disabled-btn" href="#" data-bs-toggle="modal" data-bs-target="#submitModal"
                          style="pointer-events: none; opacity: 0.5; cursor: not-allowed;">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            💎 Own It Today </a>

                        <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#submitModal">
                                            <i class="ti tabler-shopping-cart me-1"></i>
                                            Buy Coin
                                        </button> -->

                    </div>


                </form>
                <div class="text-center">Upgrade Your Wallet Balance <a href="{{ route('user.wallet_request_form') }}"
                        class="text-danger text-decoration-underline fw-bold">&nbsp;Add Fund Now</a> </div>

            </div>
            <div class="col-lg-3">


                <section class="coin-wrapper d-flex justify-content-center align-items-center">
                    <div class="text-center">
                        <img src="{{ asset('assets/image/coin.png') }}" class="coin-img coin" alt="Coin">
                    </div>
                </section>

            </div>
        </div>
    </div>
    <div class="modal fade" id="submitModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to submit?</p>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="submit_btn" class="btn btn-success p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('investForm').submit();
        });
    </script>

@endsection