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


@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Get started with your investment.</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a>
            </li>
            <li class="breadcrumb-item active">Investment</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="">
                            <h4 class="m-0">Balance <i id="info-icon" class="fa fa-eye text-primary"
                                    style="cursor: pointer"></i></h4>
                            <h3 id="balance" class="m-0"><b class="m-0">${{ number_format($user->balance, 2) }}</b>
                            </h3>
                            <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>
            </div>
            <div class="col-lg-10 offset-lg-1 col-md-10 offset-md-1">
                <form action="{{ route('store.invest') }}" method="POST" class="row"> @csrf
                    <div class="col-lg-12">
                        <h3 class="text-center">Select Your Preffered Plan <span class="text-danger">*</span></h3>
                        <x-input-error :messages="$errors->get('plan_id')" class="mt-2 text-danger" />
                    </div>
                    @forelse ($plans as $item)
                    <label class="col-lg-4" for="plan_id{{ $item->id }}" style="cursor: pointer">
                        <div class="box card-shadowed">
                            <div class="text-center box-body">
                                <div class="btn-group">
                                    <input name="plan_id" type="radio" style="height: 25px; width: 25px"
                                        percentage-data="{{ $item->topup_value }}" duration-data="{{ $item->duration }}"
                                        value="{{ $item->id }}" id="plan_id{{ $item->id }}">
                                </div>
                                <span class="badge badge-{{ $item->status == 'active' ? 'success' : 'danger'  }}">{{
                                    Str::ucfirst($item->status) }}</span>
                                <h4 class="text-uppercase text-muted"><b>{{$item->name}} PLAN</b></h4>
                                <h3 class="price">
                                    @if($item->topup_type == 'percentage')
                                    <sup>%</sup>{{$item->topup_value}} <sup>{{$item->payment_interval}}</sup>
                                    @endif
                                    @if($item->topup_type == 'fixed')
                                    <sup>$</sup>{{$item->topup_value}} <sup>{{$item->payment_interval}}</sup>
                                    @endif
                                </h3>
                                <p>Minimum Amount: <strong>${{$item->min_amount}}</strong></p>
                                <p>Maximum Amount: <strong>${{$item->max_amount}}</strong></p>
                                <p>Plan Duration: <strong>{{$item->duration}} Day(s)</strong></p>
                                <p>Gift Bonus: <strong>${{$item->bonus}}</strong></p>
                                <p>Support: <strong>24x7</strong> </p>
                                <p>Plan Category: <strong>{{Str::ucfirst($item->category)}}</strong></p>
                            </div>
                        </div>
                    </label>
                    @empty
                    <div class="col-lg-12">
                        <p class="text-center alert alert-warning">No Plan Found</p>
                    </div>
                    @endforelse
                    <div class="mb-5 col-lg-12">
                        <label for="">Choose Quick Amount to Invest</label>
                        <div class="clearfix mb-5">
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="100">$100</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="250">$250</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="500">$500</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="1000">$1,000</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="1500">$1,500</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="2000">$2,000</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="5000">$5,000</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="7500">$7,500</button>
                            <button type="button" class="btn quick-click btn-outline btn-secondary"
                                data-amount="10000">$10,000</button>
                        </div>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label for="amount">Or Enter Amount<span class="text-danger">*</span></label>
                        <input type="number" class="form-control" name="amount" id="amount" placeholder="Enter Amount"
                            required>
                        <x-input-error :messages="$errors->get('amount')" class="mt-2 text-danger" />
                    </div>
                    <div class="col-lg-6 form-group">
                        <label for="method_id">Payment Option<span class="text-danger">*</span></label>
                        <select class="form-control" id="method_id" name="method_id" required disabled>
                            <option selected value="balance">Balance (${{ number_format($user->balance, 2) }})</option>
                            @forelse ($system_wallets as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @empty
                            <option value="">No Payment Option</option>
                            @endforelse
                        </select>
                        <x-input-error :messages="$errors->get('method_id')" class="mt-2 text-danger" />
                    </div>
                    <div class="col-lg-12">
                        <button class="btn btn-primary" type="submit">Proceed</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
<!-- /.content-wrapper -->
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
            // 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