@extends(template() . 'layout.master2')

@section('content2')
    <div class="dashboard-body-part">


        <script>
            //                   Swal.fire({
            //   title: "<strong>HTML <u>example</u></strong>",
            //   icon: "info",
            //   html: `
            //     You can use <b>bold text</b>,
            //     <a href="#">links</a>,
            //     and other HTML tags
            //   `,
            //   showCloseButton: true,
            //   showCancelButton: true,
            //   focusConfirm: false,
            //   confirmButtonText: `
            //     <i class="fa fa-thumbs-up"></i> Great!
            //   `,
            //   confirmButtonAriaLabel: "Thumbs up, great!",
            //   cancelButtonText: `
            //     <i class="fa fa-thumbs-down"></i>
            //   `,
            //   cancelButtonAriaLabel: "Thumbs down"
            // });
        </script>

        <style>
        
            .alert>.start-icon {
                margin-right: 0;
                min-width: 20px;
                text-align: center;
            }
            
        .btn .main-btn {
            background: #f26a23;
            color: #fff;
        }

            .alert>.start-icon {
                margin-right: 5px;
            }

            .greencross
            {
                font-size:18px;
                color: #25ff0b;
                text-shadow: none;
            }

            .alert-simple.alert-success
            {
                border: 1px solid rgba(36, 241, 6, 0.46);
                background-color: rgba(7, 149, 66, 0.12156862745098039);
                box-shadow: 0px 0px 2px #259c08;
                color: #0ad406;
                text-shadow: 2px 1px #00040a;
                transition:0.5s;
                cursor:pointer;
            }
            .alert-success:hover{
                background-color: rgba(7, 149, 66, 0.35);
                transition:0.5s;
            }
            .alert-simple.alert-info
            {
                border: 1px solid rgba(6, 44, 241, 0.46);
                background-color: rgba(7, 73, 149, 0.12156862745098039);
                box-shadow: 0px 0px 2px #0396ff;
                color: #0396ff;
                text-shadow: 2px 1px #00040a;
                transition:0.5s;
                cursor:pointer;
            }

            .alert-info:hover
            {
                background-color: rgba(7, 73, 149, 0.35);
                transition:0.5s;
            }

            .blue-cross
            {
                font-size: 18px;
                color: #0bd2ff;
                text-shadow: none;
            }

            .alert-simple.alert-warning
            {
                border: 1px solid rgba(241, 142, 6, 0.81);
                background-color: rgba(220, 128, 1, 0.16);
                box-shadow: 0px 0px 2px #ffb103;
                color: #ffb103;
                text-shadow: 2px 1px #00040a;
                transition:0.5s;
                cursor:pointer;
            }

            .alert-warning:hover{
                background-color: rgba(220, 128, 1, 0.33);
                transition:0.5s;
            }

            .warning
            {
                font-size: 18px;
                color: #ffb40b;
                text-shadow: none;
            }

            .alert-simple.alert-danger
            {
                border: 1px solid rgba(241, 6, 6, 0.81);
                background-color: rgba(220, 17, 1, 0.16);
                box-shadow: 0px 0px 2px #ff0303;
                color: #ff0303;
                text-shadow: 2px 1px #00040a;
                transition:0.5s;
                cursor:pointer;
            }

            .alert-danger:hover
            {
                background-color: rgba(220, 17, 1, 0.33);
                transition:0.5s;
            }

            .danger
            {
                font-size: 18px;
                color: #ff0303;
                text-shadow: none;
            }

            .alert-simple.alert-primary
            {
                border: 1px solid rgba(6, 241, 226, 0.81);
                background-color: rgba(1, 204, 220, 0.16);
                box-shadow: 0px 0px 2px #03fff5;
                color: #03d0ff;
                text-shadow: 2px 1px #00040a;
                transition:0.5s;
                cursor:pointer;
            }

            .alert-primary:hover{
                background-color: rgba(1, 204, 220, 0.33);
                transition:0.5s;
            }

            .alertprimary
            {
                font-size: 18px;
                color: #03d0ff;
                text-shadow: none;
            }

            .square_box {
                position: absolute;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                border-top-left-radius: 45px;
                opacity: 0.302;
            }

            .square_box.box_three {
                background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                opacity: 0.059;
                left: -80px;
                top: -60px;
                width: 500px;
                height: 500px;
                border-radius: 45px;
            }

            .square_box.box_four {
                background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
                opacity: 0.059;
                left: 150px;
                top: -25px;
                width: 550px;
                height: 550px;
                border-radius: 45px;
            }

            .alert:before {
                content: '';
                position: absolute;
                width: 0;
                height: calc(100% - 44px);
                border-left: 1px solid;
                border-right: 2px solid;
                border-bottom-right-radius: 3px;
                border-top-right-radius: 3px;
                left: 0;
                top: 50%;
                transform: translate(0,-50%);
                height: 20px;
            }

            .fa-times
            {
                -webkit-animation: blink-1 2s infinite both;
                animation: blink-1 2s infinite both;
            }


            /**
             * ----------------------------------------
             * animation blink-1
             * ----------------------------------------
             */
            @-webkit-keyframes blink-1 {
                0%,
                50%,
                100% {
                    opacity: 1;
                }
                25%,
                75% {
                    opacity: 0;
                }
            }
            @keyframes blink-1 {
                0%,
                50%,
                100% {
                    opacity: 1;
                }
                25%,
                75% {
                    opacity: 0;
                }
            }

        </style>



<div class="min-h-screen bg-gray-900 text-gray-100 px-4 sm:px-6 lg:px-12 py-8">

  <!-- Mobile Page Header -->
  <div class="flex items-center justify-between mb-6 pt-4">
    <h5 class="text-xl font-semibold">{{ __('Payment Information') }}</h5>
    <a href="{{ route('user.deposit') }}" class="flex items-center text-gray-400 hover:text-white gap-1">
      <i class="bi bi-arrow-left"></i> {{ __('Back') }}
    </a>
  </div>

  <!-- Payment Info Section -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

    <!-- Deposit Payment Info -->
    <div class="bg-gray-800 rounded-xl shadow p-6">
      <h5 class="text-lg font-semibold mb-4">{{ __('Deposit Payment Information') }}</h5>
      <ul class="divide-y divide-gray-700">
        <li class="flex justify-between py-2">
          <span>{{ __('Payment Currency') }}</span>
          <span>{{ $gateway['gateway_parameters']['gateway_currency'] }}</span>
        </li>
      </ul>
    </div>

    <!-- Payment Info & Wallet -->
    <div class="bg-gray-800 rounded-xl shadow p-6 space-y-4">
      <h5 class="text-lg font-semibold">{{ __('Payment Information') }}</h5>
      <ul class="divide-y divide-gray-700">
        <li class="flex justify-between py-2">
          <span>{{ __('Gateway Name') }}:</span>
          <span>{{ str_replace('_', ' ', $gateway['gateway_name']) }}</span>
        </li>
        <li class="flex justify-between py-2">
          <span>{{ __('Amount') }}:</span>
          <span>{{ @Auth::user()->currency }}{{ number_format($deposit->amount, 2) }}</span>
        </li>
        <li class="py-2 text-gray-400 text-sm">
          Copy payment wallet and send selected crypto. Your funds will appear on your dashboard after payment is confirmed on the blockchain.
        </li>
      </ul>

      <!-- Wallet Address -->
      
      <div class="space-y-4 sm:space-y-8">
            
            <div class="space-y-4 sm:space-y-6">
<div class="flex flex-col items-center p-3 sm:p-6 bg-gray-800/30 rounded-lg sm:rounded-xl">
                         <div class="mt-4 text-center">
 <div id="walletQR" class="inline-block bg-white dark:bg-[#0D0B1E] p-3 rounded-lg shadow-md"></div>
 
 
                                                         <!-- QR Code Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const walletAddress = "{{ $decryptWalletAddress }}";
        new QRCode(document.getElementById("walletQR"), {
            text: walletAddress,
            width: 120,
            height: 120,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    });
</script>
                        </div>
                        <p class="text-xs sm:text-sm text-gray-400 text-center">Scan QR code to make payment</p>
                    </div>                    
                    </div>                    
                    </div>
      
      <div class="space-y-2">
        <h5 class="text-lg font-semibold">{{ __('Wallet Address') }}</h5>
        <input type="text" id="myInput" class="w-full p-2 rounded bg-gray-700 text-gray-100" value="{{ $decryptWalletAddress }}" readonly>
        <p class="flex justify-between text-gray-400 text-sm">
          <span>{{ __('Coin Tag/Network') }}:</span>
          <span>{{ str_replace('_', ' ', $gateway['charge']) }}</span>
        </p>
        <button onclick="copyWallet()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mt-2 transition">
          {{ __('Copy Wallet Address') }}
        </button>
        <div class="bg-yellow-500/20 text-yellow-700 p-3 rounded mt-2 text-sm">
          <strong>Important!</strong> Ensure to upload payment proof screenshot to validate this deposit. Scroll down to upload!
        </div>
      </div>
    </div>

  </div>




  <!-- Validate Deposit Section -->
  <div class="bg-gray-800 rounded-xl shadow p-6 mb-8">
    <h5 class="text-lg font-semibold mb-4">{{ __('Validate Your Deposit*') }}</h5>
    <form action="" method="post" enctype="multipart/form-data" class="space-y-4">
      @csrf
      @if ($gateway['user_proof_param'] != null)
        @foreach ($gateway['user_proof_param'] as $proof)
          @if ($proof['type'] == 'text')
            <div class="flex flex-col">
              <label class="mb-1">{{ __($proof['field_name']) }}</label>
              <input type="text" name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" class="p-2 rounded bg-gray-700 text-gray-100" {{ $proof['validation'] == 'required' ? 'required' : '' }}>
            </div>
          @endif
          @if ($proof['type'] == 'textarea')
            <div class="flex flex-col">
              <label class="mb-1">{{ __($proof['field_name']) }}</label>
              <textarea name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" class="p-2 rounded bg-gray-700 text-gray-100" {{ $proof['validation'] == 'required' ? 'required' : '' }}></textarea>
            </div>
          @endif
          @if ($proof['type'] == 'file')
            <div class="flex flex-col">
              <label class="mb-1">{{ __($proof['field_name']) }}</label>
              <input type="file" name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" class="p-2 rounded bg-gray-700 text-gray-100" {{ $proof['validation'] == 'required' ? 'required' : '' }}>
            </div>
          @endif
        @endforeach
      @endif
      <div class="flex justify-end">
        <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
          {{ __('Paid') }}
        </button>
      </div>
    </form>
  </div>

<!-- Crypto Purchase Links (Icons version) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <a href="https://www.kraken.com/en-gb/lp/buy-bitcoin" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via Kraken.com</h5>
    </a>

    <a href="https://bitcoin-mjenjacnica.hr/#exchange" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via Bitcoin-Mjenjacnica</h5>
    </a>

    <a href="https://buy.moonpay.com/" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via MoonPay</h5>
    </a>

    <a href="https://cex.io/" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via CEX.IO</h5>
    </a>

    <a href="https://crypto.com/" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via Crypto.com</h5>
    </a>

    <a href="https://coinbase.com/" target="_blank" class="bg-gray-800 rounded-xl shadow p-6 text-center hover:shadow-lg transition flex flex-col items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h5 class="font-semibold text-gray-100">Buy BTC, ETH, LTC via Coinbase</h5>
    </a>
</div>


</div>

<script>
function copyWallet() {
  const copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  alert("Copied Successfully. Send only the chosen crypto: " + copyText.value);
}
</script>

            <style>
                .card {
                    margin-bottom: 30px;
                    border: 0px;
                    border-radius: 0.625rem;
                    box-shadow: 6px 11px 41px -28px #a99de7;
                    background: var(--gradient-bg);
                }

                .nav-link {
                    display: block;
                    padding: 0.5rem 1rem;
                }
                .title {
                    float: right;
                }
                h5, .h5 {
                    font-size: .8125rem;
                    color: #e9ecef;
                }
                .h4 {
                    color: #111;
                }
            </style>





        </div>
@endsection
