@extends('layouts.app')

@php
    $localeName = \App\Models\WebsiteContent::LOCALES[$locale] ?? $locale;
    $sectionTitles = [
        'homepage' => 'Homepage',
        'about'    => 'About Page',
        'contact'  => 'Contact',
        'seo'      => 'SEO / Meta',
        'booking'  => 'Booking Messages',
        'promo'    => 'Announcement Bar',
        'payment'  => 'How to Pay',
        'policies' => 'Policies',
    ];
    $totalFields = collect($groups)->flatten(1)->count();
    $translated  = collect($groups)->flatten(1)->filter(fn ($f) => trim($f['value'] ?? '') !== '')->count();
@endphp

@section('title', 'Translate — ' . $localeName)
@section('nav_website', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')
<div class="p-6 max-w-5xl mx-auto">

    {{-- Header --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between mb-6">
        <div>
            <div class="flex items-center gap-2">
                <a href="{{ route('website.index') }}" class="text-gray-400 hover:text-gray-700">
                    <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>
                </a>
                <h1 class="text-xl font-bold text-gray-900">Translate to {{ $localeName }}</h1>
            </div>
            <p class="text-gray-400 text-sm mt-0.5">
                Fill the {{ $localeName }} version beside each English field. Blank fields fall back to English on the site.
                <span class="text-gray-500 font-medium">{{ $translated }}/{{ $totalFields }} translated.</span>
            </p>
        </div>
        {{-- Locale switch --}}
        <div class="flex flex-wrap items-center gap-1.5 flex-shrink-0">
            <a href="{{ route('website.index') }}"
               class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] bg-white text-gray-500 border-gray-200 hover:bg-gray-50">English</a>
            @foreach(\App\Models\WebsiteContent::LOCALES as $code => $name)
                @if($code !== 'en')
                <a href="{{ route('website.index', ['locale' => $code]) }}"
                   class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors {{ $locale === $code ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">{{ $name }}</a>
                @endif
            @endforeach
        </div>
    </div>

    @if(session('success'))
    <div class="mb-5 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-sm text-teal-700">
        {{ session('success') }}
    </div>
    @endif

    @if($errors->any())
    <div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">
        {{ $errors->first() }}
    </div>
    @endif

    @if(empty($groups))
    <div class="px-4 py-8 bg-white border-[0.5px] border-gray-200 rounded-xl text-center text-sm text-gray-400">
        There is no English content to translate yet. Add content in English first.
    </div>
    @else
    <form method="POST" action="{{ route('website.translate') }}" class="space-y-6">
        @csrf
        <input type="hidden" name="locale" value="{{ $locale }}">

        @foreach($groups as $section => $fields)
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b-[0.5px] border-gray-100 bg-gray-50/60">
                <h2 class="text-sm font-semibold text-gray-800">{{ $sectionTitles[$section] ?? ucfirst($section) }}</h2>
            </div>
            <div class="divide-y divide-gray-100">
                @foreach($fields as $field)
                @php $rows = strlen($field['en']) > 120 ? 4 : 2; @endphp
                <div class="px-5 py-4">
                    <div class="text-xs font-semibold text-gray-500 mb-2">{{ $field['label'] }}</div>
                    <div class="grid md:grid-cols-2 gap-3">
                        <div>
                            <div class="text-[11px] uppercase tracking-wide text-gray-400 mb-1">English</div>
                            <textarea readonly rows="{{ $rows }}"
                                class="w-full text-sm text-gray-500 bg-gray-50 border-[0.5px] border-gray-200 rounded-lg px-3 py-2 resize-none">{{ $field['en'] }}</textarea>
                        </div>
                        <div>
                            <div class="text-[11px] uppercase tracking-wide text-teal-500 mb-1">{{ $localeName }}</div>
                            <textarea name="t[{{ $section }}][{{ $field['key'] }}]" rows="{{ $rows }}"
                                placeholder="Enter {{ $localeName }} translation…"
                                class="w-full text-sm text-gray-800 border-[0.5px] border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-y">{{ $field['value'] }}</textarea>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach

        <div class="flex items-center justify-end gap-3 sticky bottom-0 bg-gradient-to-t from-white via-white to-transparent py-4">
            <a href="{{ route('website.index') }}" class="text-sm text-gray-500 hover:text-gray-800 font-medium px-4 py-2">Cancel</a>
            <button type="submit"
                class="inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-5 py-2.5 rounded-lg 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="M5 13l4 4L19 7"/></svg>
                Save {{ $localeName }} Translations
            </button>
        </div>
    </form>
    @endif

</div>
@endsection