@extends('layout')

@section('content')
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
    <h2>Product: {{ $product->name }}</h2>
    <div>
      <a class="btn btn-secondary" href="{{ route('products.edit', $product) }}">Edit</a>
      <a class="btn btn-secondary" href="{{ route('products.index') }}">Back</a>
    </div>
  </div>

  <div class="grid">
    <div><strong>Category:</strong> {{ optional($product->category)->name ?? '—' }}</div>
    <div><strong>Brand:</strong> {{ $product->brand ?? '—' }}</div>
    <div><strong>Model:</strong> {{ $product->model ?? '—' }}</div>
    <div><strong>IMEI:</strong> {{ $product->imei ?? '—' }}</div>
    <div><strong>Serial:</strong> {{ $product->serial_number ?? '—' }}</div>
    <div><strong>Price:</strong> {{ number_format($product->price, 2) }}</div>
    <div><strong>Stock:</strong> {{ $product->stock ?? '—' }}</div>
  </div>

  <h3 style="margin-top:16px;">Agreements</h3>
  @if($product->agreements->isEmpty())
    <p>No agreements.</p>
  @else
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Total</th>
            <th>Instalments</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach($product->agreements as $a)
            <tr>
              <td>{{ $a->id }}</td>
              <td>{{ optional($a->customer)->name ?? $a->customer_name }}</td>
              <td>{{ $currency }}{{ number_format($a->total_amount, 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 class="btn btn-secondary" href="{{ route('agreements.show', $a) }}">View</a>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
@endsection

@push('scripts')
@vite(['resources/js/app.js'])
@endpush