@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection

@section('breadcrumb-title')
<h3>Withdraw</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Withdraw</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-12">
            <div class="card">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <label for=""><b>Account Type: </b></label><br>
                            <input type="radio" name="" id="" checked>
                            <label for="">Wallet</label>
                        </div>
                        <div class="col-md-12">
                            <label for=""><b>Wallet Number</b></label>

                            <input type="hidden" id="balance" value="{{$wallet->balance}}">
                            <input type="text" class="form-control" disabled value="{{!empty($wallet->wallet_no) ? $wallet->wallet_no :''}}">
                        </div>
                        @if (!empty($payment_gateways))
                        @foreach($payment_gateways as $payment_gateway)
                        @if ($payment_gateway->entity_title == 'Payoneer' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/payoneer.png') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Payeer' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/trans1.jpg') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Perfect Money' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/perfectmoney.png') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Skrill' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/skrill.png') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Neteller' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/neteller.png') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Card' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/credit-card.jfif') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @if ($payment_gateway->entity_title == 'Crypto' && empty($payment_gateway->entity_description))
                        <div class="col-md-3 col-6  mt-3">
                            <img src="{{ asset('assets/crypto-payments.png') }}" class="mt-3 banner-mb" alt="" height="110" width="180" style="border:2px solid #ced4da" onclick="show_modal('',)">
                        </div>
                        @endif
                        @endforeach
                        @endif
                        <div class="col-md-3 col-6  mt-3 p-t-15">
                            <a href="{{ route('client_payment_agents',['request_id'=>2])}}" class="btn btn-primary pt-0" style="padding-right: 22px;">
                                <h1>Payment Agents</h1>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 history">
            <div class="card">
                <div class="card-body" style="height: 60rem;">
                    <h3 class="his_heading">History</h3>
                    <button class="btn btn-primary btn-sm history_btn" style="margin-top: 40%;">History</button>
                    @if (!empty($data))
                    <div style="position: relative;top:17%;width: 100%;">
                        <ul>
                            <li class="sidebar-list" style="border: 2px solid grey;width: 100%;padding: 10px;border-left: 0px;border-right: 0px;">
                                <span>Amount</span>
                                <span style="margin-left: 25px;">Status</span>

                                <span class="f-right">Created At</span>
                            </li>
                            @foreach ($data as $row)
                            <li class="sidebar-list" style="border: 2px solid grey;width: 100%;padding: 10px;border-left: 0px;border-right: 0px;">
                                <span>${{$row->amount}}</span>
                                @if($row->status == 1)
                                <span class="badge" style="background-color:#607d8b;margin-left: 40px;">Processing</span>
                                @elseif($row->status == 2)
                                <span class="badge badge-warning" style="margin-left: 40px;">Pending</span>
                                @elseif($row->status == 3)
                                <span class="badge badge-success" style="margin-left: 40px;">Approve</span>
                                @elseif($row->status == 4)
                                <span class="badge badge-danger" style="margin-left: 40px;">Denied</span>
                                @endif
                                <span class="f-right">{{optional($row->created_at)->format('j M Y') ?? 'N/A'}}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    @else
                    <p style="text-align: center;margin-top: 100%;">No Withdraw History Found</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="add_amount" tabindex="-1" role="dialog" aria-labelledby="add_newLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add_newLabel"></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <form action="{{ route('create.payment_request') }}" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        @if (Auth::guard('client')->user()->verified != 2)
                        <div class="col-md-12 mb-2">
                            <p class="text-danger"><b>Please verify your documents first.</b></p>
                        </div>
                        @else
                        <div class="col-md-12 mb-2">
                            <p class="text-success"><b>Current Balance: <span id="current_balance">@if (!empty($wallet->amount))
                                        {{$wallet->amount}}
                                        @else
                                        0
                                        @endif
                                    </span></b></p>
                        </div>
                        @endif
                        <div id="gateway_data">
                            <!-- <div class="col-md-12 mb-2">
                            <label>Photo Upload</label>
                            <input type="file" name="meta_data[file]" class="form-control">
                        </div> -->
                        </div>
                        <div class="col-md-12 mb-2">
                            <label for="">Amount</label>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="request_type" id="req_type" value="2">
                            <input type="hidden" name="payment_method" id="payment_method">
                            <input type="hidden" name="user_id" value="">
                            <input type="number" name="amount" oninput="change_balance(this)" min="10"
                                @if (Auth::guard('client')->user()->verified != 2)
                            disabled
                            @endif
                            class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="submitBtn" type="submit"
                        @if (Auth::guard('client')->user()->verified != 2)
                        disabled
                        @endif
                        >Withdraw Now</button>
                    <button class="btn btn-danger" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var balance = 0;
    $(document).ready(function() {
        balance = $('#balance').val();
    })

    function change_balance(obj) {
        var val = $(obj).val();

        var remainingBalance = balance - val;
        $('#current_balance').html(remainingBalance)
        if (remainingBalance < 0) {
            $('#submitBtn').prop('disabled', true);
        } else {
            $('#submitBtn').prop('disabled', false);
        }
    }

    function show_modal(title, obj) {
        var html = '';
        if (balance > 0) {
            $('#current_balance').html(balance)
        } else {
            $('#current_balance').html(0)
        }
        if (obj == 17 || obj == 20 || obj == 21) {
            html = `<div class="col-md-12 mb-2">
                            <label>Account Holder Name</label>
                            <input type="text" name="meta_data[account_holder]" class="form-control alphaInput" required>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Email Address</label>
                            <input type="email" name="meta_data[email]" class="form-control" required>
                        </div>`
        } else if (obj == 18) {
            html = `<div class="col-md-12 mb-2">
                            <label>Account Holder Name</label>
                            <input type="text" name="meta_data[account_holder]" class="form-control alphaInput" required>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Account Number</label>
                            <input type="number" name="meta_data[account_number]" class="form-control custom-number-input" required>
                        </div>`
        } else if (obj == 19) {
            html = `<div class="col-md-12 mb-2">
                            <label>Account Holder Name</label>
                            <input type="text" name="meta_data[account_holder]" class="form-control alphaInput" required>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Account Number</label>
                            <input type="number" name="meta_data[account_number]" class="form-control custom-number-input" required>
                        </div>`
        } else if (obj == 22) {
            html = `<div class="col-md-12 mb-2">
                            <label>Account Holder Name</label>
                            <input type="text" name="meta_data[account_holder]" class="form-control alphaInput" required>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Account Number</label>
                            <input type="number" name="meta_data[account_number]" class="form-control custom-number-input" required>
                        </div>                        
                        <div class="col-md-12 mb-2">
                            <label>IBAN</label>
                            <input type="text" name="meta_data[i_b_a_n]" class="form-control" required>
                        </div>                        
                        <div class="col-md-12 mb-2">
                            <label>Bank Name</label>
                            <input type="text" name="meta_data[bank_name]" class="form-control alphaInput" required>
                        </div>                        
                        <div class="col-md-12 mb-2">
                            <label>Branch Code</label>
                            <input type="number" name="meta_data[branch_code]" class="form-control custom-number-input">
                        </div>`
        } else if (obj == 23) {
            html = `<div class="col-md-12 mb-2">
            <label>Payment Gateways</label>
                        <select name="meta_data[crypto_gateways]" class="form-control" id="" onchange="show_gateways(this)">
                        <option value="2">BTC</option>
                        <option value="">ETH</option>
                        <option value="">LTC</option>
                        <option value="">TRX</option>
                        <option value="1">USDT</option>
                        </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Address</label>
                            <input type="text" name="meta_data[address]" class="form-control" required>
                        </div>                        
                        <div class="col-md-12 mb-2">
                            <label>Blockchain / Network</label>
                            <select name="meta_data[blockchain_network]" id="blockchain" class="form-control">
                            <option value="1">TRC20</option>
                            <option value="2">ERC20</option>
                            </select>
                        </div>`
        }
        $('#add_amount input').each(function() {
            $(this).val('');
        });
        $('#gateway_data').html(html);
        $('#add_newLabel').text(title);
        $('#payment_method').val(obj);
        $('#req_type').val(2);
        $('input[name="user_id"]').val("{{ Auth::guard('client')->user()->id }}");
        $('input[name="_token"]').val($('meta[name="csrf-token"]').attr('content'));
        $('#add_amount').modal('show');
        $('.alphaInput').on('keypress', function(e) {
            let charCode = e.which || e.keyCode;
            if (!/[a-zA-Z\s]/.test(String.fromCharCode(charCode)) && charCode > 31) {
                e.preventDefault();
            }
        });
    }

    function show_gateways(obj) {
        var val = $(obj).val();
        var option_html = ''
        if (val == 1) {
            $('#blockchain').attr('disabled', false);
            option_html = `<option value="1">TRC20</option>
                            <option value="2">ERC20</option>`;
            $('#blockchain').html(option_html);
        } else if (val == 2) {
            $('#blockchain').attr('disabled', false);
            option_html = `<option value="3">Bitcoin</option>
                            <option value="2">ERC20</option>`;
            $('#blockchain').html(option_html);
        } else {
            $('#blockchain').attr('disabled', true);
            $('#blockchain').html('');
        }
    }
    $(document).ready(function() {
        var $withdrawInput = $('input[name="amount"]');

        $withdrawInput.on('input', function() {
            if (this.validity.rangeUnderflow) {
                this.setCustomValidity("Minimum Withdraw Limit is $10.");
            } else {
                this.setCustomValidity("");
            }
        });
    });
</script>
@endsection

@section('script')
<script src="{{ asset('assets/js/chart/apex-chart/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
<script src="{{ asset('assets/js/dashboard/default.js') }}"></script>
<script src="{{ asset('assets/js/notify/index.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.bundle.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.custom.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/typeahead-custom.js') }}"></script>
<script src="{{ asset('assets/js/height-equal.js') }}"></script>
<script src="{{ asset('assets/js/animation/wow/wow.min.js') }}"></script>
@endsection