@extends('layouts.app')

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

@section('content')
<div class="container" style="max-width: 560px;">
    <h3 class="mb-4">Настройки</h3>

    <div class="ax-card">
        <h5 class="mb-1">Тема оформления</h5>
        <p class="text-muted mb-3" style="font-size: 14px;">
            Выберите цветовую тему интерфейса. Светлый/тёмный режим переключается отдельно — кнопкой в шапке сайта.
        </p>

        <form method="POST" id="colorThemeForm">
            @csrf

            <div class="ax-theme-swatches">
                @foreach ([
                    'blue' => 'Синяя',
                    'green' => 'Зелёная',
                    'red' => 'Красная',
                ] as $value => $label)
                    <label class="ax-theme-swatch" data-color-theme-option="{{ $value }}">
                        <input
                            type="radio"
                            name="color_theme"
                            value="{{ $value }}"
                            {{ $colorTheme === $value ? 'checked' : '' }}
                        >
                        <span class="ax-theme-swatch-preview ax-theme-swatch-preview--{{ $value }}"></span>
                        <span class="ax-theme-swatch-label">{{ $label }}</span>
                    </label>
                @endforeach
            </div>

            <button type="submit" class="btn btn-primary mt-4">Сохранить</button>
        </form>
    </div>
</div>

<style>
.ax-theme-swatches {
    display: flex;
    gap: var(--ax-space-4, 16px);
    flex-wrap: wrap;
}

.ax-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-2, 8px);
    padding: var(--ax-space-3, 12px);
    border: 2px solid var(--ax-border, #e4e8ef);
    border-radius: var(--ax-radius, 12px);
    cursor: pointer;
    transition: border-color var(--ax-transition, 180ms ease), transform var(--ax-transition, 180ms ease);
}

.ax-theme-swatch:hover {
    transform: translateY(-1px);
}

.ax-theme-swatch:has(input:checked) {
    border-color: var(--ax-primary);
}

.ax-theme-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ax-theme-swatch-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.ax-theme-swatch-preview--blue { background: #1b5cbf; }
.ax-theme-swatch-preview--green { background: #288a28; }
.ax-theme-swatch-preview--red { background: rgb(255, 0, 0); }

.ax-theme-swatch-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ax-text);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-color-theme-option] input[type="radio"]').forEach(function (input) {
        input.addEventListener('change', function () {
            if (input.checked) {
                document.documentElement.setAttribute('data-color-theme', input.value);
            }
        });
    });
});
</script>
@endsection