<?php
/**
 * @var \Autogedal\Extend\Block\Widget\ProductCompatibility $block
 * @var \Autogedal\Extend\ViewModel\ProductCompatibility $viewModel
 */
$viewModel = $block->getViewModel();
$filterOptions = $block->getFilterOptions();
$title = $block->getTitle();
$ajaxUrl = $block->getAjaxUrl();
$filterOptionsUrl = $block->getFilterOptionsUrl();
?>

<div class="product-compatibility-widget" data-ajax-url="<?= $block->escapeUrl($ajaxUrl) ?>">
    <?php if ($title): ?>
        <h2 class="widget-title"><?= $block->escapeHtml($title) ?></h2>
    <?php endif; ?>

    <div class="compatibility-filter-container">
        <button type="button" id="mobile-filter-toggle" class="mobile-filter-toggle">
            <span class="toggle-text"><?= $block->escapeHtml(__('Filtre')) ?></span>
            <span class="toggle-icon">▼</span>
        </button>
        <div class="filter-controls" id="filter-controls">
            <div class="filter-group">
                <label for="marca-select"><?= $block->escapeHtml(__('Marca')) ?></label>
                <select id="marca-select" class="filter-select" required>
                    <option value=""><?= $block->escapeHtml(__('Selecteaza Marca')) ?></option>
                </select>
            </div>

            <div class="filter-group">
                <label for="model-select"><?= $block->escapeHtml(__('Model')) ?></label>
                <select id="model-select" class="filter-select" required disabled>
                    <option value=""><?= $block->escapeHtml(__('Selecteaza Model')) ?></option>
                </select>
            </div>

            <div class="filter-group">
                <label for="caroserie-select"><?= $block->escapeHtml(__('Caroserie')) ?></label>
                <select id="caroserie-select" class="filter-select" required disabled>
                    <option value=""><?= $block->escapeHtml(__('Selecteaza Caroserie')) ?></option>
                </select>
            </div>

            <div class="filter-group">
                <label for="tp-plafon-select"><?= $block->escapeHtml(__('Tp Plafon')) ?></label>
                <select id="tp-plafon-select" class="filter-select" required disabled>
                    <option value=""><?= $block->escapeHtml(__('Selecteaza Tp Plafon')) ?></option>
                </select>
            </div>

            <div class="filter-group">
                <label for="year-select"><?= $block->escapeHtml(__('An Fabricatie')) ?></label>
                <select id="year-select" class="filter-select" required disabled>
                    <option value=""><?= $block->escapeHtml(__('Selecteaza An')) ?></option>
                </select>
            </div>

            <div class="filter-group">
                <button type="button" id="apply-filters" class="action primary apply-btn" disabled>
                    <?= $block->escapeHtml(__('Aplica Filtre')) ?>
                </button>
            </div>
        </div>

        <div class="loading-indicator" id="loading-indicator" style="display: none;">
            <span><?= $block->escapeHtml(__('Incarcare produse...')) ?></span>
        </div>

        <div class="products-results" id="products-results" style="display: none;">
            <div class="results-count">
                <span id="results-count"></span>
            </div>

            <div class="products-grid" id="products-grid">
            </div>
        </div>

        <div class="no-results" id="no-results" style="display: none;">
            <p><?= $block->escapeHtml(__('Nu s-au gasit produse pentru selectia curenta.')) ?></p>
        </div>

        <div class="selection-prompt" id="selection-prompt">
            <p><?= $block->escapeHtml(__('Alege marca, modelul, caroseria, tipul de plafon și anul pentru a vedea barele compatibile.')) ?></p>
        </div>
    </div>
</div>

<script type="text/x-magento-init">
{
    ".product-compatibility-widget": {
        "Autogedal_Extend/js/product-compatibility": {
            "ajaxUrl": "<?= $block->escapeJs($block->escapeUrl($ajaxUrl)) ?>",
            "filterOptionsUrl": "<?= $block->escapeJs($block->escapeUrl($filterOptionsUrl)) ?>",
            "filterOptions": <?= /* @noEscape */ $viewModel->toJson($filterOptions) ?>
        }
    }
}
</script>
