@extends('template.coin.layouts.base')

@section('title', __('Deposits'))

@section('css')
<style>
.pcoded[layout-type="dark"] .card-white{
background-color:#fff !important;
color: #000;
}
.guttar-15px {
    margin-left: -7.5px !important;
    margin-right: -7.5px !important;
}
.card-title {
    color: #342d6e;
    font-size: 1.3em;
    font-weight: 500;
    margin: 0;
}
.content-area .card-head {
    padding-bottom: 10px;
}


}
.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}

.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}
.token-calc {
    display: flex;
    padding-bottom: 10px;
}
.token-pay-amount {
    position: relative;
    align-self: center;
    width: 140px;
}

.input-bordered {
    border-radius: 4px;
    border: 1px solid #d2dde9;
    width: 100%;
    padding: 10px 15px;
    line-height: 20px;
    font-size: 0.9em;
    color: rgba(73, 84, 99, 0.7);
    transition: all 0.4s;
}

.input-with-hint {
    padding-right: 70px;
}
.token-pay-currency {
    position: absolute;
    right: 0;
    top: 9px;
    transform: translate(0);
    z-index: 1;
    padding: 0 10px;
    border-left: 1px solid #d2dde9;
}
.token-pay-currency .input-hint {
    position: static;
    border: 0;
    padding: 2px;
    font-size: 0.8em;
}
.ucap {
    text-transform: uppercase;
}
.pay-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 11px 0;
}
.btn-primary {
    background: #14013e;
    border-color: #14013e;
}
.mgt-1-5x {
    margin-top: 15px;
}

.font-mid {
    font-weight: 500;
}
.modal-content {
  position: relative;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0px 10px 55px 0px rgba(0, 0, 0, 0.2);
  border: 0;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: inline-block;
}
.modal-close .ti {
  font-size: 13px;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  color: #495463;
  text-shadow: none;
  display: block;
  transition: all 0.4s;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 576px) {
  .modal-dialog {
    margin: 35px auto;
  }
  .modal-dialog-sm {
    min-width: 500px;
  }
  .modal-dialog-md {
    min-width: 90%;
  }
  .modal-dialog-lg {
    min-width: 540px;
  }
  .modal-dialog-bottom {
    min-height: calc(100% - (1.75rem * 2));
  }
}
@media (min-width: 768px) {
  .modal-dialog-md {
    min-width: 620px;
  }
  .modal-dialog-lg {
    min-width: 740px;
  }
  .modal-close {
    top: -22px;
    right: -22px;
  }
  .modal-close .ti {
    font-size: 20px;
    height: 44px;
    width: 44px;
    line-height: 44px;
  }
}
@media (min-width: 992px) {
  .modal-dialog-lg {
    min-width: 880px;
  }
}

.popup-header {
  padding: 10px 18px 25px;
  border-bottom: 1px solid #e6effb;
}
.popup-body {
  padding: 15px 20px 16px;
  font-size: 13px;
}
.popup-body-innr {
  padding-left: 18px;
  padding-right: 18px;
}
.popup-body-full {
  padding-left: 0;
  padding-right: 0;
}
.popup-body-lg {
  padding: 14px 18px 7px;
}
.popup-body p {
  font-weight: 400;
}
.popup-body .lead strong,
.popup-body .lead span {
  color: #5e55b8;
}
.popup-body form:last-child {
  margin-bottom: 0;
}
.popup-body .copy-address {
  font-size: 13px;
}
.popup-title {
  color: #342d6e;
  font-weight: 500;
  padding-right: 40px;
  margin-bottom: 12px;
  font-size: 1.3em;
}
.popup-title .ti {
  font-size: 70%;
  color: #6e81a9;
}
.popup-title small {
  color: #758698;
}
.popup-title-action {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: 2px;
  transform: translateY(-50%);
}
.popup-subtitle {
  text-transform: uppercase;
  font-weight: 500;
  color: #6e81a9;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  font-size: 12px;
  margin-bottom: 10px;
}
.popup-subtitle-s2 {
  color: #495463;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}
.popup-footer {
  padding: 15px 18px 0;
}
@media (min-width: 480px) {
  .popup-title-action {
    margin-top: 0;
  }
  .popup-header {
    padding: 30px 40px 25px;
  }
  .popup-body {
    padding: 34px 45px 38px;
  }
  .popup-body-innr {
    padding-left: 40px;
    padding-right: 40px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body-md {
    padding: 30px 30px 34px;
  }
  .popup-footer {
    padding: 30px 40px;
  }
}
@media (min-width: 768px) {
  .popup-body {
    font-size: 14px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body .copy-address {
    font-size: 13px;
  }
}
.guttar-12px {
    margin-left: -6px !important;
    margin-right: -6px !important;
}
.guttar-12px > li, .guttar-12px > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.pay-list {
    display: flex;
    flex-wrap: wrap;
}
.popup-body .lead strong, .popup-body .lead span {
    color: #5e55b8;
}
.popup-body p {
    font-weight: 400;
}
.mgb-1-5x {
    margin-bottom: 15px;
}
.text-light {
    color: #758698 !important;
}
.font-italic {
    font-style: italic!important;
}
.pay-option-label {
  width: 100%;
  background: #e6effb;
  border: 2px solid #e6effb;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
  margin-bottom: 15px;
}
.pay-option-label:after {
  position: absolute;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #7668fe;
  content: "";
  top: 0;
  right: -5px;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
}
.pay-option-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-option-check:checked ~ label {
  border-color: #7668fe;
}
.pay-option-check:checked ~ label:after {
  transform: translate(-50%, -50%) scale(1);
}
.pay-list {
  display: flex;
  flex-wrap: wrap;
}
.pay-item {
  width: 100%;
}
.pay-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-check-label {
  position: relative;
  padding: 15px 50px 15px 46px;
  border: 1px solid #d2dde9;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
  height: calc(100% - 8px);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
}
.pay-check-label:before {
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid #d2dde9;
  content: "";
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s ease;
}
.pay-check-label:after {
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #7668fe;
  content: "";
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s ease;
}
.pay-check-text {
  font-weight: 700;
  font-size: 13px;
  color: #495463;
}
.pay-check-img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 24px;
}
.pay-check.error ~ .error {
  position: absolute;
  right: 8px;
  top: -26px;
  bottom: auto;
  background: #ff6868 !important;
  color: #fff !important;
  font-size: 11px;
  line-height: 18px;
  padding: 2px 10px;
  border-radius: 2px;
  transform: translate(0, 0);
}
.pay-check.error ~ .error:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid #ff6868;
  border-bottom: 5px solid transparent;
  bottom: -5px;
  right: 6px;
}
.pay-check.error ~ .error:before {
  display: none;
}
.pay-check:checked ~ label {
  border-color: #7668fe;
}
.pay-check:checked ~ label:before {
  border-color: #7668fe;
}
.pay-check:checked ~ label:after {
  opacity: 1;
}
.pay-amount {
  display: block;
}
.pay-icon {
  padding-right: 10px;
  font-size: 11px;
  line-height: 30px;
  width: 40px;
  text-align: center;
}
.pay-icon.cf-ltc {
  font-size: 18px;
}
.pay-icon.ikon {
  font-size: 30px;
}
.pay-icon.ikon:before {
  margin-left: -5px;
  margin-right: -5px;
}
.pay-title {
  display: inline-flex;
  align-items: center;
}
.pay-cur {
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
}
.pay-info-list li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pay-info-list li span {
  color: #758698;
}
.pay-status .ti {
  display: inline-block;
  height: 90px;
  width: 90px;
  line-height: 82px;
  text-align: center;
  border: 2px solid;
  border-radius: 50%;
  font-size: 36px;
}
.pay-status-success .ti {
  border-color: #00d285;
  color: #00d285;
}
.pay-status-warning .ti {
  border-color: #ffc100;
  color: #ffc100;
}
.pay-status-error .ti {
  border-color: #ff6868;
  color: #ff6868;
}
.pay-button {
  width: 100%;
  padding: 10px 0;
}
.pay-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 0;
}
.pay-button:first-child {
  padding-left: 0;
}
.pay-button:last-child {
  padding-right: 0;
}
.pay-button-sap {
  width: 100%;
  text-align: center;
  font-weight: 500;
  color: #758698;
  text-transform: uppercase;
}
.pay-notes {
  margin-top: 14px;
  padding-top: 30px;
  border-top: 1px solid #eef2f8;
  line-height: 1.5;
  padding-bottom: 5px;
}
@media (min-width: 480px) {
  .pay-option-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
  }
}
@media (min-width: 620px) {
  .pay-item {
    width: 50%;
  }
  .pay-item:only-child {
    width: 100%;
  }
  .pay-item:last-child:not(:nth-child(even)) {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .pay-button {
    width: auto;
    padding: 10px 20px;
  }
  .pay-button:first-child {
    padding-left: 0;
  }
  .pay-button:last-child {
    padding-right: 0;
  }
  .pay-button-sap {
    width: auto;
  }
}
select {
    width: 100%;
    line-height: 20px;
    padding: 10px 20px 10px 15px;
    border: none;
    border-radius: 4px;
    height: 42px !important;
    font-size: 14px;
    color: #6e81a9;
    border-radius: 4px;
    border: 1px solid #d2dde9;
    background: transparent;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
</style>
@section('content')
<div class="page-header card">
                              <div class="row align-items-end">
                                  <div class="col-lg-8">
                                      <div class="page-header-title">
                                          <i class="feather icon-credit-card bg-c-blue"></i>
                                          <div class="d-inline">
                                              <h5>Deposit</h5>
                                             
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-lg-4">
                                      <div class="page-header-breadcrumb">
                                          <ul class=" breadcrumb breadcrumb-title">
                                              <li class="breadcrumb-item">
                                                  <a href="/dashboard"><i class="feather icon-home"></i></a>
                                              </li>
                                             
                                              <li class="breadcrumb-item">
                                                  <a href="#">Deposit</a>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          
                           <div class="pcoded-inner-content">
                        <!-- Main-body start -->
                        <div class="main-body">
                            <div class="page-wrapper">
                                <!-- Page-body start -->
                                <div class="page-body">
                                    <div class="row d-flex justify-content-center">
                                       <div class="col-md-8 ">
                                           
                                           <div class="content-area card card-white">
                    <div class="card-innr">
                        <form action="javascript:void(0)" method="post" class="" id="token_purchase">
                            @csrf
                            <div class="card-head">
                                <h4 class="card-title">
                                    Choose payment method and enter amount
                                </h4>
                                 @if(Session::has('errmessage'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
  {{Session::get('errmessage')}}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
                            </div>
                            <div class="card-text">
                                <p>You can pay using the below payment choose.</p>
                            </div>
                             
                            <div class="token-currency-choose payment-list">
                                <div class="row guttar-15px">
                                    @if(!empty($pmethods))
                                    @foreach($pmethods as $pmethod)
                                    <div class="col-6">
                                        <div class="payment-item pay-option">
                                            <input class="pay-option-check pay-method" type="radio" id="pay{{$pmethod->symbol}}" name="paymethod" value="{{$pmethod->id}}"  />
                                            <label class="pay-option-label" for="pay{{$pmethod->symbol}}">
                                                <span class="pay-title">
                                                    <em class="pay-icon">{{$pmethod->symbol}}</em>
                                                    <span class="pay-cur">{{$pmethod->name}}</span>
                                                </span>
                                                <span class="pay-amount">{{number_format($pmethod->min_deposit,2,'.',',')}} Min</span>
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                            
                            <div class="card-head">
                                <h4 class="card-title">Wallet</h4>
                                <p id="err_text" style="color:red"></p>
                            </div>
                            <div class="card-text">
                                <p>select the account you would like to depost into.</p>
                            </div>
                            <div class="token-contribute">
                                <div class="token-calc">
                                    <div class="token-pay-amount payment-get" style="width:350px">
                                        <select name="wid" required>
                                            @if($wallets->isNotEmpty())
                                            @foreach($wallets as $wallet)
                                            <option value="{{$wallet->id}}">
                                                
                                                {{$wallet->dwallet()->wallet_name}} Account <small>({{$wallet->sym}})</small>  / {{number_format($wallet->balance,2,'.',',')}} {{system_settings('currency')}}
                                            </option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                   
                                </div>

                                
                            </div>
                            
                            <div class="card-head">
                                <h4 class="card-title">Amount</h4>
                                <p id="err_text" style="color:red"></p>
                            </div>
                            <div class="card-text">
                                <p>Enter the amount you would like to depost in {{system_settings('currency')}}.</p>
                            </div>
                            <div class="token-contribute">
                                <div class="token-calc">
                                    <div class="token-pay-amount payment-get">
                                        <input class="input-bordered input-with-hint token-number" type="text" id="token-number" name="amt" value="" min="1" max="1000000000" />
                                        <div class="token-pay-currency"><span class="input-hint input-hint-sap payment-get-cur payment-cal-cur ucap">{{system_settings('currency')}}</span></div>
                                    </div>
                                   
                                </div>

                                
                            </div>


                            <div class="pay-buttons">
                                <div class="pay-buttons pt-0">
                                    <a href="#payment-modal" class="btn btn-primary btn-between  " id="payx_dep">Deposit Now&nbsp;<i class="ti ti-wallet"></i></a>
                                </div>
                              
                            </div>
                            <input type="hidden" id="data_amount" value="0" />
                            <input type="hidden" id="data_currency" value="USD" />
                        </form>
                    </div>
                </div>
                                       </div> 
                                    </div>
                                     
                                     </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                       
                    </div>
@endsection

@section('scripts')
<div class="modal fade modal-payment" id="payment-modal" tabindex="-1" data-backdrop="static" data-keyboard="false" style="padding-right: 17px;">
    <div class="modal-dialog modal-dialog-md modal-dialog-centered">
        <div class="modal-content">
            <a href="#" class="modal-close" data-dismiss="modal"><em class="ti ti-close"></em></a>
            <div class="popup-body">
                <div class="popup-content">
                    <form class="validate-modern" action="{{route('makedeposit') }}" method="POST" id="online_payment" novalidate="novalidate">
                        @csrf
                         <input type="hidden" name="pp_token" id="token_amountx" value="" />
                        <input type="hidden" name="pp_method" id="price_methodx" value="" />
                        <input type="hidden" name="ww_id" id="ww_id" value="" />
                      
                        <h4 class="popup-title">Payment Process</h4>
                        <p class="lead" style="font-size: 1.1rem;">
                            Please make payment of <strong><span id='amt_to_pay'></span> <span class="pay-currency ucap">{{system_settings('currency')}}</span></strong> to <span id="acc_sym"></span> using your selected payment method.
                        </p>
                        <p>The balance will appear in your account after successful payment.</p>
                        <h5 class="mgt-1-5x font-mid">Selected payment method:</h5>
                        <ul class="pay-list guttar-12px">
                            <li class="pay-item">
                                <div class="input-wrap">
                                    <input type="radio" class="pay-check" value="bank" name="pay_option" required="required" id="pay-bank" data-msg-required="Select your payment method." aria-required="true" checked="" />
                                    <label class="pay-check-label" for="pay-bank">
                                        <span
                                            class="pay-check-text"
                                            title="Send payments easily via bank wire. This option can take 1-5 days or more, but rest assured once the funds reach our account your coins will be added to the dashboard."
                                        >
                                            Pay via <span id="pmetdx"></span>
                                        </span>
                                        <img class="pay-check-img" src="https://cde.lunaone.com/assets/images/pay-coinpayments.png" alt="Bank" />
                                    </label>
                                </div>
                            </li>
                           
                        </ul>
                        <p class="text-light font-italic mgb-1-5x"><small>* Payment gateway may charge you a processing fees.</small></p>
                        
                        <ul class="d-flex flex-wrap align-items-center guttar-30px">
                            <li>
                                <button type="submit" class="btn btn-alt btn-primary payment-btn">Pay Now <em class="ti ti-arrow-right mgl-2x"></em></button>
                            </li>
                        </ul>
                        <div class="gaps-3x"></div>
                        <div class="note note-plane note-light">
                            <em class="fas fa-info-circle"></em>
                            <p class="text-light">Our payment address will appear or redirect you for payment after the order is placed.</p>
                        </div>
                    </form>
                </div>
            </div>
            <style type="text/css">
                .Header-loggedInEmail {
                    display: none;
                }
            </style>
           

        </div>
    </div>
</div>

<script>
    $(function(){
        
        $('#payx_dep').on('click' ,  function(){
        
            $.ajax({
                url: "{{secure_url('checkdeposit')}}",
                type: 'POST',
                data: $('#token_purchase').serialize(),
                dataType: 'json',
                
                beforeSend: function() {
                $('.page-overlay').addClass('is-loading');
              
                },
                complete: function(){
               
                $('.page-overlay').removeClass('is-loading');
                },
                success: function(res) {
                
                    if(res.status == true){
                       
                       $('#amt_to_pay').text(res.amt);
                       $('#pmetdx').text(res.pname);
                       $('#price_methodx').val(res.pmeth);
                       $('#token_amountx').val(res.amt);
                       $('#ww_id').val(res.acc);
                      $('#acc_sym').text(res.acc_sym);
                       $('#payment-modal').modal('show'); 
                       
                      
                       
                       
                    }else if(res.status == false){
                     
                       $('#err_text').text(res.error); 
                    };
                }
                });
            
        })
    })
</script>


@endsection