<div class="accordion accordion-bordered mt-3" id="accordionComentarios">
    <div class="card accordion-item active">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button" data-bs-toggle="collapse"
                data-bs-target="#accordionComentariosTip" aria-expanded="false"
                aria-controls="accordionComentariosTip">
                <div class="d-flex flex-row justify-content-start align-items-stretch gap-2">
                    <span><i class="ti-quote ti-md ti"></i></span>
                    <h4> <?= lang('Produccion.comentarios') ?> </h4>
                </div>
            </button>
        </h2>

        <div id="accordionComentariosTip" class="accordion-collapse collapse show"
            data-bs-parent="#accordionComentarios">
            <div class="accordion-body">
                <div class="nav-align-top mb-4">
                    <ul class="nav nav-pills mb-3" role="tablist">
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link active"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#comentarios-ot"
                                aria-controls="comentarios-ot"
                                aria-selected="true">
                                <?= lang("Produccion.comentariosOt") ?>

                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#comentarios-interior"
                                aria-controls="comentarios-interior"
                                aria-selected="true">
                                <?= lang("Produccion.comentariosImpresionInterior") ?>

                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#comentarios-cubierta"
                                aria-controls="comentarios-cubierta"
                                aria-selected="false">
                                <?= lang("Produccion.comentariosCubierta") ?>

                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#comentarios-encuadernacion"
                                aria-controls="comentarios-encuadernacion"
                                aria-selected="false">
                                <?= lang("Produccion.comentariosEncuadernacion") ?>

                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#comentarios-logistica"
                                aria-controls="comentarios-logistica"
                                aria-selected="false">
                                <?= lang("Produccion.comentariosLogistica") ?>

                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#info-solapa-guillotina"
                                aria-controls="info-solapa-guillotina"
                                aria-selected="false">
                                <?= lang("Produccion.info_solapa_guillotina") ?>

                            </button>
                        </li>
                    </ul>
                    <div class="tab-content border border-container">
                        <div class="tab-pane fade show active" id="comentarios-ot" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="comentarios"
                                            class="ot-comment w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->comentarios ?></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="comentarios-interior" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="comment_interior"
                                            class="ot-comment w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->comment_interior ?></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="comentarios-cubierta" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="comment_cubierta"
                                            class="ot-comment  w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->comment_cubierta ?></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane fade" id="comentarios-encuadernacion" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="comment_encuadernacion"
                                            class="ot-comment  w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->comment_encuadernacion ?></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane fade" id="comentarios-logistica" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="comment_logistica"
                                            class="ot-comment w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->comment_logistica ?></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="info-solapa-guillotina" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 px-4">
                                    <div class="mb-3">
                                        <textarea
                                            rows="3"
                                            name="info_solapa_guillotina"
                                            class="ot-comment w-100"
                                            style="height: 10em;"
                                            class="form-control"><?= $ot->info_solapa_guillotina ?></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div> <!-- //.accordion-body -->
        </div> <!-- //.accordion-collapse -->
    </div> <!-- //.accordion-item -->
</div> <!-- //.accordion -->