@extends('website.layouts.app')

@section('title', 'Kontak Kami')

{{-- ================= SUBHEADER / HERO ================= --}}
@section('hero')
<div id="Subheader" style="padding:200px 0 120px;">
    <div class="container">
        <div class="column one">
            <!-- <h1 class="title">Kontak Kami</h1> -->
        </div>
    </div>
</div>
@endsection

@section('content')



{{-- ================= CONTACT SECTION ================= --}}
<div class="section mcb-section" style="padding-top:100px; padding-bottom:50px;">
    <div class="section_wrapper mcb-section-inner">

        <div class="wrap mcb-wrap one-second valign-top clearfix">
            <div class="mcb-wrap-inner">

                {{-- LOCATION & INFO --}}
                <div class="column mcb-column one column_column">
                    <div class="column_attr clearfix">

                        <h2>Lokasi</h2>
                        <p>
                            Dengan lokasi yang strategis dan mudah dijangkau,
                            terletak di Desa Talagasari dan tidak jauh dari Jalan Raya Serang.
                        </p>

                        <hr class="no_line" style="margin:20px 0">

                        <h5>{{ $settings['address'] ?? '-' }}</h5>
                        <h3 class="themecolor">{{ $settings['contact_phone'] ?? '-' }}</h3>
                        <h5>
                            <a href="mailto:{{ $settings['contact_email'] ?? '-' }}">
                                {{ $settings['contact_email'] ?? '-' }}
                            </a>
                        </h5>

                    </div>
                </div>

                {{-- CONTACT FORM --}}
                <div class="column mcb-column one column_column">
                    <div class="column_attr clearfix">

                        <hr class="no_line" style="margin:40px 0 20px">

                        <h2>Hubungi Kami</h2>
                        <p>
                            Apakah Anda memiliki pertanyaan atau ingin membuat janji temu?
                            Silakan hubungi kami melalui formulir berikut.
                        </p>

                        <div id="contactWrapper">

                            @if(session('success'))
                            <div class="contact-alert-success">
                                <span class="contact-alert-icon">✓</span>
                                <span class="contact-alert-text">
                                    {{ session('success') }}
                                </span>
                            </div>
                            @endif

                            @if ($errors->any())
                            <div class="contact-alert-error">
                                <div class="contact-alert-content">
                                    <strong>Oops!</strong>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            @endif


                            <form action="{{ route('contact.submit_form') }}" method="POST" >
                                @csrf

                                {{-- Honeypot anti spam --}}
                                <input type="text" name="company" style="display:none">

                                {{-- reCAPTCHA token --}}
                                <input type="hidden" name="recaptcha_token" id="recaptcha_token">


                                <div class="column one-second">
                                    <input type="text" name="name" placeholder="Nama" required>
                                </div>

                                <div class="column one-second">
                                    <input type="email" name="email" placeholder="Email" required>
                                </div>

                                <div class="column one">
                                    <input type="text" name="phone" placeholder="No. Telepon / WhatsApp">
                                </div>

                                <div class="column one">
                                    <textarea name="message" rows="8" placeholder="Pesan" required></textarea>
                                </div>

                                <div class="column one">
                                    <input type="submit" value="Kirim Pesan">
                                </div>
                            </form>

                        </div>

                    </div>
                </div>

            </div>
        </div>

        {{-- MAP & OPERATION TIME --}}
        <div class="wrap mcb-wrap one-second column-margin-0px valign-top clearfix" style="padding-left:8%">
            <div class="mcb-wrap-inner">

                <div class="column mcb-column one column_image">
                    <div class="google-map-wrapper no_border">
                        <div id="map" style="width:100%; height:550px;"></div>
                    </div>
                </div>

                <div class="column mcb-column two-third column_column">
                    <div class="column_attr clearfix"
                         style="background-color:#00f1c7; padding:50px 40px;">

                        <h3>Jam Layanan</h3>
                        <h5 style="margin-bottom:5px;">Setiap Hari</h5>
                        <p>{{ $settings['opening_hours'] ?? '-' }}</p>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection

{{-- ================= SCRIPTS ================= --}}
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<script>
    const latitude  = {{ $settings['latitude'] ?? 0 }};
    const longitude = {{ $settings['longitude'] ?? 0 }};

    const map = L.map('map').setView([latitude, longitude], 14);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    L.marker([latitude, longitude]).addTo(map);
</script>

<script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>

<script>
grecaptcha.ready(function () {
  grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'contact'}).then(function (token) {
    document.getElementById('recaptcha_token').value = token;
  });
});
</script>


@if(session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Berhasil',
        text: '{{ session('success') }}',
    });
</script>

<script>
setTimeout(() => {
    const alert = document.querySelector('.contact-alert-success');
    if(alert){
        alert.style.opacity = '0';
        setTimeout(()=> alert.remove(), 500);
    }
}, 4000);
</script>
@endif

@endpush