{{-- Load preview fonts from Google Fonts (admin preview only) --}}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Poppins:wght@400;700&family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap">

<form method="POST" action="{{ route('ch-admin.appearance.typography.update') }}">
    @csrf

    <p class="c-grey-600 mB-25">
        Choose a font family, base font size, and heading weight for the frontend theme.
    </p>

    {{-- Font Family --}}
    <div class="mB-25">
        <h6 class="c-grey-900 mB-15">Font Family</h6>
        <div class="row">
            @foreach($typography['font_family']['options'] as $font)
            @php $selected = ($typography['font_family']['value'] ?? $typography['font_family']['default']) === $font; @endphp
            <div class="col-md-2 col-sm-4 mB-10">
                <label class="d-block" style="cursor: pointer;">
                    <input type="radio"
                           name="font_family"
                           value="{{ $font }}"
                           class="d-none js-font-radio"
                           {{ $selected ? 'checked' : '' }}>
                    <div class="bd bdrs-3 p-15 text-center js-font-card {{ $selected ? 'border-primary' : '' }}"
                         style="border-width: 2px !important; {{ $selected ? 'border-color: #6366f1 !important; background: #f5f3ff;' : '' }} transition: all .15s;">
                        <div style="font-family: '{{ $font }}', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 6px;">Aa</div>
                        <div style="font-family: '{{ $font }}', sans-serif; font-size: 11px; color: #6b7280;">{{ $font }}</div>
                    </div>
                </label>
            </div>
            @endforeach
        </div>
    </div>

    <hr class="mB-25">

    {{-- Base Font Size --}}
    <div class="mB-25">
        <h6 class="c-grey-900 mB-15">Base Font Size</h6>
        <div class="d-flex" style="gap: 10px; flex-wrap: wrap;">
            @foreach($typography['base_font_size']['options'] as $size)
            @php $selected = ($typography['base_font_size']['value'] ?? $typography['base_font_size']['default']) === $size; @endphp
            <label class="d-flex ai-c" style="gap: 6px; cursor: pointer;">
                <input type="radio"
                       name="base_font_size"
                       value="{{ $size }}"
                       {{ $selected ? 'checked' : '' }}>
                <span class="c-grey-900" style="font-size: {{ $size }}px; line-height: 1;">{{ $size }}px</span>
                @if($size === $typography['base_font_size']['default'])
                <span class="badge bg-secondary" style="font-size: 9px;">default</span>
                @endif
            </label>
            @endforeach
        </div>
    </div>

    <hr class="mB-25">

    {{-- Heading Weight --}}
    <div class="mB-25">
        <h6 class="c-grey-900 mB-15">Heading Weight</h6>
        <div class="d-flex" style="gap: 16px; flex-wrap: wrap;">
            @foreach($typography['heading_weight']['options'] as $weight)
            @php $selected = ($typography['heading_weight']['value'] ?? $typography['heading_weight']['default']) === $weight; @endphp
            <label class="d-flex ai-c" style="gap: 8px; cursor: pointer;">
                <input type="radio"
                       name="heading_weight"
                       value="{{ $weight }}"
                       {{ $selected ? 'checked' : '' }}>
                <span style="font-weight: {{ $weight }}; font-size: 16px;">
                    {{ $weight }}
                    @php
                        $labels = ['600' => 'SemiBold', '700' => 'Bold', '800' => 'ExtraBold'];
                    @endphp
                    <span class="c-grey-600" style="font-weight: normal; font-size: 12px;">
                        ({{ $labels[$weight] ?? '' }})
                    </span>
                </span>
                @if($weight === $typography['heading_weight']['default'])
                <span class="badge bg-secondary" style="font-size: 9px;">default</span>
                @endif
            </label>
            @endforeach
        </div>
    </div>

    <div class="mT-20">
        <button type="submit" class="btn btn-primary">Save Typography</button>
    </div>
</form>

<script>
(function () {
    document.querySelectorAll('.js-font-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
            document.querySelectorAll('.js-font-card').forEach(function (card) {
                card.style.borderColor = '';
                card.style.background  = '';
            });
            var card = radio.nextElementSibling;
            card.style.borderColor = '#6366f1';
            card.style.background  = '#f5f3ff';
        });
    });
}());
</script>