@extends('layouts.admin')

@section('title', 'Create Testimonial')
@section('header_title', 'Create Testimonial')

@section('content')
    <div class="max-w-2xl mx-auto">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">New Testimonial Details</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">Fill in the information below.</p>
            </div>
            <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
                <form action="{{ route('admin.testimonials.store') }}" method="POST">
                    @csrf
                    <div class="px-4 py-5 sm:p-6 space-y-6">
                        <div class="grid grid-cols-1 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">Author Name</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border p-2">
                            </div>

                            <div>
                                <label for="designation" class="block text-sm font-medium text-gray-700">Designation / Role
                                    (Optional)</label>
                                <input type="text" name="designation" id="designation" value="{{ old('designation') }}"
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border p-2">
                                <p class="mt-1 text-xs text-gray-500">E.g. CEO, Verified Buyer, etc.</p>
                            </div>

                            <div>
                                <label for="content" class="block text-sm font-medium text-gray-700">Testimonial
                                    Content</label>
                                <textarea id="content" name="content" rows="4" required
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border p-2">{{ old('content') }}</textarea>
                            </div>

                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="is_active" name="is_active" type="hidden" value="0">
                                    <input id="is_active" name="is_active" type="checkbox" value="1" checked
                                        class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="is_active" class="font-medium text-gray-700">Active</label>
                                    <p class="text-gray-500">Display this testimonial on the store.</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                        <a href="{{ route('admin.testimonials.index') }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                            Cancel
                        </a>
                        <button type="submit"
                            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Create
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection