@extends('layout')

@section('page_title', 'Payment Details')

@section('content')
  <div class="header-actions">
    <h2>Payment Details</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('payments.index') }}">Back to Payments</a>
  </div>

  <div class="grid">
    <div class="card" style="grid-column: span 8;">
      <div class="card-header">
        <h3>Payment Information</h3>
      </div>
      
      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
        <div>
          <div class="stat-title">Payment ID</div>
          <div class="stat-value">{{ $payment->id }}</div>
        </div>
        
        <div>
          <div class="stat-title">Amount</div>
          <div class="stat-value">{{ $currency }}{{ number_format($payment->amount, 2) }}</div>
        </div>
        
        <div>
          <div class="stat-title">Due Date</div>
          <div class="stat-value">{{ $payment->due_date->format('M d, Y') }}</div>
        </div>
        
        <div>
          <div class="stat-title">Status</div>
          <div class="stat-value">
            @if($payment->status === 'paid')
              <span class="status status-paid">Paid</span>
            @else
              <span class="status status-pending">Pending</span>
            @endif
          </div>
        </div>
        
        @if($payment->paid_at)
          <div>
            <div class="stat-title">Paid Date</div>
            <div class="stat-value">{{ $payment->paid_at->format('M d, Y') }}</div>
          </div>
        @endif
      </div>
      
      @if($payment->status !== 'paid')
        <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);">
          <form method="POST" action="{{ route('payments.markPaid', $payment) }}">
            @csrf
            <button type="submit" class="btn btn-primary">Mark as Paid</button>
          </form>
        </div>
      @endif
    </div>
    
    <div class="card" style="grid-column: span 4;">
      <div class="card-header">
        <h3>Agreement Details</h3>
      </div>
      
      <div style="margin-bottom: 15px;">
        <div class="stat-title">Agreement ID</div>
        <div>
          <a href="{{ route('agreements.show', $payment->agreement) }}">#{{ $payment->agreement->id }}</a>
        </div>
      </div>
      
      <div style="margin-bottom: 15px;">
        <div class="stat-title">Customer</div>
        <div>
          @if($payment->agreement->customer)
            {{ $payment->agreement->customer->name }}
            <div class="small text-muted">{{ $payment->agreement->customer->email }}</div>
          @else
            {{ $payment->agreement->customer_name }}
          @endif
        </div>
      </div>
      
      <div style="margin-bottom: 15px;">
        <div class="stat-title">Product</div>
        <div>
          @if($payment->agreement->product)
            {{ $payment->agreement->product->name }}
          @else
            <span class="text-muted">—</span>
          @endif
        </div>
      </div>
      
      <div>
        <div class="stat-title">Total Instalment Amount</div>
        <div>{{ $currency }}{{ number_format($payment->agreement->total_amount, 2) }}</div>
      </div>
    </div>
  </div>
@endsection