@extends('layouts.front.app')

@section('content')

<section>
  <div class="container my-2">

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

  </div>
</section>

<section>

  <div class="container my-2">

    <div class="p-3 mb-4 card shadow-1">

      @include('layouts.errors-and-messages')

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

      <p class="mx-auto mb-5 text-center w-responsive">
        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="mb-5 ml-2 col-md-6 mb-md-0">
          <form id="contact-form" name="contact-form" action="{{ route('envie.contato') }}" method="POST">
            {{ csrf_field() }}

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

            <div class="row">

              <div class="col-md-6">
                <div class="mb-0 md-form">
                  <input type="text" id="name" name="name" class="form-control" required value="{!! (auth()->check()) ? auth()->user()->name : '' !!}">
                  <input type="hidden" name="id_customer" value="{!! (auth()->check()) ? auth()->user()->id : '' !!}">
                  <label for="name" class="">Seu nome</label>
                </div>
              </div>

              <div class="col-md-6">
                <div class="mb-0 md-form">
                  <input type="text" id="email" name="email" class="form-control" required value="{!! (auth()->check()) ? auth()->user()->email : '' !!}">
                  <label for="email">Seu email <span class="text-danger">*</span></label>
                </div>
              </div>

            </div>

            <div class="row">

              <div class="col-md-12">
                <div class="mb-0 md-form">
                  <input type="text" id="subject" name="subject" class="form-control" required>
                  <label for="subject">Assunto</label>
                </div>
              </div>

            </div>

            <div class="row">

              <div class="col-md-12">

                <div class="md-form">
                  <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" required></textarea>
                  <label for="message">Sua mensagem <span class="text-danger">*</span></label>
                </div>

              </div>
            </div>

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

            <button type="submit" class="float-right btn btn-lg box-green">
              Enviar <i class="ml-1 fas fa-check fa-lg"></i>
            </button>
          </form>

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

        </div>

        <div class="text-center col-md">
          <div class="row">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14407.0605305342!2d-49.2015342!3d-25.4795169!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x54056e1131590d1e!2sEletriza%20Materiais%20El%C3%A9tricos%20Curitiba!5e0!3m2!1spt-BR!2sbr!4v1615386751961!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

            {{--  <a href="https://g.page/Eletriza?share" class="fosco-text" target="_blank">
              <i class="fas fa-map-marker-alt fa-2x"></i>
              <p>Rua Atílio Piotto, 150<br> Curitiba - PR <br/> 81590-060</p>
            </a>  --}}
          </div>
          <div class="row">
            <div class="col-md-6">
              <a href="tel:+55413226-4366" class="fosco-text">
                <i class="mt-4 fas fa-phone fa-2x"></i>
                <p>+55 (41) 3226-4366</p>
              </a>
            </div>
            <div class="col-md-6">
              <a href="mailto:contato@eletriza.com.br" class="fosco-text">
                <i class="mt-4 fas fa-envelope fa-2x"></i>
                <p>contato@eletriza.com.br</p>
              </a>

            </div>
          </div>



        </div>

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

</section>

@endsection