@extends('layouts.app')

@section('title', 'Translate — ' . $recordLabel)
@section('page_title', 'Translate Content')
@section('page_subtitle', $recordLabel)

@section('content')
@php $inp = 'w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400'; @endphp

<div class="max-w-4xl">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
        <a href="{{ route($indexRoute) }}" class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back
        </a>
        {{-- Locale tabs --}}
        <div class="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
            @foreach($locales as $code => $name)
            <a href="{{ route('translations.edit', ['type' => $type, 'id' => $id, 'locale' => $code]) }}"
               class="px-3 py-1.5 text-xs font-semibold rounded-md transition-colors {{ $locale === $code ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">{{ $name }}</a>
            @endforeach
        </div>
    </div>

    @if(session('success'))
    <div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
        <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
    </div>
    @endif

    <div class="bg-blue-50 border-[0.5px] border-blue-100 rounded-xl px-4 py-3 mb-5 flex items-start gap-2.5">
        <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="text-blue-700 text-xs">Editing the <strong>{{ \App\Models\WebsiteContent::LOCALES[$locale] ?? $locale }}</strong> version. English is shown for reference — leave a field blank to fall back to English on the public site.</p>
    </div>

    <form method="POST" action="{{ route('translations.save', ['type' => $type, 'id' => $id]) }}" class="space-y-4"
          data-confirm="Save {{ \App\Models\WebsiteContent::LOCALES[$locale] ?? $locale }} translation?">
        @csrf
        <input type="hidden" name="locale" value="{{ $locale }}">

        @foreach($fields as $field => $label)
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
            <label class="block text-xs font-semibold text-gray-600 mb-2">{{ $label }}</label>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                    <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-1">English (reference)</p>
                    <div class="text-sm text-gray-500 bg-gray-50 border-[0.5px] border-gray-100 rounded-lg px-3 py-2 whitespace-pre-line min-h-[2.5rem]">{{ $model->baseValue($field) ?: '—' }}</div>
                </div>
                <div>
                    <p class="text-[10px] font-semibold uppercase tracking-wider text-teal-500 mb-1">{{ \App\Models\WebsiteContent::LOCALES[$locale] ?? $locale }}</p>
                    <textarea name="t[{{ $field }}]" rows="3" class="{{ $inp }} resize-y">{{ old('t.'.$field, $current[$field] ?? '') }}</textarea>
                </div>
            </div>
        </div>
        @endforeach

        <div class="flex items-center justify-end gap-2">
            <a href="{{ route($indexRoute) }}" class="text-sm font-medium text-gray-400 hover:text-gray-600 px-4 py-2.5">Cancel</a>
            <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                Save {{ \App\Models\WebsiteContent::LOCALES[$locale] ?? $locale }} Translation
            </button>
        </div>
    </form>
</div>
@endsection