@extends('user.layouts.app')
@section('body_class', 'payment-gateway')

@section('content')
  <main class="site-main">
    <section class="banner-slider">
      <div class="slider-item"><img src="./images/subBanner/payment-banner1.jpg" alt="Slide 1"></div>
      <div class="slider-item"><img src="./images/subBanner/payment-banner-2.jpg" alt="Slide 2"></div>
      <div class="slider-item"><img src="./images/subBanner/payment-banner3.jpg" alt="Slide 3"></div>
    </section>

    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="/">Home</a>
          </li>
          <li>Food & Beverage</li>
        </ul>
      </div>
    </div>

    <section class="payment-table-outer pt-2">
      <div class="container">
        <div class="scroll_table">
          <table class="payment-table-list">
            <tr>
              <th>SL No.</th>
              <th>Month</th>
              <th>Opening Bal</th>
              <th>Total Debit</th>
              <th>Total Credit</th>
              <th>Closing Bal</th>
              <th>Invoice</th>
            </tr>
            <!-- <tr>
              <td>1</td>
              <td>June, 2025</td>
              <td>1866.25</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>1866.25</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA2L0VYRTYzLTA2LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDYtMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>May, 2025</td>
              <td>1816.75</td>
              <td>54.50</td>
              <td>5.00</td>
              <td>1866.25</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA1L0VYRTYzLTA1LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDUtMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>April, 2025</td>
              <td>1638.15</td>
              <td>180.60</td>
              <td>2.00</td>
              <td>1816.75</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA0L0VYRTYzLTA0LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDQtMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>Mar, 2025</td>
              <td>1612.80</td>
              <td>28.35</td>
              <td>3.00</td>
              <td>1638.15</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAzL0VYRTYzLTAzLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDMtMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>Feb, 2025</td>
              <td>1575.00</td>
              <td>37.80</td>
              <td>0.00</td>
              <td>1612.80</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAyL0VYRTYzLTAyLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDItMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>Jan, 2025</td>
              <td>1395.45</td>
              <td>179.55</td>
              <td>0.00</td>
              <td>1575.00</td>
              <td class="row_whitebulet_pdf">
                <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAxL0VYRTYzLTAxLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDEtMjAyNS5wZGY="
                  target="_blank">Download</a>
              </td>
            </tr> -->

            @php
                $counter = 0;  // Initialize the counter to limit the rows to 6
            @endphp

            @foreach($filteredData['Result'] as $index => $transaction)
                @php
                    // Stop after 6 rows
                    if ($counter >= 6) break;

                    // Get debit, credit, and closing balance values
                    $debitAmount = floatval($transaction['dblDrAmt']);
                    $creditAmount = floatval($transaction['dblCrAmt']);
                    $closingBalance = floatval($transaction['dblClosingBal']);

                    $openingBalance = $closingBalance + $creditAmount - $debitAmount;

                    // Increment the counter
                    $counter++;
                @endphp

                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ \Carbon\Carbon::parse($transaction['TransDate'])->format('d-m-Y') }}</td>
                    <td>{{ number_format($openingBalance, 2) }}</td>
                    <td>{{ number_format($debitAmount, 2) }}</td>
                    <td>{{ number_format($creditAmount, 2) }}</td>
                    <td>{{ number_format($closingBalance, 2) }}</td> <!-- Closing balance comes from the response -->
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv={{ urlencode($transaction['strInvChqNo']) }}" target="_blank">Download</a>
                    </td>
                </tr>
            @endforeach

          </table>
        </div>
        <p>Online payment system has been updated and members may face issues after making payment. In order to resolve
          the issue kinldy clear your browser cache. <a href="{{ route('user.browser_cache_management') }}"
            target="_blank">Click here</a> to know more about how to clear your browser cache.</p>
      </div>
    </section>

    <section class="payment-section pt-2">
      <div class="container">
        <!-- add: payment-table-1 class by Arif (15/07/2025) -->
        <div class="scroll_table"></div>
          <table class="payment-table payment-table-1">
            <tr>
              <th>Membership No</th>
              <th>EXE63</th>
            </tr>
            <tr>
              <td>Amount to pay (in Rs):</td>
              <td>
                <div class="form-row box-focus">
                  <label for="PayAmount" class="">Amount</label>
                  <input id="PayAmount" type="tel" class="form-control" placeholder="" required="">
                </div>
                <p class="heighlight">You can make a full or part payment for your bills.</p>
                <div class="proceed-btn-outer">
                  <!-- add: click-to-payment-option class by Arif (15/07/2025) -->
                  <button type="submit" class="btn btn-primary click-to-payment-option">Proceed</button>
                </div>
              </td>
            </tr>
          </table>
        </div>

        <!-- add: payment-table-2 class by Arif (15/07/2025) -->
        <div class="payment-table-2" style="display: none;">
          <div class="container">
            <div class="title">
              <h4>Before Payment Processing (New)</h4>
              <div class="back-btn-outer">
                <button type="submit" class="btn btn-back">Back</button>
              </div>
            </div>
            <table class="payment-table">
              <tr>
                <th colspan="2">Verify Details</th>
              </tr>
              <tr>
                <td>Phone <span class="required">*</span></td>
                <td>
                  <div class="form-row">
                    <input id="PayAmount" type="tel" class="form-control" placeholder="Please enter your phone number" value="{{Auth::user()->phone}}" required="">
                  </div>
                </td>
              </tr>
              <tr>
                <td>E-mail <span class="required">*</span></td>
                <td>
                  <div class="form-row">
                    <input id="PayAmount" type="email" class="form-control" placeholder="Please enter your email" value="Auth::user()->email"
                      required="">
                  </div>
                </td>
              </tr>
              <tr>
                <td>Pay</td>
                <td>
                  <div class="payAmount"> &#8377; 50</div>
                  <!-- -------- 15/07/2025----edit by Arif (start)------->
                  <div class="payment-option-row rounded">
                    <div class="payment-option-col">
                      <input type="radio" name="payment-option">
                      <img src="./images/hdfc-logo.png" alt="">
                    </div>
                    <div class="payment-option-col">
                      <input type="radio" name="payment-option">
                      <img src="./images/razonpay-logo.png" alt="">
                    </div>
                    <div class="payment-option-col">
                      <input type="radio" name="payment-option">
                      <img src="./images/billdesk-logo.png" alt="">
                    </div>
                  </div>
                  <!-- -------- 15/07/2025----edit by Arif (end)------->
                  <div class="edit-btn-outer">
                    <button type="submit" class="btn btn-primary">Edit and Pay</button>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </section>

  </main> 

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
@endpush