404

D7net
:/ var / www / html / crsys /
Filename : container - Copia.php
back
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Layout com Bootstrap 5.0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5.0 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
   body {
  padding: 0 20px;
  background-color: #f9f9f9;
}
label {
  color: black !important;
}

.container-custom {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
}

.row-tight {
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .col-custom {
    width: 100% !important;
  }
}

/* CORREÇÃO: faltava o ponto antes de label-fixed */
.label-fixed {
  flex: none !important;
  width: 60px !important;
  text-align: right !important;
  margin-bottom: 0 !important;
  font-size: 0.70rem;
  line-height: 1.2;
}

/* Alinhamento horizontal entre elementos */
.input-line {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Estilo uniforme para labels */
.form-label {
  font-size: 0.70rem;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

/* Estilo uniforme para inputs */
.form-control {
  font-size: 0.70rem;
  padding: 0.15rem 0.2rem;
  height: calc(1.5em + 0.4rem + 2px); /* altura consistente */
  line-height: 0.7;
}

/* Margens compactas entre linhas */
.row-tight,
.row-tight .row,
.row-tight .mb-2 {
  margin-bottom: 0.25px !important;
}

/* Botão de busca compacto e alinhado */
#buttonpesq {
  border-radius: 30% !important;
  margin-left: 5px !important;
  padding: 0.15rem 0.4rem !important; /* altura reduzida */
  font-size: 0.70rem !important;
  line-height: 1 !important;
  height: 1.5em !important; /* altura relativa à fonte */
  vertical-align: middle !important; /* alinha com campos de texto */
}
/* Grupo de inputs em linha */
.input-group-inline {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}


.input-group-inline input {
  flex: 1 !important;
  min-width: 0 !important;
}
.container-custom {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;

  /* Relevo mais profundo */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

  </style>
<style>
.tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.tab-button {
  flex: 1;
  padding: 6px !important;;
  border: none !important;;
  background-color: #eee;
  cursor: pointer;
  border-radius: 4px;
   padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 0.70rem !important;

}
.botao-sel {
  font-size: 0.70rem !important;	
}
.tab-button.active {
  background-color: #ccc;
}

.tab-panel {
  display: none;
   margin-top: 0 !important;
  padding-top: 0 !important;

}

.tab-panel.active {
  display: block;
}
#contzero {
  height: 50px !important;
}
#contzero label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}

#contdois {
  height: 243px !important;
}
#contdois label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}
#contum {
  height: 243px !important;
}
#contum label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}
#contres {
  height: 243px !important;
}
#contres label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}
#contquatro {
  height: 50px !important;
  margem-bottom: 0px !important;
}


#contquatro label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}

#contcinco {
  height: 150px !important;
   width: 900px !important;
  margem-top: 0px !important;
    padding-top: 0 !important;
}


#contcinco label {
   font-size: 0.70rem !important;
  white-space: nowrap !important
}
#aba3 .tab-panel {
  padding-top: 0 !important;
  margin-top: 0 !important;
    font-size: 0.75rem;
}

#aba3 .tab-panel .col-auto:first-child {
  margin-top: 0 !important;
}

.btn-compact {
  padding: 2px 6px;         /* reduz espaÃ§o interno */
  font-size: 0.75rem;       /* texto menor */
  line-height: 1;           /* altura de linha enxuta */
  height: auto;             /* permite altura mÃnima */
  min-height: 24px;         /* ou menos, se quiser mais compacto */
}


</style>  
</head>
<body>

<div class="content">

  <?php
  if (isset($_SESSION['msg'])) {
      echo $_SESSION['msg'];
      unset($_SESSION['msg']);
  }
  ?>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="<?php echo 'c:/crsys/dashboard.css'; ?>">
<!--<form onsubmit="event.preventDefault();"> -->
    <form id="form_orcamento" method="POST" action=""  enctype="multipart/form-data"> 

    <input name="id" type="hidden" value="<?php
    if (isset($valorForm['id'])) {
        echo $valorForm['id'];
    }
    ?>">

    <!-- Navegação -->
    <div class="container-custom mb-1 d-flex flex-wrap gap-3">
      <a href="#" class="text-decoration-none fw-bold text-dark">Início</a>
      <a href="#" class="text-decoration-none fw-bold text-dark">Sobre</a>
      <a href="#" class="text-decoration-none fw-bold text-dark">Serviços</a>
      <a href="#" class="text-decoration-none fw-bold text-dark">Contato</a>
    </div>

    <!-- Linha com Container 1, Extra e 2 -->
    <div class="row row-tight gx-0">
<div id="contzero" class="container-custom mb-1">
  <div class="row g-2 align-items-center">
    <div class="col-auto">
      <div class="d-flex align-items-center gap-2">
        <label for="nome">Nº Orçamento:</label>
        <input type="text" id="nome" name="nome" class="form-control" style="max-width: 120px;">
      </div>
    </div>

    <div class="col-auto">
      <div class="d-flex align-items-center gap-2">
        <label for="revisao">Revisão:</label>
        <select name="revisao" id="revisao" class="form-control text-center" style="width: 40px;">
          <option value=""></option>
          <option value="S">00</option>
          <option value="S">01</option>
          <option value="N">02</option>
          <option value="N">03</option>
          <option value="N">04</option>
        </select>
		   <button type="button" id="buttonpesq" onclick="Pesq('arq')" style="border: none; background: none; padding: 0; cursor: pointer;">
					<i class="bi bi-search" style="font-size: 1rem; color: #007bff;"></i>
			</button>
      </div>
    </div>

    <div class="col-auto">
      <div class="d-flex align-items-center gap-2">
        <label for="data">Data:</label>
        <input type="text" id="data" name="data" class="form-control" style="max-width: 120px;">
      </div>
    </div>

    <div class="col-auto">
      <div class="d-flex align-items-center gap-2">
        <label for="data_ult_rev">Data Revisão:</label>
        <input type="text" id="data_ult_rev" name="data_ult_rev" class="form-control" style="max-width: 120px;">
      </div>
    </div>

    <div class="col-auto">
      <button type="button" class="btn btn-warning btn-sm botao-sel" onclick="solicitarPedido();">Solicitar Pedido</button>
    </div>
  </div>
</div>
      <!-- Container 1 -->
      <div class="col-custom" style="width: 55%;">
        <div id="contum" class="container-custom">
<div class="row mb-2 align-items-center">
  <div class="col-auto">
    <label for="nome" class="form-label mb-0 label-fixed text-end">Cliente</label>
  </div>
  <div class="col">
    <div class="d-flex" style="max-width: 250px;">
      <input name="nome" type="text" class="form-control" id="nome">
      <button name="cadCliente" id="cadCliente" value="salvar" type="button"
        class="btn btn-outline-warning ms-2 d-flex align-items-center justify-content-center"
        style="height: 100%;">
        <i class="fas fa-plus" title="Novo Cliente"></i>
      </button>
    </div>
  </div>
</div>

          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="obra" class="form-label mb-0 label-fixed text-end">Obra</label>
            </div>
            <div class="col">
              <input name="obra" type="text" class="form-control" id="obra" style="max-width: 250px;">
            </div>
          </div>

          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="contato_obra" class="form-label mb-0 label-fixed text-end">Contato</label>
            </div>
            <div class="col">
              <input name="contato_obra" type="text" class="form-control" id="contato_obra" style="max-width: 250px;">
            </div>
          </div>

          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="telefone_obra" class="form-label mb-0 label-fixed text-end">Telefone</label>
            </div>
            <div class="col">
              <input name="telefone_obra" type="text" class="form-control" id="telefone_obra" style="max-width: 250px;">
            </div>
          </div>

          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="email_obra" class="form-label mb-0 label-fixed text-end">eMail</label>
            </div>
            <div class="col">
              <input name="email_obra" type="text" class="form-control" id="email_obra" style="max-width: 250px;">
            </div>

            <div class="col-auto">
              <label for="arq_obra" class="form-label mb-0 label-fixed text-end">Arquiteto</label>
            </div>
            <div class="col">
              <div class="input-group" style="max-width: 350px;">
                <input name="arq_obra" type="text" class="form-control" id="arq_obra">
         <!--       <button type="button" id="buttonpesq" class="btn btn-outline-secondary btn-sm" onclick="Pesq('arq')">...</button> -->
			    <button type="button" id="buttonpesq" onclick="Pesq('arq')" style="border: none; background: none; padding: 0; cursor: pointer;">
					<i class="bi bi-search" style="font-size: 1rem; color: #007bff;"></i>
				</button>


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

 <div class="row mb-2 align-items-center">
  <div class="col-auto">
    <label for="cep_obra" class="form-label label-fixed text-end">CEP</label>
  </div>

  <div class="col-auto">
    <div class="input-group">
      <input name="cep_obra" type="text" class="form-control" id="cep_obra" style="max-width: 120px;">
     <!-- <button type="button" id="buttonpesq" class="btn btn-outline-secondary btn-sm" title="Clique para buscar Endereço" onclick="Pesq('cep')">...</button> -->
		<button type="button" id="buttonpesq" onclick="Pesq('arq')" style="border: none; background: none; padding: 0; cursor: pointer;">
			<i class="bi bi-search" style="font-size: 1rem; color: #007bff;"></i>
		</button>

    </div>
  </div>

  <div class="col">
    <input name="endereco_obra" type="text" class="form-control" id="endereco_obra" placeholder="Digite endereço">
  </div>
</div>
          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="obs_obra" class="form-label mb-0 label-fixed text-end">Observação</label>
            </div>
            <div class="col">
              <input name="obs_obra" type="text" class="form-control" id="obs_obra" style="max-width: 750px;">
            </div>
          </div>
        </div>
      </div>

      <!-- Container Extra -->
      <div class="col-custom" style="width: 20%;">
        <div id="contdois" class="container-custom">
          <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="vlr_sd" class="form-label mb-0 label-fixed text-end">$ sem Desc</label>
            </div>
            <div class="col">
              <input name="vlr_sd" type="text" class="form-control" id="vlr_sd" style="max-width:150px;" readonly>
            </div>
          </div>
       
		 <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="vlr_frete" class="form-label mb-0 label-fixed text-end">Frete</label>
            </div>
            <div class="col">
              <input name="vlr_frete" type="text" class="form-control" id="vlr_frete" style="max-width:150px;">
            </div>
          </div>
		   <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="vlr_desc" class="form-label mb-0 label-fixed text-end">Desconto</label>
            </div>
            <div class="col">
              <input name="vlr_desc" type="text" class="form-control" id="vlr_frete" style="max-width:150px;">
            </div>
          </div>
		   <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="vlr_total" class="form-label mb-0 label-fixed text-end">Total</label>
            </div>
            <div class="col">
              <input name="vlr_total" type="text" class="form-control" id="vlr_total" style="max-width:150px;" readonly>
            </div>
          </div>
       
     
	    <div class="row mb-2 align-items-center">
            <div class="col-auto">
              <label for="forma_pgto" class="form-label mb-0 label-fixed text-end">Forma Pagto</label>
            </div>
            <div class="col" >
             <textarea id="forma_pgto" name="forma_pgto" rows="3" cols="18"  placeholder="Digite aqui forma de pagamento " style="margin-top: 2px;"></textarea>
            </div>
        </div>
 </div>
 </div>

      <!-- Container 2 -->
<div class="col-custom" style="width: 25%;">
  <div id="contres" class="container-custom">
    <div class="tabs mb-3">
      <button type="button" class="tab-button active" onclick="showTab(0)">Negociação</button>
      <button  type="button"class="tab-button" onclick="showTab(1)">Resumo Por</button>
      <button type="button" class="tab-button" onclick="showTab(2)">Alterar Material</button>
    </div>

    <div class="tab-content">
      <div class="tab-panel active">
        <div class="row mb-2 align-items-center">
          <div class="col-auto">
            <label for="vlr_neg_sdesc" class="form-label mb-0 label-fixed text-end">Vlr s/Desc</label>
          </div>
          <div class="col">
            <input name="vlr_neg_sdesc" type="text" class="form-control" id="vlr_neg_sdesc" style="max-width:150px;" readonly>
          </div>
        </div>
			<div class="row mb-2 align-items-center">
			<div class="col-auto">
				<label for="vlr_neg_ajuste" class="form-label mb-0 label-fixed text-end">Vlr Ajuste</label>
			  </div>
			  <div class="col">
				<input name="vlr_neg_ajuste" type="text" class="form-control" id="vlr_neg_ajuste" style="max-width:150px;" readonly>
			  </div>
			</div>
			<div class="row mb-2 align-items-center">
			<div class="col-auto">
				<label for="vlr_neg_desconto" class="form-label mb-0 label-fixed text-end">Desconto</label>
			  </div>
			  <div class="col">
				<input name="vlr_neg_desconto" type="text" class="form-control" id="vlr_neg_desconto" style="max-width:150px;" readonly>
			  </div>
			</div>
			<div class="row mb-2 align-items-center">
			<div class="col-auto">
				<label for="vlr_neg_ns" class="form-label mb-0 label-fixed text-end">NS</label>
			  </div>
			  <div class="col">
				<input name="vlr_neg_ns" type="text" class="form-control" id="vlr_neg_ns" style="max-width:150px;" readonly>
			  </div>
			</div>
			<div class="row mb-2 align-items-center">
 

  <!-- Checkbox -->
  <div class="row mb-2 align-items-center">
  <div class="col-auto">
    <label for="vlr_neg_rt" class="form-label mb-0 label-fixed text-end">RT</label>
  </div>

  <!-- Checkbox sem margem -->
  <div class="col-auto">
    <input type="checkbox" id="chk_rt" name="chk_rt" class="form-check-input" style="padding-right:0 !important; margin-right:0 !important;">
  </div>

  <!-- Input com largura ajustada e col-auto para evitar espaço extra -->
  <div class="col-auto">
    <input name="vlr_neg_rt" type="text" class="form-control" id="vlr_neg_rt" style="max-width:110px; padding-right:0 !important;" readonly>
  </div>
</div>
</div>
            <div class="row mb-2 align-items-center">
				<div class="col-auto">
					<label for="vlr_neg_saldo" class="form-label mb-0 label-fixed text-end">Saldo</label>
				  </div>
				  <div class="col">
					<input name="vlr_neg_saldo" type="text" class="form-control" id="vlr_neg_saldo" style="max-width:150px;" readonly>
				  </div>
			</div>
      </div>
      </div>
    <div class="tab-panel">
  <!-- Opção Ambiente -->
  <div class="row mb-2 align-items-center">
    <div class="col-auto">
      <label for="rad_amb" class="form-label mb-0 label-fixed text-end">Ambiente</label>
    </div>
    <div class="col-auto">
      <input type="radio" id="rad_amb" name="tipo_opcao" class="form-check-input" checked>
    </div>
  </div>

  <!-- Opção Material -->
  <div class="row mb-2 align-items-center">
    <div class="col-auto">
      <label for="rad_mat" class="form-label mb-0 label-fixed text-end">Material</label>
    </div>
    <div class="col-auto">
      <input type="radio" id="rad_mat" name="tipo_opcao" class="form-check-input">
    </div>
  </div>

  <!-- Campos dependentes -->
 
</div>
      <div class="tab-panel">
	
        <div class="col-auto">
	     <label for="rad_mat" class="form-label mb-0">Antigo</label> 
		 </div>
		 <div class="col-auto">
        <input id="gre_usu_aux" name="gre_usu_id_aux" list="ent"  class="form-control col-sm-4" >
                    <datalist id="ent" required > 
                     </datalist>
      </div>
    <div class="col-auto">
	     <label for="rad_mat" class="form-label mb-0">Novo</label> 
		 </div>
		 <div class="col-auto">
        <input id="gre_usu_aux" name="gre_usu_id_aux" list="ent"  class="form-control col-sm-4" >
                    <datalist id="ent" required > 
                     </datalist>
	<div class="col-auto">
  <label for="rad_mat" class="form-label mb-0">Ambiente</label>
</div>
<div class="col-auto">
  <select name="office" id="office" class="form-control" style="width: 200px !important;">
    <option value="">Selecione</option>
    <option value="S">Banho 1</option>
    <option value="N">Banho 2</option>
  </select>
</div>

<!-- Botões lado a lado -->
<div class="row mt-2">
  <div class="col-auto">
    <button type="button" class="btn btn-primary btn-sm botao-sel">Só Orçamento</button>
  </div>
  <div class="col-auto">
    <button type="button" class="btn btn-success btn-sm botao-sel" >Todo Ambiente</button>
  </div>
</div>

	
</div>	
</div>
</div>
</div>
     <!-- Container 4 -->
    <div id="contquatro" class="container-custom mb-1">
      <div class="d-flex flex-row gap-2" >
  <button type="button" class="btn btn-primary btn-compact">
  <i class="bi bi-plus-circle me-1"></i>Novo
</button>
    <button type="button" class="btn btn-warning btn-compact">  
	<i class="bi bi-save me-1" style="font-size: 0.9rem;"></i>Gravar
</button>
    <button type="button" class="btn btn-danger btn-compact">
	<i class="bi bi-trash me-1" style="font-size: 0.9rem;"></i>Excluir
</button>

    <button type="button" class="btn  btn-info btn-compact">  
	<i class="bi bi-files me-1" style="font-size: 0.9rem;"></i>Duplicar
</button>
    <button type="button" class="btn  btn-success btn-compact">  
	<i class="bi bi-calculator me-1" style="font-size: 0.9rem;"></i>Calcular Orçamento
</button>
   <button type="button" class="btn  btn-success btn-compact">  
   <i class="bi bi-calculator me-1" style="font-size: 0.9rem;"></i>Calcular Insumo
</button>
  
    <button type="button" class="btn  btn-info btn-compact">  
	<i class="bi bi-files me-1" style="font-size: 0.9rem;"></i>Duplicar Ambiente
</button>
    <button type="button" class="btn btn-danger btn-compact">
	<i class="bi bi-trash me-1" style="font-size: 0.9rem;"></i>Excluir Ambiente
</button>
</button>
<div class="d-flex align-items-center">
  <button type="button" class="btn btn-primary btn-compact me-1">
    <i class="bi bi-arrow-repeat me-1" style="font-size: 0.9rem;"></i>Converter RT
  </button>
  
  <button type="button" class="btn btn-primary btn-compact">
    <i class="bi bi-percent" style="font-size: 0.9rem;"></i>
  </button>
</div>

   <button type="button" class="btn  btn-success btn-compact"> 
   <i class="bi bi-calculator me-1" style="font-size: 0.9rem;"></i>Ver M² Total
</button>
    </div>
</div>
<div  id="contcinco" class="container-custom mb-1">	
<div class="row g-2 align-items-center"  >
    <div class="col-auto">
      <div class="d-flex align-items-center gap-2" >
        <label for="nome">Codigo:</label>
        <input type="text" id="orc_codigo" name="orc_codigo" class="form-control" style="max-width: 120px;">
      </div>
    </div>
	<div class="col-auto">
		<div class="d-flex align-items-center gap-2" >
			<label for="orc_ambiente">Ambiente:</label>
			<select name="orc_ambiente" id="orc_ambiente" class="form-control" style="width: 200px !important;">
				<option value="">Selecione</option>
				<option value="S">Banho 1</option>
				<option value="N">Banho 2</option>
		  </select>
		</div>
	</div> 	
	<div class="col-auto">
		<div class="d-flex align-items-center gap-2" >
			<label for="orc_unid">Unid:</label>
			<select name="orc_unid" id="orc_unid" class="form-control" style="width: 40px !important; text-align: center;">
				<option value="">ml</option>
				<option value="S">m²</option>
				<option value="N">unid</option>
		  </select>
		</div>
	</div> 	
	 <div class="col-auto">
      <div class="d-flex align-items-center gap-2" >
        <label for="orc_vlr_mo">Vlr. MO:</label>
        <input type="text" id="orc_vlr_mo" name="orc_vlr_mo" class="form-control" style="max-width: 120px;">
      </div>
    </div>
	 <div class="col-auto">
      <div class="d-flex align-items-center gap-2" >
        <label for="orc_ajuste">Ajuste%:</label>
        <input type="text" id="orc_ajuste" name="orc_ajuste" class="form-control" style="max-width: 30px;">
      </div>
    </div>
		 <div class="col-auto">
      <div class="d-flex align-items-center gap-2" >
        <label for="orc_ajuste">Ref.: 100%</label>

      </div>
    </div>
	 
            <div class="col-auto">
              <label for="orc_descricao" class="form-label mb-0 label-fixed text-end">Descrição</label>
            
             <textarea id="orc_descricao" name="orc_descricao" rows="3" cols="2"></textarea>
            </div>
	</div>	
</div>

  </form>
</div>

<!-- Bootstrap JS (opcional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
  function Pesq(origem) {
    if (origem === 'cliente') {
      alert("Função chamada pelo botão Lupa");
      // lógica específica para cliente
    } else if (origem === 'arq') {
      alert("Função chamada pelo botão Lupa");
      // lógica específica para arq
	} else if (origem === 'cep') {  
	  alert("Função chamada pelo botão Lupa");
    } else {
      alert("Origem desconhecida");
    }
  }
function solicitarPedido() {
          alert("Função chamada pelo botão Solicitar Pedido");
  }
function novoCliente() {
          alert("Função chamada pelo botão Novo Cliente");
  }
</script>
<script>


  function showTab(index) {
   

    const buttons = document.querySelectorAll('.tab-button');
    const panels = document.querySelectorAll('.tab-panel');

    // Remove 'active' de todos os botões e painéis
    buttons.forEach(btn => btn.classList.remove('active'));
    panels.forEach(panel => panel.classList.remove('active'));

    // Adiciona 'active' ao botão e painel clicado
    if (buttons[index]) buttons[index].classList.add('active');
    if (panels[index]) panels[index].classList.add('active');
  }
</script>

</body>
</html>