@extends('layout')

@section('content')
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
    <h2>Instalment #{{ $agreement->id }}</h2>
    <a class="btn btn-secondary" href="{{ route('agreements.index') }}">Back</a>
  </div>

  <div class="grid" style="margin-bottom:12px;">
    <div>
      <strong>Customer:</strong> {{ optional($agreement->customer)->name ?? $agreement->customer_name }}
    </div>
    <div>
      <strong>Product:</strong> {{ optional($agreement->product)->name ?? '—' }}
    </div>
    <div>
      <strong>Total:</strong> {{ $currency }}{{ number_format($agreement->total_amount, 2) }}
    </div>
    <div>
      <strong>Down Payment:</strong> {{ $currency }}{{ number_format($agreement->down_payment, 2) }}
    </div>
    <div>
      <strong>Instalments:</strong> {{ $agreement->instalments_count }} × {{ $currency }}{{ number_format($agreement->instalment_amount, 2) }}
    </div>
    <div>
      <strong>Start Date:</strong> {{ $agreement->start_date }}
    </div>
    <div>
      <strong>Status:</strong> {{ $agreement->status }}
    </div>
  </div>

  <h3>Payments</h3>
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Due Date</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach($agreement->payments as $p)
          <tr>
            <td>{{ $p->id }}</td>
            <td>{{ $p->due_date }}</td>
            <td>{{ $currency }}{{ number_format($p->amount, 2) }}</td>
            <td>
              @if($p->status === 'paid')
                <span class="status status-paid">Paid</span>
              @else
                <span class="status status-pending">Pending</span>
              @endif
            </td>
            <td>
              @if($p->status !== 'paid')
                <form method="post" action="{{ route('payments.markPaid', $p) }}">
                  @csrf
                  <button class="btn btn-primary" type="submit">Mark Paid</button>
                </form>
              @endif
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <div style="margin-top:12px; display:flex; gap:8px;">
    <a class="btn btn-secondary" href="{{ route('agreements.edit', $agreement) }}">Edit Agreement</a>
    <a class="btn btn-primary" href="{{ route('agreements.invoice', $agreement) }}">View Invoice</a>
    <button class="btn btn-primary" onclick="window.open('{{ route('agreements.invoice', $agreement) }}','_blank')">Print Invoice</button>
  </div>
@endsection