<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">

                <h4> <i class="tf-icon ti-hourglass ti-xs ti">Progreso</i> </h4>
            </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" 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">
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <label for="ot-plakene-traslucido" class="form-label"><?= @lang("Produccion.plakene_traslucido") ?></label>
                        <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY" name="plakene_taslucido_at" id="ot-plakene-traslucido">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <label for="ot-portada" class="form-label"><?= @lang("Produccion.portada") ?></label>
                        <input type="text" class="form-control ot-date" placeholder="DD/MM/YYYY"  name="cubierta_at" id="ot-portada">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                    <!-- Progress -->
                    <div class="col-xs-12 col-md-4 col-lg-4 mb-2">
                        <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">
                    </div>
                </div>
                <div class="row">
                    <div class="row">
                        <p><?= @lang("Produccion.tiempo_estimado") ?> :</p>
                    </div>
                    <div class="row">
                        <p><?= @lang("Produccion.tiempo_consumido") ?> :</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-grip">
                            <button type="button" id="btn-finalizar-orden-pedido" class="btn btn-primary btn-block w-100" <?=$ot->estado == "F" ? "disabled" : "" ?>><?=@lang("Produccion.finalizar_orden")?></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>