@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-4" style="font-size: 14px;">
            Отображаются в шапке сайта, на странице входа, на страницах ошибок и во вкладке браузера.
            Настройки общие для всего центра — их видят все пользователи.
        </p>

        <form method="POST" action="/admin/branding.php" enctype="multipart/form-data">
            @csrf

            <div class="mb-4">
                <label for="brand_name" class="form-label">Название бренда</label>
                <input
                    type="text"
                    class="form-control"
                    id="brand_name"
                    name="brand_name"
                    value="{{ old('brand_name', $brandName) }}"
                    maxlength="64"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label d-block">Текущий логотип</label>
                <div class="ax-logo-preview">
                    <img src="{{ $logoUrl }}" alt="{{ $brandName }}">
                </div>
                @unless ($hasCustomLogo)
                    <div class="form-text">Сейчас используется стандартный логотип ({{ $defaultLogoUrl }}).</div>
                @endunless
            </div>

            <div class="mb-3">
                <label for="logo" class="form-label">Новый логотип</label>
                <input type="file" class="form-control" id="logo" name="logo" accept=".{{ implode(',.', $allowedExtensions) }}">
                <div class="form-text">
                    {{ mb_strtoupper(implode(', ', $allowedExtensions)) }} — не больше {{ $maxKilobytes }} КБ.
                    Оставьте поле пустым, чтобы сохранить текущий логотип.
                </div>
            </div>

            @if ($hasCustomLogo)
                <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" id="reset_logo" name="reset_logo" value="1">
                    <label class="form-check-label" for="reset_logo">
                        Вернуть стандартный логотип
                    </label>
                </div>
            @endif

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

<style>
.ax-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ax-space-3, 12px);
    border: 1px solid var(--ax-border, #e4e8ef);
    border-radius: var(--ax-radius, 12px);
    background: var(--ax-surface, #fff);
}

.ax-logo-preview img {
    max-width: 220px;
    max-height: 80px;
}
</style>
@endsection