@section('title', '- Buy eBits')

@extends('layouts.user-profile', [
    "withOutAside" => true,
    "include_alerts" => false,
    "includeLoader" => false
])

@section('section-body')

    {{-- Alerts --}}
    @include('alerts.success')

    @include('alerts.warning')
    {{-- End Alerts --}}

    @include('loader')

    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
    <div class="panel-content p-0">

        {{-- Title --}}
        <h2>@lang('ebit.title_buy_ebits')</h2>
        <br>

        {{-- Options container --}}
        <div class="col-md-12 row p-0">
            <legend class="subtitle">
                @lang('ebit.info_msg1') <a href="#" id="show_video_deposit">@lang('ebit.ingo_msg1_link')</a>
            </legend>

            <div class="col-12 no-padding">
                <div style="display:flex;justify-content: center; margin-bottom: 1rem">
                    <div>
                        <label for="exampleInputAmount">
                            <b>@lang('ebit.amount')</b>
                            <span class="small_text">
                                **(how many ebits do you want to receive in your account?)
                            </span>
                        </label>

                        {{-- Input ebits amount --}}
                        <div class="form-group">
                            <div class="input-group amount-mask">
                                <input type="text" class="form-control int-masked" id="amount" placeholder="0.00">
                                <div class="input-group-addon addon-right">eBits</div>
                            </div>
                        </div>
                        {{-- End input ebits amount --}}
                    </div>
                </div>
            </div>

            {{-- OPTION TABS --}}
            <div class="row justify-content-center">
                {{-- Electronic transfer --}}
                <div class="col-6 col-md-4">
                    <div class="ellipse-active payment_type" id="transfer-ellipse">
                        <a class="btn-tab" href="#transfer" aria-controls="transfer" role="tab" data-toggle="tab">
                            <img src="{{ url('/imagenes/ebits-pay/zelle.png') }}"
                                 class="img-responsive center-block img-tab" alt="">
                        </a>
                    </div>
                    <p class="text-center h5">@lang('ebit.transfer')</p>
                </div>
                {{-- End electronic transfer --}}

                {{-- Cryptocurrency --}}
                <div class="col-6 col-md-4">
                    <div class="payment_type" id="criptos-ellipse">
                        <a class="btn-tab" href="#criptos" aria-controls="criptos" role="tab" data-toggle="tab">
                            <img src="{{ url('/imagenes/ebits-pay/bitcoin.png') }}"
                                 class="img-responsive center-block img-tab" alt="">
                        </a>
                    </div>
                    <p class="text-center h5">@lang('ebit.criptos')</p>
                </div>
                {{-- End cryptocurrency --}}

                {{-- Stripe --}}
                <div class="col-6 col-md-4">
                    <div class="payment_type" id="stripe-ellipse">
                        <a class="btn-tab" href="#stripe" aria-controls="stripe" role="tab" data-toggle="tab">
                            <img src="{{ url('/imagenes/ebits-pay/debit-card.png') }}"
                                 class="img-responsive center-block img-tab">
                        </a>
                    </div>
                    <p class="text-center h5">Buy with Debit/Credit card</p>
                </div>
                {{-- End Stripe --}}

                {{-- Plaid --}}
                {{-- <div class="col-md-2 col-sm-6">
                                <div class="payment_type" id="plaid-ellipse">
                                    <a class="btn-tab tab-bank-account plaid-active" href="#plaid" aria-controls="plaid" role="tab" data-toggle="tab">
                                        <img src="{{ url('/imagenes/ebits-pay/bank.png') }}"
                                            class="img-responsive center-block img-tab">
                                    </a>
                                </div>
                                <p class="text-center h5">Buy with bank transfer</p>
                            </div> --}}
                {{-- End Plaid --}}
            </div>

            {{-- END OPTION TABS --}}

        </div>
        {{-- End option tabs container --}}

        <hr>

        {{-- Dynamic tab content container --}}
        <div class="tab-content">
            {{-- File transfer tab --}}
            <div class="tab-pane container-fluid active px-0 px-md-3" role="tabpanel" id="transfer">
                <div class="row">
                    <div class="col-md-12" id='data-transfer'>
                        <div class="row justify-content-center align-content-center">
                            <div class="col-md-4">
                                <label>@lang('profile.date')</label>
                                <br>
                                <input type="text" class="form-control datepicker validation"
                                       style="width:75%; display: inline; margin-right: 15px;" name=""
                                       id="transaction_date" value="">
                                <span class="error-span" style="display: none">
                                </span>
                            </div>
                            <div class="col-md-4">
                                <label for="">@lang('ebit.transfer_number')</label>
                                <input type="text" class="form-control reference-trans validation" name=""
                                       id="transaction_code" value="">
                                <span class="error-span" style="display: none">
                                </span>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">@lang('ebit.origin_bank')</label>
                                    <select class="form-control origin-trans-bank" name="" id="bank_origin_id">
                                        <option value="">Select bank</option>
                                        @foreach ($banks as $bank)
                                            <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="error-span" style="display: none">
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="">@lang('ebit.person')</label>
                                <input type="text" class="form-control from-trans-bank">
                            </div>
                            <div class="col-md-8 d-flex align-items-end justify-content-center">
                                <div id="img-transfer" class="trans-0-3 mt-3 mt-md-0">
                                    <button type="button" class="btn btn-ebit btn-sm btn-img-add">
                                        @lang('ebit.trans-file')
                                    </button>
                                </div>
                                <div class="w-100 m-auto trans-0-3" style="display: none" id='file-transfer'>
                                    <label for="">@lang('ebit.trans-file')</label>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input type="file" name="" class='form-control input-dim-2'
                                                   id='input-file-trans' value="">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button"
                                                    class="btn btn-outline-danger btn-block btn-danger right btn-sm btn-img-cancel mt-md-2 rounded">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-ebit center-block process" id="" data-mode='data'
                                        data-type="trans"
                                        data-loading-text='Cargando <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'
                                        name="button" disabled>
                                    @lang('ebit.proccess_buy')
                                </button>
                            </div>
                        </div>
                        <br>
                    </div>

                    <div class="col-md-12">
                        <br>
                        <div class="col-md-12">
                            <legend class="subtitle">
                                @lang('ebit.info_msg5')
                                <a href="#" id="sendaccounts">@lang('ebit.info_msg5_link')</a>
                            </legend>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End filetransfer tab --}}

            {{-- Cryptocurrency tab --}}
            <div class="tab-pane  container-fluid" role="tabpanel" id="criptos">

                <div class="row">
                    <div class="col-md-12">
                        <h5 for="">@lang('ebit.title_ebit_pay')</h5>
                    </div>
                    <hr>
                    <ol class="list_cripto">
                        @foreach ($currencies as $curr)
                            @if ($curr->allow_transaction == 1)
                                <li class="cripto_select" value="{{ $curr->id }}" data-price="{{ $curr->buy_value }}">
                                    <div class="col-md-6 cripto_data">
                                        <img src="{{ $curr->crypto_icon }}" class="cripto_icon"
                                             itle="{{ $curr->name }}"/>
                                        <img src="{{ $curr->wallet_qr }}" class="img-responsive cripto_qr"
                                             alt="{{ $curr->name }}" title="{{ $curr->name }}">
                                        <p><b>Purchase Price: {{ $curr->buy_value }}</b></p>
                                        <p class="hidden-xs"><b>Address: {{ $curr->wallet_url }}</b></p>
                                    </div>
                                </li>
                            @endif
                        @endforeach
                    </ol>

                    <br/>
                    <hr>
                    <div class="col-md-12">
                        <h5 for="">@lang('ebit.title_ebit_pay_2')</h5>
                        <hr>
                        <div class="col-md-6">
                            <label for="">@lang('ebit.amountcripto')</label>
                            <input type="number" class="form-control" id="amountcripto" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="">Transaction Code</label>
                            <input type="text" class="form-control" id="whosend">
                        </div>
                        <br>
                        <hr>
                        <div class="col-md-12">
                            <button type="button" class="btn btn-ebit center-block process" data-mode='data'
                                    data-type="cripto"
                                    data-loading-text='Loading <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'
                                    name="button">
                                @lang('ebit.proccess_buy')
                            </button>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <br>
                        <div class="col-md-12">
                            <legend class="subtitle">
                                @lang('ebit.info_msg5')
                                <a href="#" id="sendaccounts">@lang('ebit.info_msg5_link')</a>
                            </legend>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End cryptocurrency tab --}}

            {{-- Stripe tab --}}
            <div class="tab-pane container-fluid" role="tabpanel" id="stripe">
                @include('sections.payment-partials.stripe-payment')
                <br><br><br><br>
                <div class="alert alert-success">
                    Ebit Market Corp accept more than 100 currencies.
                    <a href="{{ route('availables') }}" target="_blank">
                        Check if your currency is available
                    </a>
                </div>
            </div>
            {{-- End stripe tab --}}

            {{-- Plaid tab --}}
            {{-- <div class="tab-pane container-fluid" role="tabpanel" id="plaid">
                            @include('sections.payment-partials.plaid-payment')
                        </div> --}}
            {{-- End Plaid tab --}}
        </div>
        {{-- End dynamic tab container --}}

    </div>
    {{-- Modal viedo --}}
    <div class="modal fade" id="modal-video" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <iframe width="100%" height="350" src="#" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    {{-- End Modal video --}}
@endsection

@push('css')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{{ url('/components/bootstrap-fileinput/css/fileinput.min.css') }}">
    <style media="screen">
        .addon-left {
            border-radius: 15px 0px 0px 15px;
        }

        .addon-right {
            border-radius: 0px 15px 15px 0px;
        }

        .img-tab {
            max-height: 50px !important;
        }

    </style>
@endpush

{{--  --}}
@push('js')
    {{-- Variables js --}}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{ url('/components/bootstrap-fileinput/js/plugins/purify.min.js') }}"></script>
    <script src="{{ url('/components/bootstrap-fileinput/js/fileinput.min.js') }}"></script>
    <script src="{{ url('/components/bootstrap-fileinput/js/plugins/piexif.min.js') }}"></script>
    <script src="{{ url('/components/bootstrap-fileinput/js/plugins/sortable.min.js') }}"></script>
    <script src="{{ url('/js/jquery.mask.js') }}" charset="utf-8"></script>
    <script src="{{ url('/js/jquery.creditCardValidator.js') }}" charset="utf-8"></script>

    {{-- Main js for buy ebits page --}}
    <script src="{{ url('/js/buy-ebits.js') }}"></script>
@endpush