<style>
    #txtSequencia,
    #txtCodigoMontado,
    #txtDescricaoMontada {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
    }

    .sequence-card {
        padding: 6px 10px;
        background-color: var(--blue-color);
        color: white;
        border: 3px solid #17a2b8;
        border-radius: 6px;
        font-size: 13px;
        white-space: nowrap;
        cursor: move;
        user-select: none;
    }

    .sequence-card:hover {
        border: 3px solid red;
    }

    .btn-remove {
        color: white;
        background-color: transparent;
        margin-left: 5px;
        border: none;
    }

    .header-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
    }

    .list-title {
        margin: 0;
        white-space: nowrap;
    }

    .input-with-icon {
        position: relative;
        flex: 1;
        max-width: 200px;
    }

    .input-with-icon input {
        height: 38px;
        padding-left: 32px;
    }

    .filter-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .input-with-icon input:not(:placeholder-shown)+.filter-icon {
        opacity: 0;
    }

    .font-size-4 {
        font-size: 12pt;
    }

    .btn-secondary {
        text-decoration: none !important;
    }
</style>

<div class="modal fade" id="modal-forma-codigo" tabindex="-1" role="dialog" aria-labelledby="modal-forma-codigo" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="max-width: 100%; height: 100%; margin: 5px 5px 5px 5px; padding: 0;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalCondicao-titulo" class="modal-title">Formação de Código</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <div class="container-fluid">
                    <nav>
                        <div class="nav nav-tabs justify-content-left" id="nav-tab" role="tablist" style="text-decoration: none">
                            <a class="nav-link abaLink d-none" id="tabConfig" data-toggle="tab" href="#divConfig" role="tab" aria-controls="divConfig" aria-selected="true">Configuração</a>
                            <a class="nav-link abaLink active" id="tabFormaCodigo" data-toggle="tab" href="#divFormaCodigo" role="tab" aria-controls="divFormaCodigo" aria-selected="true">Formação de Código</a>
                        </div>
                    </nav>
                    <div class="tab-pane fade d-none" id="divConfig" role="tabpanel">
                        <div class="card" style="margin-right: 7px;" id="cardConfig">

                            <div class="row col-12">
                                <div class="col-12 form text-center" id="tipos">
                                    <p><i class="fas fa-info-circle"></i> Essa tela aparece somente para Usuário Sisplan</p>
                                </div>

                                <div class="col-8 form mt-4" id="tipos">
                                    <fieldset class="form border-Field mb-0 pb-0">
                                        <legend class="textoBorda mb-0 pb-0">Campos Disponíveis</legend>
                                        <div class="form-row">
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbModelo">
                                                <label class="form-check-label pr-2" for="cbModelo">Modelo</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbColecao">
                                                <label class="form-check-label pr-2" for="cbColecao">Coleção</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbMarca">
                                                <label class="form-check-label pr-2" for="cbMarca">Marca</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbGrupo">
                                                <label class="form-check-label pr-2" for="cbGrupo">Grupo</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbLinha">
                                                <label class="form-check-label pr-2" for="cbLinha">Linha</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbEtiqueta">
                                                <label class="form-check-label pr-2" for="cbEtiqueta">Etiqueta</label>
                                            </div>
                                            <div class="icheck-primary form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="cbTipoProd">
                                                <label class="form-check-label pr-2" for="cbTipoProd">Tipo Produto</label>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>

                                <div class="form-group col-1" style="margin-top: 20px;">
                                    <label>Separador</label>
                                    <input type="text" maxlength="1" class="input-default focus form-control" id="txtSeparador" placeholder="Separador">
                                </div>

                                <div class="form-group col-1" style="margin-top: 20px;">
                                    <label>Tam. Sequêncial *</label>
                                    <input type="number" maxlength="1" class="input-default focus form-control" id="txtSequencial" placeholder="Tam. Sequêncial">
                                </div>

                                <div class="form-group col-6 mt-0" style="margin-top: 20px;">
                                    <label>Código Montado *</label>
                                    <div id="txtCodigoMontado"
                                        placeholder="Código Montado"
                                        class="input-default focus form-control"
                                        style="height:auto; min-height:38px; cursor:move; 
                              display:flex; 
                              align-items:center;">
                                        <p id="placeholder-txtCodigoMontado" style="margin:0; color:gray">Selecione uma opção no menu "Campos Disponíveis"</p>
                                    </div>
                                </div>

                                <div class="form-group col-6 mt-0" style="margin-top: 20px;">
                                    <label>Descrição Montada *</label>
                                    <div id="txtDescricaoMontada"
                                        placeholder="Descrição Montada"
                                        class="input-default focus form-control"
                                        style="height:auto; min-height:38px; cursor:move; 
                              display:flex; 
                              align-items:center;">
                                        <p id="placeholder-txtDescricaoMontada" style="margin:0; color:gray">Selecione uma opção no menu "Campos Disponíveis"</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade show active" id="divFormaCodigo" role="tabpanel">
                        <div class="card" style="margin-right: 7px;" id="cardFormaCodigo">
                            <div class="row" id="listaTabelas"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row col-12">
                    <div class="row col-md-8 col-8">
                        <div class="form-group col-6" id="codigoPreview">
                            <label>Código:</label>
                            <input type="text" class="input-default focus form-control" id="txtCodigoFormado" readonly placeholder="Código">
                        </div>
                        <div class="form-group col-6" id="descricaoPreview">
                            <label>Descrição:</label>
                            <input type="text" class="input-default focus form-control" id="txtDescricaoFormada" readonly placeholder="Descrição">
                        </div>
                    </div>
                    <div class="col-md-4 col-4 d-flex justify-content-end align-items-end pr-2">
                        <div class="d-flex">
                            <button id="btnConfirmaCodigo" class="btn btnVerde d-none mr-1">
                                <span class="fas fa-check pr-1"></span> Confirmar
                            </button>
                            <button id="btnGerar" class="btn btn-sisp btn-primary mr-1">
                                <span class="fas fa-cogs pr-1"></span> Gerar Código
                            </button>
                            <button id="btnConfirmarConfig" class="btn btn-sisp btnVerde d-none mr-1">
                                <span class="fas fa-check pr-1"></span> Confirmar
                            </button>
                            <button id="btnExcluirConfig" class="btn btn-sisp btn-danger d-none mr-1">
                                <span class="fas fa-trash pr-1"></span> Excluir
                            </button>
                            <button id="btnVoltarModalFormaCodigo" class="btn btn-sisp btn-secondary">
                                <span class="fas fa-arrow-left pr-1"></span> Voltar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>