@extends('layout')

@section('page_title', 'Instalments')

@section('content')
  <div class="header-actions">
    <h2>Instalment Management</h2>
    <div class="spacer"></div>
    <a class="btn btn-primary" href="{{ route('agreements.create') }}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
      Create Instalment
    </a>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>All Instalments</h3>
      <div class="search">
        <input type="text" id="agreementSearch" placeholder="Search instalments..." />
      </div>
    </div>
    
    @if($agreements->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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
        <h3>No instalments found</h3>
        <p class="text-muted" style="margin-bottom: 20px;">Get started by creating a new agreement.</p>
        <a class="btn btn-primary" href="{{ route('agreements.create') }}">Create Instalment</a>
      </div>
    @else
      <div class="table-responsive">
        <table class="table table-striped" id="agreementsTable">
          <thead>
            <tr>
              <th>ID</th>
              <th>Customer</th>
              <th>Product</th>
              <th>Total Amount</th>
              <th>Down Payment</th>
              <th>Instalments</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @foreach($agreements as $a)
              <tr>
                <td>{{ $a->id }}</td>
                <td>
                  @if($a->customer)
                    <div>{{ $a->customer->name }}</div>
                    <div class="small text-muted">{{ $a->customer->email }}</div>
                  @else
                    {{ $a->customer_name }}
                  @endif
                </td>
                <td>
                  @if($a->product)
                    <div>{{ $a->product->name }}</div>
                    <div class="small text-muted">{{ $a->product->category->name ?? '' }}</div>
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
                <td>{{ $currency }}{{ number_format($a->total_amount, 2) }}</td>
                <td>{{ $currency }}{{ number_format($a->down_payment, 2) }}</td>
                <td>{{ $a->instalments_count }} × {{ $currency }}{{ number_format($a->instalment_amount, 2) }}</td>
                <td>
                  @if($a->status === 'completed')
                    <span class="status status-paid">Completed</span>
                  @elseif($a->status === 'active')
                    <span class="status status-pending">Active</span>
                  @else
                    <span class="status">Draft</span>
                  @endif
                </td>
                <td>{{ $a->created_at->format('M d, Y') }}</td>
                <td>
                  <div style="display: flex; gap: 4px;">
                    <a class="btn btn-sm btn-secondary" href="{{ route('agreements.show', $a) }}" title="View">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                    </a>
                    <a class="btn btn-sm btn-secondary" href="{{ route('agreements.edit', $a) }}" title="Edit">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                    </a>
                    <a class="btn btn-sm btn-primary" href="{{ route('agreements.invoice', $a) }}" title="Invoice">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                    </a>
                  </div>
                </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 {{ $agreements->firstItem() }} to {{ $agreements->lastItem() }} of {{ $agreements->total() }} instalments
        </div>
        <div>
          {{ $agreements->links() }}
        </div>
      </div>
    @endif
  </div>
  
  <script>
    // Simple search functionality
    document.getElementById('agreementSearch').addEventListener('keyup', function() {
      const searchTerm = this.value.toLowerCase();
      const tableRows = document.querySelectorAll('#agreementsTable tbody tr');
      
      tableRows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
      });
    });
  </script>
@endsection