@include('more.vendor.partials._header')

         {{-- Main content --}}
         <div class="main-content">
            <div class="row">
              <span id="time_span"></span>
              <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
                <path d="M6.669 2.27202L0.94102 8L0 7.05898L5.72731 1.331H0.679478V0H8V7.32052H6.669V2.27202Z" />
              </svg>
              <main class="mt-4 p-4">
                  <div class="row">
                      <div class="col-6">
                        <p>
                          <strong>Ad Listing: </strong>{{ $ad['title'] }}</p>
                        <p>
                            <img src="/{{ $ad['pictures'][0]['filename'] }}" width="33%"/>
                        </p>
                        <p><strong>Promotion Package:</strong> {{ $promo['name'] }}</p>
                        <p>
                            <strong>Promotion Duration:</strong>
                             {{ $promo['days'] }}
                             @if ($promo['days'] > 1)
                                 days
                             @else
                                 day
                             @endif
                        </p>
                        <p><strong>Promotion Price:</strong> KES. {{ number_format($promo['price'], 2) }}</p>
                        <p><strong>Invoice #:</strong> {{ $invoice_dt['inv_no'] }}</p>
                        <br />
                      </div>
                      <div class="col-6">
                        <h1 class="text-xl font-semibold text-gray-700 text-center">
                          Payment Options
                        </h1>
                        <div class="">
                          <div class="my-3">
                            <select
                              name=""
                              id="paymentMethod"
                              class="form-select appearance-none block w-full px-5 py-2 border rounded-lg bg-white shadow-lg placeholder-gray-400 text-gray-700 focus:ring focus:outline-none"
                              onchange="updatePaymentMethod()"
                            >
                              <option value="" selected disabled>
                                Select Payment Method
                              </option>
                              {{-- <option value="bank">Bank Account</option> --}}
                              <option value="ewallet">More eWallet Balance</option>
                              <option value="mpesa">M-Pesa</option>
                              <option value="pesapal">Pesapal</option>
                            </select>
                          </div>
    
                          {{-- Bank --}}
                          <div class="my-3" id="bankInstructions" style="display: none;">
                            <!-- Instructions for Bank -->
                            <p>
                              Deposit the amount to the following bank account:
                            </p>
                            <p>Bank: Your Bank</p>
                            <p>Account Number: Your Account Number</p>
                            <p class="text-red-600">wait for 1second to confirm payment</p>
              
                            <!-- Confirm Payment Button (Initially hidden) -->
                            <button
                              id="confirmPaymentButton"
                              class="submit-button px-4 py-3 rounded-full text-white focus:ring focus:outline-none w-full text-xl font-semibold transition-colors"
                              style="background-color: #F05D05; display: none;"
                              onclick="confirmBankPayment()"
                            >
                              Confirm Payment
                            </button>
              
                            <!-- Upload Statement Section (Initially hidden) -->
                            <div
                              id="uploadStatementSection"
                              style="display: none;"
                            >
                              <h2 class="text-lg font-semibold text-gray-700 mt-4">
                                Upload Bank Statement
                              </h2>
                              <input
                                type="file"
                                id="bankStatementUpload"
                                class="block w-full px-5 py-2 border rounded-lg bg-white shadow-lg focus:ring focus:outline-none"
                              />
                            </div>
                          </div>
    
                          {{-- eWallet --}}
                          <div class="my-3" id="eWalletInstructions" style="display: none;">
                            <!-- Instructions for Bank http://localhost:8000/dist/img/more/more_logo.png-->
                            <img class="img-responsive" src="/more/media/logo-dark.png" style=" width: 50%; margin-left: 27%;">
                            <div style="margin-left: 5%">
                              <p>
                                Pay using your More Classy eWallet account balance <strong>(KES. {{ $balance }})</strong>.
                              </p>
                              <br />
                              {{-- <p><strong>Promo Package:</strong> {{ $package['title']; }}</p>
                              <p><strong>Promo Duration:</strong> {{ $package['duration']; }}</p>
                              <p><strong>Promo Price:</strong> KES. {{ number_format($package['price'], 2); }}</p>
                              <br/> --}}
                              {{-- <hr> --}}
                            </div>
                            <form action="/lipa-na-popote/1" method="POST">
                              @csrf
                              <input type="hidden" name="package_id" value="1"/>
                              <input type="hidden" name="advert_id" value="1"/>
                              <input type="hidden" name="champion_id" value="1"/>
                              <input type="hidden" name="status" value="pending"/>
                              <input type="hidden" name="payment_method" value="ewallet"/>
                              <input type="hidden" name="amount" value="1"/>
                              <button
                                type="submit"
                                id="submitButton"
                                class="submit-button px-4 py-3 rounded-full text-white focus:ring focus:outline-none w-full text-xl font-semibold transition-colors"
                                style="background-color: #F65016;">
                                  Initiate eWallet Payment
                              </button>
                            </form>
                          </div>
    
                          {{-- MPESA --}}
                          <div class="my-3" id="mpesaDetails" style="display: none;">
                            <!-- Instructions for M-Pesa -->
                            <form action="/lipa-na-mpesa/1" method="POST">
                              @csrf
                              <p>Enter your M-Pesa number below:</p>
                              <input
                                type="text"
                                name="phone"
                                id="mpesaNumber"
                                class="block w-full px-5 py-2 border rounded-lg bg-white shadow-lg placeholder-gray-400 text-gray-700 focus:ring focus:outline-none"
                                placeholder="Enter M-Pesa number"
                              />
    
                              <div style="display: block">
                                <img class="img-responsive" src="/images/lipa_na_mpsa_stk_push.png" style="width: 39%; margin-left: 27%;">
                                <p>Please ensure you have the following ready:</p>
                                <ul id="mpesa_instructions" class="list-styled" style="list-style-type: '✓';  margin-left: 9%; margin-bottom: 3%;">
                                    <li>Enough funds in your MPESA account.</li>
                                    <li>The correct MPESA pin code.</li>
                                    <li>Use a safaricom sim not older than 3 years.</li>
                                </ul>
                                
                                <p style="color: #ff0000 !important;">
                                    <strong>NB: </strong> You have to wait for the MPESA Pop Up message to confirm your payment. Should you wish to retry your transaction please wait for a period of 3 minutes!
                                </p>
                              </div>
                              <div style="display: block !important; margin-top: 2%;">
                                  <p>You can also complete the payment using M-PESA paybill using:-</p>
                                  <span>Method : M-PESA</span><br>
                                  <span>Paybill Number : <strong>XXXXXX</strong></span><br>
                                  <span>Account Number :</span> <strong>INV18789</strong><span></span> <br>
                                  <span>Amount : KES <strong>1.00</strong></span><br>
                                  {{-- <div>
                                    <p style="" class="payment-footer">Powered by <img class="" src="/dist/img/more/safaricom_logo.png" style="width: 18%"></p>
                                  </div> --}}
                                  <br />
                                  <input type="hidden" name="package_id" value="1"/>
                                  <input type="hidden" name="advert_id" value="2"/>
                                  <input type="hidden" name="champion_id" value="1"/>
                                  <input type="hidden" name="status" value="pending"/>
                                  <input type="hidden" name="payment_method" value="mpesa"/>
                                  <input type="hidden" name="amount" value="1"/>
                                  <input type="hidden" name="narration" value="Advert payment for demo"/>
                                  <button
                                    type="submit"
                                    {{-- id="submitButton" --}}
                                    class="submit-button px-4 py-3 rounded-full text-white focus:ring focus:outline-none w-full text-xl font-semibold transition-colors"
                                    style="background-color: #F65016;"
                                  >
                                    Lipa Na MPESA
                                  </button>
                                </form>
                            </div>
                          </div>
    
                          {{-- PesaPal --}}
                          <div class="my-3" id="pesapalButton" style="display: none;">
                            <p>Pay using: </p>
                            <img class="img-responsive" src="https://www.pesapal.com/media/2102/logo.png" style="width: 39%; margin-left: 27%;">
                            <br/>
                            <form
                                id="process_pesapal_pay_form"
                                action="/seller/ad/lipa-na-pesapal/{{ $invoice_dt['inv_no'] }}"
                                method="POST"
                            >
                              @csrf
                              <input type="hidden" name="status" value="pending"/>
                              <input type="hidden" name="pay_method" value="pesapal"/>
                              <input type="hidden" name="amount" value="{{ $promo['price'] }}"/>
                              <button
                                type="submit"
                                id="initiatePesapalButton"
                                class="submit-button px-4 py-3 rounded-full text-white focus:ring focus:outline-none w-full text-xl font-semibold transition-colors"
                                style="background-color: #F05D05;"
                                {{-- onclick="initiatePesapalPayment()" --}}
                              >
                                Initiate Pesapal Payment
                              </button>
                            </form>
                          </div>
                        </div>
                      </div>
                  </div>
                  </main>
            </div>
         </div>

         {{-- Footer Content --}}
@include('more.vendor.partials._footer')