@php $page = 'dashboard' @endphp
@extends('includes.layout')

<!-- Extra styling -->
<style>
    .icon-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .card-hover {
        transition: all 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

    .nav-tabs .nav-link {
        border: none;
        border-radius: 8px;
        color: #555;
        font-weight: 500;
        transition: 0.3s;
    }

    .nav-tabs .nav-link.active {
        background: #0d6efd;
        color: #fff;
    }

    .nav-tabs .nav-link:hover {
        background: #e9ecef;
    }
</style>

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Dashboard </h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="breadcrumb-item active">Dashboard</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        @if ($user->role == 'user')
        <div class="box">
            <div class="card-header">
                <div class="">
                    <h4 class="m-0">
                        Total Asset
                        <i id="info-icon" class="fa fa-eye text-primary" style="cursor: pointer"></i>
                    </h4>
                    <div id="balance">
                        <h3 class="m-0">
                            <b class="m-0">${{ number_format($user->balance, 2) }}</b>
                        </h3>
                        <p class="m-0">= {{ number_format($btc_value, 8) }} BTC</p>
                    </div>

                    <h3 id="hidden-balance" class="m-0" style="display:none;">
                        <b class="m-0">*****</b>
                    </h3>
                </div>
                <a href="{{ route('user.deposit') }}" target="_blank" class="float-right btn btn-primary btn-sm">
                    <i class="mr-5 fa fa-plus"></i>Deposit
                </a>
            </div>
        </div>
        @if ($settings && $settings->kyc_verification == 'yes' && !$user->is_verified)
        <div class="alert alert-primary alert-dismissible">
            <a href="{{ route('user.setting', 'kyc') }}" class="float-right btn btn-danger btn-sm">Proceed</a>
            <h4><i class="icon fa fa-check"></i> KYC Verification!</h4>
            <p>To comply with regulation, each participant will have to go through indentity verification
                (KYC/AML) to prevent fraud causes.</p>
        </div>
        @endif
        <div class="box">
            <div class="box-header with-border">
                <div class="form-group">
                    <label for="referral_link">Refer Us & Earn</label>
                    <p><small>Use the below link to invite your friends.</small></p>
                    <div class="input-group my-colorpicker2">
                        <input type="text" id="referral_link" class="form-control" disabled
                            value="{{ route('register') }}?ref={{ $user->refferal_id }}">
                        <div class="input-group-addon copy-content"
                            data-val="{{ route('register') }}?ref={{ $user->refferal_id }}"><i class="fa fa-copy "></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-3 row g-3">
            <!-- Deposit -->
            <div class="col-4 col-md-4 col-lg-4">
                <a href="{{ route('user.deposit') }}" class="text-center border-0 shadow-sm card h-100 card-hover">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                        <div class="mb-3 text-white icon-circle bg-primary">
                            <i class="fa fa-download fa-lg"></i>
                        </div>
                        <p class="mb-0 fw-bold">Deposit</p>
                    </div>
                </a>
            </div>

            <!-- Withdraw -->
            <div class="col-4 col-md-4 col-lg-4">
                <a href="{{ route('user.withdrawal') }}" class="text-center border-0 shadow-sm card h-100 card-hover">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                        <div class="mb-3 text-white icon-circle bg-secondary">
                            <i class="fa fa-upload fa-lg"></i>
                        </div>
                        <p class="mb-0 fw-bold">Withdraw</p>
                    </div>
                </a>
            </div>

            <!-- To Bank -->
            <div class="col-4 col-md-4 col-lg-4">
                <a href="{{ route('user.transfers') }}" class="text-center border-0 shadow-sm card h-100 card-hover">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                        <div class="mb-3 text-white icon-circle bg-danger">
                            <i class="fa fa-university fa-lg"></i>
                        </div>
                        <p class="mb-0 fw-bold">To Bank</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="border-0 shadow-sm box">
            <div class="box-body">
                <!-- Nav Tabs -->
                <ul class="p-1 rounded nav nav-tabs nav-fill bg-light" id="dashboardTabs" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab">
                            <i class="fa fa-chart-line me-1"></i> Overview
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="crypto-tab" data-toggle="tab" href="#crypto" role="tab">
                            <i class="fa fa-bitcoin me-1"></i> Crypto
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="mt-4 tab-content" id="dashboardTabsContent">
                    <!-- Overview Tab -->
                    <div class="tab-pane fade show active" id="overview" role="tabpanel">
                        {{-- <div class="row">
                            <div class="col-12 col-lg-6">
                                <div class="box box-body pull-up bl-3 border-warning">
                                    <div class="flexbox align-items-center">
                                        <p class="no-margin">Main Balance</p>
                                    </div>
                                    <div class="media align-items-center">
                                        <h2 class="no-margin">${{ number_format($user->balance, 2) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="box box-body pull-up bl-3 border-gray">
                                    <div class="flexbox align-items-center">
                                        <p class="no-margin">Referral Bonus</p>
                                    </div>
                                    <div class="media align-items-center">
                                        <h2 class="no-margin">${{ number_format($user->ref_balance, 2) }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="row">
                            <div class="col-xl-12 col-xll-12 col-lg-12">
                                <div class="table-responsive" style="overflow-x: auto;">
                                    <!-- TradingView Widget BEGIN -->
                                    <div class="tradingview-widget-container">
                                        <div class="tradingview-widget-container__widget"></div>
                                        <script type="text/javascript"
                                            src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js"
                                            async>
                                            {
                                                                "colorTheme": "light",
                                                                "dateRange": "12M",
                                                                "showChart": false,
                                                                "locale": "en",
                                                                "width": "100%",
                                                                "height": "600",
                                                                "largeChartUrl": "",
                                                                "isTransparent": false,
                                                                "showSymbolLogo": true,
                                                                "showFloatingTooltip": false,
                                                                "tabs": [{
                                                                    "title": "Indices",
                                                                    "symbols": [{
                                                                            "s": "BITSTAMP:BTCUSD"
                                                                        },
                                                                        {
                                                                            "s": "COINBASE:BTCUSD"
                                                                        },
                                                                        {
                                                                            "s": "BINANCE:ETHUSDT"
                                                                        },
                                                                        {
                                                                            "s": "BITSTAMP:ETHUSD"
                                                                        },
                                                                        {
                                                                            "s": "CRYPTO:BTCUSD"
                                                                        },
                                                                        {
                                                                            "s": "BINANCE:BNBUSDT"
                                                                        },
                                                                        {
                                                                            "s": "BINANCE:DOGEUSDT"
                                                                        },
                                                                        {
                                                                            "s": "BINANCE:LTCUSDT"
                                                                        },
                                                                        {
                                                                            "s": "BINANCE:XRPUSD"
                                                                        }
                                                                    ],
                                                                    "originalTitle": "Indices"
                                                                }]
                                                            }
                                        </script>
                                    </div>
                                    <!-- TradingView Widget END -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Crypto Tab -->
                    <div class="tab-pane fade" id="crypto" role="tabpanel">
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <div class="box-header with-border">
                                    <h3 class="box-title">Active Potfolios ({{ count($active_investments) }})</h3>
                                    <a href="{{ route('user.invest.history') }}"
                                        class="float-right btn btn-primary btn-sm">
                                        <i class="mr-5 fa fa-plus"></i>View All Potfolios
                                    </a>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div class="table-responsive">
                                        <table
                                            class="table table-bordered table-hover display nowrap margin-top-10 w-p100">
                                            <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Plan</th>
                                                    <th>Amount</th>
                                                    <th>Interest</th>
                                                    <th>Plan Duration</th>
                                                    <th>Status</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1; @endphp
                                                @forelse ($active_investments as $item)
                                                <tr>
                                                    <td>{{ $counter }}</td>
                                                    <td>{{ optional($item->plan)->name }} PLAN</td>
                                                    <td>${{ number_format($item->amount, 2) }}</td>
                                                    <td>${{ number_format($item->interest, 2) }}</td>
                                                    <td>{{ optional($item->plan)->duration }} Day(s)</td>
                                                    <td><span class="badge badge-warning">{{
                                                            Str::ucfirst($item->invest_status) }}</span>
                                                    </td>
                                                    <td>{{ $item->created_at->diffForHumans() }}</td>
                                                </tr>
                                                @php $counter++; @endphp
                                                @empty
                                                <tr>
                                                    <p class="text-center alert alert-warning">No recent potfolios</p>
                                                    <div class="text-center">
                                                        <a href="{{ route('user.invest') }}" class="btn btn-danger">
                                                            Invest
                                                        </a>
                                                    </div>
                                                </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <div class="box-header with-border">
                                    <h3 class="box-title">Recent Earning</h3>
                                    <a href="{{ route('invest.earnings') }}" class="float-right btn btn-primary btn-sm">
                                        <i class="mr-5 fa fa-plus"></i>View All Earning
                                    </a>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div class="table-responsive">
                                        <table
                                            class="table table-bordered table-hover display nowrap margin-top-10 w-p100">
                                            <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Type</th>
                                                    <th>Amount</th>
                                                    <th>Status</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1; @endphp
                                                @forelse ($recent_earnings as $item)
                                                <tr>
                                                    <td>{{ $counter }}</td>
                                                    <td> {{ Str::ucfirst($item->type) }}</td>
                                                    <td>${{ number_format($item->amount, 2) }}</td>
                                                    <td>
                                                        <span
                                                            class="badge badge-{{ $item->status == 'processed' ? 'success' : 'danger' }}">
                                                            {{ Str::ucfirst($item->status) }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $item->created_at->diffForHumans() }}</td>
                                                </tr>
                                                @php $counter++; @endphp
                                                @empty
                                                <tr>
                                                    <p class="text-center alert alert-warning">No recent Earning</p>
                                                </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-3 justify-content-center">
            <!-- Portfolio -->
            <div class="col-3">
                <a href="{{ route('user.invest') }}"
                    class="btn btn-primary d-flex align-items-center justify-content-center w-100">
                    <i class="bi bi-wallet2 me-2"></i> Portfolio
                </a>
            </div>

            <!-- Rent ASIC -->
            <div class="col-3">
                <a href="{{ route('minings.rent-asic.create') }}"
                    class="btn btn-success d-flex align-items-center justify-content-center w-100">
                    <i class="bi bi-hdd-network me-2"></i> Rent ASIC
                </a>
            </div>

            <!-- Buy Cloud -->
            <div class="col-3">
                <a href="{{ route('minings.buy-cloud.create') }}"
                    class="btn btn-info d-flex align-items-center justify-content-center w-100">
                    <i class="bi bi-cloud-arrow-down me-2"></i> Buy Cloud
                </a>
            </div>

            <!-- Buy ASIC -->
            <div class="col-3">
                <a href="{{ route('minings.buy-asic.create') }}"
                    class="text-white btn btn-warning d-flex align-items-center justify-content-center w-100">
                    <i class="bi bi-cart-check me-2"></i> Buy ASIC
                </a>
            </div>
        </div>
        @else
        <div class="row">
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Total Users</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-users font-size-40 text-primary"></span>
                        <span class=" font-size-30">{{ count($all_users) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Active Users</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-user font-size-40 text-primary"></span>
                        <span class=" font-size-30">{{ count($active_users) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Blocked Users</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-user-plus font-size-40 text-primary"></span>
                        <span class=" font-size-30">{{ count($blocked_users) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Active Subscribers</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-copy font-size-40 text-primary"></span>
                        <span class=" font-size-30">{{ count($subscribers) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Total Withdrawal</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-arrow-alt-circle-up font-size-20 text-primary"></span>
                        <span class=" font-size-20">${{ number_format($admin_total_withdrawal, 2) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Pending Withdrawal</h6>
                    <div class="mt-2 flexbox">
                        <span class="fas fa-cubes font-size-20 text-primary"></span>
                        <span class=" font-size-20">${{ number_format($admin_pending_withdrawal, 2) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Total Deposits</h6>
                    <div class="mt-2 flexbox">
                        <span class="fa fa-download font-size-20 text-primary"></span>
                        <span class=" font-size-20">${{ number_format($admin_total_deposit, 2) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
            <div class="col-xl-3 col-md-6 col-12">
                <div class="box box-body">
                    <h6 class="text-uppercase">Pending Deposit</h6>
                    <div class="mt-2 flexbox">
                        <span class="fas fa-cubes font-size-20 text-primary"></span>
                        <span class=" font-size-20">${{ number_format($admin_pending_deposit, 2) }}</span>
                    </div>
                </div>
            </div>
            <!-- /.col -->
        </div>
        <div class="row">
            <div class="col-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Latest Users</h3>
                        <div class="float-right btn-group">
                            <a href="{{ route('view.users') }}" class="btn btn-primary btn-sm">View All Users</a>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table id="example"
                                class="table table-bordered table-hover display nowrap margin-top-10 w-p100">
                                <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Balance</th>
                                        <th>Country</th>
                                        <th>Status</th>
                                        <th>Date Joined</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $counter = 1; @endphp
                                    @forelse ($recent_users as $item)
                                    <tr>
                                        <td>{{ $counter }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->email }}</td>
                                        <td>{{ $item->phone }}</td>
                                        <td>${{ number_format($item->balance, 2) }}</td>
                                        <td>{{ $item->country }}</td>
                                        <td><span
                                                class="badge badge-{{ $item->status == 'active' ? 'success' : 'danger' }}">{{
                                                Str::ucfirst($item->status) }}</span></td>
                                        <td>{{ $item->created_at->diffForHumans() }}</td>
                                    </tr>
                                    @php $counter++; @endphp
                                    @empty
                                    <tr>
                                        <p class="text-center alert alert-warning">No User Found</p>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <div class="row">
            <div class="col-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Recent Withdrawals</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table id="example"
                                class="table table-bordered table-hover display nowrap margin-top-10 w-p100">
                                <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>Client</th>
                                        <th>Amount</th>
                                        <th>Charge</th>
                                        <th>Payment Method</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $counter = 1; @endphp
                                    @forelse ($recent_withdrawals as $item)
                                    <tr>
                                        <td>{{ $counter }}</td>
                                        <td><a href="{{ route('view.user', optional($item->user)->id) }}">{{
                                                optional($item->user)->name }}</a></td>
                                        <td>${{ number_format($item->amount, 2) }}</td>
                                        <td>${{ number_format($item->charge, 2) }}</td>
                                        <td>{{optional($item->user_wallet)->system_wallet->name ?? 'Unknown' }}</td>
                                        <td>{{$item->type == 'main_balance' ? 'Main Balance' : 'Referral Bonus'}}</td>
                                        <td><span
                                                class="badge badge-{{ $item->status == 'processed' ? 'success' : 'danger' }}">{{
                                                Str::ucfirst($item->status) }}</span></td>
                                        <td>{{ $item->created_at->diffForHumans() }}</td>
                                    </tr>
                                    @php $counter++; @endphp
                                    @empty
                                    <tr>
                                        <p class="text-center alert alert-warning">No Recent Withdrawals Found</p>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        @endif
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $(".copy-content").click(function() {
            var dataVal = $(this).attr('data-val');
            var $tempInput = $('<input>');
            $('body').append($tempInput);
            $tempInput.val(dataVal).select();
            document.execCommand('copy');
            $tempInput.remove();
            alert('Copied to clipboard: ' + dataVal);
        });

         // Initially hide the balance and show the hidden balance
        $("#balance").hide();
        $("#hidden-balance").show();
        // Toggle the visibility of the balance on click
        $("#info-icon").click(function() {
            $("#balance").toggle();
            $("#hidden-balance").toggle();
        });

        $('.quick-click').on('click', function() {
            // Get the data-amount attribute of the clicked button
            var amount = $(this).data('amount');
            // Populate the input field with the button data-amount
            $('#amount').val(amount);
        });
    });
</script>
@endpush