<?php
$integration_active_tab = strtolower(trim((string)($integration_active_tab ?? 'telegram')));
$integration_allowed_tabs = ['telegram', 'vk', 'avito', 'youla', 'wildberries', 'ozon', 'yandex_market', 'max', 'whatsapp', 'email', 'moysklad', 'delivery', 'params'];
if (!in_array($integration_active_tab, $integration_allowed_tabs, true)) {
    $integration_active_tab = 'telegram';
}
$integration_tab_active = static function ($tab) use ($integration_active_tab) {
    return $integration_active_tab === $tab;
};
$integration_tab_class = static function ($tab) use ($integration_tab_active) {
    return 'btn btn-light px-3 py-2 text-dark easychat-integration-tab' . ($integration_tab_active($tab) ? ' active' : '');
};
$integration_tab_icons = [
    'telegram' => 'telegram.svg',
    'vk' => 'vk.svg',
    'avito' => 'avito.svg',
    'youla' => 'youla.svg',
    'wildberries' => 'wildberries.svg',
    'ozon' => 'ozon.svg',
    'yandex_market' => 'yandex-market.svg',
    'max' => 'max.svg',
    'whatsapp' => 'whatsapp.svg',
    'email' => 'email.svg',
    'moysklad' => 'moysklad.svg',
    'delivery' => 'delivery.svg',
];
$integration_tab_icon = static function ($tab) use ($integration_tab_icons) {
    if (!isset($integration_tab_icons[$tab])) {
        return '';
    }

     
     
    return '<img class="easychat-integration-tab__icon" src="assets/channels/'
        . $integration_tab_icons[$tab]
        . '" width="20" height="20" alt="" aria-hidden="true" draggable="false">';
};
?>
<ul class="nav nav-pills mb-4 gap-2" id="integrationTabs" role="tablist" aria-label="Каналы интеграций">
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('telegram'); ?>" id="telegram-tab" data-bs-toggle="tab" data-bs-target="#telegram-panel" data-integration-tab="telegram" type="button" role="tab" aria-controls="telegram-panel" aria-selected="<?php echo $integration_tab_active('telegram') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('telegram'); ?><span>Telegram</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('vk'); ?>" id="vk-tab" data-bs-toggle="tab" data-bs-target="#vk-panel" data-integration-tab="vk" type="button" role="tab" aria-controls="vk-panel" aria-selected="<?php echo $integration_tab_active('vk') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('vk'); ?><span>ВКонтакте (VK)</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('avito'); ?>" id="avito-tab" data-bs-toggle="tab" data-bs-target="#avito-panel" data-integration-tab="avito" type="button" role="tab" aria-controls="avito-panel" aria-selected="<?php echo $integration_tab_active('avito') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('avito'); ?><span>Авито</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('youla'); ?>" id="youla-tab" data-bs-toggle="tab" data-bs-target="#youla-panel" data-integration-tab="youla" type="button" role="tab" aria-controls="youla-panel" aria-selected="<?php echo $integration_tab_active('youla') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('youla'); ?><span>Юла</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('wildberries'); ?> easychat-integration-marketplace-tab" id="wildberries-tab" data-bs-toggle="tab" data-bs-target="#wildberries-panel" data-integration-tab="wildberries" data-integration-marketplace="wildberries" type="button" role="tab" aria-controls="wildberries-panel" aria-selected="<?php echo $integration_tab_active('wildberries') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('wildberries'); ?><span>Wildberries</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('ozon'); ?> easychat-integration-marketplace-tab" id="ozon-tab" data-bs-toggle="tab" data-bs-target="#ozon-panel" data-integration-tab="ozon" data-integration-marketplace="ozon" type="button" role="tab" aria-controls="ozon-panel" aria-selected="<?php echo $integration_tab_active('ozon') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('ozon'); ?><span>Ozon</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('yandex_market'); ?> easychat-integration-marketplace-tab" id="yandex-market-tab" data-bs-toggle="tab" data-bs-target="#yandex-market-panel" data-integration-tab="yandex_market" data-integration-marketplace="yandex_market" type="button" role="tab" aria-controls="yandex-market-panel" aria-selected="<?php echo $integration_tab_active('yandex_market') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('yandex_market'); ?><span>Яндекс Маркет</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('max'); ?>" id="max-tab" data-bs-toggle="tab" data-bs-target="#max-panel" data-integration-tab="max" type="button" role="tab" aria-controls="max-panel" aria-selected="<?php echo $integration_tab_active('max') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('max'); ?><span>MAX</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('whatsapp'); ?>" id="whatsapp-tab" data-bs-toggle="tab" data-bs-target="#whatsapp-panel" data-integration-tab="whatsapp" type="button" role="tab" aria-controls="whatsapp-panel" aria-selected="<?php echo $integration_tab_active('whatsapp') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('whatsapp'); ?><span>WhatsApp</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('email'); ?>" id="email-tab" data-bs-toggle="tab" data-bs-target="#email-panel" data-integration-tab="email" type="button" role="tab" aria-controls="email-panel" aria-selected="<?php echo $integration_tab_active('email') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('email'); ?><span>Почта</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('moysklad'); ?>" id="moysklad-tab" data-bs-toggle="tab" data-bs-target="#moysklad-panel" data-integration-tab="moysklad" type="button" role="tab" aria-controls="moysklad-panel" aria-selected="<?php echo $integration_tab_active('moysklad') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('moysklad'); ?><span>МойСклад</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('delivery'); ?>" id="delivery-tab" data-bs-toggle="tab" data-bs-target="#delivery-panel" data-integration-tab="delivery" type="button" role="tab" aria-controls="delivery-panel" aria-selected="<?php echo $integration_tab_active('delivery') ? 'true' : 'false'; ?>">
            <?php echo $integration_tab_icon('delivery'); ?><span>Доставка</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="<?php echo $integration_tab_class('params'); ?>" id="params-tab" data-bs-toggle="tab" data-bs-target="#params-panel" data-integration-tab="params" type="button" role="tab" aria-controls="params-panel" aria-selected="<?php echo $integration_tab_active('params') ? 'true' : 'false'; ?>">
            <i class="fa fa-sliders me-2 text-danger" aria-hidden="true"></i> Параметры и диагностика
        </button>
    </li>
</ul>
