@extends('layouts.site')

@section('title', __('Contact') . ' · Digital Sandi Informasi')

@section('content')

    @include('partials.navbar')

    <div class="page-content">
      <!-- Contact Section  -->
      <section id="contact" class="section" data-stellar-background-ratio="-0.2">
        <div class="contact-form">
          <div class="container">
            @php $team = $sections['team'] ?? null; @endphp
            <div class="team-subsection">
              <div class="section-header">
                <h3 class="license-subsection-title">{{ $team->title ?? 'Meet Our Team' }}</h3>
                <hr class="lines">
                <p class="section-subtitle">{{ $team?->subtitle }}</p>
              </div>
              @if ($team?->content)
                <div class="team-map">
                  <iframe src="{{ $team->content }}" width="1500" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
              @endif
            </div>

            <div class="row">
              <div class="col-lg-6 col-sm-6 col-xs-12">
                @php
                  $contact = $sections['contact'] ?? null;
                  $contactMeta = $contact->meta ?? [];
                @endphp
                <div class="contact-us">
                  <h3>{{ $contact->title ?? 'Contact With us' }}</h3>
                  <div class="contact-address">
                    <p>{{ $contact?->content }}</p>
                    <p class="phone">{{ __('Phone') }}: <span>{{ $contactMeta['phone'] ?? '' }}</span></p>
                    <p class="email">{{ __('E-mail') }}: <span>{{ $contactMeta['email'] ?? '' }}</span></p>
                  </div>
                  <div class="social-icons">
                    <ul>
                      @foreach ($contact->items ?? [] as $item)
                        <li class="{{ \Illuminate\Support\Str::slug(strtolower($item->title)) }}">
                          <a href="{{ $item->link ?? '#' }}"><i class="{{ $item->icon }}"></i></a>
                        </li>
                      @endforeach
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="contact-block">
                  <form id="contactForm">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                            <form action="php/form-process.php" method="post">
                          <input type="text" class="form-control" id="name" name="name" placeholder="{{ __('Your Name') }}" required data-error="{{ __('Please enter your name') }}">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <input type="text" placeholder="{{ __('Your Email') }}" id="email" class="form-control" name="name" required data-error="{{ __('Please enter your email') }}">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <textarea class="form-control" id="message" placeholder="{{ __('Your Message') }}" rows="8" data-error="{{ __('Write your message') }}" required></textarea>
                          <div class="help-block with-errors"></div>
                        </div>
                        <div class="submit-button text-center">
                          <button class="btn btn-common" id="submit" type="submit">{{ __('Send Message') }}</button>
                          <div id="msgSubmit" class="h3 text-center hidden"></div>
                          <div class="clearfix"></div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Contact Section End -->
    </div>

@endsection