@extends('layouts.v2.frontend')
@section('title', '| Contact')
@section('css')
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<div class="contact-section contact-page-div">
    <div class="container">
        <div class="contact-heading">
            <h4>Contact Us</h4>
        </div>
        <div class="row justify-content-center">
            <div class="contact-form">
                <h4>Message</h4>
                @if(session('success'))
                    <div class="alert alert-success font-weight-bold">
                        {{ session('success') }}
                    </div>
                @endif
                <form action="{{ route('contact.send') }}" method="POST" id="contactForm">
                  @csrf
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="firstName" class="form-label">First name</label>
                      <input type="text" class="form-control @error('firstName') is-invalid @enderror" id="firstName" name="firstName" value="{{ old('firstName') }}" pattern="[A-Za-z]+" required>
                      @error('firstName')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                      @enderror
                    </div>
                    <div class="col-md-6">
                      <label for="lastName" class="form-label">Last name</label>
                      <input type="text" class="form-control @error('lastName') is-invalid @enderror" id="lastName" name="lastName" value="{{ old('lastName') }}" pattern="[A-Za-z]+" required>
                      @error('lastName')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>
                  <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                    @error('email')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="mb-3">
                    <label for="preferredTime" class="form-label">Preferred time to call</label>
                    <input type="datetime-local" class="form-control @error('preferredTime') is-invalid @enderror" id="preferredTime" name="preferredTime" value="{{ old('preferredTime') }}" required>
                    @error('preferredTime')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="mb-3">
                    <label for="cnt_message" class="form-label">Message</label>
                    <textarea class="form-control @error('cnt_message') is-invalid @enderror" id="cnt_message" name="cnt_message" rows="4" required>{{ old('cnt_message') }}</textarea>
                    @error('cnt_message')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="mb-3">
                      <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                      @error('g-recaptcha-response')
                          <div class="invalid-feedback d-block">{{ $message }}</div>
                      @enderror
                  </div>
                  <button type="submit" class="btn btn-send" id="submitButton">
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                    Send Message
                  </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
document.addEventListener("DOMContentLoaded", function () {
    const contactForm = document.getElementById('contactForm');
    const submitButton = document.getElementById('submitButton');
    const spinner = document.getElementById('spinner');
    const preferredTimeInput = document.getElementById("preferredTime");

    contactForm.addEventListener("submit", function (e) {
        // Uncomment the following line only if testing and need to prevent submission
        // e.preventDefault();

        // Show the spinner and disable the button
        spinner.classList.remove('d-none');
        submitButton.disabled = true;

        // Format the preferred time to US format
        const isoDateTime = preferredTimeInput.value; // Get ISO format value
        if (isoDateTime) {
            const usFormattedDate = formatToUSDateTime(isoDateTime);
            console.log("US Formatted Date-Time:", usFormattedDate); // Log for testing
            // Do not modify preferredTimeInput.value here
        }
    });

    function formatToUSDateTime(isoDateTime) {
        const date = new Date(isoDateTime);
        const options = { month: '2-digit', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' };
        return date.toLocaleString('en-US', options); // MM/DD/YYYY, HH:MM AM/PM
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const datetimeInput = document.getElementById('preferredTime');
    
    // Add click handler to the datetime input
    datetimeInput.addEventListener('click', function() {
        this.showPicker();
    });

    // Add click handler for the invalid-feedback div (since it's after the input in Bootstrap)
    const parentDiv = datetimeInput.parentElement;
    
    // Handler for calendar icon click
    parentDiv.addEventListener('click', function(e) {
        // If click is from the icon div or its error message
        if (e.target.matches('.invalid-feedback') || e.target.closest('.invalid-feedback')) {
            datetimeInput.showPicker();
        }
    });

    // Validation handlers
    datetimeInput.addEventListener('invalid', function(e) {
        e.preventDefault();
        this.classList.add('is-invalid');
    });

    datetimeInput.addEventListener('input', function() {
        this.classList.remove('is-invalid');
    });
});
document.addEventListener("DOMContentLoaded", function () {
    const firstNameInput = document.getElementById('firstName');
    const lastNameInput = document.getElementById('lastName');

    function validateLetters(input) {
        input.addEventListener('input', function () {
            const regex = /^[A-Za-z]+$/;
            if (!regex.test(this.value)) {
                this.value = this.value.replace(/[^A-Za-z]/g, '');
            }
        });
    }

    validateLetters(firstNameInput);
    validateLetters(lastNameInput);
});

</script>
@endsection