<?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
<?= $this->include('themes/_commonPartialsBs/datatables') ?>
<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->extend('themes/vuexy/main/defaultlayout') ?>


<?= $this->section('content'); ?>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4><?= $boxTitle ?>
                </h4>
            </div>
            <div class="card-body">

                <?= view("themes/_commonPartialsBs/_alertBoxes") ?>

                <input type="hidden" id="id" name="id" value="<?= $etiquetaEntity->id ?>">

                <div class="accordion accordion-bordered">
                    <div class="card accordion-item active mb-5">
                        <h4 class="accordion-header px-4 py-3">
                            <?= lang("Logistica.datosEnvio") ?>
                        </h4>

                        <div id="accordionDatosEnvioTip" class="accordion-collapse collapse show">
                            <div class="accordion-body px-4 py-3">
                                <div class="d-flex flex-row mb-3">

                                    <div class="col-sm-3 px-3">
                                        <label for="att" class="form-label">
                                            <?= lang("Logistica.cliente") ?>
                                        </label>
                                        <input readonly id="cliente" name="cliente" tabindex="1" maxlength="50"
                                            class="form-control" value="<?= old('att', $etiquetaEntity->cliente) ?>">
                                    </div>

                                    <div class="col-sm-4 px-3">
                                        <label for="att" class="form-label">
                                            <?= lang("Logistica.att") ?>
                                        </label>
                                        <input readonly id="att" name="att" tabindex="1" maxlength="50"
                                            class="form-control" value="<?= old('att', $etiquetaEntity->att) ?>">
                                    </div>

                                    <div class="col-sm-5 px-3">
                                        <label for="direccion" class="form-label">
                                            <?= lang("Logistica.direccion") ?>
                                        </label>
                                        <input readonly id="direccion" name="direccion" tabindex="1" maxlength="50"
                                            class="form-control"
                                            value="<?= old('direccion', $etiquetaEntity->direccion) ?>">
                                    </div>

                                </div>


                                <div class="d-flex flex-row mb-3">
                                    <div class="col-sm-9 px-3">
                                        <label for="comentarios" class="form-label">
                                            <?= lang("Logistica.comentariosEtiqueta") ?>
                                        </label>
                                        <input id="comentarios" name="comentarios" tabindex="1" maxlength="50"
                                            class="form-control"
                                            value="<?= old('comentarios', $etiquetaEntity->comentarios) ?>">
                                    </div>

                                    <div class="col-sm-3 px-3">
                                        <button id="guardarComentarios" name="guardar_comentarios" tabindex="1"
                                            class="btn btn-primary mt-4 w-100">
                                            <?= lang("Logistica.guardar") ?>
                                    </div>
                                </div>

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


                <div class="accordion accordion-bordered">
                    <div class="card accordion-item active mb-5">
                        <h4 class="accordion-header px-4 py-3">
                            <?= lang("Logistica.addLineaEtiqueta") ?>
                        </h4>

                        <div id="accordionaddLineasEnvioTip" class="accordion-collapse collapse show">

                            <div class="d-flex flex-row mb-3">
                                <div class="col-sm-12 px-3">
                                    <p><?= lang('Logistica.addLineasText') ?></p>
                                </div>
                            </div>

                            <div class="d-flex flex-row mb-3">
                                <div class="col-sm-6 px-3">
                                    <label for="buscadorPedidos" class="form-label">
                                        <?= lang("Logistica.buscadorPedidosTitle2") ?>
                                    </label>
                                    <select id="buscadorPedidos" name="buscador_pedidos" tabindex="1" maxlength="50"
                                        class="form-control select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-sm-2 px-3">
                                    <button id="btnAddLinea" name="btnBuscar" tabindex="1"
                                        class="btn btn-primary mt-4 w-100">
                                        <?= lang("Logistica.add") ?>
                                        <ti class="ti ti-circle-plus"></ti>
                                    </button>
                                </div>
                            </div>

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


                <div class="accordion accordion-bordered">
                    <div class="card accordion-item active mb-5">
                        <h4 class="accordion-header px-4 py-3">
                            <?= lang("Logistica.lineasEnvio") ?>
                        </h4>

                        <div id="accordionDatosEnvioTip" class="accordion-collapse collapse show">
                            <div class="accordion-body px-4 py-3">
                                <div class="d-flex flex-row">
                                    <p><?= lang('Logistica.buttonsActions') ?></p>
                                </div>
                                <div class="d-flex flex-row mb-3 align-items-end">
                                    <div class="col-sm-2 px-3">
                                        <button id="btnSelectAll" name="btnSelectAll" tabindex="1"
                                            class="btn btn-primary w-100">
                                            <?= lang("Logistica.selectAll") ?>
                                            <i class="ti ti-select"></i>
                                        </button>
                                    </div>
                                    <div class="col-sm-2 px-3">
                                        <button id="btnEliminarLineas" name="btnEliminarLineas" tabindex="1"
                                            class="btn btn-danger w-100">
                                            <?= lang("Logistica.eliminar") ?>
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </div>

                                    <div class="col-sm-2 px-3">
                                        <button id="btnRenumber" name="btnRenumber" tabindex="1"
                                            class="btn btn-success w-100">
                                            <?= lang("Logistica.renumber") ?>
                                            <i class="ti ti-box"></i>
                                        </button>
                                    </div>
                                    <div class="col-sm-2 px-3">
                                        <button id="btnImprimirEtiquetas" name="btnImprimirEtiquetas" tabindex="1"
                                            class="btn btn-info w-100">
                                            <?= lang("Logistica.imprimirEtiquetas") ?>
                                            <i class="ti ti-printer"></i>
                                        </button>
                                    </div>

                                    <div class="col-sm-2 px-3 d-flex flex-column justify-content-end">
                                        <div class="d-flex flex-column justify-content-end h-100">
                                            <label for="impresoraEtiquetas" class="form-label">
                                                <?= lang("Logistica.impresoraEtiquetas") ?>
                                            </label>
                                            <select id="impresoraEtiquetas" name="impresora_etiquetas" tabindex="1"
                                                maxlength="50" class="form-control select2bs2" style="width: 100%;">
                                                <?php foreach ($etiquetaEntity->impresoras as $impresora): ?>
                                                    <option value="<?= $impresora->id ?>">
                                                        <?= $impresora->name ?>
                                                    </option>
                                                <?php endforeach; ?>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="row mb-3">

                                    <table id="tableLineasEtiqueta" class="table table-striped table-hover w-100">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th style="max-width: 10%;"><?= lang("Logistica.otId") ?></th>
                                                <th style="max-width: 70%;"><?= lang("Logistica.titulo") ?></th>
                                                <th style="max-width: 10%;"><?= lang("Logistica.num_caja") ?></th>
                                                <th class="text-center" style="width: 10%;">
                                                    <?= lang("Logistica.unidadesEnCaja") ?>
                                                </th>
                                                <th class="text-center" style="width: 10%;">
                                                    <?= lang("Logistica.unidadesTotalesOt") ?>
                                                </th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="11">
                                                    <div class="text-end">
                                                        <?= lang("Logistica.unidadesTotalesFooter") ?>
                                                        <span id="footer-unidades"></span>
                                                    </div>
                                                </th>
                                            </tr>
                                            <tr>
                                                <th colspan="11">
                                                    <div class="text-end">
                                                        <?= lang("Logistica.peso") ?>
                                                        <span id="footer-peso"></span>
                                                    </div>
                                                </th>
                                            </tr>
                                        </tfoot>

                                    </table>

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

                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('css') ?>
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.css') ?>" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="<?= site_url("/themes/vuexy/vendor/libs/flatpickr/flatpickr.css") ?>">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.dataTables.min.css">
<?= $this->endSection() ?>

<?= $this->section('additionalExternalJs') ?>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.js') ?>"></script>
<script src="https://cdn.datatables.net/rowgroup/1.3.1/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.4.1/js/dataTables.rowReorder.min.js"></script>
<script type="module" src="<?= site_url("assets/js/safekat/pages/logistica/etiquetaEdit.js") ?>"></script>
<?= $this->endSection() ?>