@extends('layouts.landing')

@section('title')
    {{ __('message.Kontak') }}
@endsection

@section('content')
    {{-- <section class="wrapper bg-soft-primary position-relative">
        <div class="container pt-20 pb-10 pt-md-20 text-center">
            <div class="row">
                <div class="col-lg-8 mx-auto mb-5">

                    <h3 class="display-1 mb-6">{{ Helper::lang('Contact') }}</h3>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
        <div class="overflow-hidden">
            <div class="divider text-light mx-n2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
                    <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />
                </svg>
            </div>
        </div>
    </section> --}}
    <section class="wrapper bg-light">
        <div class="container pt-20 pt-md-20 py-4 py-md-8">
            <div class="row">
                <div class="col-xl-10 mx-auto">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="row gy-10 gx-lg-8 gx-xl-12">
                        <div class="col-lg-8">
                            <h5 class="text-primary">{{ __('message.Kirim Pesan') }}</h5>
                            <form method="post" action="{{ route('landing.contact.store') }}">
                                @csrf
                                <div class="messages"></div>
                                <div class="row gx-4">
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input type="text" name="first_name" class="form-control" placeholder="John"
                                                required>
                                            <label>{{ __('message.Nama Awal') }}</label>

                                        </div>
                                    </div>
                                    <!-- /column -->
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input type="text" name="last_name" class="form-control" placeholder="Doe"
                                                required>
                                            <label>{{ __('message.Nama Akhir') }}</label>

                                        </div>
                                    </div>
                                    <!-- /column -->
                                    <div class="col-md-12">
                                        <div class="form-floating mb-4">
                                            <input id="form_email" type="email" name="email" class="form-control"
                                                placeholder="example@example.com" required>
                                            <label for="form_email">{{ __('message.Email') }}</label>

                                        </div>
                                    </div>

                                    <!-- /column -->
                                    <div class="col-12">
                                        <div class="form-floating mb-4">
                                            <textarea name="description" class="form-control" placeholder="Masukan Pesanmu disini...." style="height: 150px"
                                                required></textarea>
                                            <label>{{ __('message.Pesan') }} </label>

                                        </div>
                                    </div>
                                    <!-- /column -->

                                    <!-- /column -->
                                    <div class="col-12">
                                        <div class="form-floating mb-4">
                                            <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                        </div>
                                    </div>
                                    <!-- /column -->

                                    <!-- /column -->
                                    <div class="col-12">
                                        <button type="submit"
                                            class="btn btn-primary rounded-pill btn-send mb-3">{{ __('message.Kirim') }}</button>

                                    </div>
                                    <!-- /column -->
                                </div>
                                <!-- /.row -->
                            </form>
                            <!-- /form -->
                        </div>
                        <!--/column -->
                        <div class="col-lg-4">
                            <div class="d-flex flex-row">
                                <div>
                                    <div class="icon text-primary fs-28 me-4 mt-n1"> <i
                                            class="uil uil-location-pin-alt"></i> </div>
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ __('message.Alamat') }}</h5>
                                    <address>Jl. Raden Saleh No. 53, RT.1/RW.4, Cikini, Menteng, Jakarta Pusat, Jakarta
                                        10330</address>
                                </div>
                            </div>
                            <div class="d-flex flex-row">
                                <div>
                                    <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-phone-volume"></i>
                                    </div>
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ __('message.Nomor Handphone') }}</h5>
                                    <p>+62 896 3769 1092</p>
                                </div>
                            </div>
                            <div class="d-flex flex-row">
                                <div>
                                    <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-envelope"></i>
                                    </div>
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ __('message.Email') }}</h5>
                                    <p class="mb-0"><a href="mailto:sekretariat.aspaki@gmail.com"
                                            class="text-body">sekretariat.aspaki@gmail.com</a></p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <section class="wrapper bg-light">
        <div class="container pb-14 pb-md-4">
            <div class="row">
                <div class="col-xl-10 mx-auto">
                    <div class="card">
                        <div class="row gx-0">
                            <div class="col-lg-12 align-self-stretch">
                                <div class="map map-full rounded-top rounded-lg-start">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15866.166940352383!2d106.8413911!3d-6.192016!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x357170eb1c515b8f!2sAsosiasi%20Produsen%20Alat%20Kesehatan%20Indonesia!5e0!3m2!1sid!2sid!4v1670060020391!5m2!1sid!2sid"
                                        style="width:100%; height: 100%; border:0" allowfullscreen></iframe>
                                </div>
                                <!-- /.map -->
                            </div>

                        </div>
                        <!--/.row -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
@endsection