@extends('web.layouts.web-master')

@section('title', __('static.pm_report.title'))
@section('meta_description', __('static.pm_report.meta'))

@section('content')
    <x-web.static-page
        :eyebrow="__('static.legal.eyebrow')"
        :title="__('static.pm_report.title')"
        :breadcrumb="__('static.pm_report.breadcrumb')"
    >
        <div class="max-w-[640px]">
            <p class="text-[13.5px] text-ink-2 leading-relaxed mb-6">
                {{ __('static.pm_report.intro') }}
            </p>

            {{-- Transparenz vorab: kostenlos vs. kostenpflichtig (Anti-Zombie). --}}
            <div class="border border-bg-rule mb-6">
                <table class="w-full text-[12.5px]">
                    <tbody>
                        @foreach ([
                            ['label' => __('static.pm_report.track_correction'), 'cost' => __('static.pm_report.cost_free')],
                            ['label' => __('static.pm_report.track_dsgvo'), 'cost' => __('static.pm_report.cost_free')],
                            ['label' => __('static.pm_report.track_depublication'), 'cost' => '35 €'],
                            ['label' => __('static.pm_report.track_change'), 'cost' => '10 €'],
                        ] as $track)
                            <tr class="border-b border-bg-rule last:border-b-0">
                                <td class="px-3 py-2 text-ink">{{ $track['label'] }}</td>
                                <td class="px-3 py-2 text-right font-semibold text-ink">{{ $track['cost'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if (session('pm-report-status'))
                <div class="mb-6 px-4 py-3 border border-bg-rule bg-bg-elev text-[13px] text-ink-2" role="status">
                    {{ session('pm-report-status') }}
                </div>
            @endif

            @if (session('pm-report-error'))
                <div class="mb-6 px-4 py-3 border border-red-300 bg-red-50 text-[13px] text-red-700" role="alert">
                    {{ session('pm-report-error') }}
                </div>
            @endif

            @if (session('pm-report-manual'))
                <div class="mb-6 px-4 py-3 border border-bg-rule bg-bg-elev text-[13px] text-ink-2" role="status">
                    {{ __('static.pm_report.manual_fallback') }}
                    <a href="{{ route('melden.form', ['way' => 'kontaktdaten']) }}" class="underline underline-offset-2 hover:text-ink">
                        {{ __('static.pm_report.manual_fallback_link') }}
                    </a>
                </div>
            @endif

            <form method="POST" action="{{ route('melden.pm.store') }}" class="space-y-5">
                @csrf

                {{-- Honeypot --}}
                <div class="hidden" aria-hidden="true">
                    <label for="website">Website</label>
                    <input id="website" type="text" name="website" tabindex="-1" autocomplete="off" />
                </div>

                <div>
                    <label for="reported_url" class="block text-[12px] font-semibold text-ink mb-1.5">{{ __('static.report_form.label_url') }}</label>
                    <input id="reported_url" type="url" name="reported_url" value="{{ old('reported_url', request('reported_url')) }}" required
                           placeholder="https://…"
                           class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-brand" />
                    @error('reported_url')
                        <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <p class="text-[12.5px] text-ink-3 leading-relaxed">
                    {{ __('static.pm_report.verification_note') }}
                </p>

                <button type="submit"
                        class="inline-flex items-center px-5 py-2.5 bg-brand text-white text-[13px] font-semibold hover:opacity-90">
                    {{ __('static.pm_report.submit') }}
                </button>
            </form>
        </div>
    </x-web.static-page>
@endsection