@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;
  }
}
.guttar-20px {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
p, ul:not([class]), ol, table {
    margin-bottom: 12px;
}

p.lead-lg {
    font-size: 1.15em;
    line-height: 1.5;
}
p.lead-lg {
    font-size: 1.25em;
}

.text-primary {
    color: #7668fe !important;
}


.guttar-1px {
    margin-left: -0.5px !important;
    margin-right: -0.5px !important;
}
.guttar-vr-15px {
    margin-top: -7.5px !important;
    margin-bottom: -7.5px !important;
}

.font-bold {
    font-weight: 700;
}

.text-head {
    color: #342d6e !important;
}

.fs-15 {
    font-size: 15px;
}

.pl-sm-3, .px-sm-3 {
    padding-left: 1rem!important;
}
.mgb-0-5x {
    margin-bottom: 5px !important;
}
.copy-wrap {
    position: relative;
}
.copy-address {
    border: none;
    color: #495463;
    line-height: 20px;
    padding: 12px 50px 12px 40px;
    border-radius: 4px;
    border: 1px solid rgba(211, 224, 243, 0.5);
    width: 100%;
    background: #fff;
}
.copy-trigger {
    position: absolute;
    right: 4px;
    top: 4px;
    height: 38px;
    width: 38px;
    line-height: 20px;
    padding: 10px 0;
    text-align: center;
    color: #758698;
    background: #e9eff9;
    border-radius: 4px;
    border: none;
    transition: all 0.4s;
    cursor: pointer;
}
.gaps-2x {
    height: 20px;
}
</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="{{route('updatedeposit')}}" method="POST" id="payment-confirm" class="validate-modern" autocomplete="off">
            @csrf                       <input type="hidden" name="trnx_id" value="{{$deposit->txn_id}}">
            <input type="hidden" name="tx_id" value="{{$deposit->id}}">
            
            <p class="lead-lg text-primary">Your Order no. <strong>{{$deposit->txn_id}}</strong> has been placed successfully.</p>

            <p>Please send <strong class="text-primary fs-17 font-bold">{{$deposit->amount}}</strong> <strong class="text-primary fs-17 font-bold">{{system_settings('currency')}}</strong> to the address below. Your funds will appear on your account balance after your payment has been recieved and is approved by <strong>Coinpayments</strong>.</p>
            
            <div class="pay-wallet-address pay-wallet-btc">
                <h4>Payment Method: {{$pmethod->name}}</h4>
                                <h6 class="text-head font-bold">Make your payment of <span class="fs-15">{{$deposit->amount}} {{system_settings('currency')}}</span> to the address below</h6>
               <div class="row guttar-1px guttar-vr-15px">
                                        <div class="col-sm-3">
                        <p class="text-center"><img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={{$pmethod->details}}&choe=UTF-8" style="margin:10px auto"></p>
                    </div>
                                        <div class="col-sm-9">
                        <div class="fake-class pl-sm-3">
                                                        <div class="copy-wrap mgb-0-5x">
                                <span class="copy-feedback"></span>
                                <em class="copy-icon ikon "></em>
                                <input type="text" class="copy-address text-head font-bold" value="{{$pmethod->details}}" disabled="">
                                <button type="button" class="copy-trigger copy-clipboard" data-clipboard-text="{{$pmethod->details}}"><em class="ti ti-files"></em></button>
                            </div>
                            <div class="gaps-2x"></div>
                                                        <ul class="d-flex flex-wrap align-items-center guttar-20px guttar-vr-15px">
                                <li><a href="https://cde.lunaone.com/user/transactions" class="btn btn-primary">View Transaction</a></li> 
                                                            </ul>
                                                       
                                                    </div>
                    </div>
                </div>
            </div>
             <div class="card-head">
                                <h4 class="card-title">Transaction Proof</h4>
                                <p id="err_text" style="color:red"></p>
                            </div>
                            <div class="card-text">
                                <p>Enter the transaction code.</p>
                            </div>
                            <div class="token-contribute">
                                <div class="token-calc">
                                    <div class="token-pay-amount payment-get" style="width:250px">
                                        <input class="input-bordered input-with-hint token-number" type="text"  name="tproof" value="" required  />
                                        
                                    </div>
                                   
                                </div>

                              
                            </div>
                            
                            <div class="pay-buttons">
                                <div class="pay-buttons pt-0">
                                    <button type="submit" class="btn btn-primary btn-between  " >Submit</button>
                                </div>
                              
                            </div>
        </form> 
                    </div>
                </div>
                                       </div> 
                                    </div>
                                     
                                     </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                       
                    </div>
@endsection

@section('scripts')



@endsection