@extends('layouts.master')
@section('title', __('Bonus Purchase Pool'))

@push('styles')
<link href="{{ asset('frontend/styles/css/deposit-index.css') }}" rel="stylesheet">
<style>
    #progressbar li::before,strong{
        display: flex;
        justify-content: center;
    }
</style>
@endpush

@section("breadcrumb-text")
    <div class="d-flex justify-content-between w-100">
        <h1>{{ __("Bonus Purchase Pool") }}</h1>
    </div>
@endsection

@section("content")
@if($kycStatus != "approved" || $isEnable2fa == false)
    <div class="card w-50 m-auto">
        <div class="card-body">
            <div id="notice-section">
                <h4 class="test-left">{{ __("Bonus purchase pool is disabled for your account")}}</h4>
                <h6 class="test-left">{{ __("Please ensure the following requirements are met:")}}</h6>
                <ul>
                    @if($kycStatus != "approved")
                        <li>{{ __("Please complete your KYC/KYB to enable bonus purchase pool. Click ")}}<a href="{{ url('member/identity-verification') }}" class="fw-bold">{{ __("here")}}</a>{{ __(" to start the process.")}}</li>
                    @endif
                    @if($isEnable2fa == false)
                        <li>{{ __("Please enable authenticator 2FA from your security for bonus purchase pool.")}}</li>
                    @endif
                </ul>
                {{ __("Please complete the necessary steps to enable bonus purchase pool.")}}
            </div>
        </div>
    </div>
@else
    <div class="card p-0">
        <div class="card-body bonus-purchase-pool">
            <!-- progressbar -->
            <ul id="progressbar" class="ps-0 w-100 d-flex justify-content-center progressbar-bonus-purchase-pool-form">
                <li style="width:20%" id="guideline" class="active"><strong>{{__('Guidelines') }}</strong></li>
                <li style="width:20%" id="select_amount"><strong>{{__('Select Amount') }}</strong></li>
                <li style="width:20%" id="details"><strong>{{__('Confirm details') }}</strong></li>
                <li style="width:20%" id="security"><strong>{{__('Security Code') }}</strong></li>
                <li style="width:20%" id="confirmation"><strong>{{__('Confirmation') }}</strong></li>
            </ul>
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-12 text-center mb-2">
                            <div class=" px-0 pb-0 mb-3">
                                <form action="{{ route('member.bonus-purchase-pool.bonusPurchasePoolStore') }}"  method="POST" id="bonusPurchasePoolForm" onkeydown="return event.key != 'Enter';">
                                    <fieldset>
                                        <div class="form-card px-md-0 mb-2">
                                            <input type="hidden" name="user_balance" value="{{ $walletBalance }}" id="userBalance">
                                            <input type="hidden" name="reference_no" value="{{ $referenceNo }}" id="referenceNo">
                                            <input type="hidden" name="application_date" value="{{ $applicationDate }}" id="applicationDate">
                                            <div class="row">
                                                <div class="col-2"></div>
                                                <div class="col-sm-8  pt-24">
                                                    <h4 class="text-left"><span class="currency_desc"></span> {{ __("Bonus Purchase Pool Guidelines") }}</h4>
                                                    <ul class="bonus-purchase-pool-guidance">
                                                        <li>{{ __("The CSR purchase pool is a managed CSR purchase facility. When you enter a Purchase Pool your Bonus funds are combined with the funds of other members and managed by a company appointed Pool Manager.") }}</li>
                                                        <li>{{ __("Purchase Pool applications are not eligible for any on-going promotions and are not scheduled for weekly or monthly delivery schedule.") }}</li>
                                                        <li>{{ __("The Pool Manager will use best endeavours to purchase as many CSR tokens up to the value of the purchase pool (taking into account trading and network fees).") }}</li>
                                                        <li>{{ __("Pool Manager does not take a fee for the process.") }}</li>
                                                        <li>{{ __("The Pool Manager will close the pool when there are sufficient members and/or Euros in the pool.") }}</li>
                                                        <li>{{ __("Once the pool has closed, delivery will be scheduled and, your pro-rata portion of the CSR purchased by the Pool Manager will be delivered to your CSR Central wallet.") }}</li>
                                                        <li>{{ __("Whilst the Pool Manager will progress the deliveries as quickly as practical, there is no set timeframe for completion of the delivery process.") }}</li>
                                                    </ul>
                                                </div>
                                                <div class="col-2"></div>
                                            </div>
                                        </div>
                                        <button name="next" class="next btn btn-primary action-button mt-0" type="button">{!! renderIconHtml('approve') !!} I Understand</button>
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card px-md-0 mb-2">
                                            <div class="row">
                                                <div class="col-2"></div>
                                                <div class="col-sm-8  pt-24">
                                                <div class="row">
                                                    <div class="form-group col-12 col-md-12">
                                                        <div class="relative z-0 w-full group mb-1">
                                                            <input type="text" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 amount-validation" placeholder="" name="amount" id="amount" data-character-limit="10">
                                                            <label for="amount" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Amount')}} <span class="text-danger">*</span></label>
                                                            <span class="amount_error error"></span>
                                                        </div>
                                                    </div>

                                                        <div class="w-full">
                                                            <div class="amount-calculate">
                                                                <input type="button" class="btn btn-primary btn-sm" value="25%" onclick="calculatePercentage(25)">
                                                                <input type="button" class="btn btn-primary btn-sm" value="50%" onclick="calculatePercentage(50)">
                                                                <input type="button" class="btn btn-primary btn-sm" value="75%" onclick="calculatePercentage(75)">
                                                                <input type="button" class="btn btn-primary btn-sm" value="100%" onclick="calculatePercentage(100)">
                                                            </div>
                                                            <span class="available-balance fw-bold">{{__('Available Balance')}} : {{formatDisplayNumber($walletBalance,2)}}</span>
                                                        </div>
                                                </div>
                                                </div>
                                                <div class="col-2"></div>
                                            </div>
                                        </div>
                                        <button name="previous" class="previous btn btn-primary action-button-previous btn-primary mt-0" type="button">{!! renderIconHtml('previous') !!} Previous</button>
                                        <button name="next" class="next btn btn-primary action-button step_1_next_btn mt-0" type="button">{!! renderIconHtml('next') !!} Next</button>
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card px-md-0 mb-2">
                                            <div class="row">
                                                <div class="col-2"></div>
                                                <div class="col-sm-8  pt-24">
                                                    <p>{{ __("You are submitting a Bonus Purchase Pool application.
                                                        The requested amount will be deducted from your Bonus Wallet.") }}</p>
                                                    <h5>{{ __('Bonus Purchase Pool Details:') }}</h5>
                                                    <span class="fw-bold">{{ __('Requested Amount') }} : </span><span class="request_amount"></span><br>
                                                    <span class="fw-bold">{{ __('Application Date') }} : </span><span class="application_date">{{$applicationDate}}</span><br>
                                                    <span class="fw-bold">{{ __('Reference Number') }} : </span><span class="reference_no">{{$referenceNo}}</span>
                                                    <div class="d-flex align-middle justify-between mt-4 txt-titles mflex-wraps">
                                                        <input id="confirm" type="checkbox" name="confirm" class="w-4 h-4 text-amber-900-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-ring-yellow-950  dark:bg-gray-700 dark:border-gray-600 mt-2">
                                                        <div class="flex items-center w-100 mt-1">
                                                            <label for="confirm" class="ms-2 confirm-txt">{{ __('I confirm my participation in the Bonus Purchase Pool application.') }}</label>
                                                    </div>
                                                    </div>
                                                    <div class="error confirm_error"></div>
                                                </div>
                                                <div class="col-2"></div>
                                            </div>
                                        </div>
                                        <button name="previous" class="previous btn btn-primary action-button-previous btn-primary mt-0" type="button">{!! renderIconHtml('previous') !!} Previous</button>
                                        <button name="next" class="next btn btn-primary action-button mt-0 step_3_next_btn" type="button">{!! renderIconHtml('next') !!} Next</button>
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card px-md-0 mb-2">
                                            <div class="row">
                                                <div class="row"  id="bonusPurchase2FaFormDiv">
                                                    <div class="col-sm-4"></div>
                                                    <div class="col-sm-4 pt-24  bonus-purchase-2fa-validate">
                                                            @if ((!empty(Auth::user()->setting->fa_setting) && in_array('bonus_purchase_pool', Auth::user()->setting->fa_setting)) || !empty(Auth::user()->setting->fa3_setting) && in_array('bonus_purchase_pool', Auth::user()->setting->fa3_setting))
                                                                @include('frontend.auth.2fa-3fa-validate-form',[
                                                                    'nextSubmittedFormId' => "bonusPurchasePoolForm",
                                                                    'cancelBtnHtml' =>'<button type="button" class="previous action-button-previous btn btn-primary mt-0 w-100">'.renderIconHtml('previous').'Previous</button>',
                                                                    'type' => 'bonus_purchase_pool'
                                                                ])
                                                            @endif
                                                    </div>
                                                    <div class="col-sm-4"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card px-md-0 mb-2">
                                            <div class="row justify-content-center">
                                                <div class="col-3"></div>
                                                <div class="col-sm-6 pt-24">
                                                    <div class="text-center d-flex justify-content-center flex-column">
                                                        <img class="mx-auto" src="{{ asset('frontend/images/checkbox.svg') }}" width="100" height="100"/>
                                                        <h5>{{ __("Thank you for your CSR withdrawal request!") }}</h5>
                                                        <p>{{ __("Your Bonus Purchase Pool application has been received.") }}</p>
                                                        <div class="application-summary text-left">
                                                            <h4 class="text-center">{{ __("Application Summary") }}</h4>
                                                            <p class="m-1"><span class="fw-bold">{{__('Requested Amount')}}</span> : <span class="request_amount"></span></p>
                                                            <p class="m-1"><span class="fw-bold">{{__('Application Date')}}</span> : <span class="application_date">{{$applicationDate}}</span></p>
                                                            <p class="m-1"><span class="fw-bold">{{__('Reference Number')}}</span> : <span class="reference_no">{{$referenceNo}}</span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-3"></div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
<!-- End Featured Services Section -->
@endsection
@push('scripts')
<script>
    let min_withdrawal = "{{getSiteSettings('min_withdrawal')}}";
</script>
<script src="{{ asset('frontend/js/page-js/bonus-purchase-pool.js') }}"></script>
@endpush