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

    $savedFeatures = old(
        'features',
        $editing ? ($eventType->features ?? []) : []
    );

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

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

<div class="event-type-form-layout">
    <div class="event-type-form-main">
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Basic Information</h2>

                    <p class="panel-note">
                        Main event type name, URL and descriptions.
                    </p>
                </div>
            </div>

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

                        <input
                            type="text"
                            name="name"
                            id="name"
                            value="{{ old(
                                'name',
                                $editing ? $eventType->name : ''
                            ) }}"
                            class="form-control @error('name') has-error @enderror"
                            placeholder="Example: Wedding"
                            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 ? $eventType->small_title : ''
                            ) }}"
                            class="form-control @error('small_title') has-error @enderror"
                            placeholder="Celebrate Your Special Day"
                        >

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

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

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

                        <div class="form-help">
                            Example: wedding
                        </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 event type cards..."
                        >{{ old(
                            'short_description',
                            $editing
                                ? $eventType->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 event type description..."
                        >{{ old(
                            'description',
                            $editing ? $eventType->description : ''
                        ) }}</textarea>

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

        <section class="panel form-panel">
            <div class="panel-header feature-heading">
                <div>
                    <h2 class="panel-title">Event Features</h2>

                    <p class="panel-note">
                        Add available arrangements, services or features.
                    </p>
                </div>

                <button
                    type="button"
                    id="addFeatureButton"
                    class="btn btn-secondary"
                >
                    + Add Feature
                </button>
            </div>

            <div class="panel-body">
                <div id="featuresContainer">
                    @foreach($savedFeatures as $feature)
                        <div class="feature-row">
                            <span class="feature-mark">✓</span>

                            <input
                                type="text"
                                name="features[]"
                                value="{{ $feature }}"
                                class="form-control"
                                placeholder="Example: Stage Decoration"
                            >

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

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

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

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

                    <p class="panel-note">
                        Optional search engine information.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <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 ? $eventType->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"
                            class="form-control @error('meta_description') has-error @enderror"
                        >{{ old(
                            'meta_description',
                            $editing
                                ? $eventType->meta_description
                                : ''
                        ) }}</textarea>

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

    <aside class="event-type-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 ? $eventType->status : true
                            ))
                        >

                        <span>
                            <strong>Active</strong>

                            <small>
                                Active event types 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
                                    ? $eventType->is_featured
                                    : false
                            ))
                        >

                        <span>
                            <strong>Featured Event Type</strong>

                            <small>
                                Featured event types 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 ? $eventType->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 && $eventType->featured_image)
                        <img
                            src="{{ asset(
                                'storage/' .
                                $eventType->featured_image
                            ) }}"
                            alt="{{ $eventType->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, PNG or WebP. Maximum 5 MB.
                </div>

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

                @if($editing && $eventType->featured_image)
                    <button
                        type="submit"
                        form="remove-event-type-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
                                ? $eventType->button_text
                                : 'View Details'
                        ) }}"
                        class="form-control @error('button_text') has-error @enderror"
                        placeholder="View Details"
                    >

                    @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.event-types.index') }}"
                class="btn btn-secondary btn-submit"
            >
                Cancel
            </a>
        </div>
    </aside>
</div>

@push('styles')
<style>
    .event-type-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);
    }

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

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

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

    .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;
    }

    .event-type-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) {
        .event-type-form-layout {
            grid-template-columns: 1fr;
        }

        .event-type-form-sidebar {
            position: static;
        }
    }

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

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

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

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

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

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

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

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

                            return;
                        }

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

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

                    row.className = 'feature-row';

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

                    featuresContainer.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