@extends('template.main')

@section('content')
<section class="contact-1">
    <div class="container">
      <div class="row">
        <div class="col-xl-6 col-lg-8 col-md-12 mr-auto">
          <div class="section-title">
            <div class="title-effect">
              <div class="bar bar-top"></div>
              <div class="bar bar-right"></div>
              <div class="bar bar-bottom"></div>
              <div class="bar bar-left"></div>
            </div>
            <h6>{!! $content->section_2_small_title !!}</h6>
            <h2>{!! $content->section_2_big_title !!}</h2>
            <p>{!! $content->section_2_desc !!}</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
            <div class="messages"></div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>{{ $content->section_2_1 }}</label>
                  <input id="form_name" type="text" name="name" class="form-control first_name" placeholder="Type {{ $content->section_2_1 }}" required="required" data-error="{{ $content->section_2_1 }} is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>{{ $content->section_2_2 }}</label>
                  <input id="form_lastname" type="text" name="surname" class="form-control last_name" placeholder="Type {{ $content->section_2_2 }}" required="required" data-error="{{ $content->section_2_2 }} is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>{{ $content->section_2_3 }}</label>
                  <input id="form_email" type="text" name="email" class="form-control" placeholder="Type {{ $content->section_2_3 }}" required="required" data-error="{{ $content->section_2_3 }} is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>{{ $content->section_2_4 }}</label>
                  <input id="form_phone" type="text" name="phone" class="form-control" placeholder="Type {{ $content->section_2_4 }}" required="required" data-error="{{ $content->section_2_4 }} is required">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label>{{ $content->section_2_5 }}</label>
                  <textarea id="form_message" name="message" class="form-control" placeholder="Type {{ $content->section_2_2 }}" rows="4" required="required" data-error="Please,leave us a {{ $content->section_2_2 }}."></textarea>
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-12 mt-2">
                <button type="button" class="btn btn-theme btn-circle btn-add-form" data-text="{{ $content->section_2_btn }}">
                  @php
                      $word = '';
                  @endphp
                  @for($i = 0; $i <= strlen($content->section_2_btn) -1; $i++)
                    @php
                        $word .= '<span>' . $content->section_2_btn[$i] . '</span>';
                    @endphp
                  @endfor
                 {!! $word !!}
                </button>
              </div>
            </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="contact-info p-0 z-index-1">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4 col-md-12">
          <div class="contact-media"> <i class="flaticon-paper-plane"></i><span>Address:</span>
            <p>{{ $company->address }}</p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 md-mt-5">
          <div class="contact-media"> <i class="flaticon-email"></i><span>Email Address</span><a href="mailto:{{ $company->email }}"> {{ $company->email }}</a>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 md-mt-5">
          <div class="contact-media"> <i class="flaticon-social-media"></i><span>Phone Number</span><a href="tel:+62{{ $company->phone }}">+62{{ $company->phone }}</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="o-hidden p-0 custom-mt-10 z-index-0">
    <div class="container-fluid p-0">
      <div class="row align-items-center">
        <div class="col-md-12">
          <div class="map iframe-h-2">
            {!! $company->google_maps !!}
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('js')
<script>
$(document).ready(function() {
  $('body').on('click', '.btn-add-form', function() {
    let first_name = $('body').find('[name="name"]').val()
    let last_name = $('body').find('[name="name"]').val()
    let email = $('body').find('[name="email"]').val()
    let phone = $('body').find('[name="phone"]').val()
    let message = $('body').find('[name="message"]').val()

    $.ajax({
      type: 'POST',
      url: 'https://crm.bintorocorp.co.id/ApiBinggo/insert',
      data: {
        first_name,
        last_name,
        email,
        phone,
        message
      },
      beforeSend() {
        $('body').find('.btn-add-form').attr('data-text', 'Loading..')
        $('body').find('.btn-add-form').html(`
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>.</span>
          <span>.</span>
        `)
      },
      success(response) {
          $('body').find('.btn-add-form').attr('data-text', "Success")
          $('body').find('.btn-add-form').html(`
          <span>S</span>
          <span>u</span>
          <span>c</span>
          <span>c</span>
          <span>e</span>
          <span>s</span>
          <span>s</span>
        `)
        setTimeout(function(){
          $('body').find('.btn-add-form').attr('data-text', "{{ $content->section_2_btn }}")
          $('body').find('.btn-add-form').html("{{ $word }}")
        }, 3000)
      }
    })
  })
})
</script>
@endsection