@section('title', __('contato.title') . ' - ' . config('app.name'))
@section('description', __('contato.description'))
@section('tags', __('contato.tags'))
@section('image', asset('/img/logo.png'))

@extends('layouts.app')

@section('head')

@endsection

@section('content')

<div id="root">
   <div class="container-fluid" id="contato">
     <div class="row h-auto">
        <div class="col-md-6 h-auto px-0">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1834.1288113514292!2d-47.04690341153951!3d-23.160795678731454!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf37a2e142c30b%3A0x9b56ce9bf7bd5adf!2sBrasil%20Tools!5e0!3m2!1spt-BR!2sbr!4v1701896693221!5m2!1spt-BR!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <div class="col-md-6 h-auto px-0">
            <div class="box h-100 p-5" style="background: linear-gradient(149.69deg, #002E63 23.69%, #0AAC5F 200.41%), #131313;">
                <div class="row align-items-center">
                    <div class="h-auto p-md-5">
                        <a href="https://web.whatsapp.com/send?phone={{config('app.whatsapp')}}" target="_Blank">
                            <div class="row my-3">
                                <div class="col-md-1 col-2">
                                    <ion-icon name="logo-whatsapp"></ion-icon>
                                </div>
                                <div class="col-10">
                                    <p class="my-0">Whatsapp</p>
                                   {{config('app.whatsapp_texto')}}
                                </div>
                           </div>
                        </a>
                        <a href="mailto:marcelo@brasiltools.com">
                            <div class="row my-3">
                                <div class="col-md-1 col-2">
                                  <ion-icon name="mail"></ion-icon>
                                </div>
                                <div class="col-10">
                                    <p class="my-0">E-mail</p>
                                marcelo@brasiltools.com
                                </div>
                           </div>
                        </a>

                        <a href="https://maps.app.goo.gl/KgjndbCnxBerVerB7" target="_Blank">
                         <div class="row my-3">
                             <div class="col-md-1 col-2">
                              <ion-icon name="location-sharp"></ion-icon>
                             </div>
                             <div class="col-10">
                                <p class="my-0">Endereço</p>
                                13295-638 Rua Ludovico Lorençon, 120 | Eco Park Empresarial | Itupeva | SP
                             </div>
                        </div>
                     </a>
                    </div>
                </div>
            </div>
        </div>
     </div>
   </div>

   <div class="container my-5 pt-5">
    <div class="px-lg-5">
        <h1 class="text-center">{{ __('contato.header') }}</h1>
        <form action="" method="post" id="formContato">
          @csrf
          <div class="row">
             <div class="col-md-4 mb-4">
                <input type="text" placeholder="{{ __('contato.form.nome') }}" class="p-3" name="name" id="name" required>
             </div>
             <div class="col-md-4 mb-4">
                <input type="email" placeholder="{{ __('contato.form.email') }}" class="p-3" name="email" id="email" required>
             </div>
             <div class="col-md-4 mb-4">
                <input type="tel" maxlength="15" placeholder="{{ __('contato.form.telefone') }}" class="p-3" name="telefone" id="telefone" required onkeyup="handlePhone(event)" >
             </div>
             <div class="col-md-12 mb-4">
                <textarea type="text" placeholder="{{ __('contato.form.mensagem') }}" class="p-3" name="content" id="content" required style="height:200px;"></textarea>
             </div>

             <div class="d-flex justify-content-center">
                 <button type="submit" class="btn btn-blue px-5 " style="padding-right: 3rem!important;padding-left:3rem!important">{{ __('contato.form.botao_enviar') }}</button>
             </div>
          </div>
        </form>
    </div>
   </div>
</div>


<script>

const handlePhone = (event) => {
  let input = event.target
  input.value = phoneMask(input.value)
}

const phoneMask = (value) => {
  if (!value) return ""
  value = value.replace(/\D/g,'')
  value = value.replace(/(\d{2})(\d)/,"($1) $2")
  value = value.replace(/(\d)(\d{4})$/,"$1-$2")
  return value
}
  </script>

<script>
    $("#formContato").submit(function() {
        event.preventDefault();
        console.log($(this).serialize());
        $.ajax({
            type: "POST",
            url: "{{ route('Contato:contato') }}",
            data: $(this).serialize(),
            dataType: "json",
            success: function(response) {
                alert("Obrigado! Recebemos seu e-mail, entraremos em contato em breve!");
            },
            error: function(response) {
                alert("Ocorreu um erro ao enviar seu e-mail. Por favor, tente novamente.");
                console.log(response);
            }
        });
    });
</script>
@endsection