@extends('layouts.admin')

@section('title', $page->exists ? __('admin.comparisons.edit') : __('admin.comparisons.create'))

@php
    $jsonFields = [
        'sections' => __('admin.comparisons.sections').' — JSON',
        'points' => 'Points — JSON',
        'table' => 'Table — JSON',
        'steps' => 'Steps — JSON',
        'faq' => 'FAQ — JSON',
        'related' => 'Related links — JSON',
    ];
    $scalarFields = ['points_title', 'table_title', 'table_feature', 'table_qoodz', 'table_other', 'table_note', 'steps_title'];
@endphp

@section('content')
    <h1 class="text-2xl font-bold text-brand-deep">{{ $page->exists ? __('admin.comparisons.edit') : __('admin.comparisons.create') }}</h1>

    <form method="POST" action="{{ $page->exists ? lroute('admin.comparisons.update', ['comparison' => $page]) : lroute('admin.comparisons.store') }}" enctype="multipart/form-data" class="mt-6 max-w-3xl space-y-5 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
        @csrf
        @if ($page->exists) @method('PUT') @endif

        <div class="grid gap-5 sm:grid-cols-3">
            <div>
                <label class="text-sm font-semibold text-ink" for="locale">{{ __('admin.comparisons.locale') }}</label>
                <select id="locale" name="locale" class="mt-1 w-full 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(old('locale', $page->locale) === $code)>{{ $data['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-sm font-semibold text-ink" for="status">{{ __('admin.comparisons.status') }}</label>
                <select id="status" name="status" class="mt-1 w-full 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 (['draft', 'published'] as $status)
                        <option value="{{ $status }}" @selected(old('status', $page->status) === $status)>{{ __("admin.comparisons.statuses.{$status}") }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-sm font-semibold text-ink" for="slug">{{ __('admin.comparisons.slug') }}</label>
                <input id="slug" name="slug" value="{{ old('slug', $page->slug) }}" dir="ltr" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">
                <p class="mt-1 text-xs text-ink-soft">{{ __('admin.comparisons.slug_hint') }}</p>
            </div>
        </div>

        @foreach (['title' => __('admin.comparisons.page_title'), 'card_text' => __('admin.comparisons.card_text'), 'meta_description' => __('admin.comparisons.meta_description'), 'h1' => 'H1'] as $field => $label)
            <div>
                <label class="text-sm font-semibold text-ink" for="{{ $field }}">{{ $label }}</label>
                <input id="{{ $field }}" name="{{ $field }}" value="{{ old($field, $page->{$field}) }}" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">
            </div>
        @endforeach

        <div>
            <label class="text-sm font-semibold text-ink" for="lead">{{ __('admin.comparisons.lead') }}</label>
            <textarea id="lead" name="lead" rows="3" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">{{ old('lead', $page->lead) }}</textarea>
        </div>

        <div>
            <label class="text-sm font-semibold text-ink" for="image">{{ __('admin.editor.image') }}</label>
            @if ($page->image)
                <img src="{{ asset('storage/'.$page->image) }}" alt="" class="mt-2 w-40 rounded-lg ring-1 ring-black/10">
                <label class="mt-2 flex items-center gap-2 text-sm text-ink-soft">
                    <input type="checkbox" name="remove_image" value="1"> {{ __('admin.editor.remove_image') }}
                </label>
            @endif
            <input id="image" type="file" name="image" accept="image/*" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 text-sm">
            <p class="mt-1 text-xs text-ink-soft">{{ __('admin.editor.upload_hint') }}</p>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            @foreach ($scalarFields as $field)
                <div>
                    <label class="text-sm font-semibold text-ink" for="{{ $field }}">{{ $field }}</label>
                    <input id="{{ $field }}" name="{{ $field }}" value="{{ old($field, $page->content[$field] ?? '') }}" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">
                </div>
            @endforeach
        </div>

        @foreach ($jsonFields as $field => $label)
            <div>
                <label class="text-sm font-semibold text-ink" for="{{ $field }}_json">{{ $label }}</label>
                <textarea id="{{ $field }}_json" name="{{ $field }}_json" rows="4" dir="ltr" class="mt-1 w-full rounded-lg border border-black/10 px-3 py-2 font-mono text-xs focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20">{{ old($field.'_json', isset($page->content[$field]) ? json_encode($page->content[$field], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : '') }}</textarea>
                <p class="mt-1 text-xs text-ink-soft">{{ __('admin.comparisons.json_hint') }}</p>
            </div>
        @endforeach

        <div class="flex gap-3">
            <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>
            <a href="{{ lroute('admin.comparisons.index') }}" class="rounded-full px-6 py-2.5 text-sm font-medium text-ink-soft transition hover:text-brand">{{ __('admin.actions.cancel') }}</a>
        </div>
    </form>
@endsection