@extends('layout')

@section('page_title', 'Invoice')

@section('content')
  <div class="header-actions" style="align-items:center;">
    <h2>Invoice for Agreement #{{ $agreement->id }}</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('agreements.show', $agreement) }}">Back</a>
    <button class="btn btn-primary" onclick="window.print()">Print Invoice</button>
  </div>

  <div class="card" id="invoiceCard">
    <div class="card-header">
      <h3>Company Details</h3>
    </div>
    <div class="grid" style="grid-template-columns: repeat(12, 1fr);">
      <div style="grid-column: span 8;">
        <div style="font-weight:700; font-size:1.125rem;">{{ optional(App\Models\Setting::first())->company_name ?? 'InstalmentPro' }}</div>
        <div class="text-muted small">{{ config('app.url') ?? request()->getHost() }}</div>
      </div>
      <div style="grid-column: span 4; text-align:right;">
        @php($logo = optional(App\Models\Setting::first())->logo_path)
        @if($logo)
          <img src="{{ asset('storage/'.$logo) }}" alt="Company Logo" style="max-height:64px; max-width:160px; object-fit:contain;" />
        @endif
      </div>
    </div>
  </div>

  <div class="grid" style="margin-top: 12px;">
    <div class="card" style="grid-column: span 7;">
      <div class="card-header"><h3>Bill To</h3></div>
      <div>
        <div><strong>{{ optional($agreement->customer)->name ?? $agreement->customer_name }}</strong></div>
        @if($agreement->customer)
          <div class="small text-muted">{{ $agreement->customer->phone }} {{ $agreement->customer->email ? ' • '.$agreement->customer->email : '' }}</div>
          <div class="small text-muted">{{ $agreement->customer->address }}</div>
        @endif
      </div>
    </div>

    <div class="card" style="grid-column: span 5;">
      <div class="card-header"><h3>Invoice Info</h3></div>
      <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap:12px;">
        <div>
          <div class="small text-muted">Invoice #</div>
          <div><strong>AG-{{ str_pad($agreement->id, 5, '0', STR_PAD_LEFT) }}</strong></div>
        </div>
        <div>
          <div class="small text-muted">Date</div>
          <div><strong>{{ \Illuminate\Support\Carbon::parse($agreement->created_at)->format('M d, Y') }}</strong></div>
        </div>
        <div>
          <div class="small text-muted">Start Date</div>
          <div><strong>{{ $agreement->start_date }}</strong></div>
        </div>
        <div>
          <div class="small text-muted">Status</div>
          <div><strong>{{ ucfirst($agreement->status) }}</strong></div>
        </div>
      </div>
    </div>
  </div>

  @php($currency = optional(App\Models\Setting::first())->currency ?? '$')

  <div class="card" style="margin-top: 12px;">
    <div class="card-header"><h3>Agreement Summary</h3></div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Item</th>
            <th>Details</th>
            <th style="text-align:right;">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ optional($agreement->product)->name ?? 'Product/Service' }}</td>
            <td>
              Total: {{ $currency }}{{ number_format($agreement->total_amount, 2) }}
              @if($agreement->instalment_percentage)
                <div class="small text-muted">Instalment %: {{ $agreement->instalment_percentage }}%</div>
              @endif
              <div class="small text-muted">Instalments: {{ $agreement->instalments_count }} × {{ $currency }}{{ number_format($agreement->instalment_amount, 2) }}</div>
            </td>
            <td style="text-align:right;">{{ $currency }}{{ number_format($agreement->total_amount, 2) }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2" style="text-align:right;">Down Payment</th>
            <th style="text-align:right;">{{ $currency }}{{ number_format($agreement->down_payment, 2) }}</th>
          </tr>
          @php($base = max($agreement->total_amount - $agreement->down_payment, 0))
          @php($totalPayable = $base + ($agreement->instalment_percentage ? ($base * ($agreement->instalment_percentage/100)) : 0))
          <tr>
            <th colspan="2" style="text-align:right;">Amount After Down Payment</th>
            <th style="text-align:right;">{{ $currency }}{{ number_format($base, 2) }}</th>
          </tr>
          @if($agreement->instalment_percentage)
          <tr>
            <th colspan="2" style="text-align:right;">Markup ({{ $agreement->instalment_percentage }}%)</th>
            <th style="text-align:right;">{{ $currency }}{{ number_format($totalPayable - $base, 2) }}</th>
          </tr>
          @endif
          <tr>
            <th colspan="2" style="text-align:right;">Total Payable</th>
            <th style="text-align:right;">{{ $currency }}{{ number_format($totalPayable, 2) }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="card" style="margin-top: 12px;">
    <div class="card-header"><h3>Payment Schedule</h3></div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Due Date</th>
            <th style="text-align:right;">Amount</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @foreach($agreement->payments as $p)
            <tr>
              <td>{{ $p->id }}</td>
              <td>{{ \Illuminate\Support\Carbon::parse($p->due_date)->format('M d, Y') }}</td>
              <td style="text-align:right;">{{ $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>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <style>
    @media print {
      .header-actions, .topbar, .sidebar { display: none !important; }
      main { margin: 0; padding: 0; }
      #invoiceCard { box-shadow: none; border: none; }
    }
  </style>
@endsection