@extends('layouts.app')
@section('title', '| Users')
@section('content')
  @php
  if(isset($_GET['return_url'])) {
    $return_url = $_GET['return_url'];
  } else {
    $return_url = "";
  }
  $number = DB::table('sgates')->max('id') + 1;
  $number = 'ORC'.date('y').str_pad($number, 4, 0 , STR_PAD_LEFT);
  @endphp
  <div class="container">
    <div class='panel-title'><h2>Pedido de Cotação</h2></div>
    <div class='panel panel-default detail'>
      <form method='post' action='{{ action('SGateController@store') }}' enctype="multipart/form-data" id="add_gate">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type='hidden' name='return_url' value='{{ $return_url }}'/>
        <input type='hidden' name='number' value='{{ $number }}'/>
        <div class="tab tab1">
          <div class="panel-title">
            <ul class="sMenu">
              <li class="tActive">1. Selecione o Modelo de Portão</li>
              <li>2. Selecione o Acabamento</li>
              <li>3. Introdução de medidas</li>
              <li>4. Escolha as opções</li>
              <li>5. Informações dos clientes</li>
              <li>6. Resumo</li>
            </ul>
          </div>
          <div class="panel panel-body">
            <div class="row">
              <div class="col-md-6">
                <input class="form-check-input" type="radio" name="model" id="m1" value="m1">
                <label class="form-check-label" for="m1">
                  <img src="{{asset("images/gates/valencia.jpg")}}" alt="">
                  Valência
                </label>
                <div class="desc">
                  <div class="desc">
                    A série Valência consiste em painéis tipo “sanduíche” com estrias de parede dupla com 40 mm, injetado com espuma de poliuretano sem CFC com um coeficiente de isolamento térmico K=1,4W/m2K, permitindo obter resistência e rigidez assim como uma melhor resistência às intempéries. As juntas e acessórios lacados, permitem reduzir os custos energéticos da sua casa. A espessura da folha dos painéis é de 0,5mm, com sistema antiaderente.
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <input class="form-check-input" type="radio" name="model" id="m2" value="m2">
                <label class="form-check-label" for="m2">
                  <img src="{{asset("images/gates/bolonha.jpg")}}" alt="">
                  Bolonha
                </label>
                <div class="desc">
                  A série Bolonha consiste em painéis tipo “sanduíche” com estrias de parede dupla com 40 mm, injetado com espuma de poliuretano sem CFC com um coeficiente de isolamento térmico K=1,4W/m2K, permitindo obter resistência e rigidez assim como uma melhor resistência às intempéries. As juntas e acessórios lacados, permitem reduzir os custos energéticos da sua casa. A espessura da folha dos painéis é de 0,5mm, com sistema antiaderente.
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <input class="form-check-input" type="radio" name="model" id="m3" value="m3">
                <label class="form-check-label" for="m3">
                  <img src="{{asset("images/gates/lyon.jpg")}}" alt="">
                  Lyon
                </label>
                <div class="desc">
                  <div class="desc">
                    A série Lyon consiste em painéis tipo “sanduíche” com estrias de parede dupla com 40 mm, injetado com espuma de poliuretano sem CFC com um coeficiente de isolamento térmico K=1,4W/m2K, permitindo obter resistência e rigidez assim como uma melhor resistência às intempéries. As juntas e acessórios lacados, permitem reduzir os custos energéticos da sua casa. A espessura da folha dos painéis é de 0,5mm, com sistema antiaderente.
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <input class="form-check-input" type="radio" name="model" id="m4" value="m4">
                <label class="form-check-label" for="m4">
                  <img src="{{asset("images/gates/marselha.jpg")}}" alt="">
                  Marselha
                </label>
                <div class="desc">
                  A série Marselha consiste em painéis tipo “sanduíche” com estrias de parede dupla com 40 mm, injetado com espuma de poliuretano sem CFC com um coeficiente de isolamento térmico K=1,4W/m2K, permitindo obter resistência e rigidez assim como uma melhor resistência às intempéries. As juntas e acessórios lacados, permitem reduzir os custos energéticos da sua casa. A espessura da folha dos painéis é de 0,5mm, com sistema antiaderente.
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="tab tab2">
          <div class="panel-title">
            <ul class="sMenu">
              <li>1. Selecione o Modelo de Portão</li>
              <li class="tActive">2. Selecione o Acabamento</li>
              <li>3. Introdução de medidas</li>
              <li>4. Escolha as opções</li>
              <li>5. Informações dos clientes</li>
            </ul>
          </div>
          <div class="panel panel-body">
            <h3>Acabamento</h3>
            <div class="row">
              <div class="col-md-3 acab acabm1">
                <input class="form-check-input" type="radio" name="acabm" id="pa1" value="pa1">
                <label class="form-check-label" for="pa1">
                  <img src="{{asset("images/gates/acabamento-01.jpg")}}" alt="">
                  Rugoso com Estrias
                </label>
              </div>
              <div class="col-md-3 acab acabm1">
                <input class="form-check-input" type="radio" name="acabm" id="pa2" value="pa2">
                <label class="form-check-label" for="pa2">
                  <img src="{{asset("images/gates/acabamento-08.jpg")}}" alt="">
                  Liso com 1 Estria
                </label>
              </div>
              <div class="col-md-3 acab acabm1">
                <input class="form-check-input" type="radio" name="acabm" id="pa3" value="pa3">
                <label class="form-check-label" for="pa3">
                  <img src="{{asset("images/gates/acabamento-09.jpg")}}" alt="">
                  Liso sem Estrias
                </label>
              </div>
              <div class="col-md-3 acab acabm1">
                <input class="form-check-input" type="radio" name="acabm" id="pa4" value="pa4">
                <label class="form-check-label" for="pa4">
                  <img src="{{asset("images/gates/acabamento-07.jpg")}}" alt="">
                  Rugoso sem Estrias
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 acab acabm2">
                <input class="form-check-input" type="radio" name="acabm" id="ps1" value="ps1">
                <label class="form-check-label" for="ps1">
                  <img src="{{asset("images/gates/acabamentos-02.jpg")}}" alt="">
                  Liso com estrias
                </label>
              </div>
            </div>
            <div class="row">
            <div class="col-md-3 acab acabm3">
                <input class="form-check-input" type="radio" name="acabm" id="pa5" value="pa5">
                <label class="form-check-label" for="pa5">
                  <img src="{{asset("images/gates/acabamento-12.jpg")}}" alt="">
                  Rugoso com Almofada
                </label>
              </div>
              <div class="col-md-3 acab acabm4">
                <input class="form-check-input" type="radio" name="acabm" id="pa6" value="pa6">
                <label class="form-check-label" for="pa6">
                  <img src="{{asset("images/gates/acabamento-12.jpg")}}" alt="">
                  Rugoso com Almofada
                </label>
              </div>
			  </div>
            <h3>Cor</h3>
            <div class="row">
              <div class="col-md-3 pa1 pa2 pa3 pa4 pa5 color colorm1 colorm3">
                <input class="form-check-input" type="radio" name="color" id="9003" value="9003">
                <label class="form-check-label" for="9003">
                  <img src="{{asset("images/gates/acabamento-11.jpg")}}" alt="">
                  RAL 9003
                </label>
              </div>
              <div class="col-md-3 pa1 pa5 color colorm1 colorm3">
                <input class="form-check-input" type="radio" name="color" id="8014" value="8014">
                <label class="form-check-label" for="8014">
                  <img src="{{asset("images/gates/acabamento-02.jpg")}}" alt="">
                  RAL 8014
                </label>
              </div>
              <div class="col-md-3 pa1 color colorm1">
                <input class="form-check-input" type="radio" name="color" id="9006" value="9006">
                <label class="form-check-label" for="9006">
                  <img src="{{asset("images/gates/acabamento-03.jpg")}}" alt="">
                  RAL 9006
                </label>
              </div>
              <div class="col-md-3 pa1 pa4 color colorm1">
                <input class="form-check-input" type="radio" name="color" id="7016" value="7016">
                <label class="form-check-label" for="7016">
                  <img src="{{asset("images/gates/acabamento-04.jpg")}}" alt="">
                  RAL 7016
                </label>
              </div>
            </div>
            <div class="col-md-3 color ps1 pa6 colorm2 colorm4">
              <input class="form-check-input" type="radio" name="color" id="carvalho" value="carvalho">
              <label class="form-check-label" for="carvalho">
                <img src="{{asset("images/gates/acabamento-05.jpg")}}" alt="">
                Carvalho
              </label>
            </div>
            <div class="col-md-3 color ps1 pa6 colorm2 colorm4">
              <input class="form-check-input" type="radio" name="color" id="nogueira" value="nogueira">
              <label class="form-check-label" for="nogueira">
                <img src="{{asset("images/gates/acabamento-06.jpg")}}" alt="">
                Nogueira
              </label>
            </div>
          </div>
        </div>
        <div class="tab tab3">
          <div class="panel-title">
            <ul class="sMenu">
              <li>1. Selecione o Modelo de Portão</li>
              <li>2. Selecione o Acabamento</li>
              <li class="tActive">3. Introdução de medidas</li>
              <li>4. Escolha as opções</li>
              <li>5. Informações dos clientes</li>
            </ul>
          </div>
          <div class="panel panel-body">
            <div class="row tCenter">
              <img src="{{asset("images/portoes.png")}}" alt="">
              <legend>vista interior</legend>
            </div>
            <div class="row">
              <div class="col-md-5 offset-md-1">
                <label>H1 - Largura Livre </label>
              </div>
              <div class="col-md-2 input-number-group">
                <input type="text" id="h1" class="tRight mm validate" size="4" name="h1" min="2500" max="5000" step="1"/> mm
            </div>
            <div class="iError h1error">
              <span>O valor H1 deverá estar compreendido entre 2500mm e <span class="max">5000</span>mm.
              Para outras dimensões deverá contactar <a href="mailto:pedidos@alugreensa.com">pedidos@alugreensa.com</a>
            </span>
          </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>H2 - Altura Livre </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input type="text" id="h2" name="h2" class="tRight mm validate" size="4"  min="2020" max="3000" step="1"> mm
            </div>
            <div class="iError h2error">
              <span>O valor H2 deverá estar compreendido entre 2020mm e 3000m.
                Para outras dimensões deverá contactar <a href="mailto:pedidos@alugreensa.com">pedidos@alugreensa.com</a>
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>H3 - Altura Lintél (min. 100mm) </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input type="text" id="h3" name="h3" class="tRight mm validate" size="4" min="100"> mm
            </div>
            <div class="iError h3error">
              <span>O valor H3 deverá ser superior a 100mm.
                Para outras dimensões deverá contactar <a href="mailto:pedidos@alugreensa.com">pedidos@alugreensa.com</a>
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>H4 - Espaçamento esquerdo (min. 80mm) </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input type="text" id="h4" name="h4" class="tRight mm validate" size="4" min="80"> mm
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>H5 - Espaçamento direito (min. 80mm) </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input type="text" id="h5" name="h5" class="tRight mm validate" size="4" min="80"> mm
            </div>
          </div>
        </div>
      </div>
      <div class="tab tab3">
        <div class="panel-title">
          <ul class="sMenu">
            <li>1. Selecione o Modelo de Portão</li>
            <li>2. Selecione o Acabamento</li>
            <li>3. Introdução de medidas</li>
            <li class="tActive">4. Escolha as opções</li>
            <li>5. Informações dos clientes</li>
          </ul>
        </div>
        <div class="panel panel-body">
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Área do Painel </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input readonly type="text" type="text" id="area" name="area" size="6" > m2
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Tipo de Lintel </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input readonly type="text" id="lintel" name="lintel" size="10" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Valor do Painel </label>
            </div>
            <div class="col-md-2 input-number-group">
              <input readonly type="text" id="painel_value" class="toCount" name="painel_value"  value="0" size="6" > €
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Punho de encastrar <strong>(+ 34.38€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="punho" value="1" class="check" checked>
              <input type="hidden" id="punho_p" name="punho_p" price="34.38"  class="toCounter toCount" value="34.38">
            </div>
          </div>
            <div class="row motor1">
              <div class="col-md-5 offset-md-1">
                <label>Kit de Motorização - motorredutor e calha monobloco, até máx 500N (50Kg) + 2 telecomandos <strong>(+ 306.25€)</strong></label>
              </div>
              <div class="col-md-2 input-number-group">
                <label>Sim </label><input type="checkbox" name="motor" value="motor1" class="check">
                <input type="hidden" price="306.25" class="toCounter" id="motor_p" name="motor_p" value="0" >
              </div>
            </div>
            <div class="row motor2">
              <div class="col-md-5 offset-md-1">
                <label>Kit de Motorização - motorredutor e calha monobloco, até máx 1000N (100Kg) + 2 telecomandos <strong>(+ 416.25€)</strong></label>
              </div>
              <div class="col-md-2 input-number-group">
                <label>Sim </label><input type="checkbox" name="motor" value="motor2" class="check">
                <input type="hidden" class="toCounter" id="motor_p" name="motor_p" price="416.25" value="0" >
              </div>
            </div>
            <div class="row motor3">
              <div class="col-md-5 offset-md-1">
                <label>As opções selecionadas não permitem escolher um motor para o portão.  Deverá contactar <a href="mailto:pedidos@alugreensa.com">pedidos@alugreensa.com</a></label>
              </div>
              <div class="col-md-2 input-number-group">
                <input type="hidden" class="toCounter toCount" id="motor3" name="motor3" value="0" >
              </div>
            </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Telecomandos extra <strong>(+ 36.88€ Unidade)</strong></label>
            </div>
            <div class="col-md-2 plusminus">
              <div class="input-number-group">
                <div class="input-group-button">
                  <span class="input-number-decrement">-</span>
                </div>
                <input class="input-number tCenter" type="number" name="telecomandos" value="0" min="0" size="1" max="5">
                <div class="input-group-button">
                  <span class="input-number-increment">+</span>
                </div>
                  <input type="hidden" id="telecomandos" class="toAdd" price="36.88" name="telecomandos_p" value="0">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Selector de parede com chave, cilindro europeu <strong>(+ 57.50€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="selector" value="1" class="check">
              <input type="hidden" id="selector_p" price="57.50"  class="toCounter" name="selector_p" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Kit de fotocélulas <strong>(+ 66.25€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="fotoc" value="1" class="check">
              <input type="hidden" id="fotoc_p" name="fotoc_p" class="toCounter" price="66.25" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Desbloqueador exterior com chave <strong>(+ 31.25€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="desbloq" value="1" class="check">
              <input type="hidden" id="desbloq_p" name="desbloq_p" class="toCounter" price="31.25" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Porta Pedonal na posição média do portão, com 800 x 2000 mm <strong>(+ 915.63€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="pedonal" value="1" class="check">
              <input type="hidden" id="pedonal_p" name="pedonal_p" class="toCounter" price="915.63" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Grelha(s) de ventilação - posição a definir <strong>(+ 23.44€ Unidade)</strong></label>
            </div>
            <div class="col-md-2 plusminus">
              <div class="input-number-group">
                <div class="input-group-button">
                  <span class="input-number-decrement">-</span>
                </div>
                <input class="input-number tCenter" type="number" name="grelhas" value="0" min="0" size="1" max="5">
                <div class="input-group-button">
                  <span class="input-number-increment">+</span>
                </div>
                  <input type="hidden" id="grelhas" class="toAdd" price="23.44" name="grelhas_p" value="0" size="4" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Óculo(s) Rectangular(es), em PVC, com vidro acrílico duplo, c/ 510x340 mm <strong>(+ 73.44€ Unidade)</strong></label>
            </div>
            <div class="col-md-2 plusminus">
              <div class="input-number-group">
                <div class="input-group-button">
                  <span class="input-number-decrement">-</span>
                </div>
                <input class="input-number tCenter" type="number" name="oculos" value="0" min="0" size="1" max="5">
                <div class="input-group-button">
                  <span class="input-number-increment">+</span>
                </div>
                  <input type="hidden" id="oculos" price="73.44" class="toAdd" name="oculos_p" value="0" size="4" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Rectificação de medidas <strong>(+ 25.00€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="rm" value="1" class="check">
              <input type="hidden" id="rm_p" name="rm_p" class="toCounter" price="25" value="0" size="6" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Transporte <strong>(+ 100€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="transporte" value="1" class="check">
              <input type="hidden" id="transporte_p" name="transporte_p" class="toCounter" price="100" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Instalação <strong>(+ <span class="int_p">175</span>€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="instalacao" value="1" class="check">
              <input type="hidden" id="instalacao_p" name="instalacao_p" price="175"  class="toCounter" value="0" >
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <label>Desinstalação do Existente<strong>(+ <span class="int_p">50</span>€)</strong></label>
            </div>
            <div class="col-md-2 input-number-group">
              <label>Sim </label><input type="checkbox" name="desinstalacao" value="1" class="check">
              <input type="hidden" id="desinstalacao_p" name="desinstalacao_p" price="50"  class="toCounter" value="0" >
            </div>
          </div>
          <div class="row total">
            <div class="col-md-5 offset-md-1">
              <label>TOTAL</label>
            </div>
            <div class="col-md-2 input-number-group">
              <input readonly type="text" id="total" name="total"  value="0" size="6" >
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <ul class="sMenu">
          <li>1. Selecione o Modelo de Portão</li>
          <li>2. Selecione o Acabamento</li>
          <li>3. Introdução de medidas</li>
          <li>4. Escolha as opções</li>
          <li class="tActive">5. Informações de cliente</li>
        </ul>
        <div class="panel panel-body info">
          <div class="row">
            <div class="col-md-2 tright">
              <label for="name">Loja: </label>
            </div>
            <div class="col-md-3">
              <input type="text"   placeholder="Loja LM" readonly value="{{ Auth::user()->name }}">
              <input type="hidden" id="clients_id" name="clients_id" value="1" required>
            </div>
            <div class="col-md-1 tright">
              <label for="name">Comercial LM: </label>
            </div>
            <div class="col-md-3">
              <input type="text" id="shop" name="seller" placeholder="Comercial LM" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-2 tright">
              <label for="name">Nome Cliente: </label>
            </div>
            <div class="col-md-7">
              <input type="text" id="name" name="name" placeholder="Nome Completo" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-2 tright">
              <label for="name">Morada Cliente: </label>
            </div>
            <div class="col-md-7">
              <input type="text" id="address" name="address" placeholder="Morada" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-2 tright">
              <label for="name">Código Postal: </label>
            </div>
            <div class="col-md-2">
              <input type="text" id="zip" name="zip" placeholder="Código Postal" required>
            </div>
            <div class="col-md-1 tright">
              <label for="name">Localidade: </label>
            </div>
            <div class="col-md-4">
              <input type="text" id="city" name="city" placeholder="Localidade" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-2 tright">
              <label for="name">E-mail: </label>
            </div>
            <div class="col-md-4">
              <input type="email" id="email" name="email" placeholder="E-mail" required>
            </div>
            <div class="col-md-1 tright">
              <label for="name">Telefone: </label>
            </div>
            <div class="col-md-2">
              <input type="text" id="phone" name="phone" placeholder="Telefone" required>
            </div>
          </div>
        </div>
      </div>
      <div class="clear clearfix"></div>
    </div>
    <div style="overflow:auto;">
      <div style="float:right;">
        <button class="btn btn-default" type="button" id="prevBtn" onclick="nextPrev(-1)">Anterior</button>
        <button class="btn btn-default" type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
      </div>
    </div>
    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align:center;margin-top:40px;">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
    </div>
  </form>
</div>
<script type="text/javascript">
$('.motor1, .motor2, .motor3').hide();
//Model Select and Finish Show
$('input[name=model]').on('change', function() {
  $('.color input[name="acabm"]').prop('checked', false);
  $('.color input[name="color"]').prop('checked', false);
  var model = $('input[name=model]:checked').val();
  $('.acab').hide();
  $('.color').hide();
  $('.acab'+model).show();
  $('.color'+model).show();
  console.log('Modelo: '+model);
});
var acab, color, indexante;
//Finish Select and Color Show
$('input[name=acabm]').on('change', function() {
  $('.color input[name="color"]').prop('checked', false);
  acab = $('input[name=acabm]:checked').val();
  $('.color').hide();
  $('.color.'+acab).show();
  console.log('Acabamento: '+acab);
  if(acab === 'pa1' || acab === 'ps1') {
    indexante = 1;
  }else {
    indexante = 1.10;
  }
  console.log('Indexante do Preço: '+indexante);
});
$('input[name=color]').on('change', function() {
  color = $('input[name="color"]:checked').val();
  if(acab === 'pa4' && color == '7016') {
    $('input[name=h1]').attr('max',3250);
    $('span.max').text('3250');
  }
  console.log('Cor: '+color);
});
//Measures and Validation
$('input.validate').each(function(){
  $(this).change(function() {
    var id = $(this).attr('id');
    if ($(this).attr('max')) {
      var max = parseInt($(this).attr('max'));
    }
    if ($(this).attr('min')) {
      var min = parseInt($(this).attr('min'));
    }
    var val = parseInt($(this).val());
    if(val <= min-1 || val >= max+1) {
      $(this).addClass('error');
      $('.'+id+'error').show();
      valid = false;
    }else {
      $(this).removeClass('error').removeClass(' invalid');
      $('.'+id+'error').hide();
    }
  });
});
$(document).on('change', '#h3', function() {
  var h3 = parseFloat($('#h3').val());
  if(h3 > 99 && h3 < 200) {
    $('#lintel').val('Reduzido');
  }else if (h3 >= 200) {
    $('#lintel').val('Normal');
  } else {
    $('#lintel').val('');
  }
  console.log('Lintel: '+$('#lintel').val());
});
$(document).on('change', '#h1, #h2', function() {
  var h1 = parseFloat($('#h1').val());
  var h2 = parseFloat($('#h2').val());
	var m = $('input[name=model]:checked').val();
	console.log(m);
  var area = (h1 * h2)/1000000;
  console.log(m2);
  $('input#area').removeClass(' invalid').val(area.toFixed(2));
  if (area > 0  && area <= 8) {
    $('.motor1').show();
    $('.motor2, .motor3').hide();
    $('#instalacao_p').val(175);
    $('#instalacao_p').attr('price', 175);
    $('.int_p').text(175)
    console.log('Motor1');
  }else if(area>8) {
    $('.motor2').show();
    $('.motor1, .motor3').hide();
    $('#instalacao_p').val(275);
    $('#instalacao_p').attr('price', 275);
    $('.int_p').text(275)
    console.log('Motor2');
  }else {
    $('.motor3').show();
    $('.motor1, .motor2').hide();
    console.log('Não existe Motor Diponível');
  }
  $.ajax({
    dataType : 'json',
    type: "GET",
    url: '{!!URL::to('getM')!!}',
    data:{'h1': h1, 'h2': h2, 'm':m},
    success:function(data){
      var v = (data*indexante).toFixed(2);
      $('#painel_value').val(v).removeClass(' invalid');
      console.log('Valor Painel: '+v);
    }
  });
});
$('.input-number-increment').click(function() {
  var input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt(input.val(), 10);
  var valU = val + 1
  input.val(valU);
  var tocalc = $(this).parents('.input-number-group').find('input.toAdd');
  tocalc.addClass(' toCount');
  var price = tocalc.attr('price');
  tocalc.val(valU*price);
  console.log('Adiciona :'+ valU*price);
});
$('.input-number-decrement').click(function() {
  var input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt(input.val(), 10);
  var valU = val - 1;
  if (valU < 0) {
    valU = 0;
    var tocalc = $(this).parents('.input-number-group').find('input.toAdd');
    tocalc.removeClass(' toCount');
  };
  input.val(valU);
  var tocalc = $(this).parents('.input-number-group').find('input.toAdd');
  var price = tocalc.attr('price');
  tocalc.val(valU*price);
  console.log('Retira :'+ valU*price);
});
$('input.check').each(function(){
  $(this).change(function() {
    if ($(this).is(':checked')) {
      var value = $(this).next('input.toCounter').attr('price');
      $(this).next('input.toCounter').val(value).addClass(' toCount');
      if ($(this).attr('name') === 'motor') {
        var value = parseInt($('#instalacao_p').val(), 10);
        $('#instalacao_p').val(value+25);
        $('#instalacao_p').attr('price', value+25);
        $('.int_p').text(value+25)
      }
    }else {
      $(this).next('input.toCounter').val('0').removeClass(' toCount');
      if ($(this).attr('name') === 'motor') {
        console.log('retira');
        var value = parseInt($('#instalacao_p').val(), 10);
        $('#instalacao_p').val(value-25);
        $('#instalacao_p').attr('price', value-25);
        $('.int_p').text(value-25)
      }
    }
  });
});
	
	
$(document).ready(function () {
  $(function() {
    setInterval(function() {
      var total = 0;
      $('.toCount').each(function() {
        total += parseFloat($(this).val());
      });
      $('#total').val((total).toFixed(2));
    },500);
  });
});
$(".mm").keydown(function (e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
  // Allow: Ctrl+A, Command+A
  (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
  // Allow: home, end, left, right, down, up
  (e.keyCode >= 35 && e.keyCode <= 40)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submeter Orçamento";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}
function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("add_gate").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}
function validateForm() {
  // This function deals with validation of the form fields
  var x, y, z, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
    if (!$("input[name='model']:checked").val()) {
      $("input[name='model']").addClass(' invalid');
      valid = false;
    }
    if(currentTab === 1) {
      if (!$("input[name='acabm']:checked").val()) {
        $("input[name='acabm']").addClass(' invalid');
        valid = false;
      }else {
        if (!$("input[name='color']:checked").val()) {
          $("input[name='color']").addClass(' invalid');
          valid = false;
        }
      }
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}
function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}
</script>
@endsection