<div class="ml-[280px] min-h-screen bg-gray-100 p-8 space-y-6">

    <!-- HEADER -->
    <div class="flex justify-between items-center bg-white border border-gray-300 rounded-xl px-6 py-4 shadow-sm">
        <div>
            <h2 class="text-2xl font-semibold text-gray-900">
                Services Page Content
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                Manage category-wise service descriptions displayed on the Services page
            </p>
        </div>

        <a href="{{ route('admin.services.page.list') }}"
            class="inline-flex items-center gap-2 px-5 py-2
                   bg-gray-900 text-white text-sm font-medium
                   rounded-lg hover:bg-gray-800 transition">
            ← Back
        </a>
    </div>

    <!-- SUCCESS MESSAGE -->
    @if (session()->has('success'))
        <div
            class="flex items-center justify-between
                    bg-green-50 border border-green-300
                    text-green-800 px-5 py-3 rounded-lg shadow-sm">
            <span>{{ session('success') }}</span>
            <button onclick="this.parentElement.remove()" class="text-green-700 font-bold text-lg leading-none">
                ×
            </button>
        </div>
    @endif

    <!-- MAIN FORM CARD -->
    <div class="bg-white rounded-xl border border-gray-300 shadow-md">

        <!-- CARD HEADER -->
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">
                Category-wise Service Description
            </h3>
            <p class="text-sm text-gray-500 mt-1">
                Select a service category and update its description.
            </p>
        </div>

        <!-- FORM START -->
        <form wire:submit.prevent="save">

            <div class="p-6 space-y-6">

                <!-- CATEGORY SELECT -->
                <div class="space-y-1">
                    <label class="block text-sm font-medium text-gray-700">
                        Service Category
                    </label>

                    <select wire:model="service_category_id"
                        class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm
                               focus:ring-2 focus:ring-[#f38121] focus:border-[#f38121]">
                        <option value="">Select Category</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>

                    @error('service_category_id')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- DESCRIPTION -->
                <div class="space-y-1">
                    <label class="block text-sm font-medium text-gray-700">
                        Description
                    </label>

                    <textarea wire:model="description" rows="6" class="w-full rounded-lg border border-gray-300 px-4 py-3"
                        placeholder="Enter description for selected category...">
</textarea>


                    @error('description')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>

            <!-- CARD FOOTER -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end bg-gray-50 rounded-b-xl">
                <button type="submit"
                    class="inline-flex items-center gap-2
                           px-6 py-2 bg-[#f38121] text-white
                           text-sm font-semibold rounded-lg
                           hover:bg-[#e26f10] transition">
                    Save Content
                </button>
            </div>

        </form>
        <!-- FORM END -->

    </div>
</div>
