@extends('layout')

@section('page_title', 'Payments')

@section('content')
  <div class="header-actions">
    <h2>Payment Management</h2>
    <div class="spacer"></div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>All Payments</h3>
      <div class="search">
        <input type="text" id="paymentSearch" placeholder="Search payments..." />
      </div>
    </div>
    
    @if($payments->isEmpty())
      <div class="text-center" style="padding: 40px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 16px; color: var(--muted);"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
        <h3>No payments found</h3>
        <p class="text-muted" style="margin-bottom: 20px;">There are currently no payments in the system.</p>
      </div>
    @else
      <div class="table-responsive">
        <table class="table table-striped" id="paymentsTable">
          <thead>
            <tr>
              <th>ID</th>
              <th>Agreement</th>
              <th>Customer</th>
              <th>Product</th>
              <th>Amount</th>
              <th>Due Date</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @foreach($payments as $payment)
              <tr>
                <td>{{ $payment->id }}</td>
                <td>
                  <a href="{{ route('agreements.show', $payment->agreement) }}">#{{ $payment->agreement->id }}</a>
                </td>
                <td>
                  @if($payment->agreement->customer)
                    {{ $payment->agreement->customer->name }}
                  @else
                    {{ $payment->agreement->customer_name }}
                  @endif
                </td>
                <td>
                  @if($payment->agreement->product)
                    {{ $payment->agreement->product->name }}
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
                <td>{{ $currency }}{{ number_format($payment->amount, 2) }}</td>
                <td>{{ $payment->due_date->format('M d, Y') }}</td>
                <td>
                  @if($payment->status === 'paid')
                    <span class="status status-paid">Paid</span>
                    <div class="small text-muted">{{ $payment->paid_at?->format('M d, Y') }}</div>
                  @else
                    <span class="status status-pending">Pending</span>
                  @endif
                </td>
                <td>
                  @if($payment->status !== 'paid')
                    <form method="POST" action="{{ route('payments.markPaid', $payment) }}">
                      @csrf
                      <button type="submit" class="btn btn-sm btn-primary">Mark Paid</button>
                    </form>
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div style="margin-top:20px; display: flex; justify-content: space-between; align-items: center;">
        <div class="text-muted">
          Showing {{ $payments->firstItem() }} to {{ $payments->lastItem() }} of {{ $payments->total() }} payments
        </div>
        <div>
          {{ $payments->links() }}
        </div>
      </div>
    @endif
  </div>
  
  <script>
    // Simple search functionality
    document.getElementById('paymentSearch').addEventListener('keyup', function() {
      const searchTerm = this.value.toLowerCase();
      const tableRows = document.querySelectorAll('#paymentsTable tbody tr');
      
      tableRows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
      });
    });
  </script>
@endsection