@extends('layout', ['page' => 'donate'])

@section('title', 'Donate - ' . config('app.name'))

@section('content')
  @if(isset($breadcrumb) && !empty($breadcrumb))
    @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
  @endif

  <section class="wrap">
    <div class="container">
      <div class="row">
        <!-- Contact Us Section -->
        <div class="col-lg-6 col-md-6 col-12 mb-4">
          <div class="abt-table">
            <div class="abt-dec p-4">
              <h2>Any Query? Contact Us</h2>
              <p>For verification or other inquiries, please reach out to us using the contact details below.</p>
              
              <!-- Contact Numbers -->
              @php $contacts = explode(",", env('APP_CONTACT')); @endphp
              @foreach($contacts as $contact)
                <p><strong>📞 Phone:</strong> <a href="tel:{{ trim($contact) }}">{{ trim($contact) }}</a></p>
              @endforeach

              <!-- Email -->
              @if(env('APP_EMAIL'))
                <p><strong>📧 Email:</strong> <a href="mailto:{{ env('APP_EMAIL') }}">{{ env('APP_EMAIL') }}</a></p>
              @endif
            </div>
          </div>
        </div>

        <!-- Payment Details Section -->
        <div class="col-lg-6 col-md-6 col-12">
          <div class="abt-table">
            <div class="abt-dec p-4 text-center">
              <h2>Payment Details</h2>
              <p>Scan the QR code or copy the UPI ID to make a payment.</p>

              <!-- UPI ID Input Group -->
              <div class="input-group mb-3">
                <input type="text" class="form-control text-danger text-center" id="copyUpiAddress" value="{{ $upiAddress }}" readonly>
                <button class="btn btn-primary" onclick="copyUpiAddress()">Copy</button>
              </div>

              <!-- QR Code -->
              <div class="text-center">
                <a href="javascript:void(0)" onclick="copyUpiAddress()">
                  <img src="" id="upiAddressQrCode" style="width: 200px; height: 200px;" alt="UPI QR Code">
                </a>
                <br />
                <button class="btn btn-primary btn-sm mt-2 downloadQrCode">Download QR Code</button>
              </div>

              <!-- Bank Details -->
              <div style="text-align: left !important;">
                  <ul class="mt-4 border-top pt-2">
                  @foreach ($bankDetails as $key => $detail)
                  <li>
                    <strong class="">{{ $key }} : </strong> <span class="details">{{ $detail}}</span>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

@endsection

@push('js')
<script>
  function copyUpiAddress() {
    var copyText = document.getElementById("copyUpiAddress");
    copyText.select();
    navigator.clipboard.writeText(copyText.value);
    toastr.success("UPI ID copied");
  }

  $(document).ready(function() {
    const tr = new Date().getTime();
    const payAddress = document.getElementById('copyUpiAddress').value;
    const payeeName = "{{ $payeeName }}";
    const upiStr = `upi://pay?pa=${payAddress}&pn=${payeeName}&tr=${tr}`;
    
    $('.upipaylink').attr('href', upiStr);
    $('#upiAddressQrCode').attr('src', "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(upiStr));

    $('.downloadQrCode').click(function() {
      var a = $("<a>")
        .attr("href", "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(upiStr))
        .attr("download", "qrcode.png")
        .attr('target', '_blank')
        .appendTo("body");
        
      a[0].click();
      a.remove();
    });
  });
</script>
@endpush