<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div class="flex items-center gap-2 min-w-0">
                <div
                    class="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 gradient-primary rounded-lg sm:rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-edit text-white text-xs sm:text-sm"></i>
                </div>
                <div class="min-w-0">
                    <h2 class="text-base sm:text-lg md:text-xl font-bold text-stone-800 truncate">Edit Kategori</h2>
                    <p class="text-[10px] sm:text-xs text-stone-500 truncate">{{ $category->category_name }}</p>
                </div>
            </div>
        </div>
    </x-slot>

    <div class="py-4 sm:py-6 bg-stone-50 min-h-screen">
        <div class="max-w-3xl mx-auto px-3 sm:px-4 lg:px-8">

            {{-- Error Alert --}}
            @if ($errors->any())
                <div class="mb-4 sm:mb-6">
                    <div class="bg-rose-50 border border-rose-200 text-rose-700 px-3 sm:px-4 py-3 rounded-xl text-sm">
                        <div class="flex items-center gap-2 mb-1">
                            <i class="fas fa-exclamation-triangle text-rose-600"></i>
                            <strong class="font-bold">Error!</strong>
                        </div>
                        <ul class="list-disc list-inside text-xs sm:text-sm space-y-0.5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            {{-- Main Card --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-slate-200 bg-slate-50/50">
                    <p
                        class="text-[10px] sm:text-xs text-slate-600 uppercase tracking-wider font-semibold flex items-center gap-2">
                        <i class="fas fa-info-circle text-amber-600"></i>
                        Edit Informasi Kategori
                    </p>
                </div>

                <form action="{{ route('admin.category.update', $category->category_id) }}" method="POST"
                    class="p-4 sm:p-5 md:p-6 space-y-4 sm:space-y-6">
                    @csrf
                    @method('PUT')

                    <div>
                        <x-input-label for="category_name" :value="__('Nama Kategori')"
                            class="text-slate-700 text-sm font-semibold mb-2" />
                        <x-text-input id="category_name" name="category_name" type="text"
                            class="block w-full bg-slate-50 border-slate-300 text-slate-800 focus:border-amber-500 focus:ring-amber-500 rounded-xl text-sm transition-colors duration-200"
                            :value="old('category_name', $category->category_name)" placeholder="Masukkan nama kategori"
                            required autofocus />
                        <x-input-error class="mt-2" :messages="$errors->get('category_name')" />
                    </div>

                    <div
                        class="flex flex-col-reverse sm:flex-row gap-3 pt-6 border-t border-slate-200">
                        <a href="{{ route('admin.category.index') }}"
                            class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 bg-slate-100 hover:bg-slate-200 border border-slate-300 text-slate-700 rounded-xl text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-slate-300 focus:ring-offset-2">
                            <i class="fas fa-arrow-left mr-2"></i> Kembali
                        </a>

                        <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 gradient-primary text-white rounded-xl text-sm font-medium shadow-md hover:shadow-lg transition-all duration-200 focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                            <i class="fas fa-save mr-2"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Additional responsive styles --}}
    <style>
        @media (max-width: 480px) {
            .xs\:flex-row {
                flex-direction: row;
            }
        }

        /* Better touch targets for mobile */
        button,
        a,
        [role="button"] {
            touch-action: manipulation;
            min-height: 40px;
        }

        /* Prevent zoom on input focus for iOS */
        input,
        select,
        textarea {
            font-size: 16px !important;
        }
    </style>
</x-app-layout>