@extends('layouts.admin', ['title' => 'New Testimonial'])

@section('content')
    <div class="rounded-2xl border border-white/10 bg-white/5 p-8">
        <div class="flex items-center justify-between gap-4">
            <div>
                <div class="text-xl font-semibold">Create Testimonial</div>
                <div class="mt-1 text-sm text-white/60">Add feedback from a student or client.</div>
            </div>
            <a href="{{ route('admin.testimonials.index') }}" class="text-sm text-white/60 hover:text-white">Back</a>
        </div>

        <form class="mt-8 space-y-5" method="POST" action="{{ route('admin.testimonials.store') }}">
            @csrf

            <div>
                <label class="text-xs text-white/70">Quote</label>
                <input name="quote" value="{{ old('quote') }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
            </div>

            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="text-xs text-white/70">Author Name (optional)</label>
                    <input name="author_name" value="{{ old('author_name') }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div>
                    <label class="text-xs text-white/70">Author Title (optional)</label>
                    <input name="author_title" value="{{ old('author_title') }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="text-xs text-white/70">Rating (1-5)</label>
                    <input name="rating" type="number" min="1" max="5" value="{{ old('rating', 5) }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div>
                    <label class="text-xs text-white/70">Sort Order</label>
                    <input name="sort_order" type="number" min="0" value="{{ old('sort_order', 0) }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div class="flex items-center gap-2 pt-7">
                    <input name="is_published" type="checkbox" value="1" {{ old('is_published', true) ? 'checked' : '' }} class="rounded border-white/20 bg-white/5">
                    <label class="text-sm text-white/70">Published</label>
                </div>
            </div>

            <button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">
                Create
            </button>
        </form>
    </div>
@endsection