{{--
    Вьюха: Настройки сайта — все секции сворачиваемые через AdminLTE card-widget="collapse"
    Partials (в admin/settings/partials/):
      _card_analytics — Яндекс.Метрика и Google Analytics
      _card_og        — Open Graph метатеги
      _card_logos     — Логотипы шапки и подвала
      _card_site_mode — Режим сайта (обслуживание + noindex)
--}}
@extends('admin.layout')

@section('title', 'Настройки сайта')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="m-0">Настройки сайта</h1>
        <button type="submit" form="settings-form" class="btn btn-primary">
            <i class="fas fa-save"></i> Сохранить настройки
        </button>
    </div>
@stop

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Главная</a></li>
    <li class="breadcrumb-item active">Настройки</li>
@stop

@section('content')
    @if(session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ session('success') }}
        </div>
    @endif

    <form id="settings-form" action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            {{-- Левая колонка --}}
            <div class="col-md-8">

                {{-- Контакты --}}
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Контакты</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="form-group">
                            <label>Номер телефона</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-phone"></i></span></div>
                                <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone', $settings['phone'] ?? '') }}" placeholder="+7 (___) ___-__-__">
                            </div>
                            @error('phone')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-envelope"></i></span></div>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email', $settings['email'] ?? '') }}" placeholder="info@example.ru">
                            </div>
                            @error('email')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group mb-0">
                            <label>Режим работы</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-clock"></i></span></div>
                                <input type="text" name="working_hours" class="form-control @error('working_hours') is-invalid @enderror"
                                       value="{{ old('working_hours', $settings['working_hours'] ?? '') }}"
                                       placeholder="Пн–Пт: 9:00 – 20:00 | Сб–Вс: 10:00 – 18:00">
                            </div>
                            <small class="text-muted">Разделитель строк: | (вертикальная черта)</small>
                            @error('working_hours')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                {{-- Социальные сети --}}
                <div class="card card-secondary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Социальные сети</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="form-group">
                            <label>Telegram</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" style="background:#229ED9;color:#fff;border-color:#229ED9">TG</span></div>
                                <input type="url" name="telegram" class="form-control @error('telegram') is-invalid @enderror"
                                       value="{{ old('telegram', $settings['telegram'] ?? '') }}" placeholder="https://t.me/your_channel">
                            </div>
                            @error('telegram')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label>YouTube</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" style="background:#FF0000;color:#fff;border-color:#FF0000">YT</span></div>
                                <input type="url" name="youtube" class="form-control @error('youtube') is-invalid @enderror"
                                       value="{{ old('youtube', $settings['youtube'] ?? '') }}" placeholder="https://youtube.com/@channel">
                            </div>
                            @error('youtube')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group mb-0">
                            <label>ВКонтакте</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" style="background:#0077FF;color:#fff;border-color:#0077FF">ВК</span></div>
                                <input type="url" name="vk" class="form-control @error('vk') is-invalid @enderror"
                                       value="{{ old('vk', $settings['vk'] ?? '') }}" placeholder="https://vk.com/your_group">
                            </div>
                            @error('vk')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                {{-- Подвал --}}
                <div class="card card-secondary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Подвал сайта</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="form-group">
                            <label>Слоган под логотипом в подвале</label>
                            <input type="text" name="footer_slogan" class="form-control @error('footer_slogan') is-invalid @enderror"
                                   value="{{ old('footer_slogan', $settings['footer_slogan'] ?? '') }}"
                                   placeholder="Автоподбор по России и доставка авто из любой страны под ключ.">
                            @error('footer_slogan')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group mb-0">
                            <label>Копирайт (строка внизу страницы)</label>
                            <input type="text" name="copyright" class="form-control @error('copyright') is-invalid @enderror"
                                   value="{{ old('copyright', $settings['copyright'] ?? '') }}"
                                   placeholder="© 2025 Компания. Все права защищены.">
                            @error('copyright')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                @include('admin.settings.partials._card_analytics')
                @include('admin.settings.partials._card_og')
                @include('admin.settings.partials._card_logos')

            </div>

            {{-- Правая колонка --}}
            <div class="col-md-4">

                @include('admin.settings.partials._card_site_mode')

                <div class="card card-secondary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Где используются</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 text-muted" style="font-size:13px;line-height:1.9">
                        <p><strong>Телефон</strong> — topbar, кнопка «Позвонить», подвал, контакты</p>
                        <p><strong>Email</strong> — topbar, подвал, контакты</p>
                        <p><strong>Telegram</strong> — кнопка в шапке, подвал, плавающая кнопка, контакты</p>
                        <p><strong>YouTube / ВК</strong> — topbar, подвал</p>
                        <p><strong>Режим работы</strong> — страница контактов</p>
                        <p><strong>Слоган / Копирайт</strong> — подвал сайта</p>
                        <p><strong>Логотипы</strong> — шапка и подвал</p>
                        <hr>
                        <p><strong>Яндекс.Метрика / GA</strong> — &lt;head&gt; всех страниц</p>
                        <p><strong>OG-изображение</strong> — превью в соцсетях (если нет фото авто)</p>
                        <hr>
                        <p><strong>Обслуживание</strong> — заглушка для гостей и редакторов</p>
                        <p><strong>Noindex</strong> — запрет индексации поисковиками</p>
                        <p><strong>Анимации</strong> — class="no-animations" на &lt;body&gt;, reveal-блоки видны сразу</p>
                        <hr>
                        <p class="mb-0 text-info">
                            <i class="fas fa-info-circle"></i>
                            Незаполненные поля скрываются на сайте автоматически.
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </form>
@stop

@push('js')
<script>
// ── Аккордеон карточек настроек (только левая колонка) ──────────────────────
$(function () {
    // Все карточки левой колонки у которых есть кнопка сворачивания
    var $cards = $('.col-md-8 [data-card-widget="collapse"]').closest('.card');

    // Сворачиваем все кроме первой (без анимации — чтобы не мигало при загрузке)
    $cards.each(function (i) {
        if (i > 0) {
            $(this).addClass('collapsed-card');
            $(this).find('[data-card-widget="collapse"] i')
                   .removeClass('fa-minus').addClass('fa-plus');
            $(this).find('.card-body, .card-footer').hide();
        }
    });

    // При разворачивании карточки — сворачиваем все остальные в колонке
    $(document).on('expanded.lte.cardwidget', '.col-md-8 .card', function () {
        var $opened = $(this);
        $cards.each(function () {
            if (!$(this).is($opened) && !$(this).hasClass('collapsed-card')) {
                $(this).find('[data-card-widget="collapse"]').trigger('click');
            }
        });
    });
});

// Счётчик символов в поле og_description
(function () {
    var ta = document.querySelector('textarea[name=og_description]');
    var counter = document.getElementById('og-desc-count');
    if (!ta || !counter) return;
    ta.addEventListener('input', function () {
        var len = this.value.length;
        counter.textContent = len + '/300';
        counter.className = len > 200 ? 'text-warning' : 'text-muted';
    });
})();

// Показываем имя выбранного файла в custom-file-input
document.querySelectorAll('.custom-file-input').forEach(function(input) {
    input.addEventListener('change', function() {
        var label = this.nextElementSibling;
        label.textContent = this.files[0] ? this.files[0].name : 'Выбрать файл';
    });
});

// Маска телефона
(function () {
    var el = document.querySelector('input[name=phone]');
    if (!el) return;
    el.setAttribute('maxlength', '18');
    function fmt(d) {
        var out = '+7';
        if (d.length > 0) out += ' (' + d.slice(0, 3);
        if (d.length >= 3) out += ')';
        if (d.length > 3) out += ' ' + d.slice(3, 6);
        if (d.length > 6) out += '-' + d.slice(6, 8);
        if (d.length > 8) out += '-' + d.slice(8, 10);
        return out;
    }
    function digits() { return el.value.replace(/\D/g, '').replace(/^[78]/, ''); }
    el.addEventListener('focus', function () { if (!this.value) this.value = '+7'; });
    el.addEventListener('blur',  function () { if (digits().length === 0) this.value = ''; });
    el.addEventListener('keydown', function (e) {
        if (e.ctrlKey || e.metaKey) return;
        if (['Tab','Enter','ArrowLeft','ArrowRight','Home','End'].includes(e.key)) return;
        e.preventDefault();
        var d = digits();
        if (e.key === 'Backspace') { d = d.slice(0, -1); }
        else if (/^\d$/.test(e.key) && d.length < 10) { d += e.key; }
        else { return; }
        this.value = fmt(d);
    });
    el.addEventListener('paste', function (e) {
        e.preventDefault();
        var text = (e.clipboardData || window.clipboardData).getData('text');
        var d = (digits() + text.replace(/\D/g, '').replace(/^[78]/, '')).slice(0, 10);
        this.value = fmt(d);
    });
})();
</script>
@endpush