@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">Add</li>
        </ol>
      </nav>
      <h4 class="mb-0">Add Payment Receipt</h4>
      <div class="text-muted small">Capture payment received, deductions, and project snapshots.</div>
    </div>

    <div class="mt-2 mt-md-0">
      <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.store') }}" class="pr-form">
    @csrf
    <input type="hidden" name="save_new" id="save_new" value="0">

    <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">Start with the project and receipt date.</div>
          </div>
          <span class="badge bg-light text-dark border">All amounts accept commas</span>
        </div>
      </div>

      <div class="card-body p-3 p-md-4">
        @include('payment_receipts._form', ['mode' => 'create'])
      </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> Save
        </button>
        <button type="button" class="btn btn-outline-primary" id="btnSaveNew">
          <i class="bi bi-plus-circle"></i> Save & New
        </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