@extends('layouts.app')

@section('title', 'Tambah tangkapan layar')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.landing-screenshots.index') }}" class="text-sm text-blue-600 hover:underline">← Kembali</a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">Tambah tangkapan layar</h1>
    </div>

    <div class="max-w-2xl bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 shadow-sm">
        <form method="POST" action="{{ route('admin.landing-screenshots.store') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Judul <span class="text-red-500">*</span></label>
                <input type="text" name="title" value="{{ old('title') }}" required maxlength="255"
                       class="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 px-3 py-2 text-sm">
                @error('title')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Keterangan singkat</label>
                <textarea name="caption" rows="3" maxlength="2000"
                          class="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 px-3 py-2 text-sm">{{ old('caption') }}</textarea>
                @error('caption')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategori carousel <span class="text-red-500">*</span></label>
                <select name="group_slug" required class="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 px-3 py-2 text-sm">
                    @foreach(\App\Models\LandingScreenshot::groupSlugLabels() as $slug => $label)
                        <option value="{{ $slug }}" @selected(old('group_slug', \App\Models\LandingScreenshot::GROUP_SLUG_DEFAULT) === $slug)>{{ $label }} ({{ $slug }})</option>
                    @endforeach
                </select>
                <p class="text-xs text-gray-500 mt-1">Tiap kategori = satu carousel terpisah di halaman utama. Slug tambahan bisa ditambahkan di model atau langsung di basisdata.</p>
                @error('group_slug')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Gambar <span class="text-red-500">*</span></label>
                <input type="file" name="image" accept="image/jpeg,image/png,image/webp" required
                       class="block w-full text-sm text-gray-600 dark:text-gray-400">
                <p class="text-xs text-gray-500 mt-1">JPEG, PNG, atau WebP. Maks. 5 MB.</p>
                @error('image')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div class="flex items-center gap-2">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" id="is_active" class="rounded border-gray-300" {{ old('is_active', true) ? 'checked' : '' }}>
                <label for="is_active" class="text-sm text-gray-700 dark:text-gray-300">Tampilkan di halaman utama</label>
            </div>
            <div class="pt-2">
                <button type="submit" class="px-4 py-2 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700">Simpan</button>
            </div>
        </form>
    </div>
@endsection