<!-- src/main/resources/templates/contact.html -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <!-- Add these lines in the <head> section of your HTML file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.min.css" />
    <!-- Add Tailwind CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" integrity="sha512-RVY3cgevsGJLW14fGk65nSZLN+U7c5eS7trGisgTj9BM8oaQjKtrB1s6lJzfup2p4VLtqdXvsVvQILWl7WGNuQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.min.js"></script>
</head>
<body class="bg-gray-100">

<!-- Navbar -->
<div th:replace="layouts/mainLayout"></div>

<div class="container mx-auto my-8 p-8 bg-white rounded-lg shadow-lg">
    <h2 class="text-3xl font-semibold mb-4">Contact Us</h2>

    <!-- Form Section -->
    <form action="/contact/submitContactForm" method="post" enctype="multipart/form-data" class="mb-8">
        <div class="mb-4">
            <label for="name" class="block text-sm font-semibold text-gray-600">Name:</label>
            <input type="text" id="name" name="name" required
                   class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
        </div>

        <div class="mb-4">
            <label for="email" class="block text-sm font-semibold text-gray-600">Email:</label>
            <input type="email" id="email" name="email" required
                   class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
        </div>

        <!-- Update the phone number field in your HTML form -->
        <div class="mb-4">
            <label for="phoneNumber" class="block text-sm font-semibold text-gray-600">Phone Number:</label>
            <input type="tel" id="phoneNumber" name="phoneNumber" class="phone-input
               w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
        </div>

        <div class="mb-4">
            <label for="sourceType" class="block text-sm font-semibold text-gray-600">Where did you hear about us?</label>
            <select id="sourceType" name="sourceType" required
                    class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
                <option value="WEBSITE">Website</option>
                <option value="FRIEND">Friend</option>
                <option value="SOCIAL_MEDIA">Social Media</option>
                <option value="OTHER">Other</option>
            </select>
        </div>

        <div class="mb-4">
            <label for="file" class="block text-sm font-semibold text-gray-600">Attachment (Max 2MB):</label>
            <input type="file" id="file" name="file" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.zip"
                   class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
        </div>

        <div class="mb-4">
            <label for="message" class="block text-sm font-semibold text-gray-600">Message:</label>
            <textarea id="message" name="message" rows="4" required
                      class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"></textarea>
        </div>

        <button type="submit"
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue">
            Submit
        </button>

        <!-- Add this at the top of your HTML file to display flash messages -->
        <div th:if="${successMessage}" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mt-4"
             role="alert">
            <span th:text="${successMessage}"></span>
        </div>

        <div th:if="${errorMessage}" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mt-4" role="alert">
            <span th:text="${errorMessage}"></span>
        </div>

        <div th:if="${fileError}" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mt-4" role="alert">
            <span th:text="${fileError}"></span>
        </div>
    </form>

    <!-- Flash Messages -->
    <div th:if="${successMessage}" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
        <span th:text="${successMessage}"></span>
    </div>

    <div th:if="${errorMessage}" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
        <span th:text="${errorMessage}"></span>
    </div>

    <div th:if="${fileError}" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
        <span th:text="${fileError}"></span>
    </div>
</div>

<!-- Map and Address Section -->
<div class="flex justify-between mt-8">

    <!-- Map Card -->
    <div class="w-1/2 bg-white rounded-lg shadow-lg p-8">
        <h3 class="text-xl font-semibold mb-4">Our Location</h3>
        <!-- Replace with your map embed code or use an iframe for Google Maps -->
        <div class="aspect-w-16 aspect-h-9">
            <!-- Example: Replace this with your map embed code or use an iframe -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.2084190472956!2d88.38862027626348!3d22.496362179546104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0271a7fe48bfcf%3A0xb768d06fb061fa86!2sBitmutex%20Technologies!5e0!3m2!1sen!2sin!4v1706800057473!5m2!1sen!2sin"
                    width="900" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>


    <!-- Address Card -->
    <div class="w-1/2 bg-white rounded-lg shadow-lg p-8">
        <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
        <p class="mb-4">123 Main Street, Cityville, Country</p>
        <p>Email: contact@example.com</p>
        <p>Phone: +1 234 567 890</p>
    </div>
</div>
</div>

<!-- Footer -->
<div th:replace="layouts/footerLayout"></div>

<script>
    var input = document.querySelector("#phoneNumber");
    var fullPhoneNumberInput = document.querySelector("#fullPhoneNumber");

    var iti = window.intlTelInput(input, {
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js",
        initialCountry: "auto",
        separateDialCode: true,
        preferredCountries: ["IN", "CA", "US"],
        dropdownContainer: document.body,
        hiddenInput: "fullPhoneNumber",
        autoPlaceholder: "aggressive",
        placeholderNumberType: "MOBILE",
    });

    var form = document.querySelector("form");

    form.addEventListener("submit", function (event) {
        // Check if the phone number is not empty before validating
        if (input.value.trim() !== "") {
            var isValidPhoneNumber = iti.isValidNumber();
            if (!isValidPhoneNumber) {
                alert("Please enter a valid phone number.");
                event.preventDefault(); // Prevent form submission if the phone number is not valid
            }
        }

        // Update the hidden input with the full phone number
        fullPhoneNumberInput.value = iti.getNumber();
    });
</script>

</body>
</html>
