<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Marketplace
 * @author    Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
?>
<?php
    $productMatrix = $block->getSellerProductMatrix();
    $attributes = $block->getSellerProductAttributes();
    $helper = $this->helper(\Webkul\Marketplace\Helper\Data::class);
    $currencySymbol = $helper->getCurrencySymbol();
?>
<div id="product-variations-matrix" data-role="product-variations-matrix">
    <div data-bind="scope: 'configurableVariations'">
        <h3 class="hidden" data-bind="css: {hidden: !showVariations() }" class="title">
            <?= $block->escapeHtml(__('Current Variations')); ?>
        </h3>

        <script data-template-for="variation-image" type="text/x-magento-template">
            <img src="<%= data.url %>" class="variation" data-role="image"/>
        </script>
        <!-- ko if: showVariations() -->
            <div class="field hidden" data-bind="css: {hidden: !showVariations() }">
                <div data-role="configurable-attributes-container">
                    <!-- ko foreach: {data: attributes, as: 'attribute'} -->
                        <div data-role="attribute-info">
                            <input name="attributes[]" data-bind="value: attribute.id, attr:{id: 'configurable_attribute_' + attribute.id}" type="hidden"/>
                            <input data-bind="value: attribute.id, attr: {name: $parent.getAttributeRowName(attribute, 'attribute_id')}" type="hidden"/>
                            <input data-bind="value: attribute.code, attr: {name: $parent.getAttributeRowName(attribute, 'code')}" type="hidden"/>
                            <input data-bind="value: attribute.label, attr: {name: $parent.getAttributeRowName(attribute, 'label')}" type="hidden"/>
                            <input data-bind="value: $index(), attr: {name: $parent.getAttributeRowName(attribute, 'position')}" type="hidden"/>
                            <!-- ko foreach: {data: attribute.chosen, as: 'option'} -->
                                <div data-role="option-info">
                                    <input value="1" data-bind="attr: {name: $parents[1].getOptionRowName(attribute, option, 'include')}" type="hidden"/>
                                    <input data-bind="value: option.value, attr: {name: $parents[1].getOptionRowName(attribute, option, 'value_index')}" type="hidden"/>
                                </div>
                            <!-- /ko -->
                        </div>
                    <!-- /ko -->
                </div>
                <div class="admin__data-grid-wrap admin__data-grid-wrap-static">
                    <table class="data-grid">
                        <thead>
                            <tr>
                                <th class="data-grid-th data-grid-thumbnail-cell col-image" data-column="image">
                                    <?= /* @noEscape */ __('Image'); ?>
                                </th>
                                <th class="data-grid-th col-name" data-column="name">
                                    <?= /* @noEscape */ __('Name'); ?>
                                </th>
                                <th class="data-grid-th col-sku" data-column="sku">
                                    <?= /* @noEscape */ __('SKU'); ?>
                                </th>
                                <th class="data-grid-th col-price" data-column="price">
                                    <?= /* @noEscape */ __('Price'); ?>
                                </th>
                                <th class="data-grid-th col-qty" data-column="qty">
                                    <?= /* @noEscape */ __('Quantity'); ?>
                                </th>
                                <th class="data-grid-th col-weight" data-column="weight">
                                    <?= /* @noEscape */ __('Weight'); ?>
                                </th>
                                <!-- ko foreach: getAttributesOptions() -->
                                    <th data-bind="attr: {class:'data-grid-th col-' + $data.attribute_code},
                                        text: $data.attribute_label">
                                    </th>
                                <!-- /ko -->
                                <th class="data-grid-th">
                                    <?= /* @noEscape */ __('Actions'); ?>
                                </th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: {data: productMatrix, as: 'variation'}">
                            <tr data-role="row" data-bind="css: { _disabled: !variation.status, even: $index() % 2 },
                                attr: { 'data-row-number': $index() }">
                                <td class="col-image" data-column="image">
                                    <div class="actions split actions-image-uploader">
                                        <div class="action-upload action split" data-action="upload-image">
                                            <!-- ko if: $parent.isShowPreviewImage(variation) -->
                                                <img data-bind='attr: {src: variation.images.preview}' class="variation"
                                                     data-role="image"/>
                                            <!-- /ko -->
                                            <!-- ko if: variation.editable-->
                                                <input type="hidden" data-bind="
                                                    attr: {id: $parent.getRowId(variation, 'image'),
                                                    name: $parent.getVariationRowName(variation, 'image')}"/>
                                                <span><?= /* @noEscape */ __('Upload Image'); ?></span>
                                                <input name="image" type="file"
                                                       data-url="<?= $block->escapeUrl($block->getUrl('marketplace/product_gallery/upload', ['_secure' => $this->getRequest()->isSecure()])); ?>"
                                                       title="<?= /* @noEscape */ __('Upload image'); ?>"/>
                                            <!-- /ko -->
                                        </div>
                                        <!-- ko if: variation.editable -->
                                            <!-- ko if: variation.images.file -->
                                                <span data-bind="html: $parent.generateImageGallery(variation)"
                                                      data-block="variation-images"></span>
                                            <!-- /ko -->
                                        <!-- /ko -->
                                        <button type="button" class="action toggle no-display" data-toggle="dropdown"
                                                data-mage-init='{"dropdown":{}}'>
                                            <span><?= /* @noEscape */ __('Select'); ?></span>
                                        </button>
                                        <ul class="dropdown">
                                            <li>
                                                <a class="item" data-action="no-image"><?= /* @noEscape */ __('No Image'); ?></a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="col-name" data-column="name">
                                    <!-- ko ifnot: variation.editable -->
                                        <a target="_blank" data-bind="text: variation.name,
                                            attr: {href: variation.productUrl}">
                                        </a>
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="required-entry" data-bind="
                                            attr: {id: $parent.getRowId(variation, 'name'),
                                            name: $parent.getVariationRowName(variation, 'name'),
                                             value: variation.sku}"/>
                                        <input type="hidden" data-bind="
                                            attr: {id: $parent.getRowId(variation, 'configurable_attribute'),
                                            name: $parent.getVariationRowName(variation, 'configurable_attribute'),
                                            value: variation.attribute}"/>
                                    <!-- /ko -->
                                    <input type="hidden" data-role="status" data-bind="
                                        attr: {name: $parent.getVariationRowName(variation, 'status'),
                                        value: variation.status}"/>
                                </td>
                                <td class="col-sku" data-column="sku">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.sku --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="required-entry validate-length maximum-length-64"
                                               data-bind="attr: {id: $parent.getRowId(variation, 'sku'),
                                                name: $parent.getVariationRowName(variation, 'sku'),
                                                value: variation.sku}"/>
                                    <!-- /ko -->
                                </td>
                                <td class="col-price" data-column="price">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: $parent.getCurrencySymbol() + variation.price --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <div class="addon">
                                            <input type="text"
                                                   id=""
                                                   class="required-entry validate-zero-or-greater"
                                                   data-bind="attr: {id: $parent.getRowId(variation, 'price'),
                                                    name: $parent.getVariationRowName(variation, 'price'),
                                                     value: variation.price}"/>
                                            <label class="addafter"
                                                   data-bind="attr: {for: $parent.getRowId(variation, 'price')">
                                                <strong data-bind="text: $parent.getCurrencySymbol()"></strong>
                                            </label>
                                        </div>
                                    <!-- /ko -->
                                </td>
                                <td class="col-qty" data-column="qty">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.quantity --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text"
                                               class="validate-zero-or-greater"
                                               data-bind="attr: {id: $parent.getRowId(variation, 'qty'),
                                                name: $parent.getVariationRowName(variation, 'quantity_and_stock_status/qty'),
                                                value: variation.quantity}"/>
                                    <!-- /ko -->
                                </td>
                                <td class="col-weight" data-column="weight">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.weight --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="validate-zero-or-greater"
                                               data-bind="
                                                   attr: {id: $parent.getRowId(variation, 'weight'),
                                                   name: $parent.getVariationRowName(variation, 'weight'),
                                                   value: variation.weight}"/>
                                    <!-- /ko -->
                                </td>
                                <!-- ko foreach: variation.options -->
                                <td data-bind="text: label"></td>
                                <!-- /ko -->
                                <td class="data-grid-actions-cell">
                                    <input type="hidden" name="associated_product_ids[]" data-bind="value: variation.productId" data-column="entity_id"/>
                                    <div class="action-select-wrap" data-bind="
                                            css : {
                                                '_active' : $parent.opened() === $index()
                                            },
                                            outerClick: $parent.closeList.bind($parent, $index)"
                                    >
                                        <button class="action-select" data-bind="click: $parent.toggleList.bind($parent, $index())">
                                            <span data-bind="i18n: 'Select'"></span>
                                        </button>
                                        <ul class="action-menu _active" data-bind="css: {'_active': $parent.opened() === $index()}">
                                            <li>
                                                <a class="action-menu-item" data-bind="
                                                    text: variation.status == 1 ? $t('Disable Product') : $t('Enable Product'),
                                                    click: $parent.toggleProduct.bind($parent, $index())">
                                                </a>
                                            </li>
                                            <li>
                                                <a class="action-menu-item" data-bind="click: $parent.removeProduct.bind($parent, $index())">
                                                    <?= /* @noEscape */ __('Remove Product');?>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        <!-- /ko -->
    </div>
    <div data-role="step-wizard-dialog"
         data-mage-init='{"Magento_Ui/js/modal/modal":{"type":"slide","title":"<?= /* @noEscape */ __('Create Product Configurations') ?>",
         "buttons":[]}}'
         class="no-display">
        <?= /* @noEscape */ $block->getVariationStepsWizard([
            'attributes' => $attributes,
            'configurations' => $productMatrix
        ]);
?>
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "configurableVariations": {
                        "component": "Webkul_Marketplace/js/variations/variations",
                        "variations": <?= /* @noEscape */ $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($productMatrix) ?>,
                        "productAttributes": <?= /* @noEscape */ $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($attributes) ?>,
                        "productUrl": "<?= /* @noEscape */ $block->getUrl('marketplace/product/edit', ['id' => 'associated_pro_id', '_secure' => $this->getRequest()->isSecure()]) ?>",
                        "currencySymbol": "<?= /* @noEscape */ $currencySymbol ?>",
                        "configurableProductGrid": "configurableProductGrid"
                    }
                }
            }
        }
    }
</script>
