@extends('Admin.layout')
<style>
    .gold-date-box {
        /* background: linear-gradient(145deg, #ffffff, #f8f9fa); */
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }

    .gold-date-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    }

    .gold-date-label {
        font-weight: 600;
        font-size: 13px;
        color: #333;
        margin-bottom: 8px;
        display: block;
        letter-spacing: 0.3px;
    }

    .gold-date-input {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .gold-date-input:focus {
        border-color: #d4af37;
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    }
</style>
<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>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }


    .container {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .btn-submit {
        background-color: #ffc107 !important;
        color: black !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>

<style>
    .total-value-card {
        background: linear-gradient(135deg, #0a1f44, #1f3c88);
        border-radius: 16px;
        padding: 2px 2px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        animation: fadeIn 0.6s ease-in-out;
    }

    /* Glow effect */
    .total-value-card::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(227, 208, 81, 0.1), transparent);
        animation: rotateGlow 6s linear infinite;
    }

    .total-content {
        display: flex;
        align-items: center;
        gap: 2px;
        position: relative;
        z-index: 2;
    }

    .icon {
        font-size: 32px;
        color: #ffc107;
        animation: pulse 1.5s infinite;
    }

    .text .label {
        color: #ddd;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .amount {
        font-size: 28px;
        font-weight: bold;
        color: #ff4d4d;
        margin: 0;
    }

    /* Animations */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.15);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes rotateGlow {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@section('content')
<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('investment_history') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
    </button> Grant MicroUnit
</h5>

<div class="container p-4 shadow-sm border-0">
    <div class="card-body p-4">

        <form id="investForm" method="POST" action="{{route('purchase_micro_unit')}}">
            @csrf
            <div class="row d-flex justify-content-center mb-3">
                <div class="col-lg-6 mb-3">
                    <div class="gold-date-box">
                        <label class="form-label gold-date-label">Choose Date For Gold Rate</label>

                        <div class="input-wrapper">
                            <input type="date" name="date" id="date" class="form-control gold-date-input" value="{{ old('date', now()->format('Y-m-d')) }}">

                        </div>
                        @error('date')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="row">

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

                    <input type="text" class="form-control " placeholder="Enter User ID" name="user_id" id="user_id"
                        value="{{ old('user_id') }}">
                    @error('user_id')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

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

                    <input type="text" class="form-control" name="user_name" id="user_name" readonly>
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">
                        <i class="ti tabler-currency-bitcoin text-warning me-1"></i>
                        Invest Type </label>
                    <select class="form-select" name="invest_type">
                        <option value="">Select</option>
                        <option value="member" {{ old('invest_type') == 'member' ? 'selected' : '' }}>Member Invest</option>
                        <option value="super_promoter" {{ old('invest_type') == 'super_promoter' ? 'selected' : '' }}>Super
                            Promoter </option>
                        <!-- <option value="loan" {{ old('invest_type') == 'loan' ? 'selected' : '' }}>Loan</option> -->
                    </select>
                    @error('invest_type')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <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" name="coin" readonly value="1grm">
                </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" name="coin_price" id="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" name="gst" id="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" name="making_charge" id="making_charge" placeholder="$0.00"
                        value="{{ number_format($makingCharge, 2) }}" readonly>
                </div>

            </div>
            <div class="row justify-content-center">
                <div class="col-lg-3">
                    <div class="total-value-card p-2">
                        <div class="total-content">
                            <div class="icon">
                                <i class="ti tabler-coins"></i>
                            </div>

                            <div class="text">
                                <span class="label">Total Coin Value</span>
                                <h2 class="amount" id="total_amount">₹ {{ number_format($amount, 2) }}</h2>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="d-flex justify-content-center gap-3 mt-4">


                <div class="d-flex justify-content-center gap-3 mt-4">
                    <a class="playbtn" href="#" data-bs-toggle="modal" data-bs-target="#submitModal">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        💎 Submit</a>
                </div>
            </div>

        </form>
    </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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function fetchUnitRate(date) {

        if (!date) return;

        fetch("{{ route('get_microunit_rate') }}?date=" + date)
            .then(res => res.json())
            .then(data => {

                if (data.status) {
                    document.getElementById('coin_price').value = parseFloat(data.coin_price).toFixed(2);
                    document.getElementById('making_charge').value = parseFloat(data.making_charge).toFixed(2);
                    document.getElementById('gst').value = parseFloat(data.gst).toFixed(2);
                    document.getElementById('total_amount').innerText = '₹ ' + parseFloat(data.total).toFixed(2);
                } else {
                    console.warn('No gold rate found');
                }

            })
            .catch(error => console.error(error));
    }

    document.getElementById('date').addEventListener('change', function() {
        fetchUnitRate(this.value);
    });

    document.addEventListener('DOMContentLoaded', function() {
        let date = document.getElementById('date').value;

        if (date) {
            fetchUnitRate(date);
        }
    });
</script>


<script>
    const users = @json($users);

    $('#user_id').on('input', function() {

        let enteredId = $(this).val().trim().toLowerCase();
        let user = users.find(u => u.user_id.toLowerCase() === enteredId);
        if (user) {
            if (parseInt(user.is_active) === 1) {
                $('#user_name')
                    .val(user.name)
                    .removeClass('text-danger');
            } else {
                $('#user_name')
                    .val('User is inactive')
                    .addClass('text-danger');
            }
        } else {
            $('#user_name')
                .val('User not found')
                .addClass('text-danger');
        }
    });
</script>

<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