@extends('layouts.admin')

@section('header', 'Add Benefit')

@section('content')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Benefit Details</h3>
    </div>
    <div class="p-6">
        <form action="{{ route('admin.features.store') }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                <input type="text" name="title" id="title" value="{{ old('title') }}" class="mt-1 focus:ring-teal-500 focus:border-teal-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md py-2 px-3 border" required>
            </div>

            <div class="mb-4">
                <label for="order_index" class="block text-sm font-medium text-gray-700">Display Order</label>
                <input type="number" name="order_index" id="order_index" value="{{ old('order_index', 0) }}" class="mt-1 focus:ring-teal-500 focus:border-teal-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md py-2 px-3 border">
            </div>

            <div class="mb-6 flex items-start">
                <div class="flex items-center h-5">
                    <input id="is_active" name="is_active" type="checkbox" class="focus:ring-teal-500 h-4 w-4 text-teal-600 border-gray-300 rounded" checked>
                </div>
                <div class="ml-3 text-sm">
                    <label for="is_active" class="font-medium text-gray-700">Active</label>
                    <p class="text-gray-500">Visible on the homepage.</p>
                </div>
            </div>

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