@extends('layouts.app')
@section('content')
<style>
    .text-danger {
        color: #e72010 !important;
    }
    .form-section {
        background: #f9f9f9;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }
    .page-title {
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    .btn-primary {
        background-color: #0069d9;
        border-color: #0062cc;
        transition: all 0.3s ease-in-out;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
</style>

<main class="pt-90">
    <div class="container mb-5">
        <div class="mw-930 mx-auto">
            <h2 class="page-title"><i class="bi bi-chat-dots"></i> Hubungi Kami</h2>
        </div>
    </div>

    <section class="contact-us container">
        <div class="mw-930 mx-auto form-section">
            <div class="contact-us__form">
                <form id="contact-us-wa-form" class="needs-validation" novalidate>
                    <div class="mb-4">
                        <label class="form-label">Nama *</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                            <input type="text" class="form-control" name="name" id="wa_name" placeholder="Masukkan Nama" required>
                        </div>
                        <span class="text-danger" id="err_name"></span>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">No Handphone *</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-telephone-fill"></i></span>
                            <input type="text" class="form-control" name="phone" id="wa_phone" placeholder="Masukkan No HP" required>
                        </div>
                        <span class="text-danger" id="err_phone"></span>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">Email *</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                            <input type="email" class="form-control" name="email" id="wa_email" placeholder="Masukkan Email" required>
                        </div>
                        <span class="text-danger" id="err_email"></span>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">Pesan *</label>
                        <textarea class="form-control" name="comment" id="wa_comment" rows="5" placeholder="Tulis pesan Anda..." required></textarea>
                        <span class="text-danger" id="err_comment"></span>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary px-5 py-2">Kirim via WhatsApp</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>

<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<script>
    document.getElementById("contact-us-wa-form").addEventListener("submit", function (e) {
        e.preventDefault();

        const name = document.getElementById("wa_name").value.trim();
        const phone = document.getElementById("wa_phone").value.trim();
        const email = document.getElementById("wa_email").value.trim();
        const comment = document.getElementById("wa_comment").value.trim();

        document.getElementById("err_name").innerText = name ? "" : "Nama wajib diisi.";
        document.getElementById("err_phone").innerText = phone ? "" : "No Handphone wajib diisi.";
        document.getElementById("err_email").innerText = email ? "" : "Email wajib diisi.";
        document.getElementById("err_comment").innerText = comment ? "" : "Pesan wajib diisi.";

        if (!name || !phone || !email || !comment) return;

        const whatsappNumber = "62882005332646";
        const message = `Halo Admin,%0A%0ASaya ingin menghubungi Anda:%0A%0ANama: ${name}%0ANo HP: ${phone}%0AEmail: ${email}%0APesan: ${comment}`;
        const waUrl = `https://wa.me/${whatsappNumber}?text=${message}`;

        window.open(waUrl, "_blank");
    });
</script>
@endsection