@extends('layouts.admin')

@section('title', __('admin.texts.title'))

@section('content')
    <h1 class="text-2xl font-bold text-brand-deep">{{ __('admin.texts.title') }}</h1>
    <p class="mt-2 text-sm text-ink-soft">{{ __('admin.texts.help') }}</p>

    <form method="GET" action="{{ lroute('admin.texts.index') }}" class="mt-6 flex flex-wrap items-end gap-3">
        <div>
            <label for="locale" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-soft">{{ __('admin.texts.locale') }}</label>
            <select id="locale" name="locale" class="rounded-lg border border-black/10 bg-white px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">
                @foreach (config('locales.supported') as $code => $data)
                    <option value="{{ $code }}" @selected($locale === $code)>{{ $data['name'] }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-soft">{{ __('admin.texts.section') }}</label>
            <select id="section" name="section" class="rounded-lg border border-black/10 bg-white px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">
                @foreach ($sections as $option)
                    <option value="{{ $option }}" @selected($section === $option)>{{ $option === 'general' ? __('admin.texts.general') : $option }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="rounded-lg bg-brand-deep px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand">{{ __('admin.actions.filter') }}</button>
    </form>

    @if (empty($entries))
        <p class="mt-6 rounded-2xl bg-white px-6 py-8 text-center text-sm text-ink-soft shadow-sm ring-1 ring-black/5">{{ __('admin.texts.empty') }}</p>
    @else
        <form method="POST" action="{{ lroute('admin.texts.update') }}" class="mt-6">
            @csrf
            @method('PUT')
            <input type="hidden" name="locale" value="{{ $locale }}">
            <input type="hidden" name="section" value="{{ $section }}">

            <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-black/5 text-xs uppercase tracking-wide text-ink-soft">
                            <th class="px-4 py-3 text-start font-semibold">{{ __('admin.texts.key') }}</th>
                            <th class="px-4 py-3 text-start font-semibold">{{ __('admin.texts.default') }}</th>
                            <th class="px-4 py-3 text-start font-semibold">{{ __('admin.texts.value') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($entries as $key => $default)
                            @php $override = $overrides->get($key); @endphp
                            <tr class="border-b border-black/5 align-top last:border-0">
                                <td class="w-48 px-4 py-3 text-xs text-ink-soft" dir="ltr">
                                    {{ $key }}
                                    @if ($override !== null)
                                        <span class="ms-1 rounded-full bg-brand/10 px-2 py-0.5 text-[10px] font-semibold text-brand">{{ __('admin.texts.modified') }}</span>
                                    @endif
                                </td>
                                <td class="w-1/3 px-4 py-3 text-ink-soft">{{ $default }}</td>
                                <td class="px-4 py-3">
                                    <label for="v-{{ $loop->index }}" class="sr-only">{{ $key }}</label>
                                    <textarea id="v-{{ $loop->index }}" name="values[{{ $key }}]" rows="{{ max(1, min(4, (int) ceil(mb_strlen($override ?? $default) / 60))) }}"
                                              class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 {{ $override !== null ? 'border-brand/40 bg-brand/5' : 'border-black/10 bg-white' }}"
                                              dir="{{ \App\Support\Locale::direction($locale) }}">{{ $override ?? $default }}</textarea>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                <button type="submit" class="rounded-full bg-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-deep">{{ __('admin.actions.save') }}</button>
            </div>
        </form>
    @endif
@endsection