{# product.twig #}

{% extends "skeleton/base.twig" %}

{# style #}
{% block style %}
{{ parent() }}
/*accordion*/
.btn-toggle-accordion {
    background: transparent;
    border: none;
}
.accordion-body ul {
    list-style: none; /* 移除列表項前的圓點 */
    padding: 0; /* 移除預設的內邊距 */
}

.accordion-body ul li {
    border-bottom: 1px solid #ccc; /* 每個列表項下添加橫線 */
    padding: 8px 0; /* 添加一些內邊距 */
}

.accordion-body ul li:last-child {
    border-bottom: none; /* 移除最後一個列表項下的橫線 */
}

.accordion-collapse {
    /*accordion-collapse animation*/
    transition: height 0.3s ease-in-out;
}
/*accordion*/
.card img {
    max-width: 300px;
}

@media print {

    /* 兩欄排版 + 清除所有框線/陰影 */
    .tab-pane#specifications { column-count: 2; column-gap: 2rem; }
    .tab-pane#specifications,
    .tab-pane#specifications * { border: 0 !important; box-shadow: none !important; }

    /* 移除 .accordion 的左框線（原本的問題源頭） */
    .tab-pane#specifications .accordion { border: none !important; margin: 0; }

    /* 改由 .accordion-item 畫左框線 */
    .tab-pane#specifications .accordion-item {
        border-left: 1px solid rgba(79,79,79,.4) !important;  /* 單線、不會跨頁倍粗 */
        margin: 0 !important;          /* 與前後 item 無縫接軌，線不斷 */
        padding-left: 0.75rem;         /* 文字別貼線 */
        border-radius: 0 !important;
        /* break-inside: avoid;*/           /* 避免單個 item 再被拆兩頁 */
        /* page-break-inside: avoid; */
    }

    .tab-pane#specifications li{
        font-size: 0.6rem;            /* 依需要再調整 */
    }
    .accordion-button{
        font-size: 0.7rem;            /* 依需要再調整 */
        padding: 0 !important; /* 在打印時設置內邊距 */
        print-color-adjust: exact; /* 確保打印時顏色準確 */
    }
    /* 隱藏收合前、收合後兩種狀態的箭頭 */
    .accordion-button::after,
    .accordion-button:not(.collapsed)::after {
        display: none !important;        /* 不佔位 */
        background-image: none !important;
        content: none !important;        /* 保險起見 */
    }

     .tab-pane#specifications h3 {
        font-size: 0.8rem !important; /* 在打印時設置字體大小 */
        margin: 0.5rem 0rem 0.25rem 0rem !important; /* 在打印時設置上下邊距 */
    }
    
    .accordion-body{
        padding: 0 !important; /* 在打印時設置內邊距為0 */
    }
    .mb-3, .my-3 {
        margin: 0 !important; /* 在打印時設置底部邊距為0 */
    }
    .card {
        margin-bottom: 1.5rem !important; /* 在打印時設置底部邊距 */
    }
    .img-fluid {
        max-height: 8rem !important;
    }
    .print-w-40 {
        width: 40% !important; /* 在打印時設置寬度為30% */
    }
    .print-w-60 {
        width: 60% !important; /* 在打印時設置寬度為70% */
    }
    .card-body {
        padding: 0 0 1rem 0 !important; /* 在打印時設置內邊距 */
    }
    .card-body h3 {
        font-size: 1rem !important; /* 在打印時設置字體大小 */
        margin: 0 0 0.2rem 1rem !important; /* 在打印時設置上下邊距 */
    }
    .card-body li {
        font-size: 0.6rem !important; /* 在打印時設置字體大小 */
    }
    .btn-toggle-accordion {
        display: none; /* 在打印時隱藏按鈕 */
    }
    .accordion-body ul {
        padding: 0; /* 移除內邊距 */
        margin: 0; /* 移除外邊距 */
    }
    .accordion-body ul li {
        padding: 0; /* 移除內邊距 */
        margin: 0; /* 移除外邊距 */
    }
    .page-title {
        color: #4F4F4F !important; /* 在打印時設置字體顏色 */
        margin: 2.5rem 0 2rem 6rem !important; /* 在打印時設置邊距 */
        padding: 0 !important; /* 在打印時設置內邊距 */
    }
    .page-title h3 {
        font-size: 2.5rem !important; /* 在打印時設置字體大小 */
    }

    .bg-secondary {
        background-color: transparent !important; /* 在打印時設置背景色為透明 */
    }
}
{% endblock %}

{% block navigation %}
  {% include 'partial/nav.twig' %}
{% endblock %}


{% block breadcrumb %}
  {% include 'partial/breadcrumb.twig' %}
{% endblock %}

{% block page_title %}
<div class="container-fluid p-2 bg-secondary text-white page-title">
    <h3>{{ page_title }}</h3>
    <p>{{ description }}</p>
</div>
{% endblock %}

{% block content %}
  {% include 'partial/productBox.twig' %}
{% endblock %}

{% block script %}
{{ parent() }}
<script>
document.querySelectorAll('.btn-toggle-accordion').forEach(function(button) {
    button.addEventListener('click', function() {
        const accordionId = this.getAttribute('data-accordion-id');
        const accordion = document.getElementById(accordionId);
        const isCollapsed = this.querySelector('.collapseIcon') == null;

        accordion.querySelectorAll('.accordion-collapse').forEach(collapse => {
            if (isCollapsed) {
                new bootstrap.Collapse(collapse, { toggle: false }).show();
            } else {
                new bootstrap.Collapse(collapse, { toggle: false }).hide();
            }
        });

        if (isCollapsed) {
            this.innerHTML = '<img src="icon/arrows-collapse.svg" alt="collapse" class="collapseIcon"/>Collapse all</button>';
        } else {
            this.innerHTML = '<img src="icon/arrows-expand.svg" alt="expand" class="expandIcon"/>Expand all</button>';
        }
    });
});
</script>


{% endblock %}