@extends('layouts.frontend-master')

@section('title', 'Contact Us')

@section('content')
  
  <!-- Breadcrumbs -->
  <section class="bg-gray-7">
    <div class="breadcrumbs-custom bg-image" style="background-image: url(images/bg-breadcrumbs.jpeg);">
      <div class="container">
        <h1 class="breadcrumbs-custom-title">Contact Us</h1>
        <div class="breadcrumbs-custom-decor"></div>
      </div>
    </div>
    <div class="container">
      <ul class="breadcrumbs-custom-path">
        <li><a href="{{ route('home') }}">Home</a></li>
        <li class="active">Contact Us</li>
      </ul>
    </div>
  </section>

  <!-- Contacts-->
  <section class="section section-lg bg-default text-md-left">
    <div class="container">
      <div class="row row-60 justify-content-center">
        <div class="col-lg-8">
          <h2>Get in Touch</h2>
          @if(count($errors) > 0)
              <br>
              <div style="background: #f8d7da; border: 1px solid #f5c2c7; padding: 1rem 1rem; margin-bottom: 1rem; border-radius: 0.25rem;">
                  <x-jet-validation-errors class="mb-4 my-2" style="color: #842029 !important;" />
              </div>
          @endif
          <form class="rd-form" data-form-output="form-output-global" method="post" action="{{ route('submit.contact') }}">
            @csrf
            
            <div class="row row-20 gutters-20">
              <div class="col-md-6">
                <div class="form-wrap">
                  <input class="form-input" id="contact-your-name-5" type="text" name="name" data-constraints="@Required">
                  <label class="form-label" for="contact-your-name-5">Your Name*</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <input class="form-input" id="contact-email-5" type="email" name="email" data-constraints="@Email @Required">
                  <label class="form-label" for="contact-email-5">Your E-mail*</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <!--Select 2-->
                  <select class="form-input" name="service" data-minimum-results-for-search="Infinity" data-constraints="@Required">
                    <option value="">Select a Service</option>

                      <optgroup label="Security Services">
                      @foreach($sec_services as $service)
                          <option value="{{ $service->id }}">{{ $service->name }}</option>
                      @endforeach

                      <optgroup label="Electrical Services">
                      @foreach($elec_services as $service)
                          <option value="{{ $service->id }}">{{ $service->name }}</option>
                      @endforeach

                      <optgroup label="Air Conditioning">
                      @foreach($airc_services as $service)
                          <option value="{{ $service->id }}">{{ $service->name }}</option>
                      @endforeach

                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <input class="form-input" id="contact-phone-5" type="text" name="phone" data-constraints="@Numeric">
                  <label class="form-label" for="contact-phone-5">Your Phone*</label>
                </div>
              </div>
              <div class="col-12">
                <div class="form-wrap">
                  <label class="form-label" for="contact-message-5">Message</label>
                  <textarea class="form-input textarea-lg" id="contact-message-5" name="message" data-constraints="@Required"></textarea>
                </div>
              </div>
            </div>
            <button class="button button-primary button-winona" type="submit">Contact us</button>
          </form>
        </div>
        <div class="col-lg-4">
          <div class="aside-contacts">
            <div class="row row-30">
              <div class="col-sm-6 col-lg-12 aside-contacts-item">
                <p class="aside-contacts-title">Get social</p>
                <ul class="list-inline contacts-social-list list-inline-sm">
                    <li><a class="icon icomoon icon-facebook" href="{{ $contact->facebook }}"></a></li>
                    <li><a class="icon icomoon icon-instagram" href="{{ $contact->instagram }}"></a></li>
                    <li><a class="icon icomoon" href="{{ $contact->google }}"><span class="fa fa-google" style="font-size: 21px;"></span></a></li>
                </ul>
              </div>
              <div class="col-sm-6 col-lg-12 aside-contacts-item">
                <p class="aside-contacts-title">Phone</p>
                <div class="unit unit-spacing-xs justify-content-center justify-content-md-start">
                  <div class="unit-left"><span class="icon mdi mdi-phone"></span></div>
                  <div class="unit-body"><a class="phone" href="tel:{{ $contact->phone }}">{{ $contact->phone }}</a></div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-12 aside-contacts-item">
                <p class="aside-contacts-title">E-mail</p>
                <div class="unit unit-spacing-xs justify-content-center justify-content-md-start">
                  <div class="unit-left"><span class="icon mdi mdi-email-outline"></span></div>
                  <div class="unit-body"><a class="mail" href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-12 aside-contacts-item">
                <p class="aside-contacts-title">Address</p>
                <div class="unit unit-spacing-xs justify-content-center justify-content-md-start">
                  <div class="unit-left"><span class="icon mdi mdi-map-marker"></span></div>
                  <div class="unit-body"><a class="address" href="https://maps.google.com/?q={{ $contact->address }}" target="_blank">{{ $contact->address }}</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('styles')
  <style type="text/css">
      .select2-result-label {
          text-align: center !important;
      }
  </style>
@endsection