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

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

@section('css')

@endsection



@section('content')

<div class="page-content">
    <div class="container">
        <div class="row">
            <div class="main-content col-lg-12">
                <div class="card content-area content-area-mh">
                    <div class="card-innr">
                         <style>
    .asset[data-v-d0c02d00] {
    background: #6939da;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
}
a[data-v-d0c02d00] {
    color: #fff;
    text-decoration: none;
    transition: all .5s ease;
}
.asset .v-lazy-image[data-v-d0c02d00] {
    height: 306px;
    width: 100%;
}
.card[data-v-d0c02d00] {
    background: #14013e !important;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 30px;
}
.card {
    background: #14013e !important;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 30px;
}
.card .card-body[data-v-d0c02d00] {
    padding: 20px;
}
.title[data-v-d0c02d00] {
    color: #fff;
    font-family: Rubik,sans-serif;
}
.card .title[data-v-d0c02d00] {
    font-family: Rubik,sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.details-container[data-v-d0c02d00] {
    color: #c2c6dc;
}
.title-container[data-v-d0c02d00] {
    margin-bottom: 15px;
}


h1[data-v-d0c02d00] {
    font-size: 32px;
    margin-bottom: 10px;
}

.price-details-container .price-title {
    font-size: 16px;
    margin-bottom: 10px;
}
.price-details-container .price {
    font-family: Rubik,sans-serif;
    font-size: 26px;
}
.multiselect-multiple-label, .multiselect-placeholder, .multiselect-single-label {
    align-items: center;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    left: 0;
    line-height: var(--ms-line-height,1.375);
    max-width: 100%;
    padding-left: var(--ms-px,.875rem);
    padding-right: calc(1.25rem + var(--ms-px, .875rem)*3);
    pointer-events: none;
    position: absolute;
    top: 0;
}
.multiselect, .multiselect-search {
    background: #0d0f13;
    border: none;
    border-radius: 10px;
    color: #fff;
}
.multiselect-single-label-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.connect-wallet-btn[data-v-19b2b991] {
    background: #ce2c86;
    border-radius: 10px;
    color: #fff;
    display: block;
    padding: 7px 5px;
    text-align: center;
}
.connect-wallet-btn[data-v-19b2b991]:hover {
    background: #6939da;
    color: #fff;
}
 </style>
                        <div class="card-head">
                            <h4 class="card-title">Nft</h4>
                                                     @if(Session::has('sucmessage'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
  {{Session::get('sucmessage')}}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
                        </div>
                        <div class="gaps-1x"></div>
                    <section class="asset-container mb-5" data-v-d0c02d00="">
    <div class="container" data-v-d0c02d00="">
        <div class="row" data-v-d0c02d00="">
            <div class="col-md-4" data-v-d0c02d00="">
                <div class="asset" data-v-d0c02d00="">
                    <a href="#" data-fancybox="gallery" data-caption="{{$nftx->name}} #016" data-v-d0c02d00="">
                        <img src="{{secure_url('/')}}/template_files/images/nfts/{{$nftx->pics_link}}" alt="{{$nftx->name}} #016" width="360" class="v-lazy-image v-lazy-image-loaded" data-v-d0c02d00="" />
                    </a>
                    <!----><!---->
                </div>
                
                <div class="card d-none d-sm-none d-md-block d-lg-block d-xl-block" data-v-d0c02d00="">
                    <div class="card-body" data-v-d0c02d00="">
                        <h3 class="title" data-v-d0c02d00="">Details</h3>
                        
                        <div class="chain-details d-flex justify-content-between" data-v-d0c02d00="">
                            <span data-v-d0c02d00="">Created at block</span><a href="https://www.protonscan.io/block/{{$nftx->block_id}}" target="_blank" data-v-d0c02d00="">{{$nftx->block_id}}</a>
                        </div>
                        <div class="chain-details d-flex justify-content-between" data-v-d0c02d00=""><span data-v-d0c02d00="">Creation time</span><span data-v-d0c02d00="">{{$nftx->block_created}}</span></div>
                        <div class="chain-details d-flex justify-content-between" data-v-d0c02d00=""><span data-v-d0c02d00="">Transferable</span><span data-v-d0c02d00="">{{$nftx->transferable}}</span></div>
                        <div class="chain-details d-flex justify-content-between" data-v-d0c02d00=""><span data-v-d0c02d00="">Burnable</span><span data-v-d0c02d00="">{{$nftx->burnable}}</span></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8" data-v-d0c02d00="">
                <div class="details-container" data-v-d0c02d00="">
                    <div class="title-container" data-v-d0c02d00="">
                        <h1 class="title" data-v-d0c02d00="">{{$nftx->name}}</h1>
                        <div class="creator" data-v-d0c02d00="">in <a href="#" class="" data-v-d0c02d00="">{{$nftx->author}}</a> <i class="fas fa-shield-check verified-icon" data-v-d0c02d00=""></i></div>
                    </div>
                 
                    <div class="card" data-v-19b2b991="">
                        <div class="card-body price-details-container" data-v-19b2b991="">
                            <div data-v-19b2b991="">
                                <div class="d-flex justify-content-between" data-v-19b2b991="">
                                    <div class="price-container" data-v-19b2b991="">
                                        <h4 class="price-title mb-2" data-v-19b2b991="">Current price</h4>
                                        <div class="price mb-4" data-v-19b2b991="">
                                            <span data-v-19b2b991=""> {{$nftx->price}} ETH</span>
                                        </div>
                                    </div>
                                    <div class="edition-container" data-v-19b2b991="">
                                        <h4 class="price-title mb-2" data-v-19b2b991="">Edition size</h4>
                                        <div class="price" data-v-19b2b991="">1</div>
                                    </div>
                                </div>
                                <div class="mb-3" data-v-19b2b991="">
                                    <h5 data-v-19b2b991="">Marked for sale</h5>
                                    <div tabindex="-1" class="multiselect" data-v-19b2b991="">
                                        <!-- Search -->
                                        <input type="text" class="multiselect-search" />
                                        <!-- Tags (with search) --><!--v-if--><!-- Single label -->
                                       
                                        <!-- Multiple label --><!--v-if--><!-- Placeholder --><!--v-if--><!-- Spinner --><!--v-if--><!-- Clear --><!--v-if--><!-- Caret -->
                                        <span class="multiselect-caret"></span>
                                        <!-- Options -->
                                        <div class="multiselect-dropdown is-hidden" tabindex="-1">
                                            <ul class="multiselect-options">
                                                <li class="multiselect-option is-selected"><span>{{$nftx->name}} - {{$nftx->price}} ETH - {{$nftx->author}}</span></li>
                                            </ul>
                                            <!--v-if--><!--v-if-->
                                        </div>
                                        <!-- Hacky input element to show HTML5 required warning --><!--v-if--><!-- Native input support --><!--v-if--><!-- Create height for empty input -->
                                        <div class="multiselect-spacer"></div>
                                    </div>
                                </div>
                                <!---->
                                <a href="#payment-modal" class="connect-wallet-btn mt-3 md-trigger" id="payx_dep" data-v-19b2b991="" data-modal="modal-10">Buy Now</a>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <div class="card" data-v-d0c02d00="">
                        <div class="card-body" data-v-d0c02d00="">
                            <h3 class="title" data-v-d0c02d00="">Description</h3>
                            <p data-v-d0c02d00="">{{$nftx->description}}</p>
                        </div>
                    </div>
                    <div class="card" data-v-d0c02d00="">
                        <div class="card-body" data-v-d0c02d00="">
                            <h3 class="title" data-v-d0c02d00="">Offers</h3>
                            <div class="offers-table-container" data-v-d0c02d00="">
                                <p data-v-d0c02d00="">There is no activity associated with this item.</p>
                                <!---->
                            </div>
                        </div>
                    </div>
                    <div class="card" data-v-d0c02d00="">
                        <div class="card-body" data-v-d0c02d00="">
                            <h3 class="title" data-v-d0c02d00="">Sale history</h3>
                            <p data-v-d0c02d00="">There is no sale history associated with this item.</p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>
  
                       
                    </div>
                    
                 
                </div>
            </div>
        </div>
    </div>
</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="" />
                       
                      
                        <h4 class="popup-title">Buy {{$nftx->name}}  - {{$nftx->author}}</h4>
                        <p class="lead">
                            Please make payment of <strong><span id='amt_to_pay'>{{$nftx->price}}</span> <span class="pay-currency ucap">ETH</span></strong> to buy {{$nftx->name}}.
                        </p>
                        <p>The NFTs will appear in your account after successful payment.</p>
                        <h5 class="mgt-1-5x font-mid">Ethereum:</h5>
                        <div style="display:flex; justify-content:center">
                                                                	<h6 class="card-title" ><img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=1PGX5pDTXn3zFqQZgp68CHWAJ8mRvr1cZM&choe=UTF-8" style="margin:10px auto"><br/>
</h6>

                
                                                            </div>
                                                            <div>
                                                                <p class="card-text" style="font-size: 18px;padding: 10px;"><span style="font-weight:bold; margin-right:10px">ETH Address:</span>   1PGX5pDTXn3zFqQZgp68CHWAJ8mRvr1cZM</p>
                                                            </div>
                        <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">I have Paid <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"></p>
                        </div>
                    </form>
                </div>
            </div>
            <style type="text/css">
                .Header-loggedInEmail {
                    display: none;
                }
            </style>
           

        </div>
    </div>
</div>
<script>
    $(function(){
        
        $('#payx_dep').on('click' ,  function(){
           $('#payment-modal').addClass('show');
            
        })
        
        $('.ti-close').on('click' ,  function(){
           $('#payment-modal').removeClass('show');
            
        })
    })
</script>

@endsection