@extends('layouts.admin')

@section('title', 'Home page sections')

@section('content')
    <form action="{{ route('admin.homepage.update') }}" method="POST" class="max-w-4xl">
        @csrf
        @method('PUT')

        <div class="admin-card mb-5 p-5 sm:p-6">
            <h2 class="text-base">Sections &amp; order</h2>
            <p class="mt-1 text-sm text-text-secondary">
                Choose which sections appear on the home page and the order they appear in. Lower numbers come first.
                Each section pulls its content from the matching module — nothing here duplicates content.
            </p>
        </div>

        <div class="admin-card divide-y divide-border">
            @foreach ($sections as $key => $section)
                <div class="flex flex-wrap items-center gap-4 p-4 sm:px-6">
                    <div class="w-20 shrink-0">
                        <label for="order-{{ $key }}" class="sr-only">Order for {{ $section['label'] }}</label>
                        <input id="order-{{ $key }}" type="number" name="sections[{{ $key }}][order]"
                               value="{{ $section['order'] }}" min="0" max="99" class="form-input text-center">
                    </div>

                    <div class="min-w-0 flex-1">
                        <p class="font-medium text-text">{{ $section['label'] }}</p>
                        <p class="text-sm text-text-secondary">{{ $section['description'] }}</p>
                    </div>

                    <div class="shrink-0">
                        @if ($section['locked'])
                            <span class="pill-muted">Always shown</span>
                        @else
                            <label class="flex cursor-pointer items-center gap-2.5">
                                <input type="checkbox" name="sections[{{ $key }}][enabled]" value="1"
                                       @checked($section['enabled'])
                                       class="size-4 rounded border-border text-primary focus:ring-primary">
                                <span class="text-sm text-text-secondary">Visible</span>
                            </label>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6 flex items-center gap-3">
            <button type="submit" class="btn-primary">Save layout</button>
            <a href="{{ route('home') }}" target="_blank" rel="noopener" class="btn-ghost">
                <x-icon name="external" class="size-4" /> Preview home page
            </a>
        </div>
    </form>
@endsection