@extends('layouts.app')

@section('content')
  <section class="hero-section">
    <div class="container">
      <h1>Monthly Dues</h1>
      <p class="lead">
        View your payment history, balances, and HOA monthly dues.
      </p>
    </div>
  </section>

  <!-- SUMMARY -->
  <section class="py-5">
    <div class="container">

      <div class="row g-4 mb-5">

        <!-- Total Due -->
        <div class="col-lg-4">
          <div class="summary-card bg-total">

            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h5>Total Dues</h5>
                <div class="summary-amount">₱0.00</div>
              </div>

              <div class="summary-icon">
                <i class="bi bi-receipt"></i>
              </div>
            </div>

          </div>
        </div>

        <!-- Paid -->
        <div class="col-lg-4">
          <div class="summary-card bg-paid">

            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h5>Total Paid</h5>
                <div class="summary-amount">₱0.00</div>
              </div>

              <div class="summary-icon">
                <i class="bi bi-check-circle-fill"></i>
              </div>
            </div>

          </div>
        </div>

        <!-- Balance -->
        <div class="col-lg-4">
          <div class="summary-card bg-balance">

            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h5>Outstanding Balance</h5>
                <div class="summary-amount">₱0.00</div>
              </div>

              <div class="summary-icon">
                <i class="bi bi-exclamation-circle-fill"></i>
              </div>
            </div>

          </div>
        </div>

      </div>

      <!-- TABLE -->
      <div class="table-container">

        <div class="d-flex justify-content-between align-items-center mb-4">
          <h3 class="fw-bold text-success mb-0">
            Payment History
          </h3>

          <button class="btn btn-success">
            <i class="bi bi-download"></i>
            Download Statement
          </button>
        </div>

        <div class="table-responsive">

          <table class="table table-hover align-middle">

            <thead>
              <tr>
                <th>Month</th>
                <th>Due Date</th>
                <th>Amount</th>
                <th>Status</th>
                <th>Receipt</th>
              </tr>
            </thead>

            <tbody>
{{--

              <tr>
                <td>January 2026</td>
                <td>January 10, 2026</td>
                <td>₱1,000</td>

                <td>
                  <span class="badge badge-paid">
                    Paid
                  </span>
                </td>

                <td>
                  <button class="btn btn-sm btn-outline-success">
                    View
                  </button>
                </td>
              </tr>
              <tr>
                <td>February 2026</td>
                <td>February 10, 2026</td>
                <td>₱1,000</td>

                <td>
                  <span class="badge badge-paid">
                    Paid
                  </span>
                </td>

                <td>
                  <button class="btn btn-sm btn-outline-success">
                    View
                  </button>
                </td>
              </tr>

              <tr>
                <td>March 2026</td>
                <td>March 10, 2026</td>
                <td>₱1,000</td>

                <td>
                  <span class="badge badge-paid">
                    Paid
                  </span>
                </td>

                <td>
                  <button class="btn btn-sm btn-outline-success">
                    View
                  </button>
                </td>
              </tr>

              <tr>
                <td>April 2026</td>
                <td>April 10, 2026</td>
                <td>₱1,000</td>

                <td>
                  <span class="badge badge-unpaid">
                    Unpaid
                  </span>
                </td>

                <td>
                  <button class="btn btn-sm btn-outline-secondary">
                    Pending
                  </button>
                </td>
              </tr>

              <tr>
                <td>May 2026</td>
                <td>May 10, 2026</td>
                <td>₱1,000</td>

                <td>
                  <span class="badge badge-unpaid">
                    Unpaid
                  </span>
                </td>

                <td>
                  <button class="btn btn-sm btn-outline-secondary">
                    Pending
                  </button>
                </td>
              </tr> --}}

            </tbody>

          </table>

        </div>

      </div>

    </div>
  </section>
@endsection