@extends('layouts.sidebar')

@section('title', __('app.homepage_content_editor') . ' - ' . __('app.admin'))
@section('page-title', __('app.homepage_content_editor'))

@section('content')
<div class="mb-4 rounded-lg border border-amber-200/80 bg-amber-50/80 px-4 py-2 text-sm text-amber-950">
    {{ __('app.json_legacy_note') }} <a href="{{ route('admin.homepage.pilates') }}" class="font-medium text-primary hover:underline">{{ __('app.homepage_pilates_page_title') }}</a>
    · <a href="{{ route('admin.homepage.index') }}" class="text-primary/80 hover:underline">{{ __('app.homepage_hub_title') }}</a>
</div>
<div class="mb-6 flex flex-wrap gap-4 justify-between items-center">
    <a href="{{ route('admin.homepage.index') }}" class="text-sm text-primary hover:underline"><i class="fas fa-arrow-left mr-1"></i>{{ __('app.homepage_hub_title') }}</a>
    <a href="{{ route('home') }}" target="_blank" class="text-sm text-primary hover:underline"><i class="fas fa-external-link-alt mr-1"></i>{{ __('app.homepage_preview') }}</a>
</div>

<p class="text-gray-600 mb-6 max-w-4xl">{{ __('app.homepage_content_intro') }}</p>

<div class="bg-white rounded-lg shadow-lg p-8 max-w-5xl space-y-10">
    <form method="POST" action="{{ route('admin.homepage.content.update') }}">
        @csrf
        @method('PUT')

        <section>
            <h2 class="text-xl font-bold text-gray-900 mb-2">{{ __('app.homepage_offerings') }} (JSON)</h2>
            <p class="text-sm text-gray-600 mb-2">{{ __('app.homepage_json_offerings_hint') }}</p>
            <textarea name="offerings_json" rows="18" class="w-full font-mono text-sm border-2 border-gray-300 rounded-lg p-3" required>{{ old('offerings_json', json_encode($offerings, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)) }}</textarea>
            @error('offerings_json')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </section>

        <section>
            <h2 class="text-xl font-bold text-gray-900 mb-2">{{ __('app.homepage_testimonials') }} (JSON)</h2>
            <p class="text-sm text-gray-600 mb-2">{{ __('app.homepage_json_testimonials_hint') }}</p>
            <textarea name="testimonials_json" rows="14" class="w-full font-mono text-sm border-2 border-gray-300 rounded-lg p-3" required>{{ old('testimonials_json', json_encode($testimonials, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)) }}</textarea>
            @error('testimonials_json')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </section>

        <section>
            <h2 class="text-xl font-bold text-gray-900 mb-2">{{ __('app.homepage_featured_packages') }}</h2>
            <p class="text-sm text-gray-600 mb-2">{{ __('app.homepage_package_ids_hint') }}</p>
            <input type="text" name="package_ids" value="{{ old('package_ids', $packageIdsStr) }}" class="w-full max-w-xl border-2 border-gray-300 rounded-lg px-3 py-2" placeholder="1, 2, 3">
        </section>

        <section class="border-t border-gray-200 pt-8">
            <h2 class="text-xl font-bold text-gray-900 mb-4">{{ __('app.homepage_promo_popup') }}</h2>
            <label class="flex items-center gap-2 mb-4">
                <input type="checkbox" name="promo_enabled" value="1" {{ old('promo_enabled', $promo['enabled'] ?? false) ? 'checked' : '' }} class="rounded border-gray-300">
                <span class="text-sm font-medium text-gray-800">{{ __('app.homepage_promo_enabled') }}</span>
            </label>
            <label class="flex items-center gap-2 mb-4">
                <input type="checkbox" name="promo_session_once" value="1" {{ old('promo_session_once', $promo['session_once'] ?? true) ? 'checked' : '' }} class="rounded border-gray-300">
                <span class="text-sm text-gray-700">{{ __('app.homepage_promo_once') }}</span>
            </label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">title_sr</label>
                    <input type="text" name="promo_title_sr" value="{{ old('promo_title_sr', $promo['title_sr'] ?? '') }}" class="mt-1 w-full rounded-lg border-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">title_en</label>
                    <input type="text" name="promo_title_en" value="{{ old('promo_title_en', $promo['title_en'] ?? '') }}" class="mt-1 w-full rounded-lg border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">body_sr</label>
                    <textarea name="promo_body_sr" rows="3" class="mt-1 w-full rounded-lg border-gray-300">{{ old('promo_body_sr', $promo['body_sr'] ?? '') }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">body_en</label>
                    <textarea name="promo_body_en" rows="3" class="mt-1 w-full rounded-lg border-gray-300">{{ old('promo_body_en', $promo['body_en'] ?? '') }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">button SR</label>
                    <input type="text" name="promo_btn_sr" value="{{ old('promo_btn_sr', $promo['button_label_sr'] ?? '') }}" class="mt-1 w-full rounded-lg border-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">button EN</label>
                    <input type="text" name="promo_btn_en" value="{{ old('promo_btn_en', $promo['button_label_en'] ?? '') }}" class="mt-1 w-full rounded-lg border-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">button URL</label>
                    <input type="text" name="promo_url" value="{{ old('promo_url', $promo['button_url'] ?? '') }}" class="mt-1 w-full rounded-lg border-gray-300" placeholder="/pilates/classes">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">delay_ms</label>
                    <input type="number" name="promo_delay_ms" min="0" max="60000" value="{{ old('promo_delay_ms', $promo['delay_ms'] ?? 700) }}" class="mt-1 w-full rounded-lg border-gray-300">
                </div>
            </div>
        </section>

        <div class="pt-6">
            <button type="submit" class="btn btn-primary px-8 py-3"><i class="fas fa-save mr-2"></i>{{ __('app.save_changes') }}</button>
        </div>
    </form>
</div>
@endsection