<div class="accordion accordion-bordered mt-3" id="accordionOtProgress">
    <div class="card accordion-item active">
        <h2 class="accordion-header">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOtProgressTip" aria-expanded="false" aria-controls="accordionOtProgressTip">

                <div class="d-flex flex-row justify-content-start align-items-stretch gap-2">
                    <span><i class="ti-list-details ti-md ti"></i></span>
                    <h4> Progreso </h4>
                </div>
            </button>
        </h2>

        <div id="accordionOtProgressTip" class="accordion-collapse collapse show" data-bs-parent="#accordionOtProgress">
            <div class="accordion-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label" for="ot-progress-bar-parent"><?= @lang("App.progress") ?></label>
                        <div class="progress" style="height: 25px;" id="ot-progress-bar-parent">
                            <div id="ot-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-3">
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <h4><?=lang("Produccion.progress_impresion")?></h4>
                         </div>
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isBN"] ? "" : "d-none" ?>">
                            <label for="ot-impresion-color" class="form-label"><?= @lang("Produccion.impresion_bn") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="interior_bn_at" id="ot-impresion-bn" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["interior_bn_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isColor"] ? "" : "d-none" ?>"">
                            <label for="ot-impresion-color" class="form-label"><?= @lang("Produccion.impresion_color") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="interior_color_at" id="ot-impresion-color" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["interior_color_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isCubierta"] ? "" : "d-none" ?>">
                            <label for="ot-portada" class="form-label"><?= @lang("Produccion.cubierta") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="cubierta_at" id="ot-portada" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["cubierta_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>"?></div>

                        </div>

                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isPlastificado"] ? "" : "d-none" ?>">
                            <label for="ot-plastificado-mate" class="form-label"><?= @lang("Produccion.plastificado_mate") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="plastificado_at" id="ot-plastificado-mate" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["plastificado_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                    </div>
                    <div class="col-md-3">
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <h4><?=lang("Produccion.progress_manipulado")?></h4>
                         </div>
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->cosido ? "" : "d-none" ?>">
                            <label for="ot-prep-cosido" class="form-label"><?= @lang("Produccion.cosido") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="cosido_at" id="ot-prep-cosido" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["cosido_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isGrapado"] ? "" : "d-none" ?>">
                            <label for="ot-prep-grapado" class="form-label"><?= @lang("Produccion.grapado") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="grapado_at" id="ot-prep-grapado" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["grapado_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->solapas ? "" : "d-none" ?>">
                            <label for="ot-prep-solapa" class="form-label"><?= @lang("Produccion.solapa") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="solapa_at" id="ot-prep-solapa" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["solapa_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->retractilado ? "" : "d-none" ?>">
                            <label for="ot-prep-retractilado" class="form-label"><?= @lang("Produccion.retractilado") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="retractilado_at" id="ot-prep-retractilado" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["retractilado_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>

                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->retractilado5 ? "" : "d-none" ?>">
                            <label for="ot-prep-retractilado5" class="form-label"><?= @lang("Produccion.retractilado5") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="retractilado5_at" id="ot-prep-retractilado5" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["retractilado5_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>

                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->prototipo ? "" : "d-none" ?>">
                            <label for="ot-prep-prototipo" class="form-label"><?= @lang("Produccion.prototipo") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="prototipo_at" id="ot-prep-prototipo" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["prototipo_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>

                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->marcapaginas ? "" : "d-none" ?>">
                            <label for="ot-prep-marcapaginas" class="form-label"><?= @lang("Produccion.marcapaginas") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="marcapaginas_at" id="ot-prep-marcapaginas" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["marcapaginas_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isCorte"] ? "" : "d-none" ?>">
                            <label for="ot-prep-guillotina" class="form-label"><?= @lang("Produccion.guillotina") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="corte_at" id="ot-prep-guillotina" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["corte_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $flags["isEspiral"] ? "" : "d-none" ?>">
                            <label for="ot-espiral" class="form-label"><?= @lang("Produccion.espiral") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="espiral_at" id="ot-espiral" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"> <?= $user_dates["espiral_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                    </div>
                    <div class="col-md-3">
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <h4><?=lang("Produccion.progress_logistica")?></h4>
                         </div>
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->ferro ? "" : "d-none" ?>">
                            <label for="ot-pendiente-ferro" class="form-label"><?= @lang("Produccion.pendiente_ferro") ?></label>
                            <input type="text" class="form-control ot-date" name="pendiente_ferro_at" placeholder="DD/MM/YYYY" id="ot-pendiente-ferro" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pendiente_ferro_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->ferro ? "" : "d-none" ?>">
                            <label for="ot-ferro-cliente" class="form-label"><?= @lang("Produccion.ferro_cliente") ?></label>
                            <input type="text" class="form-control ot-date" name="ferro_en_cliente_at" placeholder="DD/MM/YYYY" id="ot-ferro-cliente" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["ferro_en_cliente_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $presupuesto->ferro ? "" : "d-none" ?>">
                            <label for="ot-ferro-ok" class="form-label"><?= @lang("Produccion.ferro_ok") ?></label>
                            <input type="text" class="form-control ot-date" name="ferro_ok_at" placeholder="DD/MM/YYYY" id="ot-ferro-ok" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["ferro_ok_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <label for="ot-embalaje" class="form-label"><?= @lang("Produccion.embalaje") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="embalaje_at" id="ot-embalaje" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["embalaje_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Progress -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <label for="ot-envio" class="form-label"><?= @lang("Produccion.envio") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="envio_at" id="ot-envio" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["envio_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <!-- PREIMPRESION -->
                        <!-- Preformato  -->
                         <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100">
                            <h4><?=lang("Produccion.progress_preimpresion")?></h4>
                         </div>
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $ot->revisar_formato ? "" : "d-none" ?>">
                            <label for="ot-preformato-btn" class="form-label"><?= @lang("Produccion.pre_formato") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="pre_formato_at" id="ot-preformato-date" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pre_formato_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>
                        </div>
                        <!-- Prelomo -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $ot->revisar_lomo ? "" : "d-none" ?>">
                            <label for="ot-prelomo-btn" class="form-label"><?= @lang("Produccion.pre_lomo") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="pre_lomo_at" id="ot-prelomo-date" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pre_lomo_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Presolapa -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $ot->revisar_solapa ? "" : "d-none" ?>">
                            <label for="ot-presolapa-btn" class="form-label"><?= @lang("Produccion.pre_solapa") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="pre_solapa_at" id="ot-presolapa-date" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pre_solapa_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Precodbarras -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $ot->revisar_codigo_barras ? "" : "d-none" ?>">
                            <label for="ot-precodbarras-btn" class="form-label"><?= @lang("Produccion.pre_codbarras") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="pre_codbarras_at" id="ot-precodbarras-date" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pre_codbarras_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                        <!-- Preimposicion -->
                        <div class="col-xs-12 col-md-4 col-lg-4 mb-2 w-100 <?= $ot->realizar_imposicion ? "" : "d-none" ?>">
                            <label for="ot-preimposicion-btn" class="form-label"><?= @lang("Produccion.pre_imposicion") ?></label>
                            <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="pre_imposicion_at" id="ot-preimposicion-date" data-input <?= $is_finalizada ? "disabled" : "" ?>>
                            <div class="form-text"><?= $user_dates["pre_imposicion_at"] ?? "<span class='ti-sm ti ti-alert-triangle me-1'></span>" ?></div>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="row">
                        <p><?= @lang("Produccion.tiempo_estimado") ?> : <?= $tiempo_estimado ?> (HH:MM)</p>
                    </div>
                    <div class="row">
                        <p><?= @lang("Produccion.tiempo_consumido") ?> :</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <label class="switch switch-danger switch-lg mt-1">
                                <input type="checkbox" class="switch-input ot-preview" id="ot-pedido-espera" name="is_pedido_espera" data-input <?= $is_finalizada ? "disabled" : "" ?> />
                                <span class="switch-toggle-slider">
                                    <span class="switch-on">
                                        <i class="ti ti-alert-triangle"></i>
                                    </span>
                                    <span class="switch-off">
                                        <i class="ti ti-x"></i>
                                    </span>
                                </span>
                                <span class="switch-label fw-lg"><?= @lang("Produccion.pedido_espera") ?></span>
                                <span class="badge text-bg-warning fw-lg" id="pedido_espera_by"></span>
                            </label>
                            <?php if ($is_finalizada): ?>
                                <button type="button" id="btn-reactivar-orden-pedido" class="btn btn-primary btn-block"><?= @lang("Produccion.reactivar_orden") ?></button>
                            <?php else: ?>
                                <button type="button" id="btn-finalizar-orden-pedido" class="btn btn-warning btn-block"><?= @lang("Produccion.finalizar_orden") ?></button>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>