@extends('layouts.payment_layout')

@section('content')                             
<header class="signup-heading">
                                    <h1 class="signup-title"> Subscribe to {{$plan->name}} with {{$method->name}}</h1>
                                    <div class="step-description">You are 2 minutes away from accessing our database!</div>
                                </header>
                                        <div class="container my-5">
                                            
                                            <div class="row d-flex justify-content-center align-items-center">
                                                <div class="col-10 col-md-8 col-sm-8">
                                            <div class="card shadow-md shadow-sm border rounded-3 rounded-xl">
  <!-- Content Header -->
  <div class="card-header bg-white border-bottom px-4 py-3 rounded-xl">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
      <div class="d-flex align-items-center">
        <i class="bi bi-credit-card text-primary me-2"></i>
        <h5 class="mb-0 fw-semibold text-dark">Payment Method: {{$method->name}}</h5>
      </div>
      <div class="mt-2 mt-md-0 ms-md-3">
        <span class="badge bg-primary-100 rounded-pill text-dark px-3 py-2">Amount: {{number_format($plan->price)}} USD</span>
      </div>
    </div>
  </div>

  <!-- Form Content -->
  <div class="card-body">
    <!-- Instructions -->
    <div class="alert alert-info d-flex align-items-start mb-4">
      <i class="bi bi-info-circle text-info me-2"></i>
      <div>
        <h6 class="fw-semibold mb-1">Payment Instructions</h6>
        <p class="mb-0 small">You are to make payment of <strong>{{number_format($plan->price)}} USD</strong> using your selected payment method.
          Screenshot and upload the proof of payment.</p>
      </div>
    </div>
    
    @if($method->slug == 'crypto-deposit')

    <!-- QR Code -->
    <div class="d-flex justify-content-center mb-4">
      <div class="border rounded p-4 text-center bg-light" style="max-width:300px;">
        <div class="rounded-circle bg-primary-subtle d-flex align-items-center justify-content-center mb-3"
          style="width:60px; height:60px;">
          <i class="bi bi-qr-code text-secondary fs-4"></i>
        </div>
        <h6 class="fw-semibold mb-3">Scan QR Code</h6>
        <div class="bg-white border rounded p-2 mb-3">
          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{$method->name}}%3Aeth+Address%3Fvalue%3D100"
            alt="Payment QR Code" class="img-fluid">
        </div>
        <p class="small text-muted">Scan the QR code with your payment app</p>
        <div class="text-center">
          <p class="small mb-0 fw-semibold">{{$method->name}} Address:</p>
          <p class="small text-break text-muted">{{$method->details}}</p>
          <p class="small mb-0 fw-semibold mt-2">Amount:</p>
          <p class="small text-muted">{{number_format($plan->price)}} USD</p>
        </div>
      </div>
    </div>

    <!-- {{$method->name}} Address -->
    <div class="border rounded bg-light p-4 mb-5">
      <h6 class="fw-semibold mb-3"><i class="bi bi-wallet2 text-primary me-2"></i> {{$method->name}} Address</h6>
      <div class="input-group">
        <input type="text" id="myInput" value="{{$method->name}}" class="form-control" readonly>
        <button onclick="navigator.clipboard.writeText(document.getElementById('myInput').value)" 
                type="button" class="btn btn-outline-secondary">
          <i class="bi bi-clipboard"></i>
        </button>
      </div>
      <small class="text-muted d-flex align-items-center mt-2">
        <i class="bi bi-info-circle me-1 text-info"></i>
        <strong>Network Type:</strong> {{data_get($method->details , 'network')}}
      </small>
    </div>
    
    @elseif($method->slug == 'bank-deposit')
    <div class="border rounded bg-light p-4 mb-5">
        <div class="row">
            <div class="col-md-6">
                <h6 class="fw-semibold mb-3"><i class="bi bi-wallet2 text-primary me-2"></i> Bank Name</h6>
      <div class="input-group">
        <input type="text" id="myInput" value="eth Address" class="form-control" readonly>
        <button onclick="navigator.clipboard.writeText(document.getElementById('myInput').value)" 
                type="button" class="btn btn-outline-secondary">
          <i class="bi bi-clipboard"></i>
        </button>
      </div>
            </div>
            
            <div class="col-md-6">
                <h6 class="fw-semibold mb-3"><i class="bi bi-wallet2 text-primary me-2"></i> Account Name</h6>
      <div class="input-group">
        <input type="text" id="myInput" value="eth Address" class="form-control" readonly>
        <button onclick="navigator.clipboard.writeText(document.getElementById('myInput').value)" 
                type="button" class="btn btn-outline-secondary">
          <i class="bi bi-clipboard"></i>
        </button>
      </div>
            </div>
            
            <div class="col-md-6">
                <h6 class="fw-semibold mb-3"><i class="bi bi-wallet2 text-primary me-2"></i> Account Number</h6>
      <div class="input-group">
        <input type="text" id="myInput" value="eth Address" class="form-control" readonly>
        <button onclick="" 
                type="button" class="btn btn-outline-secondary">
          <i class="bi bi-clipboard"></i>
        </button>
      </div>
            </div>
            
            <div class="col-md-6">
                <h6 class="fw-semibold mb-3"><i class="bi bi-wallet2 text-primary me-2"></i> Swift Address</h6>
      <div class="input-group">
        <input type="text" id="myInput" value="eth Address" class="form-control" readonly>
        <button onclick="navigator.clipboard.writeText(document.getElementById('myInput').value).then(console.log('copied account number'))" 
                type="button" class="btn btn-outline-secondary">
          <i class="bi bi-clipboard"></i>
        </button>
      </div>
            </div>
            
        </div>
    </div>
     @endif
    <!-- Upload Proof -->
    <form method="post" action="{{route('user.subscription.pay')}}" enctype="multipart/form-data">
         @csrf
      <div class="mb-4">
        <label class="form-label">Upload Payment Proof</label>
        <div id="upload-area" class="border border-2 border-dashed rounded p-4 text-center">
          <input type="file" class="form-control d-none" id="proof-upload" name="proof" accept="image/*,.pdf" required>
          
          <!-- Placeholder -->
          <div id="upload-placeholder">
            <i class="bi bi-cloud-arrow-up fs-1 text-muted mb-2"></i>
            <p class="mb-1 small text-muted"><span class="fw-semibold text-primary">Click to upload</span> or drag and drop</p>
            <p class="small text-muted">PNG, JPG or PDF (max. 5MB)</p>
          </div>

          <!-- Preview -->
          <div id="upload-preview" class="d-none">
            <img id="preview-img" src="#" alt="Preview"
              class="img-thumbnail mb-2" style="max-height: 200px;">
            <p class="small mb-1">
              <span id="file-name"></span>
              <button type="button" id="remove-file" class="btn btn-sm btn-link text-danger">
                <i class="bi bi-x-circle"></i> Remove
              </button>
            </p>
          </div>
        </div>
      </div>

      <input type="hidden" id="rcp-registration-type" name="registration_type"
                                                value="" />
                                            <input type="hidden" id="rcp_payment-id" name="rcp_gateway"
                                                value="{{__the_hash($method->id)}}" />
                                            <input type="hidden" id="rcp-membership-id" name="membership_id"
                                                value="{{__the_hash($plan->id)}}" />
                                            <input type="hidden" id="rcp-payment-id"
                                                name="rcp_registration_payment_id" value="{{$plan->name}}" />

      <div class="text-center">
        <button type="submit" class="btn btn-primary btn-lg">
          <i class="bi bi-check-circle me-1"></i> Submit Payment
        </button>
      </div>
    </form>
  </div>
</div>

                                             </div>
                                            </div>

</div>
@endsection

   
@section('javascript')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script>
function copyToClipboard(input) {
  const value = document.getElementById(input).value;
  navigator.clipboard.writeText(value).then(() => {
    console.log("Copied to clipboard");
  }).catch(err => {
    console.error("Failed to copy: ", err);
  });
}

</script>
<script>
  const proofInput = document.getElementById("proof-upload");
  const uploadArea = document.getElementById("upload-area");
  const placeholder = document.getElementById("upload-placeholder");
  const preview = document.getElementById("upload-preview");
  const previewImg = document.getElementById("preview-img");
  const fileName = document.getElementById("file-name");
  const removeFile = document.getElementById("remove-file");

  // Click upload area
  uploadArea.addEventListener("click", () => proofInput.click());

  // Handle file preview
  function showPreview(file) {
    fileName.textContent = file.name;
    if (file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = e => previewImg.src = e.target.result;
      reader.readAsDataURL(file);
      previewImg.style.display = "block";
    } else {
      previewImg.style.display = "none";
    }
    placeholder.classList.add("d-none");
    preview.classList.remove("d-none");
  }

  // File change
  proofInput.addEventListener("change", () => {
    const file = proofInput.files[0];
    if (file) showPreview(file);
  });

  // Remove file
  removeFile.addEventListener("click", (e) => {
    e.stopPropagation();
    proofInput.value = "";
    preview.classList.add("d-none");
    placeholder.classList.remove("d-none");
  });

  // Drag & Drop
  uploadArea.addEventListener("dragover", (e) => {
    e.preventDefault();
    uploadArea.classList.add("border-primary");
  });

  uploadArea.addEventListener("dragleave", () => {
    uploadArea.classList.remove("border-primary");
  });

  uploadArea.addEventListener("drop", (e) => {
    e.preventDefault();
    uploadArea.classList.remove("border-primary");
    const file = e.dataTransfer.files[0];
    if (file) {
      proofInput.files = e.dataTransfer.files; // assign file
      showPreview(file);
    }
  });
</script>
@endsection