@php
    $isEdit = isset($servicePage);

    $defaultContent = <<<'HTML'
<p>
    Enter your service page introduction here.
</p>

<h2>Service Section Heading</h2>

<p>
    Enter the service section description here.
</p>
HTML;
@endphp

<style>
    .service-form-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .service-form-group {
        min-width: 0;
    }

    .service-form-group.full {
        grid-column: 1 / -1;
    }

    .service-form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 700;
    }

    .service-form-required {
        color: #dc2626;
    }

    .service-form-control {
        width: 100%;
        min-height: 47px;
        padding: 11px 14px;
        border: 0;
        border-radius: 7px;
        outline: 0;
        background: #f1f5f9;
        color: #111827;
        font-family: inherit;
        font-size: 14px;
        transition: 0.2s ease;
    }

    .service-form-control:focus {
        background: #fff0eb;
    }

    textarea.service-form-control {
        min-height: 160px;
        resize: vertical;
    }

    textarea.service-form-content {
        min-height: 520px;
        font-family:
            Consolas,
            Monaco,
            monospace;
        font-size: 13px;
        line-height: 1.7;
    }

    .service-form-help {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.6;
    }

    .service-form-error {
        margin: 7px 0 0;
        color: #dc2626;
        font-size: 12px;
        font-weight: 600;
    }

    .service-form-status {
        min-height: 47px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 7px;
        background: #f1f5f9;
    }

    .service-form-status input {
        width: 18px;
        height: 18px;
        accent-color: #ff5722;
    }

    .service-form-status label {
        cursor: pointer;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .service-form-preview {
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 18px;
        border-radius: 8px;
        background: #f1f5f9;
    }

    .service-form-preview img {
        width: 100%;
        max-height: 380px;
        display: block;
        object-fit: cover;
    }

    .service-form-placeholder {
        color: #94a3b8;
        font-size: 14px;
        text-align: center;
    }

    .service-form-placeholder i {
        display: block;
        margin-bottom: 12px;
        font-size: 42px;
    }

    .service-form-guide {
        margin-top: 20px;
        padding: 18px;
        border-radius: 8px;
        background: #f8fafc;
        color: #475569;
        font-size: 13px;
        line-height: 1.8;
    }

    .service-form-guide code {
        padding: 2px 5px;
        border-radius: 4px;
        background: #e2e8f0;
        color: #0f172a;
    }

    .service-form-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
    }

    .service-form-button {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 17px;
        border: 0;
        border-radius: 7px;
        background: #ff5722;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .service-form-button:hover {
        background: #e64917;
        color: #ffffff;
    }

    .service-form-button.back {
        background: #e2e8f0;
        color: #334155;
    }

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

        .service-form-group.full {
            grid-column: auto;
        }

        .service-form-actions {
            flex-direction: column-reverse;
        }

        .service-form-actions
        .service-form-button {
            width: 100%;
        }
    }
</style>

<div class="service-form-grid">
    <div class="service-form-group">
        <label
            for="menu_title"
            class="service-form-label"
        >
            Menu Title
            <span class="service-form-required">*</span>
        </label>

        <input
            type="text"
            id="menu_title"
            name="menu_title"
            class="service-form-control"
            value="{{ old(
                'menu_title',
                $servicePage->menu_title ?? ''
            ) }}"
            placeholder="Currency Exchange"
            maxlength="150"
            required
        >

        @error('menu_title')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group">
        <label
            for="slug"
            class="service-form-label"
        >
            Page Slug
            <span class="service-form-required">*</span>
        </label>

        <input
            type="text"
            id="slug"
            name="slug"
            class="service-form-control"
            value="{{ old(
                'slug',
                $servicePage->slug ?? ''
            ) }}"
            placeholder="currency-exchange"
            maxlength="160"
            required
        >

        <p class="service-form-help">
            Example: currency-exchange, bank-transfer,
            cash-pickup.
        </p>

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

    <div class="service-form-group full">
        <label
            for="banner_title"
            class="service-form-label"
        >
            Banner Title
            <span class="service-form-required">*</span>
        </label>

        <input
            type="text"
            id="banner_title"
            name="banner_title"
            class="service-form-control"
            value="{{ old(
                'banner_title',
                $servicePage->banner_title ?? ''
            ) }}"
            placeholder="Currency Exchange"
            maxlength="200"
            required
        >

        @error('banner_title')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group">
        <label
            for="sort_order"
            class="service-form-label"
        >
            Display Order
            <span class="service-form-required">*</span>
        </label>

        <input
            type="number"
            id="sort_order"
            name="sort_order"
            class="service-form-control"
            value="{{ old(
                'sort_order',
                $servicePage->sort_order ?? 0
            ) }}"
            min="0"
            max="99999"
            required
        >

        <p class="service-form-help">
            Smaller number appears first in the menu.
        </p>

        @error('sort_order')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group">
        <label class="service-form-label">
            Status
        </label>

        <div class="service-form-status">
            <input
                type="hidden"
                name="is_active"
                value="0"
            >

            <input
                type="checkbox"
                id="service_is_active"
                name="is_active"
                value="1"
                @checked(
                    old(
                        'is_active',
                        $servicePage->is_active ?? true
                    )
                )
            >

            <label for="service_is_active">
                Show this service page on the website
            </label>
        </div>

        @error('is_active')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group full">
        <label
            for="banner_image"
            class="service-form-label"
        >
            Banner Image
        </label>

        <input
            type="file"
            id="banner_image"
            name="banner_image"
            class="service-form-control"
            accept="image/jpeg,image/png,image/webp"
        >

        <p class="service-form-help">
            Leave empty to use the default service banner.
            Maximum size: 5 MB.
        </p>

        @error('banner_image')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group full">
        <label class="service-form-label">
            Banner Preview
        </label>

        <div class="service-form-preview">
            <img
                src="{{ $isEdit && $servicePage->banner_image
                    ? asset(
                        'storage/' .
                        $servicePage->banner_image
                    )
                    : '' }}"
                alt="Banner preview"
                id="serviceBannerPreview"
                style="{{
                    $isEdit && $servicePage->banner_image
                        ? ''
                        : 'display:none;'
                }}"
            >

            <div
                class="service-form-placeholder"
                id="serviceBannerPlaceholder"
                style="{{
                    $isEdit && $servicePage->banner_image
                        ? 'display:none;'
                        : ''
                }}"
            >
                <i class="fa-regular fa-image"></i>
                Default banner will be used
            </div>
        </div>
    </div>

    <div class="service-form-group full">
        <label
            for="content_html"
            class="service-form-label"
        >
            Page Content
            <span class="service-form-required">*</span>
        </label>

        <textarea
            id="content_html"
            name="content_html"
            class="service-form-control service-form-content"
            required
        >{{ old(
            'content_html',
            $servicePage->content_html
                ?? $defaultContent
        ) }}</textarea>

        @error('content_html')
            <p class="service-form-error">
                {{ $message }}
            </p>
        @enderror

        <div class="service-form-guide">
            Paragraph:
            <code>&lt;p&gt;Text here&lt;/p&gt;</code>

            <br>

            Orange heading:
            <code>&lt;h2&gt;Heading&lt;/h2&gt;</code>

            <br>

            Bold:
            <code>&lt;strong&gt;Bold text&lt;/strong&gt;</code>

            <br>

            List:
            <code>
                &lt;ul&gt;&lt;li&gt;List text&lt;/li&gt;&lt;/ul&gt;
            </code>

            <br>

            Line break:
            <code>&lt;br&gt;</code>
        </div>
    </div>
</div>

<div class="service-form-actions">
    <a
        href="{{ route('admin.service-pages.index') }}"
        class="service-form-button back"
    >
        <i class="fa-solid fa-xmark"></i>
        Cancel
    </a>

    <button
        type="submit"
        class="service-form-button"
    >
        <i class="fa-solid fa-floppy-disk"></i>

        {{ $isEdit
            ? 'Update Service Page'
            : 'Save Service Page' }}
    </button>
</div>

<script>
    document.addEventListener(
        'DOMContentLoaded',
        function () {
            const menuTitle =
                document.getElementById(
                    'menu_title'
                );

            const slugInput =
                document.getElementById(
                    'slug'
                );

            const isEdit =
                @json($isEdit);

            let slugWasChanged =
                isEdit || slugInput.value.trim() !== '';

            slugInput.addEventListener(
                'input',
                function () {
                    slugWasChanged =
                        slugInput.value.trim() !== '';
                }
            );

            menuTitle.addEventListener(
                'input',
                function () {
                    if (slugWasChanged) {
                        return;
                    }

                    slugInput.value =
                        menuTitle.value
                            .toLowerCase()
                            .trim()
                            .replace(/[^a-z0-9]+/g, '-')
                            .replace(/^-+|-+$/g, '');
                }
            );

            const bannerInput =
                document.getElementById(
                    'banner_image'
                );

            const bannerPreview =
                document.getElementById(
                    'serviceBannerPreview'
                );

            const bannerPlaceholder =
                document.getElementById(
                    'serviceBannerPlaceholder'
                );

            bannerInput.addEventListener(
                'change',
                function () {
                    const file =
                        this.files?.[0];

                    if (!file) {
                        return;
                    }

                    if (
                        !file.type.startsWith(
                            'image/'
                        )
                    ) {
                        this.value = '';

                        alert(
                            'Please select a valid image.'
                        );

                        return;
                    }

                    const reader =
                        new FileReader();

                    reader.onload =
                        function (event) {
                            bannerPreview.src =
                                event.target.result;

                            bannerPreview.style.display =
                                'block';

                            bannerPlaceholder.style.display =
                                'none';
                        };

                    reader.readAsDataURL(file);
                }
            );
        }
    );
</script>