@extends('layouts.front.app')

@section('content')

<section>

  <div class="container my-2">
    <nav>
      <ol class="breadcrumb grey lighten-3 mt-3">
        <li>
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold"> <i class="fa fa-home"></i> Home</a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        <li class="active fosco-text">Fale conosco </li>
      </ol>
    </nav>
  </div>

</section>

<section>

  <div class="container my-2">

    <div class="card p-3 my-3">

      <h2 class="font-abeezee font-weight-bold text-center my-4">Fale conosco</h2>

      <p class="text-center w-responsive mx-auto mb-5">
        Você tem alguma pergunta? Por favor, não hesite em nos contatar diretamente.
        Nossa equipe irá lhe responder dentro de alguns instantes.
      </p>

      <div class="row">

        <div class="col-md-8 ml-2 mb-md-0 mb-5">
          <form id="contact-form" name="contact-form" action="{{ route('envie.contato') }}" method="POST">
            {{ csrf_field() }}

            <input type="hidden" name="_method" value="post">

            <div class="my-3">
              <label for="nome">Nome completo <span class="red-text">*</span></label>
              <input type="text" id="name" name="name" class="form-control" value="{!! (auth()->check()) ? auth()->user()->name : '' !!}" required>
              <input type="hidden" name="id_customer" value="{!! (auth()->check()) ? auth()->user()->id : '' !!}">
            </div>

            <div class="my-3">
              <label for="email">Email <span class="red-text">*</span></label>
              <input type="email" id="email" name="email" class="form-control" value="{!! (auth()->check()) ? auth()->user()->email : '' !!}" required>
            </div>

            <div class="my-3">
              <label for="empresa">Empresa</label>
              <input type="text" id="empresa" name="empresa" class="form-control">
            </div>

            <div class="my-3">
              <label for="phone">Telefone <span class="red-text">*</span></label>
              <input type="text" id="phone" name="phone" class="form-control" maxlength="11" required>
            </div>

            <div class="my-3">
              <label for="state_code">Estado <span class="red-text">*</span></label>
              <select class="browser-default custom-select" name="uf" id="state_code" required>
              </select>
            </div>

            <div class="my-3">
              <label for="cidade">Cidade <span class="red-text">*</span></label>
              <input type="text" id="cidade" name="cidade" class="form-control" required>
            </div>

            <div class="my-3">
              <label for="message">Mensagem <span class="red-text">*</span></label>
              <textarea type="text" name="message" id="message" rows="4" class="form-control" required></textarea>
            </div>

            <div>
              {!! htmlFormSnippet() !!}
            </div>

            <div class="text-center text-md-right">
              <button type="submit" class="btn btn-xs box-green">
                Enviar <i class="fas fa-check ml-1"></i>
              </button>
            </div>

          </form>

          {{--  <div class="text-center text-md-right">
            <a class="btn btn-xs box-green" onclick="document.getElementById('contact-form').submit();">
              Enviar <i class="fas fa-check ml-1"></i>
            </a>
          </div>--}}

          <div class="status"></div>

        </div>

        <div class="col-md-3 text-center">
          <ul class="list-unstyled mb-0">

            <li>
              <a href="https://goo.gl/maps/QzMamjFe4HCi2ABL9" class="fosco-text" target="_blank">
                <i class="fas fa-map-marker-alt fa-2x"></i>
                <p>R. Noeli Nunez Ramos, 598 <br/> São Sebastião <br> São José dos Pinhais <br/> PR  82010-140</p>
              </a>
            </li>

            <li>
              <a href="tel:{!! config('shop.phone') !!}" class="fosco-text">
                <i class="fas fa-phone mt-4 fa-2x"></i>
                <p>{!! config('shop.phone') !!}</p>
              </a>
            </li>

            <li>
              <a href="mailto:{!! config('shop.email_aprovacao') !!}" class="fosco-text">
                <i class="fas fa-envelope mt-4 fa-2x"></i>
                <p>{!! config('shop.email_aprovacao') !!}</p>
              </a>
            </li>

          </ul>
        </div>

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

</section>

@endsection

@section("js")
<script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8"></script>

<script type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content

  $(function(){

    $('#phone').mask('(99) 9 9999-9999')

    const callState = _ => {
      const url = '/api/estado/'

      axios.get(url, {headers: {'Accept': 'application/json'}})
      .then(response => {
        let _htmlOptions = null

        $(response.data).each(function(i,estado){
          const select = estado.uf == "PR" ? "selected" : ""
          _htmlOptions += `<option value="${estado.uf}" ${select}>${estado.nome_uf}</option> `
        });
        $('#state_code').append(_htmlOptions)
      })
    }
    callState()

  })

</script>
@endsection