@extends('admin.master')

@section('content')
<div class="mx-auto max-w-4xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">
        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Edit Child Sub Category</h2>
            <p class="mt-1 text-md text-gray-600">Update child sub category information</p>
        </div>

        <form action="{{ route('admin.child-subcategories.update', $childSubCategory->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-md font-medium text-gray-700 mb-2">Sub Category</label>
                    <select name="sub_category_id"
                            class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black">
                        <option value="">Select Sub Category</option>
                        @foreach($subCategories as $subCategory)
                            <option value="{{ $subCategory->id }}"
                                {{ old('sub_category_id', $childSubCategory->sub_category_id) == $subCategory->id ? 'selected' : '' }}>
                                {{ $subCategory->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('sub_category_id')
                        <p class="text-red-500 text-md mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-md font-medium text-gray-700 mb-2">Sort Order</label>
                    <input type="number"
                           name="sort_order"
                           value="{{ old('sort_order', $childSubCategory->sort_order) }}"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black">
                    @error('sort_order')
                        <p class="text-red-500 text-md mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-md font-medium text-gray-700 mb-2">Name <span class="text-red-500">*</span></label>
                    <input type="text"
                           name="name"
                           value="{{ old('name', $childSubCategory->name) }}"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black">
                    @error('name')
                        <p class="text-red-500 text-md mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-md font-medium text-gray-700 mb-2">Image</label>
                    <input type="file"
                           name="image"
                           class="w-full border border-gray-300 rounded px-4 py-2 bg-white">
                    @if($childSubCategory->image)
                        <img src="{{ asset('storage/' . $childSubCategory->image) }}"
                             alt="{{ $childSubCategory->name }}"
                             class="mt-3 h-20 w-20 rounded object-cover border">
                    @endif
                    @error('image')
                        <p class="text-red-500 text-md mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           name="is_active"
                           id="is_active"
                           value="1"
                           {{ old('is_active', $childSubCategory->is_active) ? 'checked' : '' }}
                           class="h-4 w-4 text-black border-gray-300 rounded">
                    <label for="is_active" class="text-md font-medium text-gray-700">Active</label>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit"
                        class="bg-black text-white px-5 py-2 rounded text-md ">
                    Update
                </button>

                <a href="{{ route('admin.child-subcategories.index') }}"
                   class="text-center bg-gray-200 text-gray-800 px-5 py-2 rounded text-md ">
                    Back
                </a>
            </div>
        </form>
    </div>
</div>
@endsection