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

@extends('layouts.app')

@section('head')

@endsection

@section('content')

@php
$servicos = [
  [
    "title" => __("solucoes.servicos.projeto_execucao.title"),
    "image" => "img/icon2.png",
    "text" => __("solucoes.servicos.projeto_execucao.text")
  ],
  [
    "title" => __("solucoes.servicos.usinagem_precisao.title"),
    "image" => "img/icon3.png",
    "text" => __("solucoes.servicos.usinagem_precisao.text")
  ],
  [
    "title" => __("solucoes.servicos.manutencao_preventiva.title"),
    "image" => "img/icon4.png",
    "text" => __("solucoes.servicos.manutencao_preventiva.text")
  ],
  [
    "title" => __("solucoes.servicos.manutencao_corretiva.title"),
    "image" => "img/icon5.png",
    "text" => __("solucoes.servicos.manutencao_corretiva.text")
  ],
  [
    "title" => __("solucoes.servicos.texturizacao_quimica.title"),
    "image" => "img/icon6.png",
    "text" => __("solucoes.servicos.texturizacao_quimica.text")
  ],
  [
    "title" => __("solucoes.servicos.gravacao_laser.title"),
    "image" => "img/icon7.png",
    "text" => __("solucoes.servicos.gravacao_laser.text")
  ],
  [
    "title" => __("solucoes.servicos.solda_laser.title"),
    "image" => "img/icon8.png",
    "text" => __("solucoes.servicos.solda_laser.text")
  ],
  [
    "title" => __("solucoes.servicos.tratamentos_superficiais.title"),
    "image" => "img/icon9.png",
    "text" => __("solucoes.servicos.tratamentos_superficiais.text")
  ],
  [
    "title" => __("solucoes.servicos.polimento_tecnico.title"),
    "image" => "img/icon10.png",
    "text" => __("solucoes.servicos.polimento_tecnico.text")
  ],
];
@endphp

<div id="root">

   <section id="header" class="py-5">
      <h1 class="text-white text-center">{{ __('solucoes.header') }}</h1>
   </section>

   <div class="container my-5">
      <div class="row h-auto justify-content-center">
        @foreach ($servicos as $servico)
        <div class="col-lg-3 col-md-4 my-3 h-auto">
            <div class="h-100 p-4" style="background: #F5F5F5;border: 1px solid #E3E3E3;border-radius: 8px;border-bottom:5px solid#0AAC5F;">
              <img src="{{asset($servico["image"])}}" class="img-fluid" alt="">
              <h1 class="ft-2-4 my-3" style="color: #002E63">{{$servico["title"]}}</h1>
              <p class="text-black mb-4">{{$servico["text"]}}</p>
            </div>
         </div>
        @endforeach
      </div>
   </div>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        slidesPerView:1,
        loop:true,
      centeredSlides: true,
      navigation: {
        nextEl: ".arow-next",
        prevEl: ".arow-prev",
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });
    var swiper = new Swiper(".SolucoesSwiper", {
        spaceBetween: 30,
        slidesPerView:4,
        loop:true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    var swiper2 = new Swiper(".SlideSwiper", {
        spaceBetween: 30,
        slidesPerView:1,
        loop:true,
      centeredSlides: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      effect:"fade",
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });

    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