@extends('layouts.landingPage.master')

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

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container py-10">
            <div class="lg:flex">
                <div class="lg:w-1/2 py-10">
                    <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                        {{ $contactTitle->value }}
                    </h2>
                    <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">

                    <p class="text-md text-jacarta-700 dark:text-white">
                        {{ $contactDesc->value }}
                    </p>
                </div>
                <div class="lg:w-1/2">
                    <div class="flex justify-end items-end">
                        <img src="{{ asset('uploads/landing-page/contact/' . $contactImage->value) }}" class="rounded-xl"
                            width="500" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16 bg-white dark:bg-jacarta-900">
        <div class="container">
            <div class="lg:flex">
                <div class="lg:w-1/3 px-5">
                    <div class="flex flex-col justify-center items-center">
                        <img src="{{ asset('landing/img/icphone.png') }}" class="py-10" width="50" alt="">
                        <div class="py-5 text-center">
                            <p class="font-display text-xl text-jacarta-700 dark:text-white py-1">{{ $contactNoHp->value }}
                            </p>
                            <p class="font-display text-lg text-jacarta-700 dark:text-white py-2">
                                {{ __('message.Handphone') }}</p>
                            <p class="py-2 dark:text-white">
                                {{ __('message.Silakan hubungi isi formulir kontak dan kami akan senang hati membantu Anda.') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/3 px-5">
                    <div class="flex flex-col justify-center items-center">
                        <img src="{{ asset('landing/img/icemail.png') }}" class="py-10" width="50" alt="">
                        <div class="py-5 text-center">
                            <p class="font-display text-xl text-jacarta-700 dark:text-white py-2">
                                {{ $contactEmail->value }}</p>
                            <p class="font-display text-lg text-jacarta-700 dark:text-white py-2">{{ __('message.Email') }}
                            </p>
                            <p class="py-2  dark:text-white">
                                {{ __('message.Silakan hubungi kami via email, tim kami akan cepat merespon Anda') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/3 px-5">
                    <div class="flex flex-col justify-center items-center">
                        <img src="{{ asset('landing/img/iclocation.png') }}" class="py-10" width="40" alt="">
                        <div class="py-5 text-center">
                            <p class="font-display text-xl text-jacarta-700 dark:text-white">{{ $contactAddress->value }}
                            </p>
                            <p class="font-display text-lg text-jacarta-700 dark:text-white py-2">
                                {{ __('message.Google Maps') }}</p>
                            <p class="py-2  dark:text-white">
                                {{ __('message.Silakan datang ke kantor kami, tim kami akan melayani dengan sepenuh hati') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16 bg-light-base dark:bg-jacarta-900">
        <div class="container">
            <div class="lg:flex">
                <div class="lg:w-1/2 px-5">
                    <img src="{{ asset('uploads/setting/general/images/' . Helper::generalSetting('logo_light')) }}"
                        width="300" alt="">
                    <p class="py-5 text-jacarta-700 dark:text-white">Ruko YC HUB, BSD City, Jl. Damai Foresta, Sampora, Kec.
                        Cisauk, Kabupaten Tangerang,
                        Banten 15345</p>

                    <iframe src="{{ $contactMap->value }}" class="w-full" height="450" style="border:0;"
                        allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <div class="lg:w-1/2 ">
                    <p class="py-2 mb-4 text-jacarta-700 dark:text-white">
                        {{ __('message.Hubungi kami jika ada hal-hal yang ingin anda tanyakan lebih lengkap dan detail, silahkan isi form berikut ini') }}
                    </p>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('landing.contact.store') }}" method="POST">
                        @csrf
                        <div class="bg-white dark:bg-jacarta-900 shadow-2xl px-5 py-10 rounded-xl">
                            <div class="w-full py-2">
                                <input type="text" name="name"
                                    class="w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300 "
                                    placeholder="{{ __('message.Nama Kontak') }}" id="">
                            </div>
                            <div class="w-full py-2">
                                <input type="text" name="email"
                                    class=" w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                                    placeholder="{{ __('message.E-Mail') }}" id="">
                            </div>
                            <div class="w-full py-2">
                                <input type="text" name="no_hp"
                                    class=" w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                                    placeholder="{{ __('message.Nomor handphone') }}" id="">
                            </div>

                            <div class="w-full py-2">
                                <textarea name="description" id="" cols="20" rows="4"
                                    class="w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                                    placeholder="{{ __('message.Tuliskan pesan disini') }}"></textarea>
                            </div>
                            <div class="w-full py-2">
                                <div class="form-floating">
                                    <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                </div>
                            </div>
                            <div class="w-full py-2">
                                <button type="submit"
                                    class="w-full bg-accent text-white px-10 py-3 rounded-xl">{{ __('message.Kirim Pesan') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16 bg-light-base dark:bg-jacarta-900">
        <div class="container bg-white dark:bg-jacarta-900 shadow-2xl lg:px-10 py-10 rounded-xl">
            <div class="lg:flex">
                <div class="lg:w-1/2">
                    <p class="font-display text-jacarta-700 dark:text-white text-2xl">
                        {{ __('message.Berlanggan Sekarang!') }}</p>
                    <p class="py-6 text-jacarta-700 dark:text-white" style="text-align: justify">
                        {{ __('message.Dapatkan berita langsung di kotak masuk email Anda, sehingga Anda dapat membacanya dengan mudah kapan saja dan di mana saja.') }}
                    </p>
                </div>
                <div class="lg:w-1/2">
                    <div class="flex flex-col lg:px-10">
                        <form action="{{ route('service.landing.subscribe') }}" method="POST">
                            @csrf
                            <div class="w-full py-2">
                                <input type="text" name="name"
                                    class="w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300 "
                                    placeholder="{{ __('message.Nama') }}" required>
                            </div>
                            <div class="w-full py-2">
                                <input type="email" name="email"
                                    class=" w-full rounded-xl dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                                    placeholder="{{ __('message.Email') }}" required>
                            </div>
                            <div class="flex flex-col mb-6">
                                <div class="form-floating">
                                    <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                </div>
                            </div>
                            <div class="w-full py-2">
                                <button
                                    class="w-full bg-accent text-white px-10 py-3 rounded-xl">{{ __('message.Berlanggan') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
@endsection