@php
    $editing = isset($offerPackage) && $offerPackage;

    $selectedPackageType = old(
        'package_type',
        $editing ? $offerPackage->package_type : 'general'
    );

    $savedInclusions = old(
        'inclusions',
        $editing ? ($offerPackage->inclusions ?? []) : []
    );

    if (empty($savedInclusions)) {
        $savedInclusions = [''];
    }
@endphp

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<div class="offer-package-form-layout">
    <div class="offer-package-form-main">

        {{-- Basic Information --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Basic Information</h2>

                    <p class="panel-note">
                        Package name, type, URL and description.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid form-grid-title">
                    <div class="form-group">
                        <label for="name" class="form-label">
                            Package Name
                            <span class="required">*</span>
                        </label>

                        <input
                            type="text"
                            name="name"
                            id="name"
                            value="{{ old(
                                'name',
                                $editing ? $offerPackage->name : ''
                            ) }}"
                            class="form-control @error('name') has-error @enderror"
                            placeholder="Example: Weekend Family Package"
                            required
                        >

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

                    <div class="form-group">
                        <label for="small_title" class="form-label">
                            Small Title
                        </label>

                        <input
                            type="text"
                            name="small_title"
                            id="small_title"
                            value="{{ old(
                                'small_title',
                                $editing ? $offerPackage->small_title : ''
                            ) }}"
                            class="form-control @error('small_title') has-error @enderror"
                            placeholder="Relax, Stay and Celebrate"
                        >

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

                    <div class="form-group">
                        <label for="package_type" class="form-label">
                            Package Type
                            <span class="required">*</span>
                        </label>

                        <select
                            name="package_type"
                            id="package_type"
                            class="form-control @error('package_type') has-error @enderror"
                            required
                        >
                            <option
                                value="general"
                                @selected($selectedPackageType === 'general')
                            >
                                General Package
                            </option>

                            <option
                                value="room"
                                @selected($selectedPackageType === 'room')
                            >
                                Room Package
                            </option>

                            <option
                                value="event"
                                @selected($selectedPackageType === 'event')
                            >
                                Event Package
                            </option>

                            <option
                                value="dining"
                                @selected($selectedPackageType === 'dining')
                            >
                                Dining Package
                            </option>
                        </select>

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

                    <div class="form-group">
                        <label for="slug" class="form-label">
                            URL Slug
                        </label>

                        <input
                            type="text"
                            name="slug"
                            id="slug"
                            value="{{ old(
                                'slug',
                                $editing ? $offerPackage->slug : ''
                            ) }}"
                            class="form-control @error('slug') has-error @enderror"
                            placeholder="Leave empty to generate automatically"
                        >

                        <div class="form-help">
                            Example: weekend-family-package
                        </div>

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

                    <div class="form-group full">
                        <label
                            for="short_description"
                            class="form-label"
                        >
                            Short Description
                        </label>

                        <textarea
                            name="short_description"
                            id="short_description"
                            rows="3"
                            maxlength="500"
                            class="form-control @error('short_description') has-error @enderror"
                            placeholder="Short introduction for package cards..."
                        >{{ old(
                            'short_description',
                            $editing
                                ? $offerPackage->short_description
                                : ''
                        ) }}</textarea>

                        <div class="form-help">
                            Maximum 500 characters.
                        </div>

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

                    <div class="form-group full form-group-last">
                        <label for="description" class="form-label">
                            Full Description
                        </label>

                        <textarea
                            name="description"
                            id="description"
                            rows="9"
                            class="form-control @error('description') has-error @enderror"
                            placeholder="Write the complete package description..."
                        >{{ old(
                            'description',
                            $editing ? $offerPackage->description : ''
                        ) }}</textarea>

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

        {{-- Related Service --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Related Service</h2>

                    <p class="panel-note" id="relationshipHelp">
                        Select the service related to this package.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">

                    <div
                        class="form-group relationship-field"
                        id="roomTypeField"
                    >
                        <label for="room_type_id" class="form-label">
                            Room Type
                            <span
                                id="roomRequiredMark"
                                class="required"
                            >*</span>
                        </label>

                        <select
                            name="room_type_id"
                            id="room_type_id"
                            class="form-control @error('room_type_id') has-error @enderror"
                        >
                            <option value="">Select Room Type</option>

                            @foreach($roomTypes as $roomType)
                                <option
                                    value="{{ $roomType->id }}"
                                    @selected(
                                        (string) old(
                                            'room_type_id',
                                            $editing
                                                ? $offerPackage->room_type_id
                                                : ''
                                        ) === (string) $roomType->id
                                    )
                                >
                                    {{ $roomType->name }}
                                </option>
                            @endforeach
                        </select>

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

                    <div
                        class="form-group relationship-field"
                        id="venueField"
                    >
                        <label for="venue_id" class="form-label">
                            Venue
                        </label>

                        <select
                            name="venue_id"
                            id="venue_id"
                            class="form-control @error('venue_id') has-error @enderror"
                        >
                            <option value="">Select Venue</option>

                            @foreach($venues as $venue)
                                <option
                                    value="{{ $venue->id }}"
                                    @selected(
                                        (string) old(
                                            'venue_id',
                                            $editing
                                                ? $offerPackage->venue_id
                                                : ''
                                        ) === (string) $venue->id
                                    )
                                >
                                    {{ $venue->name }}
                                </option>
                            @endforeach
                        </select>

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

                    <div
                        class="form-group relationship-field"
                        id="eventTypeField"
                    >
                        <label for="event_type_id" class="form-label">
                            Event Type
                        </label>

                        <select
                            name="event_type_id"
                            id="event_type_id"
                            class="form-control @error('event_type_id') has-error @enderror"
                        >
                            <option value="">Select Event Type</option>

                            @foreach($eventTypes as $eventType)
                                <option
                                    value="{{ $eventType->id }}"
                                    @selected(
                                        (string) old(
                                            'event_type_id',
                                            $editing
                                                ? $offerPackage->event_type_id
                                                : ''
                                        ) === (string) $eventType->id
                                    )
                                >
                                    {{ $eventType->name }}
                                </option>
                            @endforeach
                        </select>

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

                    <div
                        class="relationship-empty full"
                        id="relationshipEmpty"
                    >
                        General packages are not connected to a specific
                        Room Type, Venue or Event Type.
                    </div>
                </div>
            </div>
        </section>

        {{-- Price and Availability --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">
                        Price and Availability
                    </h2>

                    <p class="panel-note">
                        Configure package prices and available dates.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="regular_price" class="form-label">
                            Regular Price
                            <span class="required">*</span>
                        </label>

                        <input
                            type="number"
                            name="regular_price"
                            id="regular_price"
                            value="{{ old(
                                'regular_price',
                                $editing
                                    ? $offerPackage->regular_price
                                    : 0
                            ) }}"
                            class="form-control @error('regular_price') has-error @enderror"
                            min="0"
                            step="0.01"
                            required
                        >

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

                    <div class="form-group">
                        <label for="offer_price" class="form-label">
                            Offer Price
                        </label>

                        <input
                            type="number"
                            name="offer_price"
                            id="offer_price"
                            value="{{ old(
                                'offer_price',
                                $editing
                                    ? $offerPackage->offer_price
                                    : ''
                            ) }}"
                            class="form-control @error('offer_price') has-error @enderror"
                            min="0"
                            step="0.01"
                            placeholder="Leave empty when there is no discount"
                        >

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

                    <div class="form-group">
                        <label for="start_date" class="form-label">
                            Start Date
                        </label>

                        <input
                            type="date"
                            name="start_date"
                            id="start_date"
                            value="{{ old(
                                'start_date',
                                $editing && $offerPackage->start_date
                                    ? $offerPackage->start_date
                                        ->format('Y-m-d')
                                    : ''
                            ) }}"
                            class="form-control @error('start_date') has-error @enderror"
                        >

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

                    <div class="form-group">
                        <label for="end_date" class="form-label">
                            End Date
                        </label>

                        <input
                            type="date"
                            name="end_date"
                            id="end_date"
                            value="{{ old(
                                'end_date',
                                $editing && $offerPackage->end_date
                                    ? $offerPackage->end_date
                                        ->format('Y-m-d')
                                    : ''
                            ) }}"
                            class="form-control @error('end_date') has-error @enderror"
                        >

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

        {{-- Inclusions --}}
        <section class="panel form-panel">
            <div class="panel-header inclusion-heading">
                <div>
                    <h2 class="panel-title">Package Inclusions</h2>

                    <p class="panel-note">
                        Add benefits, services and included items.
                    </p>
                </div>

                <button
                    type="button"
                    id="addInclusionButton"
                    class="btn btn-secondary"
                >
                    + Add Inclusion
                </button>
            </div>

            <div class="panel-body">
                <div id="inclusionsContainer">
                    @foreach($savedInclusions as $inclusion)
                        <div class="inclusion-row">
                            <span class="inclusion-mark">✓</span>

                            <input
                                type="text"
                                name="inclusions[]"
                                value="{{ $inclusion }}"
                                class="form-control"
                                placeholder="Example: Complimentary breakfast"
                            >

                            <button
                                type="button"
                                class="btn btn-danger remove-inclusion-button"
                            >
                                Remove
                            </button>
                        </div>
                    @endforeach
                </div>

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

                @error('inclusions.*')
                    <div class="field-error">{{ $message }}</div>
                @enderror
            </div>
        </section>

        {{-- Terms and SEO --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">
                        Terms and SEO Information
                    </h2>

                    <p class="panel-note">
                        Package conditions and optional search information.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group full">
                        <label
                            for="terms_conditions"
                            class="form-label"
                        >
                            Terms and Conditions
                        </label>

                        <textarea
                            name="terms_conditions"
                            id="terms_conditions"
                            rows="7"
                            class="form-control @error('terms_conditions') has-error @enderror"
                            placeholder="Write package terms and conditions..."
                        >{{ old(
                            'terms_conditions',
                            $editing
                                ? $offerPackage->terms_conditions
                                : ''
                        ) }}</textarea>

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

                    <div class="form-group full">
                        <label for="meta_title" class="form-label">
                            Meta Title
                        </label>

                        <input
                            type="text"
                            name="meta_title"
                            id="meta_title"
                            value="{{ old(
                                'meta_title',
                                $editing
                                    ? $offerPackage->meta_title
                                    : ''
                            ) }}"
                            class="form-control @error('meta_title') has-error @enderror"
                        >

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

                    <div class="form-group full form-group-last">
                        <label
                            for="meta_description"
                            class="form-label"
                        >
                            Meta Description
                        </label>

                        <textarea
                            name="meta_description"
                            id="meta_description"
                            rows="5"
                            maxlength="500"
                            class="form-control @error('meta_description') has-error @enderror"
                        >{{ old(
                            'meta_description',
                            $editing
                                ? $offerPackage->meta_description
                                : ''
                        ) }}</textarea>

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

    {{-- Right Sidebar --}}
    <aside class="offer-package-form-sidebar">
        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Publish Settings</h2>
            </div>

            <div class="panel-body">
                <div class="switch-setting">
                    <input type="hidden" name="status" value="0">

                    <label class="switch-line" for="status">
                        <input
                            type="checkbox"
                            name="status"
                            id="status"
                            value="1"
                            @checked(old(
                                'status',
                                $editing ? $offerPackage->status : true
                            ))
                        >

                        <span>
                            <strong>Active</strong>

                            <small>
                                Active packages can appear on the website.
                            </small>
                        </span>
                    </label>
                </div>

                <div class="switch-setting">
                    <input
                        type="hidden"
                        name="is_featured"
                        value="0"
                    >

                    <label class="switch-line" for="is_featured">
                        <input
                            type="checkbox"
                            name="is_featured"
                            id="is_featured"
                            value="1"
                            @checked(old(
                                'is_featured',
                                $editing
                                    ? $offerPackage->is_featured
                                    : false
                            ))
                        >

                        <span>
                            <strong>Featured Package</strong>

                            <small>
                                Featured packages receive priority
                                placement.
                            </small>
                        </span>
                    </label>
                </div>

                <div class="form-group form-group-last">
                    <label for="sort_order" class="form-label">
                        Sort Order
                    </label>

                    <input
                        type="number"
                        name="sort_order"
                        id="sort_order"
                        value="{{ old(
                            'sort_order',
                            $editing ? $offerPackage->sort_order : 0
                        ) }}"
                        class="form-control @error('sort_order') has-error @enderror"
                        min="0"
                    >

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

        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Featured Image</h2>
            </div>

            <div class="panel-body">
                <div
                    id="featuredImagePreview"
                    class="featured-image-preview"
                >
                    @if($editing && $offerPackage->featured_image)
                        <img
                            src="{{ asset(
                                'storage/' .
                                $offerPackage->featured_image
                            ) }}"
                            alt="{{ $offerPackage->name }}"
                        >
                    @else
                        <div class="image-placeholder">
                            <span class="image-placeholder-mark">
                                IMG
                            </span>

                            <span>Image preview</span>
                        </div>
                    @endif
                </div>

                <input
                    type="file"
                    name="featured_image"
                    id="featured_image"
                    class="form-control @error('featured_image') has-error @enderror"
                    accept=".jpg,.jpeg,.png,.webp"
                >

                <div class="form-help">
                    JPG, JPEG, PNG or WebP. Maximum 4 MB.
                </div>

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

                @if($editing && $offerPackage->featured_image)
                    <button
                        type="submit"
                        form="remove-offer-package-image-form"
                        class="btn btn-danger remove-image-button"
                    >
                        Remove Current Image
                    </button>
                @endif
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Button Settings</h2>
            </div>

            <div class="panel-body">
                <div class="form-group form-group-last">
                    <label for="button_text" class="form-label">
                        Button Text
                    </label>

                    <input
                        type="text"
                        name="button_text"
                        id="button_text"
                        value="{{ old(
                            'button_text',
                            $editing
                                ? $offerPackage->button_text
                                : 'View Package'
                        ) }}"
                        class="form-control @error('button_text') has-error @enderror"
                        placeholder="View Package"
                    >

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

        <div class="sidebar-actions">
            <button
                type="submit"
                class="btn btn-primary btn-submit"
            >
                {{ $submitText }}
            </button>

            <a
                href="{{ route('admin.offer-packages.index') }}"
                class="btn btn-secondary btn-submit"
            >
                Cancel
            </a>
        </div>
    </aside>
</div>

@push('styles')
<style>
    .offer-package-form-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 2fr)
            minmax(290px, 1fr);
        gap: 24px;
        align-items: start;
    }

    .form-panel {
        margin-bottom: 24px;
    }

    .panel-note {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
    }

    .form-grid-title {
        grid-template-columns: 2fr 1fr;
    }

    .form-group-last {
        margin-bottom: 0;
    }

    textarea.form-control {
        display: block;
        resize: vertical;
        line-height: 1.6;
    }

    .required,
    .field-error {
        color: var(--danger);
    }

    .field-error {
        margin-top: 7px;
        font-size: 12px;
    }

    .form-control.has-error {
        border-color: var(--danger);
    }

    .inclusion-heading {
        flex-wrap: wrap;
    }

    .inclusion-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        margin-bottom: 10px;
    }

    .inclusion-mark {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #e8f8ee;
        color: var(--success);
        font-weight: 700;
    }

    .relationship-empty {
        padding: 18px;
        border: 1px dashed #cbd5da;
        border-radius: 9px;
        background: #f7f9fa;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .featured-image-preview {
        width: 100%;
        min-height: 220px;
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px dashed #cbd5da;
        border-radius: 10px;
        background: #f7f9fa;
    }

    .featured-image-preview img {
        width: 100%;
        height: 220px;
        display: block;
        object-fit: cover;
    }

    .image-placeholder {
        min-height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        color: #94a1a9;
    }

    .image-placeholder-mark {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e8edf0;
        color: #71808a;
        font-size: 11px;
        font-weight: 700;
    }

    .offer-package-form-sidebar {
        position: sticky;
        top: 24px;
    }

    .switch-setting {
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--border);
    }

    .switch-line {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
    }

    .switch-line input {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 2px;
        accent-color: var(--navy);
    }

    .switch-line strong,
    .switch-line small {
        display: block;
    }

    .switch-line strong {
        color: #344955;
        font-size: 13px;
    }

    .switch-line small {
        margin-top: 5px;
        color: var(--muted);
        line-height: 1.45;
    }

    .sidebar-actions {
        display: grid;
        gap: 10px;
    }

    .btn-submit,
    .remove-image-button {
        width: 100%;
    }

    .remove-image-button {
        margin-top: 14px;
    }

    @media (max-width: 1100px) {
        .offer-package-form-layout {
            grid-template-columns: 1fr;
        }

        .offer-package-form-sidebar {
            position: static;
        }
    }

    @media (max-width: 820px) {
        .form-grid-title {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 520px) {
        .inclusion-row {
            grid-template-columns: 1fr auto;
        }

        .inclusion-mark {
            display: none;
        }
    }
</style>
@endpush

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

        const roomTypeField =
            document.getElementById('roomTypeField');

        const venueField =
            document.getElementById('venueField');

        const eventTypeField =
            document.getElementById('eventTypeField');

        const relationshipEmpty =
            document.getElementById('relationshipEmpty');

        const relationshipHelp =
            document.getElementById('relationshipHelp');

        const roomTypeSelect =
            document.getElementById('room_type_id');

        const venueSelect =
            document.getElementById('venue_id');

        const eventTypeSelect =
            document.getElementById('event_type_id');

        function showField(field, visible) {
            field.style.display = visible ? '' : 'none';
        }

        function updateRelationshipFields() {
            const type = packageType.value;

            showField(roomTypeField, type === 'room');
            showField(
                venueField,
                type === 'event' || type === 'dining'
            );
            showField(eventTypeField, type === 'event');
            showField(relationshipEmpty, type === 'general');

            roomTypeSelect.required = type === 'room';

            if (type === 'room') {
                relationshipHelp.textContent =
                    'Select the Room Type included in this package.';
            } else if (type === 'event') {
                relationshipHelp.textContent =
                    'Venue and Event Type are optional.';
            } else if (type === 'dining') {
                relationshipHelp.textContent =
                    'Select a Venue when the dining package ' +
                    'is connected to a specific location.';
            } else {
                relationshipHelp.textContent =
                    'General packages do not require a relationship.';
            }
        }

        if (packageType) {
            packageType.addEventListener(
                'change',
                updateRelationshipFields
            );

            updateRelationshipFields();
        }

        const inclusionsContainer =
            document.getElementById('inclusionsContainer');

        const addInclusionButton =
            document.getElementById('addInclusionButton');

        function bindRemoveButtons() {
            document
                .querySelectorAll('.remove-inclusion-button')
                .forEach(function (button) {
                    button.onclick = function () {
                        const rows = inclusionsContainer
                            .querySelectorAll('.inclusion-row');

                        if (rows.length === 1) {
                            const input = rows[0]
                                .querySelector('input');

                            input.value = '';
                            input.focus();

                            return;
                        }

                        button.closest('.inclusion-row').remove();
                    };
                });
        }

        if (addInclusionButton && inclusionsContainer) {
            addInclusionButton.addEventListener(
                'click',
                function () {
                    const row = document.createElement('div');

                    row.className = 'inclusion-row';

                    row.innerHTML =
                        '<span class="inclusion-mark">✓</span>' +
                        '<input type="text" name="inclusions[]" ' +
                        'class="form-control" ' +
                        'placeholder="Example: Complimentary breakfast">' +
                        '<button type="button" ' +
                        'class="btn btn-danger ' +
                        'remove-inclusion-button">Remove</button>';

                    inclusionsContainer.appendChild(row);
                    bindRemoveButtons();
                    row.querySelector('input').focus();
                }
            );

            bindRemoveButtons();
        }

        const featuredInput =
            document.getElementById('featured_image');

        const featuredPreview =
            document.getElementById('featuredImagePreview');

        if (featuredInput && featuredPreview) {
            featuredInput.addEventListener(
                'change',
                function () {
                    const file = featuredInput.files[0];

                    if (
                        !file ||
                        !file.type.startsWith('image/')
                    ) {
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (event) {
                        featuredPreview.innerHTML =
                            '<img src="' +
                            event.target.result +
                            '" alt="Featured image preview">';
                    };

                    reader.readAsDataURL(file);
                }
            );
        }

        const removeImageButton =
            document.querySelector('.remove-image-button');

        if (removeImageButton) {
            removeImageButton.addEventListener(
                'click',
                function (event) {
                    if (
                        !window.confirm(
                            'Are you sure you want to remove ' +
                            'the current featured image?'
                        )
                    ) {
                        event.preventDefault();
                    }
                }
            );
        }
    });
</script>
@endpush