@extends('layouts.dashboardLayout')

@section('title', 'Home')

@section('logo', asset('images/'. $chain .'-logo.png'))
@section('fan', asset('images/'. $chain .'-fan.png'))

@section('content')

<!-- main-body start -->
@if(session('status'))
<div class="alert alert-success">
    {{ session('status') }}
</div>
@elseif(session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif
<div class="overflow-hidden">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="top-area flex-wrap d-center justify-content-between gap-8 row-gap-3">
                    <h2>Wallet</h2>
                    <div class="d-flex align-items-center gap-3 gap-lg-6">
                        <button type="submit" class="btn_box cus-border border-color py-2 py-lg-3 py-xxl-4 px-4 px-lg-5 px-xxl-8 gap-2 gap-lg-3" data-toggle="modal" data-target="#reinvestModal">
                            Reinvest
                        </button>

                        <form action="{{ route('deposits.request') }}" method="POST">
                            @csrf

                            <div class="modal fade" id="reinvestModal" tabindex="-1" aria-labelledby="reinvestModal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content n0-bg p-4 p-md-6 p-xxl-8">
                                        <div class="modal-header header-part mb-5 mb-lg-6 pb-5 pb-lg-6">
                                            <h5 class="modal-title" id="reinvestModal"><i class="fa fa-sync"></i> Reinvest</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>

                                        <div class="modal-body d-flex flex-column gap-3 gap-lg-4">
                                            <div class="row text-sm">
                                                <div class="col-6 text-left">
                                                    <strong>Min:</strong>
                                                    <a href="#" onclick="event.preventDefault(); document.getElementById('amountInput').value = '{{ $minInvest }}';">
                                                        {{ $minInvest .' '. $chain }}
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="input-group">
                                                <input
                                                    type="number"
                                                    name="amount"
                                                    class="form-control"
                                                    placeholder="Amount"
                                                    min="0"
                                                    id="amountInput">
                                                <div class="input-group-append">
                                                    <div class="input-group-text">{{ $chain }}</div>
                                                </div>
                                            </div>

                                            <!-- <small class="form-text"><strong>Total</strong>: 0 GH/s</small> -->
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="connect btn_box cus-border py-2 py-lg-3 px-3 px-lg-5 px-xxl-6" data-dismiss="modal">
                                                Cancel
                                            </button>
                                            <button type="submit" class="connect btn_box cus-border py-2 py-lg-3 px-3 px-lg-5 px-xxl-6" id="startBtn">
                                                <i class="fa fa-sync"></i> Reinvest Now
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- Livewire Component wire-end:IMRojZZgmynjcyoaCK7x -->
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column gap-3 ">
            <div class="d-center justify-content-start gap-3 gap-lg-6">
                <span>Total Balance</span>
            </div>
            <div class="d-center flex-wrap row-gap-3 gap-8 gap-lg-10 justify-content-start">

                <h2 style="width: 100%;">
                    <span id="miningBalance">{{ $balance }}</span> {{ $chain }}
                </h2>

                <button type="submit"
                    class="btn_box btn_alt cus-border border-color py-2 py-lg-3 py-xxl-4 px-4 px-lg-5 px-xxl-8 gap-2 gap-lg-3"
                    href="#withdrawalModal" data-toggle="modal" data-target="#depositModal">Deposit</button>

                <button type="submit"
                    class="btn_box btn_alt cus-border border-color py-2 py-lg-3 py-xxl-4 px-4 px-lg-5 px-xxl-8 gap-2 gap-lg-3"
                    href="#withdrawalModal" data-toggle="modal" data-target="#withdrawalModal"
                    style="--top: -0.333343505859375px; --left: 124.5625px;">Withdraw</button>

            </div>

        </div>

        <div class="row g-6">
            <div class="col-sm-6 col-xxl-6 ">
                <div class="n0-bg cus-rounded-1 p-4 p-lg-6 cus-border h-100">
                    <div class="header-part pb-4 mb-4">
                        <h4>Bonus + Your Hashpower</h4>
                    </div>
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-nowrap">
                            <h4 class="n700-color">{{ $hashPower }} GH/s </h4>
                            <p class="d-flex align-items-center gap-1 mt-3 flex-wrap">{{ $hashPower }} GH/s <span class="n500-color">(HashPower)</span></p>
                        </div>
                        <img src="{{ asset('images/'. $chain .'-fan.png') }}" class="rotating-img" style="width: 90px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-6">
                <div class="n0-bg cus-rounded-1 p-4 p-lg-6 cus-border h-100">
                    <div class="header-part pb-4 mb-4">
                        <h4>Today Possible Earnings</h4>
                    </div>
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-nowrap">
                            <h4 class="n700-color"><span id="dailyProfit">{{ $todayEarning }}</span> {{ $chain }}</h4>
                            <span id="dailyProfit">{{ $todayEarning }}</span><span class="n500-color"> (Daily Earnings)</span>
                            <p></p>
                        </div>
                        <img src="{{ asset('images/'. $chain .'-fan.png') }}" class="rotating-img" style="width: 90px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-6">
                <div class="n0-bg cus-rounded-1 p-4 p-lg-6 cus-border h-100">
                    <div class="header-part pb-4 mb-4">
                        <h4>Current Balance</h4>
                    </div>
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-nowrap">
                            <h4 class="n700-color"><span id="fiatBalance">0.000000</span> USD</h4>
                            <p>
                                <span id="fiatBalance2">0.000000</span>
                            </p>
                        </div>
                        <img src="{{ asset('images/mining3.png') }}" style="width: 90px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-6">
                <div class="n0-bg cus-rounded-1 p-4 p-lg-6 cus-border h-100">
                    <div class="header-part pb-4 mb-4">
                        <h4>Total Invited Users</h4>
                    </div>

                    <h4 class="n700-color">{{ $refCount }} users</h4>
                    <p></p>
                </div>
                <!-- <img src="/main/img/mining4.png" style="width: 90px;"> -->
            </div>
        </div>
    </div>
</div>



<!-- <div class="row">
        <div class="col-12">
            <div class="n0-bg cus-rounded-1 p-4 p-lg-6 cus-border h-100">
                <div class="d-center justify-content-between gap-5 mb-10 mb-lg-15 flex-wrap">
                    <div class="flex-fill d-flex flex-column gap-4">
                        <h4>Your registration bonus earnings have started.</h4>
                        <p>You can earn more by upgrading your plan.</p>
                    </div>

                </div>
                <div class=" ">
                    <div class="row four_grid g-6">
                        <div class="col-md-6 col-xl-6 col-xxl-4">
                            <div class="pricing_card n0-bg d-flex flex-column text-center  flex-fill gap-6 gap-lg-8 cus-rounded-1 cus-border py-6 py-lg-8 py-4 px-4 px-md-8 px-xxl-10 ">
                                <div class="separator_line_dashed pb-6 pb-lg-8 w-100">
                                    <div class="separator_line_dashed pb-5 pb-lg-6 mb-4">
                                        <div class="box_20 bg1-opty rounded-circle cus-border d-center mx-auto">
                                            <img src="https://i.seadn.io/s/raw/files/1c1b36a79687038012fb4a4d6ceb568f.gif?auto=format&amp;dpr=1&amp;w=1000" alt="icon">
                                        </div>
                                        <span class="fs-four fw-medium mt-3">BONUS PLAN</span>
                                    </div>
                                    <div class="d-flex flex-column gap-3">
                                        <h2 class="display-4 p1-color">0.1 TRX</h2>
                                        <span>Per day</span>
                                    </div>
                                </div>
                                <div class="d-flex flex-column gap-6 gap-lg-8 w-100 align-items-center">
                                    <div class="d-flex flex-column gap-4">
                                        <div class="d-flex align-items-center gap-2">

                                            <span>Daily profit: 0.1 TRX</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">

                                            <span>FOR 350 DAYS</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">

                                            <span>Total Bonus Earnings: 35 TRX</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">

                                            <span>NO NEED DEPOSIT</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-6 col-xxl-4">
                            <div class="pricing_card n0-bg d-flex flex-column text-center  flex-fill gap-6 gap-lg-8 cus-rounded-1 cus-border py-6 py-lg-8 py-4 px-4 px-md-8 px-xxl-10 ">
                                <div class="separator_line_dashed pb-6 pb-lg-8 w-100">
                                    <div class="separator_line_dashed pb-5 pb-lg-6 mb-4">
                                        <div class="box_20 bg1-opty rounded-circle cus-border d-center mx-auto">
                                            <img src="https://i.seadn.io/s/raw/files/1c1b36a79687038012fb4a4d6ceb568f.gif?auto=format&amp;dpr=1&amp;w=1000" alt="icon">
                                        </div>
                                        <span class="fs-four fw-medium mt-3">Premium Plan</span>
                                    </div>
                                    <div class="d-flex flex-column gap-3">
                                        <h2 class="display-4 p1-color">Earns 300% </h2>
                                        <span>IN 1 MONTH</span>
                                    </div>
                                </div>
                                <div class="d-flex flex-column gap-6 gap-lg-8 w-100 align-items-center">
                                    <div class="d-flex flex-column gap-4">
                                        <div class="d-flex align-items-center gap-2">

                                            <span>Daily profit: %10 TRX</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">

                                            <span>Total Earnings: %300 TRX</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">

                                            <span>Minimum Deposit: 20 TRX</span>
                                        </div>

                                    </div>
                                    <button type="button" href="#depositModal" data-toggle="modal" data-target="#depositModal" class="btn_box btn_alt cus-border border-color cus-rounded-1 py-2 py-lg-3 px-4 px-lg-6 w-100 "> DEPOSIT </button>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div> -->
<script>
    let currentBalance = {{$balance}};
    const lastInvestTime = {{$lastInvestTime}};
    const profitAmount = {{$profitAmount}};
    const tokenPrice = {{$tokenPrice}};

    if(Date.now() / 1000 - lastInvestTime < 72 * 60 * 60){
        setInterval(() => {
            currentBalance += profitAmount;

            const formattedBalance = currentBalance.toFixed(6);
            const fiatValue = (currentBalance * tokenPrice).toFixed(2);

            document.getElementById('miningBalance').innerText = formattedBalance;
            document.getElementById('fiatBalance').innerText = fiatValue;
            document.getElementById('fiatBalance2').innerText = fiatValue;

            // Send AJAX request to update balance
            fetch('{{ route('balance.update') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        balance: currentBalance
                    })
                });
        }, 2000);
    }
</script>

@endsection