@extends('admin.layouts.app')

@section('title', 'Reservation Details')
@section('page_title', 'Reservation Details')

@section('content')
    @php
        $bookingTypeLabel = $bookingTypes[
            $reservation->booking_type
        ] ?? \Illuminate\Support\Str::headline(
            $reservation->booking_type
        );

        $statusLabel = $statuses[
            $reservation->status
        ] ?? \Illuminate\Support\Str::headline(
            $reservation->status
        );

        $statusClass = match ($reservation->status) {
            \App\Models\Reservation::STATUS_PENDING
                => 'status-pending',

            \App\Models\Reservation::STATUS_CONTACTED
                => 'status-contacted',

            \App\Models\Reservation::STATUS_CONFIRMED
                => 'status-confirmed',

            \App\Models\Reservation::STATUS_COMPLETED
                => 'status-completed',

            \App\Models\Reservation::STATUS_CANCELLED
                => 'status-cancelled',

            default => 'status-unknown',
        };

        $estimatedAmount = ! is_null(
            $reservation->estimated_amount
        )
            ? (float) $reservation->estimated_amount
            : null;

        $advanceAmount = ! is_null(
            $reservation->advance_amount
        )
            ? (float) $reservation->advance_amount
            : null;

        $remainingAmount = ! is_null($estimatedAmount)
            ? $estimatedAmount - ($advanceAmount ?? 0)
            : null;
    @endphp

    <div class="page-heading reservation-page-heading">
        <div>
            <div class="heading-back-link">
                <a href="{{ route('admin.reservations.index') }}">
                    ← Back to Reservations
                </a>
            </div>

            <h1>
                {{ $reservation->booking_number }}
            </h1>

            <p>
                Review the complete reservation information and
                update its processing details.
            </p>
        </div>

        <div class="heading-badges">
            <span class="badge booking-type-badge">
                {{ $bookingTypeLabel }}
            </span>

            <span
                class="badge reservation-status {{ $statusClass }}"
            >
                {{ $statusLabel }}
            </span>
        </div>
    </div>

   
    @if ($errors->any())
        <div class="alert alert-danger validation-alert">
            <strong>
                Please correct the following information:
            </strong>

            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="reservation-layout">
        <div class="reservation-details-column">
            {{-- Reservation overview --}}
            <div class="panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">
                            Reservation Overview
                        </h2>

                        <div class="panel-subtitle">
                            General booking and submission information.
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">
                                Booking Number
                            </div>

                            <div class="detail-value booking-number">
                                {{ $reservation->booking_number }}
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Booking Type
                            </div>

                            <div class="detail-value">
                                {{ $bookingTypeLabel }}
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Source
                            </div>

                            <div class="detail-value">
                                {{ $reservation->source
                                    ? \Illuminate\Support\Str::headline(
                                        $reservation->source
                                    )
                                    : 'Not specified' }}
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Current Status
                            </div>

                            <div class="detail-value">
                                <span
                                    class="badge reservation-status {{ $statusClass }}"
                                >
                                    {{ $statusLabel }}
                                </span>
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Submitted At
                            </div>

                            <div class="detail-value">
                                {{ $reservation->created_at
                                    ? $reservation->created_at
                                        ->format('d M Y, h:i A')
                                    : 'Not available' }}
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Last Updated
                            </div>

                            <div class="detail-value">
                                {{ $reservation->updated_at
                                    ? $reservation->updated_at
                                        ->format('d M Y, h:i A')
                                    : 'Not available' }}
                            </div>
                        </div>

                        @if ($reservation->confirmed_at)
                            <div class="detail-item">
                                <div class="detail-label">
                                    Confirmed At
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->confirmed_at
                                        ->format('d M Y, h:i A') }}
                                </div>
                            </div>
                        @endif

                        @if ($reservation->cancelled_at)
                            <div class="detail-item">
                                <div class="detail-label">
                                    Cancelled At
                                </div>

                                <div class="detail-value danger-text">
                                    {{ $reservation->cancelled_at
                                        ->format('d M Y, h:i A') }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Guest information --}}
            <div class="panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">
                            Guest Information
                        </h2>

                        <div class="panel-subtitle">
                            Contact information submitted by the guest.
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">
                                Guest Name
                            </div>

                            <div class="detail-value">
                                {{ $reservation->guest_name }}
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Phone Number
                            </div>

                            <div class="detail-value">
                                <a
                                    class="detail-link"
                                    href="tel:{{ $reservation->phone }}"
                                >
                                    {{ $reservation->phone }}
                                </a>
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Email Address
                            </div>

                            <div class="detail-value">
                                @if ($reservation->email)
                                    <a
                                        class="detail-link"
                                        href="mailto:{{ $reservation->email }}"
                                    >
                                        {{ $reservation->email }}
                                    </a>
                                @else
                                    <span class="not-provided">
                                        Not provided
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="detail-item">
                            <div class="detail-label">
                                Company Name
                            </div>

                            <div class="detail-value">
                                {{ $reservation->company_name
                                    ?: 'Not provided' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Room reservation details --}}
            @if (
                $reservation->booking_type
                === \App\Models\Reservation::TYPE_ROOM
            )
                <div class="panel">
                    <div class="panel-header">
                        <div>
                            <h2 class="panel-title">
                                Room Reservation Details
                            </h2>

                            <div class="panel-subtitle">
                                Requested room, dates and guest occupancy.
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="details-grid">
                            <div class="detail-item detail-item-wide">
                                <div class="detail-label">
                                    Room Type
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->roomType?->name
                                        ?? 'Deleted or unavailable room type' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Check-in Date
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->check_in
                                        ? $reservation->check_in
                                            ->format('d M Y')
                                        : 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Check-out Date
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->check_out
                                        ? $reservation->check_out
                                            ->format('d M Y')
                                        : 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Number of Rooms
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->number_of_rooms
                                        ?? 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Adults
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->adults
                                        ?? 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Children
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->children ?? 0 }}
                                </div>
                            </div>

                            @if (
                                $reservation->check_in
                                && $reservation->check_out
                            )
                                <div class="detail-item">
                                    <div class="detail-label">
                                        Number of Nights
                                    </div>

                                    <div class="detail-value">
                                        {{ $reservation->check_in
                                            ->diffInDays(
                                                $reservation->check_out
                                            ) }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            {{-- Venue and event details --}}
            @if (
                $reservation->booking_type
                === \App\Models\Reservation::TYPE_VENUE_EVENT
            )
                <div class="panel">
                    <div class="panel-header">
                        <div>
                            <h2 class="panel-title">
                                Venue & Event Details
                            </h2>

                            <div class="panel-subtitle">
                                Event service, schedule and expected attendance.
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-label">
                                    Requested Service
                                </div>

                                <div class="detail-value">
                                   {{
    $reservation->venue?->name
        ?? $reservation->service_name
        ?? 'Not specified'
}}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Event Type
                                </div>

                                <div class="detail-value">
                                    {{
    $reservation->eventType?->name
        ?? (
            $reservation->event_type
                ? \Illuminate\Support\Str::headline(
                    $reservation->event_type
                )
                : 'Not specified'
        )
}}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Event Date
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->event_date
                                        ? $reservation->event_date
                                            ->format('d M Y')
                                        : 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Expected Guests
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->expected_guests
                                        ?? 'Not specified' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Package reservation details --}}
            @if (
                $reservation->booking_type
                === \App\Models\Reservation::TYPE_PACKAGE
            )
                <div class="panel">
                    <div class="panel-header">
                        <div>
                            <h2 class="panel-title">
                                Day Package Details
                            </h2>

                            <div class="panel-subtitle">
                                Requested package date and guest information.
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-label">
                                    Package Name
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->service_name
                                        ?: 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Reservation Date
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->event_date
                                        ? $reservation->event_date
                                            ->format('d M Y')
                                        : 'Not specified' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-label">
                                    Expected Guests
                                </div>

                                <div class="detail-value">
                                    {{ $reservation->expected_guests
                                        ?? 'Not specified' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Special request --}}
            <div class="panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">
                            Guest Message / Special Request
                        </h2>

                        <div class="panel-subtitle">
                            Additional information submitted with the reservation.
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    @if ($reservation->special_request)
                        <div class="request-text">
                            {!! nl2br(
                                e($reservation->special_request)
                            ) !!}
                        </div>
                    @else
                        <div class="empty-information">
                            No special request was provided.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Admin update form --}}
        <div class="reservation-action-column">
            <div class="panel action-panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">
                            Admin Processing
                        </h2>

                        <div class="panel-subtitle">
                            Update status, amount and internal note.
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <form
                        method="POST"
                        action="{{ route(
                            'admin.reservations.update',
                            $reservation
                        ) }}"
                    >
                        @csrf
                        @method('PATCH')

                        <div class="form-group">
                            <label
                                class="form-label"
                                for="reservationStatus"
                            >
                                Reservation Status
                                <span class="required-mark">*</span>
                            </label>

                            <select
                                class="form-control
                                    @error('status') is-invalid @enderror"
                                id="reservationStatus"
                                name="status"
                                required
                            >
                                @foreach ($statuses as $value => $label)
                                    <option
                                        value="{{ $value }}"
                                        {{ old(
                                            'status',
                                            $reservation->status
                                        ) === $value
                                            ? 'selected'
                                            : '' }}
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>

                            @error('status')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label
                                class="form-label"
                                for="estimatedAmount"
                            >
                                Estimated Amount
                            </label>

                            <div class="amount-input">
                                <span class="amount-symbol">৳</span>

                                <input
                                    class="form-control
                                        @error('estimated_amount')
                                            is-invalid
                                        @enderror"
                                    id="estimatedAmount"
                                    type="number"
                                    name="estimated_amount"
                                    value="{{ old(
                                        'estimated_amount',
                                        $reservation->estimated_amount
                                    ) }}"
                                    min="0"
                                    max="9999999999.99"
                                    step="0.01"
                                    placeholder="0.00"
                                >
                            </div>

                            @error('estimated_amount')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label
                                class="form-label"
                                for="advanceAmount"
                            >
                                Advance Amount
                            </label>

                            <div class="amount-input">
                                <span class="amount-symbol">৳</span>

                                <input
                                    class="form-control
                                        @error('advance_amount')
                                            is-invalid
                                        @enderror"
                                    id="advanceAmount"
                                    type="number"
                                    name="advance_amount"
                                    value="{{ old(
                                        'advance_amount',
                                        $reservation->advance_amount
                                    ) }}"
                                    min="0"
                                    max="9999999999.99"
                                    step="0.01"
                                    placeholder="0.00"
                                >
                            </div>

                            @error('advance_amount')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="amount-summary">
                            <div class="amount-summary-row">
                                <span>Estimated</span>

                                <strong id="estimatedAmountPreview">
                                    ৳{{ number_format(
                                        $estimatedAmount ?? 0,
                                        2
                                    ) }}
                                </strong>
                            </div>

                            <div class="amount-summary-row">
                                <span>Advance</span>

                                <strong id="advanceAmountPreview">
                                    ৳{{ number_format(
                                        $advanceAmount ?? 0,
                                        2
                                    ) }}
                                </strong>
                            </div>

                            <div class="amount-summary-row total-row">
                                <span>Estimated Remaining</span>

                                <strong id="remainingAmountPreview">
                                    ৳{{ number_format(
                                        $remainingAmount ?? 0,
                                        2
                                    ) }}
                                </strong>
                            </div>
                        </div>

                        <div class="form-group">
                            <label
                                class="form-label"
                                for="adminNote"
                            >
                                Admin Note
                            </label>

                            <textarea
                                class="form-control admin-note
                                    @error('admin_note')
                                        is-invalid
                                    @enderror"
                                id="adminNote"
                                name="admin_note"
                                rows="7"
                                maxlength="5000"
                                placeholder="Write an internal note about this reservation..."
                            >{{ old(
                                'admin_note',
                                $reservation->admin_note
                            ) }}</textarea>

                            <div class="field-help">
                                This note is only for Admin use and
                                will not be shown to the guest.
                            </div>

                            @error('admin_note')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="update-actions">
                            <button
                                class="btn btn-primary"
                                type="submit"
                            >
                                Update Reservation
                            </button>

                            <a
                                class="btn btn-secondary"
                                href="{{ route(
                                    'admin.reservations.index'
                                ) }}"
                            >
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="panel status-guide-panel">
                <div class="panel-header">
                    <h2 class="panel-title">
                        Status Guide
                    </h2>
                </div>

                <div class="panel-body">
                    <div class="status-guide-item">
                        <span class="status-dot pending-dot"></span>

                        <div>
                            <strong>Pending</strong>
                            <p>New request awaiting review.</p>
                        </div>
                    </div>

                    <div class="status-guide-item">
                        <span class="status-dot contacted-dot"></span>

                        <div>
                            <strong>Contacted</strong>
                            <p>The guest has been contacted.</p>
                        </div>
                    </div>

                    <div class="status-guide-item">
                        <span class="status-dot confirmed-dot"></span>

                        <div>
                            <strong>Confirmed</strong>
                            <p>The reservation has been confirmed.</p>
                        </div>
                    </div>

                    <div class="status-guide-item">
                        <span class="status-dot completed-dot"></span>

                        <div>
                            <strong>Completed</strong>
                            <p>The reservation service is complete.</p>
                        </div>
                    </div>

                    <div class="status-guide-item">
                        <span class="status-dot cancelled-dot"></span>

                        <div>
                            <strong>Cancelled</strong>
                            <p>The reservation has been cancelled.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .reservation-page-heading {
            align-items: flex-end;
            gap: 20px;
        }

        .heading-back-link {
            margin-bottom: 9px;
        }

        .heading-back-link a {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
        }

        .heading-back-link a:hover {
            color: var(--navy);
        }

        .heading-badges {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
        }

        .reservation-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.65fr) minmax(330px, .75fr);
            align-items: start;
            gap: 24px;
        }

        .reservation-details-column,
        .reservation-action-column {
            min-width: 0;
        }

        .reservation-details-column .panel,
        .reservation-action-column .panel {
            margin-bottom: 24px;
        }

        .panel-subtitle {
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .detail-item {
            min-width: 0;
            padding-bottom: 16px;
            border-bottom: 1px solid #edf1f3;
        }

        .detail-item-wide {
            grid-column: 1 / -1;
        }

        .detail-label {
            margin-bottom: 6px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .detail-value {
            color: var(--navy);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.55;
            overflow-wrap: anywhere;
        }

        .booking-number {
            color: #8d6a28;
        }

        .detail-link {
            color: #2c6093;
            text-decoration: none;
        }

        .detail-link:hover {
            text-decoration: underline;
        }

        .not-provided,
        .empty-information {
            color: var(--muted);
            font-weight: 400;
        }

        .danger-text {
            color: #b53c3c;
        }

        .request-text {
            color: #40545e;
            font-size: 14px;
            line-height: 1.8;
            overflow-wrap: anywhere;
        }

        .booking-type-badge {
            background: #edf3f6;
            color: #365b6e;
            white-space: nowrap;
        }

        .reservation-status {
            white-space: nowrap;
        }

        .status-pending {
            background: #fff7df;
            color: #946c16;
        }

        .status-contacted {
            background: #eaf3ff;
            color: #2c6093;
        }

        .status-confirmed {
            background: #e8f8ee;
            color: #27754a;
        }

        .status-completed {
            background: #e8f4f2;
            color: #17685f;
        }

        .status-cancelled {
            background: #fff0f0;
            color: #b53c3c;
        }

        .status-unknown {
            background: #edf2f5;
            color: #526975;
        }

        .action-panel {
           position: static;
            top: 24px;
        }

        .action-panel .form-group {
            margin-bottom: 18px;
        }

        .required-mark {
            color: #b53c3c;
        }

        .amount-input {
            position: relative;
        }

        .amount-symbol {
            position: absolute;
            top: 50%;
            left: 13px;
            z-index: 1;
            color: #526975;
            font-weight: 800;
            transform: translateY(-50%);
        }

        .amount-input .form-control {
            padding-left: 34px;
        }

        .admin-note {
            min-height: 145px;
            resize: vertical;
            line-height: 1.6;
        }

        .field-help {
            margin-top: 6px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .field-error {
            margin-top: 6px;
            color: #b53c3c;
            font-size: 12px;
            font-weight: 700;
        }

        .is-invalid {
            border-color: #d96a6a !important;
        }

        .validation-alert ul {
            margin: 8px 0 0;
            padding-left: 20px;
        }

        .amount-summary {
            margin: 4px 0 20px;
            padding: 15px;
            border: 1px solid #e6ecef;
            border-radius: 10px;
            background: #f8fafb;
        }

        .amount-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 6px 0;
            color: #526975;
            font-size: 13px;
        }

        .amount-summary-row strong {
            color: var(--navy);
        }

        .amount-summary-row.total-row {
            margin-top: 6px;
            padding-top: 12px;
            border-top: 1px solid #dde5e9;
            color: var(--navy);
            font-weight: 800;
        }

        .update-actions {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .update-actions .btn {
            flex: 1;
        }

        .status-guide-panel .panel-body {
            padding-top: 18px;
            padding-bottom: 8px;
        }

        .status-guide-item {
            display: grid;
            grid-template-columns: 12px minmax(0, 1fr);
            align-items: start;
            gap: 10px;
            margin-bottom: 14px;
        }

        .status-guide-item strong {
            color: var(--navy);
            font-size: 13px;
        }

        .status-guide-item p {
            margin: 2px 0 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .status-dot {
            width: 9px;
            height: 9px;
            margin-top: 5px;
            border-radius: 50%;
        }

        .pending-dot {
            background: #d9a82e;
        }

        .contacted-dot {
            background: #4684bd;
        }

        .confirmed-dot {
            background: #3b9563;
        }

        .completed-dot {
            background: #278579;
        }

        .cancelled-dot {
            background: #cc5555;
        }

        @media (max-width: 1150px) {
            .reservation-layout {
                grid-template-columns: 1fr;
            }

        
        }

        @media (max-width: 760px) {
            .reservation-page-heading {
                align-items: flex-start;
            }

            .heading-badges {
                justify-content: flex-start;
            }

            .details-grid {
                grid-template-columns: 1fr;
            }

            .detail-item-wide {
                grid-column: auto;
            }

            .update-actions {
                align-items: stretch;
                flex-direction: column;
            }

            .update-actions .btn {
                width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const estimatedInput =
                document.getElementById('estimatedAmount');

            const advanceInput =
                document.getElementById('advanceAmount');

            const estimatedPreview =
                document.getElementById('estimatedAmountPreview');

            const advancePreview =
                document.getElementById('advanceAmountPreview');

            const remainingPreview =
                document.getElementById('remainingAmountPreview');

            function formatAmount(amount) {
                return '৳' + amount.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function updateAmountSummary() {
                const estimated =
                    parseFloat(estimatedInput.value) || 0;

                const advance =
                    parseFloat(advanceInput.value) || 0;

                const remaining = estimated - advance;

                estimatedPreview.textContent =
                    formatAmount(estimated);

                advancePreview.textContent =
                    formatAmount(advance);

                remainingPreview.textContent =
                    formatAmount(remaining);

                remainingPreview.style.color =
                    remaining < 0 ? '#b53c3c' : '';
            }

            estimatedInput.addEventListener(
                'input',
                updateAmountSummary
            );

            advanceInput.addEventListener(
                'input',
                updateAmountSummary
            );

            updateAmountSummary();
        });
    </script>
@endpush