@php
    $category = $category ?? null;
    $isEdit = (bool) $category;
    $formAction = $formAction ?? ($isEdit ? route('admin.categories.update', $category) : route('admin.categories.store'));
    $formMethod = $formMethod ?? ($isEdit ? 'PUT' : 'POST');
    $defaultType = old('category_type', $category
        ? ($category->parent_id ? 'sub' : 'main')
        : (($preselectedParent ?? null) ? 'sub' : 'main'));
    $selectedParentId = old('parent_id', $category->parent_id ?? ($preselectedParent ?? ''));
    $selectedParentLabel = old('parent_label');
    if (! $selectedParentLabel && $selectedParentId) {
        $parentCat = $parentCategory ?? ($category?->parent ?? \App\Models\Category::find($selectedParentId));
        $selectedParentLabel = $parentCat?->name;
    }
@endphp

<form action="{{ $formAction }}" method="POST" enctype="multipart/form-data" data-cat-manager-form @if($isEdit) data-exclude-category="{{ $category->id }}" @endif>
    @csrf
    @if($formMethod !== 'POST')
        @method($formMethod)
    @endif

    <div class="cat-mgr-card mb-4">
        <div class="cat-mgr-card__head">
            <h5 class="fw-bold mb-0"><i class="bi bi-layers me-2 text-primary"></i>Category Type</h5>
        </div>
        <div class="cat-mgr-card__body">
            <div class="cat-type-pills mb-0">
                <label class="cat-type-pill {{ $defaultType === 'main' ? 'is-active' : '' }}" data-cat-type-pill>
                    <input type="radio" name="category_type" value="main" {{ $defaultType === 'main' ? 'checked' : '' }}>
                    <strong><i class="bi bi-grid-1x2 me-1"></i> Root Category</strong>
                    <small>Top level — e.g. Beauty & Personal Care</small>
                </label>
                <label class="cat-type-pill {{ $defaultType === 'sub' ? 'is-active' : '' }}" data-cat-type-pill>
                    <input type="radio" name="category_type" value="sub" {{ $defaultType === 'sub' ? 'checked' : '' }}>
                    <strong><i class="bi bi-diagram-3 me-1"></i> Child Category</strong>
                    <small>Under any parent — unlimited depth (Category → Sub → Child)</small>
                </label>
            </div>
            <div class="alert alert-light border small mb-0 mt-3 py-2" data-cat-level-preview>
                <i class="bi bi-info-circle text-primary me-1"></i>
                <span data-cat-level-text>Product types (e.g. Anti Hair Fall Shampoo) are added separately — not as categories.</span>
            </div>
            @error('category_type')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="cat-mgr-card mb-4 {{ $defaultType === 'sub' ? '' : 'd-none' }}" data-cat-parent-block>
        <div class="cat-mgr-card__head">
            <h5 class="fw-bold mb-0"><i class="bi bi-search me-2 text-primary"></i>Parent Category</h5>
        </div>
        <div class="cat-mgr-card__body">
            <div class="cat-live-search-wrap">
                <i class="bi bi-search cat-live-search-icon"></i>
                <input type="text"
                       class="form-control cat-live-search-input"
                       data-cat-parent-search
                       placeholder="Live search parent category..."
                       autocomplete="off">
                <div class="cat-live-search-panel" data-cat-parent-results></div>
            </div>
            <input type="hidden" name="parent_id" value="{{ $selectedParentId }}" data-cat-parent-id>
            <div class="mt-3 {{ $selectedParentId ? '' : 'd-none' }}" data-cat-parent-chip>
                <span class="cat-parent-chip">
                    <i class="bi bi-folder2-open"></i>
                    <span data-cat-parent-chip-label>{{ $selectedParentLabel }}</span>
                    <button type="button" class="btn btn-sm btn-link text-danger p-0 ms-1" data-cat-parent-clear aria-label="Clear parent">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </span>
            </div>
            @error('parent_id')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="cat-mgr-card mb-4">
        <div class="cat-mgr-card__head">
            <h5 class="fw-bold mb-0"><i class="bi bi-info-circle me-2 text-primary"></i>Details</h5>
        </div>
        <div class="cat-mgr-card__body">
            <div class="mb-3">
                <label class="form-label fw-bold small">Short Description <span class="text-muted">(optional)</span></label>
                <input type="text" name="short_description" class="form-control @error('short_description') is-invalid @enderror"
                       value="{{ old('short_description', $category->short_description ?? '') }}" maxlength="500"
                       placeholder="Brief summary for menus and listings">
                @error('short_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold small">Category Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control form-control-lg @error('name') is-invalid @enderror"
                       value="{{ old('name', $category->name ?? '') }}" required placeholder="e.g. Shampoo, Face Wash, Lipstick">
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-0">
                <label class="form-label fw-bold small">Description <span class="text-muted">(optional)</span></label>
                <textarea name="description" rows="3" class="form-control @error('description') is-invalid @enderror"
                          placeholder="Short description for SEO and category page">{{ old('description', $category->description ?? '') }}</textarea>
                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="cat-mgr-card mb-4">
        <div class="cat-mgr-card__head">
            <h5 class="fw-bold mb-0"><i class="bi bi-image me-2 text-primary"></i>Media</h5>
        </div>
        <div class="cat-mgr-card__body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Category Image</label>
                    <div class="cat-image-uploader cat-image-uploader--compact" data-cat-image-zone data-upload-field="image">
                        <div class="cat-image-preview cat-image-preview--sm {{ ($isEdit && $category->hasUploadedImage()) ? 'is-visible' : '' }}" data-cat-image-preview>
                            <img src="{{ ($isEdit && $category->hasUploadedImage()) ? $category->getImageUrl() : '' }}" alt="" data-cat-image-preview-img>
                            <button type="button" class="cat-image-preview__remove" data-cat-image-remove><i class="bi bi-x-lg"></i></button>
                        </div>
                        <label class="cat-image-btn mb-0 w-100"><i class="bi bi-images"></i><span>Upload</span>
                            <input type="file" class="d-none" accept="image/*" data-cat-gallery-input></label>
                        <input type="file" name="image" class="d-none" accept="image/*" data-cat-image-input>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Banner Image</label>
                    <div class="cat-image-uploader cat-image-uploader--compact" data-cat-image-zone data-upload-field="banner_image">
                        <div class="cat-image-preview cat-image-preview--banner {{ ($isEdit && $category->hasUploadedBanner()) ? 'is-visible' : '' }}" data-cat-image-preview>
                            <img src="{{ ($isEdit && $category->hasUploadedBanner()) ? $category->getBannerUrl() : '' }}" alt="" data-cat-image-preview-img>
                            <button type="button" class="cat-image-preview__remove" data-cat-image-remove><i class="bi bi-x-lg"></i></button>
                        </div>
                        <label class="cat-image-btn mb-0 w-100"><i class="bi bi-card-image"></i><span>Banner</span>
                            <input type="file" class="d-none" accept="image/*" data-cat-gallery-input></label>
                        <input type="file" name="banner_image" class="d-none" accept="image/*" data-cat-image-input>
                        @if($isEdit && $category->banner_image)
                            <input type="hidden" name="remove_banner_image" value="0" data-cat-remove-flag>
                        @endif
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Icon</label>
                    <div class="cat-image-uploader cat-image-uploader--compact" data-cat-image-zone data-upload-field="icon">
                        <div class="cat-image-preview cat-image-preview--sm {{ ($isEdit && $category->icon) ? 'is-visible' : '' }}" data-cat-image-preview>
                            @if($isEdit && $category->icon)
                                <img src="{{ media_url($category->icon) }}" alt="" data-cat-image-preview-img>
                            @else
                                <img src="" alt="" data-cat-image-preview-img>
                            @endif
                            <button type="button" class="cat-image-preview__remove" data-cat-image-remove><i class="bi bi-x-lg"></i></button>
                        </div>
                        <label class="cat-image-btn mb-0 w-100"><i class="bi bi-app"></i><span>Icon</span>
                            <input type="file" class="d-none" accept="image/*" data-cat-gallery-input></label>
                        <input type="file" name="icon" class="d-none" accept="image/*" data-cat-image-input>
                    </div>
                </div>
            </div>
            <p class="text-muted small mb-0 mt-2">Auto-converted to WEBP · Max 5MB · JPG, PNG, WEBP, SVG</p>
            @error('image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            @error('banner_image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            @error('icon')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="cat-mgr-card mb-4">
        <div class="cat-mgr-card__head">
            <h5 class="fw-bold mb-0"><i class="bi bi-sliders me-2 text-primary"></i>Visibility</h5>
        </div>
        <div class="cat-mgr-card__body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Display Order</label>
                    <input type="number" name="display_order" class="form-control" min="0"
                           value="{{ old('display_order', $category->display_order ?? 0) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Gender</label>
                    <select name="gender" class="form-select">
                        <option value="">All</option>
                        @foreach(['women' => 'Women', 'men' => 'Men', 'unisex' => 'Unisex', 'kids' => 'Kids'] as $val => $label)
                            <option value="{{ $val }}" {{ old('gender', $category->gender ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold small">Age Group</label>
                    <input type="text" name="age_group" class="form-control" placeholder="e.g. adult, teen, baby"
                           value="{{ old('age_group', $category->age_group ?? '') }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Homepage Feature</label>
                    <select name="is_featured" class="form-select">
                        <option value="0" {{ old('is_featured', $category->is_featured ?? 0) == 0 ? 'selected' : '' }}>Standard</option>
                        <option value="1" {{ old('is_featured', $category->is_featured ?? 0) == 1 ? 'selected' : '' }}>Featured</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Status</label>
                    <select name="status" class="form-select">
                        <option value="1" {{ old('status', $category->status ?? 1) == 1 ? 'selected' : '' }}>Active / Visible</option>
                        <option value="0" {{ old('status', $category->status ?? 1) == 0 ? 'selected' : '' }}>Inactive / Hidden</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Show in Menu</label>
                    <select name="show_in_menu" class="form-select">
                        <option value="1" {{ old('show_in_menu', $category->show_in_menu ?? 1) == 1 ? 'selected' : '' }}>Yes</option>
                        <option value="0" {{ old('show_in_menu', $category->show_in_menu ?? 1) == 0 ? 'selected' : '' }}>No</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Show on Home</label>
                    <select name="show_on_home" class="form-select">
                        <option value="0" {{ old('show_on_home', $category->show_on_home ?? 0) == 0 ? 'selected' : '' }}>No</option>
                        <option value="1" {{ old('show_on_home', $category->show_on_home ?? 0) == 1 ? 'selected' : '' }}>Yes</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    @if($isEdit)
        @include('admin.partials.seo_fields', ['model' => $category])
    @endif

    <div class="cat-mgr-sticky-bar">
        <div class="d-grid d-lg-flex gap-2">
            <button type="submit" class="btn btn-primary btn-lg fw-bold flex-lg-grow-0 px-lg-5">
                <i class="bi bi-{{ $isEdit ? 'save' : 'plus-lg' }} me-2"></i>{{ $isEdit ? 'Update Category' : 'Create Category' }}
            </button>
            <a href="{{ $isEdit ? route('admin.categories.show', $category) : route('admin.categories.index') }}"
               class="btn btn-light border btn-lg">Cancel</a>
        </div>
    </div>
</form>