@extends('layouts.admin')
@section('content')
<p class="hms-kicker">SEO & links</p>
<h1 class="font-serif text-4xl">Redirects</h1>
<p class="mt-3 max-w-3xl text-black/60">Redirects automatically send someone from an old or incorrect website address to the right page. They are useful after renaming a page or changing its URL so bookmarks and search results do not lead to a dead page.</p>

<section class="mt-6 rounded-2xl border border-black/10 bg-white p-6">
    <h2 class="font-serif text-2xl">Add a redirect</h2>
    <div class="mt-3 rounded-xl bg-[var(--hms-cream)] p-4 text-sm text-black/65">
        <strong class="text-black/80">Example:</strong> If an old page was <code>/old-about</code> and the replacement is <code>/about</code>, enter those two addresses below and choose <strong>Permanent move (301)</strong>.
    </div>

    <form class="mt-5 grid gap-4 lg:grid-cols-2" method="POST" action="{{ route('admin.redirects.store') }}">
        @csrf
        <label class="grid gap-1.5 text-sm font-semibold">Old website path
            <span class="text-xs font-normal leading-relaxed text-black/45">The old address visitors may still use. Enter only the part after the domain, beginning with <strong>/</strong>.</span>
            <input class="rounded-xl border border-black/15 px-4 py-3" name="source_path" placeholder="/old-page" required>
        </label>

        <label class="grid gap-1.5 text-sm font-semibold">Send visitors to
            <span class="text-xs font-normal leading-relaxed text-black/45">The correct destination. Use an HMS path such as <strong>/about</strong>, or a complete HTTPS address when sending to another website.</span>
            <input class="rounded-xl border border-black/15 px-4 py-3" name="target_url" placeholder="/new-page" required>
        </label>

        <label class="grid gap-1.5 text-sm font-semibold lg:col-span-2">Type of redirect
            <span class="text-xs font-normal leading-relaxed text-black/45">For most changed or replaced HMS pages, use <strong>Permanent move (301)</strong>. Temporary options are only for destinations that will later change back.</span>
            <select class="rounded-xl border border-black/15 px-4 py-3" name="status_code">
                <option value="301" selected>Permanent move (301) — use this for most old or renamed pages</option>
                <option value="302">Temporary move (302) — use when the change is only temporary</option>
                <option value="307">Temporary move, preserve request method (307) — advanced</option>
                <option value="308">Permanent move, preserve request method (308) — advanced</option>
            </select>
        </label>

        <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="is_active" value="1" checked> Turn this redirect on immediately</label>
        <button class="hms-button hms-button-primary justify-self-start lg:justify-self-end">Add redirect</button>
    </form>
</section>

<section class="mt-8">
    <div class="flex items-end justify-between gap-4"><h2 class="font-serif text-2xl">Current redirects</h2><p class="text-xs text-black/45">Permanent = old URL should stay replaced · Temporary = destination may change back</p></div>
    <div class="mt-4 overflow-hidden rounded-2xl border border-black/10 bg-white">
        @forelse($redirects as $redirect)
            @php
                $typeLabel = match ((int) $redirect->status_code) {
                    301 => 'Permanent move',
                    302 => 'Temporary move',
                    307 => 'Temporary · advanced',
                    308 => 'Permanent · advanced',
                    default => 'Redirect',
                };
            @endphp
            <div class="grid gap-3 border-t border-black/5 p-4 first:border-t-0 md:grid-cols-[1fr_auto_1fr_auto_auto] md:items-center">
                <div><small class="block text-[10px] font-bold uppercase tracking-wider text-black/40">Old address</small><code class="break-all">{{ $redirect->source_path }}</code></div>
                <span class="hidden text-black/30 md:block">→</span>
                <div><small class="block text-[10px] font-bold uppercase tracking-wider text-black/40">Destination</small><span class="break-all">{{ $redirect->target_url }}</span></div>
                <div class="text-xs"><strong>{{ $typeLabel }}</strong><span class="block text-black/40">Code {{ $redirect->status_code }} · {{ $redirect->is_active ? 'On' : 'Off' }}</span></div>
                <form method="POST" action="{{ route('admin.redirects.destroy', $redirect) }}" onsubmit="return confirm('Delete this redirect?')">@csrf @method('DELETE')<button class="text-sm font-semibold text-red-700">Delete</button></form>
            </div>
        @empty
            <p class="p-6 text-sm text-black/50">No redirects have been added.</p>
        @endforelse
    </div>
</section>
@endsection