<?php
/**
 * انبارداری — مدیریت دسته‌های محصول ووکامرس (جایگزین سادهٔ بخش دسته‌ها در ووکامرس).
 */
if (!defined('ABSPATH')) {
    exit;
}

$wc_ok = zerti_product_categories_available();
$can_manage = zerti_user_can_manage_product_categories();
$display_types = zerti_product_category_display_type_choices();
$zerti_ui_dir = function_exists('zerti_get_text_direction') ? zerti_get_text_direction() : 'rtl';
?>
<div class="zerti-component zerti-component-inventory zerti-component-inventory-categories zerti-inventory-sub-slot"
     data-zerti-inv-active="categories"
     data-zerti-inv-component="categories">
    <?php if (!$wc_ok) : ?>
        <?php zerti_ui_wc_required_notice(__('WooCommerce must be installed and active to manage categories.', 'zerti')); ?>
    <?php elseif (!$can_manage) : ?>
        <?php zerti_ui_alert(__('You do not have permission to manage product categories.', 'zerti'), 'warning', ['class' => 'mb-0']); ?>
    <?php else : ?>
        <div class="zerti-inv-categories" data-zerti-inv-categories="1">
            <div class="zerti-inv-categories__toolbar">
                <label class="zerti-inv-categories__search-label form-label mb-0" for="zertiInvCategoriesSearch">
                    <i class="fa-solid fa-magnifying-glass zerti-inv-categories__search-icon" aria-hidden="true"></i>
                    <input
                        type="search"
                        id="zertiInvCategoriesSearch"
                        class="form-control form-control-sm zerti-inv-categories__search-input"
                        autocomplete="off"
                        dir="<?php echo esc_attr($zerti_ui_dir); ?>"
                        aria-label="<?php esc_attr_e('Search categories', 'zerti'); ?>"
                        placeholder="<?php esc_attr_e('Search items', 'zerti'); ?>"
                    >
                </label>
            </div>

            <div class="zerti-inv-categories__layout">
                <aside class="zerti-inv-categories__tree-panel card" aria-label="<?php esc_attr_e('Categories list', 'zerti'); ?>">
                    <div class="card-body p-0 d-flex flex-column min-h-0">
                        <div class="zerti-inv-categories__tree-scroll zerti-scrollbar-thin" dir="<?php echo esc_attr($zerti_ui_dir); ?>">
                            <div class="zerti-inv-categories__tree-scroll-inner">
                                <div class="zerti-inv-categories__tree-loading d-none" role="status">
                                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                    <span><?php esc_html_e('Loading…', 'zerti'); ?></span>
                                </div>
                                <?php zerti_ui_empty_state(
                                    __('Nothing found. Click «Add category» to create a new item.', 'zerti'),
                                    'zerti-inv-categories__tree-empty'
                                ); ?>
                                <ul class="zerti-inv-categories__tree list-unstyled mb-0" role="tree"></ul>
                            </div>
                        </div>
                    </div>
                </aside>

                <section
                    class="zerti-inv-categories__editor card"
                    aria-label="<?php esc_attr_e('Edit category', 'zerti'); ?>"
                    data-zerti-editor-expanded="1"
                >
                    <div class="zerti-inv-categories__editor-bar">
                        <p class="mb-0 small text-body-secondary zerti-inv-categories__editor-bar-title">
                            <?php esc_html_e('Click to create a new category', 'zerti'); ?>
                        </p>
                        <button type="button" class="btn btn-sm btn-primary zerti-inv-categories__add-btn">
                            <i class="fa-solid fa-plus ms-1" aria-hidden="true"></i>
                            <?php esc_html_e('Add category', 'zerti'); ?>
                        </button>
                        <div class="zerti-inv-categories__editor-bar-actions d-flex flex-wrap align-items-center gap-2 ms-auto">
                            <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__cancel-edit-btn d-none">
                                <?php esc_html_e('Cancel editing', 'zerti'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="zerti-inv-categories__editor-body">
                        <div class="zerti-inv-categories__editor-scroll" dir="<?php echo esc_attr($zerti_ui_dir); ?>">
                        <div class="zerti-inv-categories__editor-scroll-inner">
                        <div class="card-body pt-0">
                        <form class="zerti-inv-categories__form d-none" novalidate>
                            <input type="hidden" name="id" value="0" data-zerti-field="id">

                            <div class="alert alert-danger py-2 small d-none zerti-inv-categories__form-error" role="alert"></div>
                            <div class="alert alert-success py-2 small d-none zerti-inv-categories__form-success" role="status"></div>

                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiCatName"><?php esc_html_e('Name', 'zerti'); ?> <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm" id="zertiCatName" name="name" data-zerti-field="name" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiCatSlug"><?php esc_html_e('Slug', 'zerti'); ?></label>
                                    <input type="text" class="form-control form-control-sm" id="zertiCatSlug" name="slug" data-zerti-field="slug" dir="ltr">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiCatParent"><?php esc_html_e('Parent category', 'zerti'); ?></label>
                                    <select class="form-select zerti-admin-select" id="zertiCatParent" name="parent" data-zerti-field="parent"></select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiCatDisplay"><?php esc_html_e('Visible in shop', 'zerti'); ?></label>
                                    <select class="form-select zerti-admin-select" id="zertiCatDisplay" name="display_type" data-zerti-field="display_type">
                                        <?php foreach ($display_types as $value => $label) : ?>
                                            <option value="<?php echo esc_attr($value); ?>"><?php echo esc_html($label); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="zertiCatDescription"><?php esc_html_e('Description', 'zerti'); ?></label>
                                    <textarea class="form-control form-control-sm" id="zertiCatDescription" name="description" rows="3" data-zerti-field="description"></textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label"><?php esc_html_e('Category image', 'zerti'); ?></label>
                                    <div class="zerti-inv-categories__thumb-field d-flex flex-wrap align-items-center gap-3">
                                        <div class="zerti-inv-categories__thumb-preview rounded border bg-body-tertiary" data-zerti-thumb-preview>
                                            <span class="text-body-secondary small"><?php esc_html_e('No image', 'zerti'); ?></span>
                                        </div>
                                        <input type="hidden" name="thumbnail_id" value="0" data-zerti-field="thumbnail_id">
                                        <div class="d-flex flex-wrap gap-2">
                                            <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__thumb-pick">
                                                <?php esc_html_e('Select image', 'zerti'); ?>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__thumb-clear d-none">
                                                <?php esc_html_e('Remove image', 'zerti'); ?>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-4 pt-3 border-top">
                                <p class="text-body-secondary small mb-0 zerti-inv-categories__meta-line d-none"></p>
                                <div class="d-flex gap-2 ms-auto">
                                    <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__cancel-btn">
                                        <?php esc_html_e('Cancel', 'zerti'); ?>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger zerti-inv-categories__delete-btn d-none">
                                        <?php esc_html_e('Delete', 'zerti'); ?>
                                    </button>
                                    <button type="submit" class="btn btn-sm btn-primary zerti-inv-categories__save-btn">
                                        <?php esc_html_e('Save', 'zerti'); ?>
                                    </button>
                                </div>
                            </div>
                        </form>
                        </div>
                        </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    <?php endif; ?>
</div>
