{{--
    Partial: карточка «Open Graph» — метатеги для соцсетей
    Переменные из родителя: $settings (ассоциативный массив)
    OG-теги читают: ВКонтакте, Telegram, WhatsApp, Facebook, Twitter/X, Discord и все мессенджеры.
    Когда кто-то делится ссылкой — они показывают og:title, og:description, og:image.
--}}
<div class="card card-success card-outline">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-share-alt mr-2"></i>Open Graph — теги для соцсетей и мессенджеров
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
            </button>
        </div>
    </div>
    <div class="card-body">

        {{-- Пояснительный баннер --}}
        <div class="alert alert-info py-2 mb-4" style="font-size:13px">
            <i class="fas fa-info-circle mr-1"></i>
            <strong>Что такое Open Graph?</strong> Когда пользователь делится ссылкой на сайт в ВКонтакте,
            Telegram, WhatsApp или Discord — они показывают превью: картинку, заголовок и описание.
            Эти данные берутся из OG-тегов в коде страницы. Страница автомобиля подставляет свои данные автоматически;
            остальные страницы используют значения ниже как дефолт.
        </div>

        <div class="row">
            <div class="col-md-6">

                {{-- og:site_name --}}
                <div class="form-group">
                    <label class="font-weight-bold">Название сайта <small class="text-muted font-weight-normal">(og:site_name)</small></label>
                    <input type="text" name="og_site_name"
                           class="form-control @error('og_site_name') is-invalid @enderror"
                           value="{{ old('og_site_name', $settings['og_site_name'] ?? '') }}"
                           placeholder="Точка — автоподбор и доставка авто"
                           maxlength="100">
                    <small class="text-muted">Название организации/бренда. Отображается как «издатель» ссылки.</small>
                    @error('og_site_name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                {{-- og:description --}}
                <div class="form-group">
                    <label class="font-weight-bold">Описание по умолчанию <small class="text-muted font-weight-normal">(og:description)</small></label>
                    <textarea name="og_description"
                              class="form-control @error('og_description') is-invalid @enderror"
                              rows="3" maxlength="300"
                              placeholder="Подбор и доставка автомобилей из Японии, Кореи, Европы и США под ключ. Прозрачные условия, фиксированная цена.">{{ old('og_description', $settings['og_description'] ?? '') }}</textarea>
                    <small class="text-muted">
                        Дефолтное описание для главной и других страниц. Рекомендуемая длина: 100–200 символов.
                        <span id="og-desc-count" class="text-{{ mb_strlen($settings['og_description'] ?? '') > 200 ? 'danger' : 'muted' }}">
                            {{ mb_strlen($settings['og_description'] ?? '') }}/300
                        </span>
                    </small>
                    @error('og_description')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                {{-- og:locale --}}
                <div class="form-group mb-0">
                    <label class="font-weight-bold">Локаль <small class="text-muted font-weight-normal">(og:locale)</small></label>
                    <select name="og_locale" class="form-control @error('og_locale') is-invalid @enderror">
                        @foreach([
                            'ru_RU' => 'ru_RU — Русский (Россия)',
                            'en_US' => 'en_US — English (US)',
                            'kk_KZ' => 'kk_KZ — Қазақ (Казахстан)',
                        ] as $val => $lbl)
                            <option value="{{ $val }}" @selected(($settings['og_locale'] ?? 'ru_RU') === $val)>{{ $lbl }}</option>
                        @endforeach
                    </select>
                    <small class="text-muted">Язык сайта в формате ISO 639-1_ISO 3166-1. Влияет на отображение в Facebook.</small>
                    @error('og_locale')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

            </div>
            <div class="col-md-6">

                {{-- og:image --}}
                <div class="form-group">
                    <label class="font-weight-bold">Дефолтное OG-изображение <small class="text-muted font-weight-normal">(og:image)</small></label>

                    @if(!empty($settings['og_image']))
                        <div class="mb-2">
                            <img src="{{ asset($settings['og_image']) }}" alt="OG image"
                                 style="max-width:100%;border-radius:6px;border:1px solid #dee2e6">
                            <div class="text-muted" style="font-size:11px;margin-top:3px">Текущее изображение</div>
                        </div>
                    @endif

                    <div class="custom-file">
                        <input type="file" class="custom-file-input @error('og_image') is-invalid @enderror"
                               id="og_image" name="og_image" accept="image/jpeg,image/png,image/webp">
                        <label class="custom-file-label" for="og_image">
                            {{ !empty($settings['og_image']) ? 'Заменить изображение' : 'Выбрать изображение' }}
                        </label>
                    </div>

                    <small class="text-muted">
                        <i class="fas fa-ruler-combined fa-xs"></i> <strong>Обязательный размер: 1200 × 630 px</strong> (соотношение 1.91:1).<br>
                        Форматы: JPG, PNG, WebP. Максимум 2 МБ.<br>
                        Это изображение показывается когда страницей делятся в соцсетях.
                        Страницы автомобилей используют фото самого авто автоматически.
                    </small>
                    @error('og_image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                {{-- Шпаргалка по тегам --}}
                <div class="card card-body bg-light p-3" style="font-size:12px;line-height:1.8">
                    <div class="font-weight-bold mb-1 text-muted text-uppercase" style="font-size:11px;letter-spacing:.04em">Что куда идёт</div>
                    <div><code>og:title</code> — заголовок страницы (<code>&lt;title&gt;</code>)</div>
                    <div><code>og:description</code> — поле «Описание по умолчанию» выше</div>
                    <div><code>og:image</code> — OG-изображение (авто → фото авто, иначе выше)</div>
                    <div><code>og:url</code> — текущий адрес страницы (авто)</div>
                    <div><code>og:site_name</code> — «Название сайта» выше</div>
                    <div><code>og:type</code> — <code>website</code> (авто → <code>product</code>)</div>
                    <div><code>og:locale</code> — «Локаль» выше</div>
                    <hr class="my-2">
                    <div><i class="fab fa-twitter mr-1"></i><code>twitter:card</code> — <code>summary_large_image</code></div>
                    <div class="text-muted mt-1">Twitter/X читает те же OG-теги.</div>
                </div>

            </div>
        </div>

    </div>
</div>