@extends('layouts.user.base')

@section('page-title')
    Plans
@endsection

@php
    $crypto = request()->query('crypto');
    $amount = request()->query('amount');
    $cval = request()->query('cval');
    $payout_option_id = request()->query('payout_option_id');
    $wallet = App\Models\Wallet\SystemWallet::where('status', '<>', App\Models\Wallet\SystemWallet::deleted)->where('status', App\Models\Wallet\SystemWallet::active)->where('cryptocurrency', $crypto)->first();
    $wallet_address = $wallet->address;
@endphp

@section('content')
<div class="row">
    <div class="col mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="row d-flex">
            <div class="col-md-6 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                <div class="card card-bg border-0">
                    <div class="card-body">
                        <form id="completebuyplanform" method="POST" action="{{ route('user_purchase_plan') }}">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                            <input type="hidden" name="crypto" value="{{ $crypto }}">
                            <input type="hidden" name="amount" value="{{ $amount }}">
                            <input type="hidden" name="crypto_amount" value="{{ $cval }}">
                            <input type="hidden" name="payout_option_id" value="{{ $payout_option_id }}">
                            <input type="hidden" name="system_wallet_id" value="{{ $wallet->id }}">

                            <div class="row">
                                <div class="col-12 col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div>
                                        <div class="d-flex justify-content-center mb-3 mt-3">
                                            <div class="spinner-border text-dark spinner-border-sm mt-1" role="status">
                                                <span class="visually-hidden"></span>
                                            </div>
                                            <p class="ms-2 mb-0">Awaiting Payment</p>
                                        </div>
                                    </div>
                                    <div class="text-center"><img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ strtolower($crypto) }}:{{ $wallet_address }}?amount={{ $cval }}" />
                                        <p class="mt-3">To complete your payment please send<span class="text-green"></span>&nbsp;<span >{{ $crypto }}</span>&nbsp;to the wallet address below.</p>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div><label class="form-label align" for="ref">Wallet Address</label>
                                        <div class="input-group"><input id="ref" class="form-control me-2" type="text" value="{{ $wallet_address }}" onclick="this.select()" readonly /><a class="alt-btn" x-on:click="copy1()">Copy</a></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div>
                                        <div class="form-check">
                                            <input onclick="pmade(this)" required class="form-check-input custom-checkbox"
                                                type="checkbox" id="paymentConfirm" x-model="show"><label
                                                class="form-check-label" for="paymentConfirm">I have
                                                made payment<svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                                    height="1em" fill="currentColor" viewBox="0 0 16 16"
                                                    class="bi bi-question-circle ms-1" data-bs-toggle="tooltip"
                                                    data-bss-tooltip="" data-bs-placement="right"
                                                    title="Check this box if you have made payment to the wallet address above">
                                                    <path
                                                        d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
                                                    </path>
                                                    <path
                                                        d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z">
                                                    </path>
                                                </svg></label></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div class="thash d-none">
                                        <label class="form-label align" for="hashBox">Transaction Hash</label>
                                        <textarea name="transaction_hash" required class="form-control" id="hashBox"></textarea>
                                        <small class="form-text"></small>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div>
                                        <div class="form-group mb-3"><button class="btn btn-primary" type="submit">Confirm Payment</button></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
   
<script>
    function pmade(el) {
        if ($(el).prop('checked')){
            $(".thash").removeClass('d-none')
        } else {
            $(".thash").addClass('d-none')
        }
    }
</script>
@endsection