@extends('front.app')
@section('content')
<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gy-10 gx-lg-8 gx-xl-12 align-items-center">
      <div class="col-lg-7 order-lg-2 position-relative">
        <figure><img class="w-auto" src="{{asset('front/img/illustrations/i14.png')}}" srcset="{{asset('front/img/illustrations/i14@2x.png')}} 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="display-4 mb-3">{{__('different.title_page')}}</h2>
        <p class="lead fs-lg red-color">{{__('module.contact_data')}}</p>
        <p>{{__('different.title_page_small')}}</p>
        <div class="d-flex fontWeightBold m-0">
          <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
          <div>
            <p>{{__('different.address')}}</p>
            <p>{{__('different.address_detailed')}}</p>
          </div>
        </div>
        <div class="d-flex">
          <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
          <div>
            <p>{{__('module.phone')}} <strong>{{__('different.phone')}}</strong></p>
            <p>{{__('module.fax')}} <strong> {{__('different.fax')}}</strong></p>
          </div>
        </div>
        <div class="d-flex">
          <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-envelope"></i> </div>
          <div>
            <p>{{__('module.email_address')}} <a href="mailto:{{__('different.email')}}">{{__('different.email')}}</a></p>
          </div>
        </div>
      </div>

      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-xl-10 mx-auto">
        <div class="card">
          <div class="row gx-0">
            <div class="col-lg-6 align-self-stretch">
              <div class="map map-full rounded-top rounded-lg-start">
                {!! __('different.contacts_maps') !!}
              </div>
              <!-- /.map -->
            </div>
            <!--/column -->
            <div class="col-lg-6">
              <div class="p-4">
                <h3 class="red-color mb-3 text-center">{{__('module.contact_forms')}}</h3>
                <form method="POST" action="{{ route('contact') }}" id="myForm">
                    @csrf
                  <div class="d-flex flex-row">
                    <div class="input-group mb-3">
                      <x-input id="name" class="block mt-1 w-full @error('name') is-invalid @enderror"
                            type="text" name="name" :value="old('name')" placeholder="{{__('module.form_name_placeholder')}}" required autofocus />
                        @error('name')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                    </div>
                    <!--/div -->
                    <div class="d-flex flex-row">
                    </div>
                    <!--/div -->
                    <div class="d-flex flex-row">

                    </div>
                    <!--/div -->
                  </div>
                  <div class="d-flex flex-row">
                    <div class="input-group mb-3">
                      <x-input id="email" class="block mt-1 w-full @error('email') is-invalid @enderror"
                            type="text" name="email" :value="old('email')" placeholder="{{__('module.form_email_placeholder')}}" required autofocus />
                        @error('email')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                    </div>
                  </div>
                  <div class="d-flex flex-row">
                    <div class="input-group mb-3">
                      <x-input id="phone" class="block mt-1 w-full @error('phone') is-invalid @enderror"
                            type="tel" name="phone" :value="old('phone')" placeholder="{{__('module.form_mobile_placeholder')}}" required autofocus />
                        @error('phone')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                    </div>
                  </div>
                  <div class="d-flex flex-row">
                    <div class="input-group mb-3">
                      <x-input id="city" class="block mt-1 w-full @error('city') is-invalid @enderror"
                            type="text" name="city" :value="old('city')" placeholder="{{__('module.form_city_placeholder')}}" required autofocus />
                        @error('city')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                    </div>
                  </div>
                  <div class="form-floating">
                  <textarea name="comment" id="comment" class="form-control" placeholder="{{__('module.leave_a_comment')}}" style="height: 100px;" required autofocus></textarea>
                    
                    <label for="comment">{{__('module.leave_a_comment')}}</label>
                  </div>
                  <div class="input-group mb-3 mt-3 flex-nowrap">
                  <label for="agree" class="inline-flex items-center">
                            <input id="agree" type="checkbox" class="@error('agree') is-invalid @enderror" rounded
                                border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring
                                focus:ring-indigo-200 focus:ring-opacity-50 name="agree" required>
                                <p class="ml-5 text-sm text-gray-600">{{__('module.terms_part_1')}} <a href="/termeni-si-conditii">{{__('module.terms_part_2')}} </a>{{__('module.terms_part_3')}} <a href="/politica-confidentialitate">{{__('module.terms_part_4')}} </a>{{__('module.terms_part_5')}}</p>
                        </label>
                        @error('agree')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                  </div>
                  <div class="d-flex justify-content-center align-items-center gap-3">
                    <button type="submit" class="btn btn-danger red-color-background">{{__('module.send_email')}}</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="resetForm();">{{__('module.reset')}}</button>
                  </div>
                </form>
              </div>
              <!--/div -->
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->
@endsection
<script>
function resetForm() {
    document.getElementById("myForm").reset();
}
</script>