@extends('layouts.landing-page.index', ['title' => 'Hubungi Kami'])

@section('main')
    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- Section Title -->
        <div class="container section-title mt-5" data-aos="fade-up">
            <h2>Kontak</h2>
            <p>Hubungi Kami</p>
        </div><!-- End Section Title -->

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4">

                <div class="col-lg-4">
                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                        <i class="bi bi-geo-alt flex-shrink-0"></i>
                        <div>
                            <h3>Alamat</h3>
                            <p>{{ $profile->address ?? 'Alamat Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->

                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                        <i class="bi bi-telephone flex-shrink-0"></i>
                        <div>
                            <h3>No. Telepon</h3>
                            <p>{{ $profile->phone ?? 'Telepon Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->

                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
                        <i class="bi bi-envelope flex-shrink-0"></i>
                        <div>
                            <h3>Email</h3>
                            <p>{{ $profile->email ?? 'Email Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->

                </div>

                <div class="col-lg-8">
                    <form action="{{ route('contact.sendMessage') }}" method="POST" data-aos="fade-up"
                        data-aos-delay="200">
                        @csrf
                        <div class="row gy-4">

                            <div class="col-md-12">
                                <h4><b>Tulis Pesan Anda Disini</b></h4>
                            </div>

                            <div class="col-md-6">
                                <label>Nama</label>
                                <input type="text" name="name" class="form-control" placeholder="Nama" required>
                            </div>

                            <div class="col-md-6">
                                <label>Email</label>
                                <input type="email" class="form-control" name="email" placeholder="Email" required>
                            </div>

                            <div class="col-md-12">
                                <label>Subjek</label>
                                <input type="text" class="form-control" name="subject" placeholder="Subjek" required>
                            </div>

                            <div class="col-md-12">
                                <label>Pesan</label>
                                <textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
                            </div>

                            <!-- hCaptcha -->
                            <div class="col-md-6">
                                <div class="h-captcha" data-sitekey="fe5c036a-d8cc-4da4-8b4a-8f04df3a7a8c"
                                    data-callback="enableSubmit" data-expired-callback="disableSubmit">
                                </div>
                            </div>

                            <div class="col-md-6 text-end">
                                <button type="submit" id="submitBtn" disabled class="submit-btn">
                                    Kirim Pesan
                                </button>
                            </div>

                        </div>
                    </form>

                </div><!-- End Contact Form -->

            </div>

        </div>

    </section><!-- /Contact Section -->
@endsection

@push('styles')
@endpush

@push('scripts')

    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: "success",
                    title: "Sukses",
                    text: "{{ session('success') }}",
                    timer: "2000",
                    showConfirmButton: false
                });
            });
        </script>
    @endif
    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: "error",
                    title: "Sukses",
                    text: "{{ session('error') }}",
                    timer: "2000",
                    showConfirmButton: false
                });
            });
        </script>
    @endif
    <script>
        function enableSubmit() {
            document.getElementById('submitBtn').disabled = false;
        }

        function disableSubmit() {
            document.getElementById('submitBtn').disabled = true;
        }
    </script>
@endpush