@extends('layouts.app')

@section('content')
<div class="container-fluid py-3">
  <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
      <nav aria-label="breadcrumb" class="small">
        <ol class="breadcrumb mb-1">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item"><a href="{{ route('payment-receipts.index') }}">Payment Receipts</a></li>
          <li class="breadcrumb-item active" aria-current="page">Edit</li>
        </ol>
      </nav>
      <h4 class="mb-0">Edit Payment Receipt</h4>
      <div class="text-muted small">Update payment and deduction details.</div>
    </div>

    <div class="mt-2 mt-md-0 d-flex gap-2">
      <a href="{{ route('payment-receipts.show', $paymentReceipt) }}" class="btn btn-outline-primary">
        <i class="bi bi-eye"></i> View
      </a>
      <a href="{{ route('payment-receipts.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Back
      </a>
    </div>
  </div>

  <form method="POST" action="{{ route('payment-receipts.update', $paymentReceipt) }}" class="pr-form">
    @csrf
    @method('PUT')

    <div class="card border-0 shadow-sm pr-card">
      <div class="card-header bg-white border-0 py-3">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <div class="fw-semibold">Payment Details</div>
            <div class="text-muted small">Keep project snapshots consistent.</div>
          </div>
          <span class="badge bg-light text-dark border">Receipt ID #{{ $paymentReceipt->id }}</span>
        </div>
      </div>

      <div class="card-body p-3 p-md-4">
        @include('payment_receipts._form', ['mode' => 'edit', 'paymentReceipt' => $paymentReceipt])
      </div>
    </div>

    <div class="pr-actions mt-3">
      <div class="d-flex flex-wrap gap-2 justify-content-end">
        <a href="{{ route('payment-receipts.index') }}" class="btn btn-light border">Cancel</a>
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-check2-circle"></i> Update
        </button>
      </div>
    </div>
  </form>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/payment-receipts.css') }}">
@endpush

@push('scripts')
<script src="{{ asset('assets/js/payment-receipts.js') }}"></script>
@endpush