@extends('layouts.frontend')
@section('content')

    <div class="d-inline header-area">
      <div class="container header-container">
        <div class="row no-gutters">
          <div class="col-md-6 mobile-img">
            <div class="div-img-mobile"></div>
          </div>
          <div class="col-md-6 text-sm-center text-md-left my-auto title-block">
            <img
              class="logo-header"
              src="{{asset('img')}}/sakti-main.webp"
              alt="main-logo"
            />
            <div class="header-text">
                          </div>
            <a class="btn border rounded btn-filled" id="full" role="button" href="#fitur"
              >Selengkapnya</a
            >
          </div>
          <div class="col-md-6 img-web">
            <div class="bg-img"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="white-bg">
      <div class="container feature-area" id="fitur">
        <div class="col title-block">
          <h3 class="text-center section-tittle">Mengapa Memilih SAKTI</h3>
          <div class="border rounded marker"></div>
        </div>
        <div class="row owl-carousel owl-theme">
          <div class="col item content-features">
            <img
              class="img-icon lazyloadimg"
              src="{{asset('img')}}/img-icon-1.webp"
              alt="feature-1"
            />
            <div class="feature-text">
                          </div>
          </div>
          <div class="col item">
            <img
              class="img-icon lazyloadimg"
              src="{{asset('img')}}/img-icon-2.webp"
              alt="feature-2"
            />
            <div class="feature-text">
                            </div>
          </div>
          <div class="col item">
            <img class="img-icon lazyloadimg" src="{{asset('img')}}/img-icon-3.webp"
            alt="feature-3" />
            <div class="feature-text">
                            </div>
          </div>
        </div>
      </div>
    </div>
    {{-- artikel --}}
        <div class="container feature-area" id="fitur">
            <!--
          <div class="col title-block">
            <h3 class="text-center section-tittle">Artikel</h3>
            <div class="border rounded marker"></div>
          </div>
          <div class="row">
            @foreach ($artikel as $item)
            <div class="col-md-4" style="padding:5px">
                <div class="card">
                <img src="{{'images'}}/{{$item->gambar}}" alt="" style="width:100%; height:auto">
                    <div class="card-body">
                    <span class="kategori">INFO SKK</span>
                    <a href="{{route('showartikel',['id' => $item->id])}}" class="link">
                         <h4 class="max-line">{{$item->judul}}</h4>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
          </div>
          <div class="dbn-next">
          <a class="btn btn-sm btn-danger" href="{{route('allartikel')}}">Artikel lainnya</a>
            </div>
            -->
        </div>

      {{-- artikel --}}
      <div class="white-bg" style="margin-top:20px">

    <div class="contact-area" id="kontak">
      <div class="container">
        <div class="col title-block">
          <h3 class="text-center section-tittle">Hubungi Kami</h3>
          <div class="border rounded marker"></div>
          <br>
          <center>
          Kami melayani permintaan presentasi, pelatihan/lokakarya, implementasi SAKTI dan pengembangan program aplikasi merdeka SAKTI dalam basis komunitas melalui SAKTI.Center.
          </center>
          
        </div>
        <div class="row">
          <div class="col-md-6">
            <form action={{route('pesan')}} method="post" id="contactform">
                {{ csrf_field() }}

                @if ($message = Session::get('berhasil'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </button>
                    {{$message}}
                </div>
                @elseif($message = Session::get('gagal'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        </button>
                        {{$message}}
                    </div>
                @endif

              <div class="form-group">
                <label for="nama">Nama Anda</label>
                <input
                  class="form-control"
                  type="text"
                  name="name"
                  placeholder="Mis: Asih"
                  id="name"
                  required
                />
              </div>
              <label for="email">Alamat Surel Aktif</label>
              <div class="form-group">
                <input
                  class="form-control"
                  type="email"
                  name="email"
                  placeholder="Mis: asih@email.id"
                  id="email"
                  required
                />
              </div>
              <label for="pesan">Pesan Anda</label>
              <div class="form-group">
                <textarea
                  class="form-control"
                  name="message"
                  placeholder="Sampaikan Pesan Anda"
                  rows="14"
                  id="messages"
                  required
                ></textarea>
              </div>
              <label for="captcha">Captcha</label>
              <div class="form-group">
                <div class="g-recaptcha" data-sitekey="6Lfo9ycUAAAAACVYG7996Ol06RV3ykkn3PZm9g2W" required></div>
              </div>
              <div class="form-group">
                <input class="btn btn-outlined btn-danger" type="submit" name="submit" value="Kirim pesan" />
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <div class="img-contact"></div>
          </div>
        </div>
      </div>
    </div>
    </div>

@endsection