Demo Mode: you're exploring a live BackupMGR panel with sample data. Everything is read-only. Get BackupMGR →

License Key Required

No license key entered. Enter or update your key with php artisan news:license <key>, or purchase one at scriptgain.com.

Review

site.pay.review

Status Shipped Default Shipped File resources/views/site/pay/review.blade.php
Open The Live Page
site.pay.review 126 lines
Not Checked Yet

Optional. Shown in the version history so the next person knows why.

Saving runs the same check. An invalid template is refused, not stored.

Compiled PHP

What Blade turns your template into. This is what the syntax check parses.

Loading…

Available Variables And Components

A guide to what this template can use, derived from the shipped source. Click any item to insert it at your cursor. It is a helpful reference, not a runtime guarantee.

Always Available

Shared with every public page by the site layout.
Validation error bag. Always present. Pairs with @error('field').
All site settings as an array, e.g. $site['site_name'].
The municipality's short display name.
The full legal name, e.g. "City Of Springfield".
Main navigation items. Loop over it with @foreach.
The small utility links in the top bar.
The footer navigation links.
The Quick Links grid items.
The first few Quick Links, featured in the hero.
The current emergency alert, or null when none is live.
Up to eight departments listed in the footer.
The configured page-width class, e.g. max-w-7xl. Use on your outer container.
The current year, for the footer copyright line.
URL of the uploaded site logo, or null.
URL of the uploaded favicon, or null.

In This Template

Bill.
Is Ready.
Is Test Mode.
Support Email.
Support Phone.

Drop any of these in. Click to insert the opening tag at your cursor.

General

type, info, title
initials, src, name, size, md
color, neutral, dot
action, label, Record, modal
variant, primary, size, md, href, …
title, subtitle, padding, flush
name, action, method, POST, title, …
action, name, title, message, confirm, …
href, icon, danger
align, right, width
icon, folder, title, description
label, for, hint, error, required
href, icon, title, variant, secondary, …
name
type, text
name, title, subtitle, icon, tone, …
href, icon, active
title, subtitle, icon, back
title, subtitle, href, linkLabel
ids
id, label, Row
items
label, value, icon, trend, trendColor, …
color, neutral, pulse, label
name
flush
tabs, default
name, checked, label, description

Admin Panel

title, message, icon, folder, href, …
tree, active, rootLabel, rootHref
title, subtitle, icon, edit, action, …
title, icon, folder, subtitle, records, …
search, placeholder, createHref, createLabel
edit, delete, preview, name, title, …
record, kind, Page

Layouts

title, shellMaxWidth
title, description, heroless, maxWidth

Records

name, action, reference, trigger, icon

Site (Public)

href, title, description, icon, meta, …
title, message, icon, folder
title, subtitle, eyebrow, icon, crumbs, …
supportEmail, supportPhone
disclaimer, takedownContact, retentionDays, compact
title, subtitle, href, linkLabel, tone, …
maxWidth

Common Blade

Print a value, safely escaped. The default choice.
Print raw HTML. Only for content you trust.
Show something conditionally.
Loop over a collection.
Loop, with a fallback when the collection is empty.
Show a validation message for a field.
A small block of PHP. Never on line 1. Keep logic out of templates.
A comment that never reaches the browser.

Civic Helpers

Build a URL to a named route, e.g. a department page.
Link to a single news post.
Turn a stored upload path into a public URL.
A cache-busted URL for a bundled asset.
Read a config value, e.g. the site width class.
Build an absolute URL to a path.

No History Yet

Every save, revert, and reset of this template is recorded here, with a one-click way back to any of them.

The Template That Shipped With The Product

Read only. This is what Reset To Default puts back.

<x-layouts.public title="Review Your Bill">
    @if ($isTestMode)
        <x-site.test-mode-banner />
    @endif

    <x-site.page-hero title="Review Your Bill"
                      eyebrow="Online Payments"
                      icon="file-text"
                      subtitle="Check the details below, then continue to payment."
                      :crumbs="[['label' => 'Pay Your Bill', 'href' => route('site.pay.index')], ['label' => 'Review']]" />

    <x-site.section :divider="false">
        @if (! $isReady)
            <x-site.payments-unavailable :supportEmail="$supportEmail" :supportPhone="$supportPhone" />
        @else
            <div class="mx-auto max-w-2xl">
                @error('payment')
                    <div role="alert" class="mb-6 rounded-xl bg-rose-50 px-4 py-3 text-sm text-rose-800 ring-1 ring-rose-200">
                        {{ $message }}
                    </div>
                @enderror

                {{-- The bill --}}
                <div class="overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200 shadow-sm">
                    <div class="flex flex-wrap items-start justify-between gap-3 border-b border-slate-100 bg-slate-50/70 px-6 py-4">
                        <div class="min-w-0">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Bill Reference</p>
                            <p class="mt-0.5 font-semibold tabular text-slate-900">{{ $bill->reference }}</p>
                        </div>
                        <x-badge :color="$bill->statusColor()" dot>{{ $bill->isOverdue() ? 'Overdue' : $bill->statusLabel() }}</x-badge>
                    </div>

                    <dl class="divide-y divide-slate-100">
                        <div class="flex items-start justify-between gap-4 px-6 py-4">
                            <dt class="text-sm text-slate-500">What This Is For</dt>
                            <dd class="text-right text-sm font-medium text-slate-900">
                                {{ $bill->type?->label }}
                                @if ($bill->description)
                                    <span class="block font-normal text-slate-600">{{ $bill->description }}</span>
                                @endif
                            </dd>
                        </div>

                        @if ($bill->account_number)
                            <div class="flex items-start justify-between gap-4 px-6 py-4">
                                <dt class="text-sm text-slate-500">Account Number</dt>
                                <dd class="text-right text-sm tabular text-slate-900">{{ $bill->account_number }}</dd>
                            </div>
                        @endif

                        @if ($bill->payer_name)
                            <div class="flex items-start justify-between gap-4 px-6 py-4">
                                <dt class="text-sm text-slate-500">Billed To</dt>
                                <dd class="text-right text-sm text-slate-900">{{ $bill->payer_name }}</dd>
                            </div>
                        @endif

                        <div class="flex items-start justify-between gap-4 px-6 py-4">
                            <dt class="text-sm text-slate-500">Due Date</dt>
                            <dd class="text-right text-sm {{ $bill->isOverdue() ? 'font-semibold text-rose-700' : 'text-slate-900' }}">
                                {{ $bill->dueLabel() }}
                            </dd>
                        </div>

                        <div class="flex items-start justify-between gap-4 px-6 py-4">
                            <dt class="text-sm text-slate-500">Bill Total</dt>
                            <dd class="text-right text-sm tabular text-slate-900">{{ $bill->amountFormatted() }}</dd>
                        </div>

                        @if ($bill->amount_paid_cents > 0)
                            <div class="flex items-start justify-between gap-4 px-6 py-4">
                                <dt class="text-sm text-slate-500">Already Paid</dt>
                                <dd class="text-right text-sm tabular text-emerald-700">- {{ $bill->paidFormatted() }}</dd>
                            </div>
                        @endif
                    </dl>

                    <div class="flex items-center justify-between gap-4 border-t-2 border-slate-200 bg-brand-50/60 px-6 py-5">
                        <span class="text-base font-semibold text-slate-900">Amount To Pay Now</span>
                        <span class="text-2xl font-semibold tabular text-brand-800">{{ $bill->balanceFormatted() }}</span>
                    </div>
                </div>

                {{-- Contact details for the receipt --}}
                <form method="POST" action="{{ route('site.pay.start') }}" class="mt-6 rounded-2xl bg-white p-6 sm:p-8 ring-1 ring-slate-200 shadow-sm">
                    @csrf

                    <h2 class="text-base font-semibold text-slate-900">Where Should We Send Your Receipt?</h2>
                    <p class="mt-1 text-sm text-slate-600">Optional, but it is the easiest way to keep proof of payment.</p>

                    <div class="mt-5 grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="payer_name" class="block text-sm font-medium text-slate-700">Your Name</label>
                            <input id="payer_name" name="payer_name" type="text" maxlength="150"
                                   value="{{ old('payer_name', $bill->payer_name) }}" autocomplete="name"
                                   class="mt-1.5 block w-full rounded-lg border-0 py-2.5 px-3 text-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-brand-600">
                        </div>
                        <div>
                            <label for="payer_email" class="block text-sm font-medium text-slate-700">Email Address</label>
                            <input id="payer_email" name="payer_email" type="email" maxlength="150"
                                   value="{{ old('payer_email', $bill->payer_email) }}" autocomplete="email"
                                   class="mt-1.5 block w-full rounded-lg border-0 py-2.5 px-3 text-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-brand-600">
                            @error('payer_email')
                                <p class="mt-1.5 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="section-divider mt-6 pt-6 flex flex-wrap items-center justify-between gap-3">
                        <a href="{{ route('site.pay.lookup') }}"
                           class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition hover:text-brand-700">
                            <x-icon name="chevron-left" class="w-4 h-4" aria-hidden="true" />
                            Look Up A Different Bill
                        </a>
                        <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-brand-700 px-6 py-3.5 text-base font-semibold text-white transition hover:bg-brand-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2">
                            Continue To Payment
                            <x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
                        </button>
                    </div>
                </form>
            </div>
        @endif
    </x-site.section>
</x-layouts.public>

Blade In One Screen

The directives you will use most.

{{ $variable }}
Print a value, escaped. Safe by default.
{!! $html !!}
Print raw HTML. Only for content you trust.
@if / @else / @endif
Show something conditionally.
@foreach / @endforeach
Loop over a collection.
<x-card>
Use a shared component. Every component in Shared Components is available.
{{-- comment --}}
A comment that never reaches the browser.

House Rules

Follow these and your edits will survive updates.

  • Never start line 1 with @php. Blade mis-parses it and the page fails. The editor refuses to save it.
  • Keep logic out of templates. If you need a calculation, it belongs in a composer or component class, not here.
  • The shipped file is never modified. Reset To Default always gets you back.
  • Every save is versioned. You can revert to any earlier version in one click.
  • Press Tab inside the editor to indent rather than jump to the next field.