@extends('front.layout.app')
@section('beforeHeadClose')
<link href="{{ asset_storage('') . 'module/blog/front/css/blog.css' }}" rel="stylesheet" type="text/css" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<style>
    .error-bg {
        background-color: #e6cfcf;
    }

    .error {
        color: #FF0000;
    }
</style>
@endsection
@section('content')
@php $settingArr = settingArr(); @endphp
@php
//echo cms_page_heading('Contact us',118)
@endphp
@php echo cms_edit_page('cms',$data->id);@endphp
<div class="about-wrap">
    <!-- Start Breadcrumb
                                                                                        ============================================= -->
    <!-- Breadcrumbs start -->
    <section class="breadcrumbs-wrap">
        <div class="container">
            <h1>Contact Us</h1>
        </div>
    </section>
    <!-- Breadcrumbs end -->
    <main id="main">

        <section class="pagecontent-wrap">
            <div class="container">
                <div class="contact-wrap">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="coninfo">
                                <h2>Get In Touch</h2>
                                <p class="my-3"> {!! $data->content !!}</p>
                            </div>
                            <div class="d-md-flex flex-column d-block text-center text-md-start">
                                @if (!empty($settingArr->address))
                                <div class="d-md-flex gap-3 p-0 align-items-center d-block text-center text-lg-start infoText">
                                    <i class="fa-solid fa-house"></i>
                                    <p class="address-text"><a href="#">{{ $settingArr->address }}</a></p>
                                </div>
                                @endif
                                <div class="d-md-flex gap-3 p-0 align-items-center d-block text-center text-lg-start infoText">
                                    <i class="fa-solid fa-phone"></i>
                                    <p><a href="tel:{{ strip_tags($settingArr->telephone) }}">{{ strip_tags($settingArr->telephone) }}</a></p>
                                </div>

                                <div class="d-md-flex gap-3 p-0 align-items-center d-block text-center text-lg-start infoText">
                                    <i class="fa-solid fa-envelope"></i>
                                    <p><a href="mailto:{{ strip_tags($settingArr->email) }}">{{ strip_tags($settingArr->email) }}</a></p>
                                </div>
                                <div class="d-flex socialicons justify-content-center gap-3">
                                    @php echo social_media(); @endphp
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="conForm">
                                
                              <form action="#" method="POST" id="contactFrom" class="contact-form">
    @csrf
    <div class="row">
        <div class="col-lg-6">
            <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" value="{{ old('name') }}" required>
            <div id="name-error" class="text-danger"></div>
        </div>
        <div class="col-lg-6">
            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{ old('email') }}" required>
            <div id="email-error" class="text-danger"></div>
        </div>
        <div class="col-lg-6">
            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" value="{{ old('phone') }}" required>
            <div id="phone-error" class="text-danger"></div>
        </div>
        <div class="col-lg-6">
            <input type="text" class="form-control" id="company_name" name="company_name" placeholder="Company Name" value="{{ old('company_name') }}" required>
            <div id="company_name-error" class="text-danger"></div>
        </div>
        <div class="col-lg-12">
            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" value="{{ old('subject') }}" required>
            <div id="subject-error" class="text-danger"></div>
        </div>
        <div class="col-lg-12">
            <textarea name="message" id="message" class="form-control" placeholder="Comment" required>{{ old('message') ?? '' }}</textarea>

            <div id="message-error" class="text-danger"></div>
        </div>
        <div class="col-lg-12">
            <div class="g-recaptcha" data-sitekey="{{ config('recaptcha.siteKey') }}"></div>
            <button type="button" onclick="submitContactFormAjax();" class="hover2">Submit</button>
        </div>
    </div>
</form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
</div>
@endsection
@section('beforeBodyClose')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>




<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function submitContactFormAjax() {
        // Clear previous errors
        $('.text-danger').html('').removeClass('formValidationErrors');

        // Validate form
        let isValid = true;
        $('#contactFrom input[required], #contactFrom textarea[required]').each(function() {
            if ($(this).val().trim() === '') {
                $(this).next('.text-danger').html('This field is required');
                isValid = false;
            }
        });

        if (!isValid) return;

        let url = "{{ url('contact-us-save') }}";
        let formData = new FormData($('#contactFrom')[0]);

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.status) {
                    // Clear the form completely
                    $("#contactFrom")[0].reset();

                    // Show success message
                    Swal.fire({
                        title: 'Thank you!',
                        html: data.error, // message from backend
                        icon: 'success',
                        timer: 2000,
                        timerProgressBar: true,
                        didClose: () => {
                            // Optional: scroll to top
                            $('html, body').animate({ scrollTop: 0 }, 500);
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: data.error,
                        icon: 'error'
                    });
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        $('#' + key + '-error').html(value);
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'An unexpected error occurred. Please try again.',
                        icon: 'error'
                    });
                }
            }
        });
    }

    // Allow only alphabets for name
    $(document).on('input', '#name', function() {
        this.value = this.value.replace(/[^a-zA-Z\s]/g, '');
    });

    // Format phone number
    $(document).on('input', '#phone', function() {
        let value = this.value.replace(/\D/g, '');
        if (value.length > 3 && value.length <= 6) {
            value = value.slice(0, 3) + '-' + value.slice(3);
        } else if (value.length > 6) {
            value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6, 10);
        }
        this.value = value;
    });
</script>




@endsection