@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
  {{-- Breadcrumb & Title --}}
  <div class="page-breadcrumb d-flex flex-column flex-sm-row 
              align-items-center justify-content-between mb-4 p-3 
              bg-primary text-white rounded shadow-sm">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0 p-0">
        <li class="breadcrumb-item">
          <a href="{{ route('ap.payments.index') }}" class="text-white">
            <i class="bx bx-chevron-left"></i> Back
          </a>
        </li>
        <li class="breadcrumb-item active text-white" aria-current="page">Payment #{{ $payment->id }}</li>
      </ol>
    </nav>
    <h5 class="mb-0">Payment Details</h5>
  </div>

  {{-- Top summary cards --}}
  <div class="row g-3 mb-4">
    <div class="col-md-3">
      <div class="card border-0 shadow-sm rounded-lg text-center p-3">
        <div class="card-body">
          <i class="bx bx-receipt fs-2 text-primary mb-2"></i>
          <h6 class="text-muted">Reference</h6>
          <p class="fw-bold">#{{ $payment->bill->reference }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm rounded-lg text-center p-3">
        <div class="card-body">
          <i class="bx bx-user fs-2 text-success mb-2"></i>
          <h6 class="text-muted">Vendor</h6>
          <p class="fw-bold">{{ $payment->bill->vendor->name }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm rounded-lg text-center p-3">
        <div class="card-body">
          <i class="bx bx-calendar fs-2 text-warning mb-2"></i>
          <h6 class="text-muted">Date</h6>
          <p class="fw-bold">{{ \Carbon\Carbon::parse($payment->payment_date)->format('Y-m-d') }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm rounded-lg text-center p-3">
        <div class="card-body">
          <i class="bx bx-money fs-2 text-danger mb-2"></i>
          <h6 class="text-muted">Amount</h6>
          <p class="fw-bold">{{ number_format($payment->amount,2) }}</p>
        </div>
      </div>
    </div>
  </div>

  {{-- Detailed info --}}
  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-header bg-light">
      <h5 class="mb-0">Additional Information</h5>
    </div>
    <div class="card-body p-4">
      <dl class="row mb-0">
        <dt class="col-sm-3">Payment Method</dt>
        <dd class="col-sm-9">{{ ucfirst($payment->payment_method) }}</dd>

        @if($payment->notes)
          <dt class="col-sm-3">Notes</dt>
          <dd class="col-sm-9">{{ $payment->notes }}</dd>
        @endif
      </dl>
    </div>
  </div>
</div>

@endsection