@extends('main')
@section('content')

@include('includes.menu2')

<div class="blog contatos">
  <div class="container">
    <div class="row ">

      <div class="col-xs-12">
        <div class="linha-titulo" data-aos="fade-down" data-aos-easing="ease" data-aos-delay="200" data-aos-duration="2000" ></div>
        <h1 data-aos="fade-up" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000" >
          CONTATO
        </h1>
      </div>
      <form class="form-horizontal" ction="{{route('contato')}}" method="POST" data-aos="fade-up" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
        {{ csrf_field() }}
        <div class="form-group">
          <div class="col-xs-12">
            <label>QUEM VOCÊ DESEJA CONTRATAR? </label>
            <select id="options" name="options" required class="form-control" onchange="optionCheck()">
              <option value="1" disabled selected>Selecione uma opção...</option>
              <option value="2">Clínica Kore</option>
              <option value="3">Andréa Severa</option>
              <option value="4">Luciana Miele</option>
            </select>
          </div>
          <div id="hiddenDiv" style="opacity: 0.3; pointer-events: none; cursor: default;">
            <div class="col-md-6">
              <div class="row">
                <div class="col-xs-12 campo-form"  data-aos="fade-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
                  <label class="label-espaco">NOME:</label>
                  <label for="inp" class="inp" >
                    <input type="text" name="nome" id="nome" placeholder="&nbsp;">
                    <span class="label">Digite seu nome</span>
                    <svg width="120px" height="26px" viewBox="0 0 120 26">
                      <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path>
                    </svg>
                    <span class="border"></span>
                  </label>
                </div>
                <div class="col-xs-12 campo-form"  data-aos="fade-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
                  <label class="label-espaco">E-MAIL:</label>
                  <label for="inp2" class="inp" >
                    <input type="email" name="email" id="email" placeholder="&nbsp;">
                    <span class="label">Digite seu email</span>
                    <svg width="120px" height="26px" viewBox="0 0 120 26">
                      <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path>
                    </svg>
                    <span class="border"></span>
                  </label>
                </div>
                <div class="col-xs-12 campo-form"  data-aos="fade-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
                  <label class="label-espaco">TELEFONE:</label>
                  <label for="inp3" class="inp" >
                    <input type="text" name="telefone" id="telefone" placeholder="&nbsp;">
                    <span class="label">Digite seu telefone</span>
                    <svg width="120px" height="26px" viewBox="0 0 120 26">
                      <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path>
                    </svg>
                    <span class="border"></span>
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="row">
                <div class="col-xs-12 campo-form"  data-aos="fade-left" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
                  <label class="label-espaco">MENSAGEM:</label>
                  <label for="inp4" class="inp inp-textarea">
                    <input type="text" iname="mensagem" id="mensagem" placeholder="&nbsp;">
                    <span class="label">Digite uma mensagem</span>
                    <svg width="120px" height="26px" viewBox="0 0 120 26">
                      <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path>
                    </svg>
                    <span class="border"></span>
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div id="file-upload-form" class="uploader">
                <input id="anexo" type="file" name="anexo" accept="image/*" />

                <label for="anexo" id="file-drag">
                  <img id="file-image" src="#" alt="Preview" class="hidden">
                  <div id="start">
                    <i class="fa fa-download" aria-hidden="true"></i>
                    <div>Selecione um arquivo (JPG, JPEG, PDF, GIF, PNG)</div>
                    <div id="notimage" class="hidden">Por favor selecione um arquivo JPG, JPEG, PDF, GIF ou PNG</div>
                    <span id="anexo-btn" class="btn btn-primary">SELECIONE UM ARQUIVO</span>
                  </div>
                  <div id="response" class="hidden">
                    <div id="messages"></div>
                    <progress class="progress" id="file-progress" value="0">
                      <span>0</span>%
                    </progress>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </div>
        <button data-aos="fade-up" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000" type="submit" class="btn-enviar" >ENVIAR 
          <i class="icon-right-arrow-circular-button"></i>
        </button>
      </form>
      <div class="endereco">

        <p data-aos="fade-up-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
          <b>DRA. ANDRÉA SEVERA</b><br>
          54 3055.2201 | <a href="mailto:drandrea@clinicakore.com.br">drandrea@clinicakore.com.br</a>
        </p>
        <p data-aos="fade-up-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
          <b>DRA. LUCIANA MIELE</b><br>
          54 3452.5922 | <a href="mailto:draluciana@clinicakore.com.br">draluciana@clinicakore.com.br</a>
        </p>
        <p data-aos="fade-up-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
          <b>CLINÍCA KÓRE</b><br>
          54 3701.4554 | <a href="mailto:contato@clinicakore.com.br">contato@clinicakore.com.br</a><br>
          Millennium Office | R. Senador Salgado Filho, 203 | Sala 301<br>
          São Bento | Bento Gonçalves | RS | CEP 95700-360<br>
        </p>
        <p data-aos="fade-up-right" data-aos-easing="ease" data-aos-delay="100" data-aos-duration="2000">
          <a href="">FACEBOOK</a>    <a href="">INSTAGRAM</a>
        </p>
      </div>
    </div>
  </div>
</div>


<iframe style="margin-top: 100px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3483.7696243238574!2d-51.51486104856474!3d-29.171460298095592!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjnCsDEwJzE3LjMiUyA1McKwMzAnNDUuNiJX!5e0!3m2!1spt-BR!2sbr!4v1536091614371" width="100%" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>


@endsection

@push('js')
<script src="https://static.jsbin.com/js/render/edit.js?4.1.3"></script>

<script type="text/javascript">
  function optionCheck(){
    var option = document.getElementById("options").value;
    if(option == "2"){
      document.getElementById("hiddenDiv").style.opacity ="1";
      document.getElementById("hiddenDiv").style.pointerEvents ="all";
      document.getElementById("hiddenDiv").style.cursor ="auto";
    }
    if(option == "3"){
      document.getElementById("hiddenDiv").style.opacity ="1";
      document.getElementById("hiddenDiv").style.pointerEvents ="all";
      document.getElementById("hiddenDiv").style.cursor ="auto";
    }
    if(option == "4"){
      document.getElementById("hiddenDiv").style.opacity ="1";
      document.getElementById("hiddenDiv").style.pointerEvents ="all";
      document.getElementById("hiddenDiv").style.cursor ="auto";
    }
  }

</script>
<script type="text/javascript">
    // File Upload
// 
function ekUpload(){
  function Init() {

    console.log("Upload Initialised");

    var fileSelect    = document.getElementById('anexo'),
    fileDrag      = document.getElementById('file-drag'),
    submitButton  = document.getElementById('submit-button');

    fileSelect.addEventListener('change', fileSelectHandler, false);

    // Is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
      // File Drop
      fileDrag.addEventListener('dragover', fileDragHover, false);
      fileDrag.addEventListener('dragleave', fileDragHover, false);
      fileDrag.addEventListener('drop', fileSelectHandler, false);
    }
  }

  function fileDragHover(e) {
    var fileDrag = document.getElementById('file-drag');

    e.stopPropagation();
    e.preventDefault();

    fileDrag.className = (e.type === 'dragover' ? 'hover' : 'modal-body anexo');
  }

  function fileSelectHandler(e) {
    // Fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // Cancel event and hover styling
    fileDragHover(e);

    // Process all File objects
    for (var i = 0, f; f = files[i]; i++) {
      parseFile(f);
      uploadFile(f);
    }
  }

  // Output
  function output(msg) {
    // Response
    var m = document.getElementById('messages');
    m.innerHTML = msg;
  }

  function parseFile(file) {

    console.log(file.name);
    output(
      '<strong>' + encodeURI(file.name) + '</strong>'
      );
    
    // var fileType = file.type;
    // console.log(fileType);
    var imageName = file.name;

    var isGood = (/\.(?=gif|jpg|png|pdf|jpeg)/gi).test(imageName);
    if (isGood) {
      document.getElementById('start').classList.add("hidden");
      document.getElementById('response').classList.remove("hidden");
      document.getElementById('notimage').classList.add("hidden");
      // Thumbnail Preview
      document.getElementById('file-image').classList.remove("hidden");
      document.getElementById('file-image').src = URL.createObjectURL(file);
    }
    else {
      document.getElementById('file-image').classList.add("hidden");
      document.getElementById('notimage').classList.remove("hidden");
      document.getElementById('start').classList.remove("hidden");
      document.getElementById('response').classList.add("hidden");
      document.getElementById("file-upload-form").reset();
    }
  }

  function setProgressMaxValue(e) {
    var pBar = document.getElementById('file-progress');

    if (e.lengthComputable) {
      pBar.max = e.total;
    }
  }

  function updateFileProgress(e) {
    var pBar = document.getElementById('file-progress');

    if (e.lengthComputable) {
      pBar.value = e.loaded;
    }
  }

  function uploadFile(file) {

    var xhr = new XMLHttpRequest(),
    fileInput = document.getElementById('class-roster-file'),
    pBar = document.getElementById('file-progress'),
      fileSizeLimit = 1024; // In MB
      if (xhr.upload) {
      // Check if file is less than x MB
      if (file.size <= fileSizeLimit * 1024 * 1024) {
        // Progress bar
        pBar.style.display = 'inline';
        xhr.upload.addEventListener('loadstart', setProgressMaxValue, false);
        xhr.upload.addEventListener('progress', updateFileProgress, false);

        // File received / failed
        xhr.onreadystatechange = function(e) {
          if (xhr.readyState == 4) {
            // Everything is good!

            // progress.className = (xhr.status == 200 ? "success" : "failure");
            // document.location.reload(true);
          }
        };

        // Start upload
        xhr.open('POST', document.getElementById('file-upload-form').action, true);
        xhr.setRequestHeader('X-File-Name', file.name);
        xhr.setRequestHeader('X-File-Size', file.size);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        xhr.send(file);
      } else {
        output('Please upload a smaller file (< ' + fileSizeLimit + ' MB).');
      }
    }
  }

  // Check for the various File API support.
  if (window.File && window.FileList && window.FileReader) {
    Init();
  } else {
    document.getElementById('file-drag').style.display = 'none';
  }
}
ekUpload();
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDydmGb4zver99MuFgthL63_R5kjJ52Plo&callback=initMap"></script>



@endpush