@extends('layouts.app')

@section('content')
    <div class="container">
        <h1 class="mb-3">{{ __('Site settings') }}</h1>
        <p class="text-muted" style="max-width: 50rem;">
            Manage shared interface text across supported locales. Updates are written directly to the JSON language files.
        </p>

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif

        <form method="POST" action="{{ route('admin.site-settings.update') }}" class="card" style="padding:1.5rem; margin-top:1.5rem;">
            @csrf
            @method('PUT')

            <div class="table-responsive" style="overflow-x:auto;">
                <h2 class="h5 mt-0">Interface text</h2>
                <table class="table" style="width:100%; border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th scope="col" style="text-align:left; padding:0.75rem; border-bottom:1px solid #e2e8f0;">Key</th>
                            @foreach ($locales as $locale)
                                <th scope="col" style="text-align:left; padding:0.75rem; border-bottom:1px solid #e2e8f0;">
                                    {{ strtoupper($locale) }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($keys as $key)
                            <tr>
                                <th scope="row" style="padding:0.75rem; border-bottom:1px solid #e2e8f0; width:20%;">{{ $key }}</th>
                                @foreach ($locales as $locale)
                                    <td style="padding:0.75rem; border-bottom:1px solid #e2e8f0;">
                                        <label class="sr-only" for="{{ $locale . '-' . md5($key) }}">{{ $key }} ({{ strtoupper($locale) }})</label>
                                        <input
                                            type="text"
                                            id="{{ $locale . '-' . md5($key) }}"
                                            name="translations[{{ $locale }}][{{ $key }}]"
                                            value="{{ $translations[$locale][$key] ?? '' }}"
                                            class="form-control"
                                        >
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if (! empty($secondaryCategories))
                <div class="table-responsive" style="overflow-x:auto; margin-top:2rem;">
                    <h2 class="h5">Secondary category labels</h2>
                    <p class="text-muted" style="max-width: 48rem;">
                        Customize the display names for optional secondary taxonomies in each locale.
                    </p>
                    <table class="table" style="width:100%; border-collapse:collapse;">
                        <thead>
                            <tr>
                                <th scope="col" style="text-align:left; padding:0.75rem; border-bottom:1px solid #e2e8f0;">Category</th>
                                @foreach ($locales as $locale)
                                    <th scope="col" style="text-align:left; padding:0.75rem; border-bottom:1px solid #e2e8f0;">
                                        {{ strtoupper($locale) }}
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($secondaryCategories as $slug => $config)
                                @php
                                    $key = $config['key'] ?? $slug;
                                    $defaultLabel = $config['default'] ?? $key;
                                @endphp
                                <tr>
                                    <th scope="row" style="padding:0.75rem; border-bottom:1px solid #e2e8f0; width:20%;">
                                        <div class="fw-semibold">{{ ucfirst($slug) }}</div>
                                        <div class="text-muted" style="font-size:0.9rem;">Default: {{ $defaultLabel }}</div>
                                    </th>
                                    @foreach ($locales as $locale)
                                        <td style="padding:0.75rem; border-bottom:1px solid #e2e8f0;">
                                            <label class="sr-only" for="{{ $locale . '-' . md5($key) }}">{{ $defaultLabel }} ({{ strtoupper($locale) }})</label>
                                            <input
                                                type="text"
                                                id="{{ $locale . '-' . md5($key) }}"
                                                name="translations[{{ $locale }}][{{ $key }}]"
                                                value="{{ $translations[$locale][$key] ?? '' }}"
                                                class="form-control"
                                            >
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            <div style="margin-top:1rem; display:flex; justify-content:flex-end; gap:0.5rem;">
                <button type="submit" class="button button-primary">{{ __('Save changes') }}</button>
            </div>
        </form>
    </div>
@endsection