<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ isset($item) ? 'Edit' : 'Create' }} {{ ucfirst('{{ modelVariable }}') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                <form method="POST" action="{{ isset($item) ? route('{{ tableName }}.update', $item) : route('{{ tableName }}.store') }}">
                    @csrf
                    @if(isset($item))
                        @method('PUT')
                    @endif

                    @foreach($fields as $field)
                        <div class="mb-4">
                            <label for="{{ $field }}" class="block text-gray-700">{{ ucfirst($field) }}</label>
                            <input type="text" name="{{ $field }}" id="{{ $field }}"
                                   class="mt-1 block w-full rounded border-gray-300 shadow-sm focus:ring focus:ring-blue-200"
                                   value="{{ old('$field', isset($item) ? $item->$field : '') }}">
                            @error($field)
                                <span class="text-red-600 text-sm">{{ $message }}</span>
                            @enderror
                        </div>
                    @endforeach

                    <div class="flex justify-end">
                        <a href="{{ route('{{ tableName }}.index') }}" class="mr-2 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Back</a>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            {{ isset($item) ? 'Update' : 'Create' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>