@extends('frontend.layouts.app')

@section('title')
Contact Us | R Web Solutions Corp.
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('/css/frontend/contact.css') }}">

<div class="messenger-box">
    <div>
         <a href="#">
            <div class="arrow-container">
                <i style="color: white;;" class="fa-solid fa-arrow-up"></i>
            </div>
        </a>
    </div>
    <a href="https://www.messenger.com/t/2350712291663307/?messaging_source=source%3Apages%3Amessage_shortlink&source_id=1441792&recurring_notification=0">
        <img src="{{ asset('assets/homepage/messenger.png') }}" alt="messenger" width="55px">
    </a>
</div>

<section class="contact-main-section-container proxima" draggable="false">
    <div class="card border-0" draggable="false" style="background:rgba(255,255,255, 0)">
        <img class="contact-image-banner" src="{{ asset('assets/contact/contact-banner.png') }}" alt="contact-banner">
        <div class="card-img-overlay container" draggable="false">
            <div class="col-12">
                <div class="row">
                    <div class="contact-main-title">
                        <span>
                            Contact Us
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="contact-second-section-container proxima" draggable="false">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-12 col-sm-12 col-12 left-box">
                <div class="contact-title-1">
                    <h1 class="contact-title-1">
                        Ready to
                        <br>
                        <span style="color: #fa6f10">Engage</span> Into The
                        <br>
                        Digital World?
                    </h1>
                </div>
                <div class="contact-title-4">
                    Connect with us
                </div>
                <div class="col-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-6 col-sm-6 col-12">
                            <div class="contact-place">
                                <span>
                                    Manila
                                </span>
                            </div>
                            <div class="contact-tel">
                                <span>
                                    Tel:
                                </span>
                                <a href="tel: 02 703 2670">
                                    (02) 703 2670
                                </a>
                            </div>
                            <div class="contact-globe">
                                <span>
                                    Globe:
                                </span>
                                <a href="tel: +63 917 639 2247">
                                    +63 917 639 2247
                                </a>
                            </div>
                            <div class="contact-smart">
                                <span>
                                    Smart:
                                </span>
                                <a href="tel: +63 919 008 0591">
                                    +63 919 008 0591
                                </a>
                            </div>
                            <div class="contact-email">
                                <span>
                                    Email:
                                </span>
                                <a href="mailto: marketing@rwebsolutions.com.ph">
                                    marketing@rwebsolutions.com.ph
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-6 col-12">
                            <div class="contact-place">
                                <span>
                                    Davao
                                </span>
                            </div>
                            <div class="contact-tel">
                                <span>
                                    Tel:
                                </span>
                                <a href="tel: 082 286 0004">
                                    (082) 286 0004
                                </a>
                            </div>
                            <div class="contact-globe">
                                <span>
                                    Globe:
                                </span>
                                <a href="tel: +63 917 706 8772">
                                    +63 917 706 8772
                                </a>
                            </div>
                            <div class="contact-globe">
                                <span>
                                    Manager:
                                </span>
                                <a href="tel: +63 917 713 7886">
                                    +63 917 713 7886
                                </a>
                            </div>
                            <div class="contact-email">
                                <span>
                                    Email:
                                </span>
                                <a href="mailto: info@rwebsolutions.com.ph">
                                    info@rwebsolutions.com.ph
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="contact-social">
                    <span>
                        Follow Us
                    </span>
                </div>
                <div class="contact-social-box d-flex flex-row">
                    <a href="{{ url('https://www.facebook.com/rwebsolutions.com.ph') }}">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                    <a href="{{ url('https://www.instagram.com/rwebsolutions/') }}">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                    <a href="{{ url('https://www.tiktok.com/@rwebsolutionscorp?lang=en') }}">
                        <i class="fa-brands fa-tiktok"></i>
                    </a>
                    <a href="{{ url('https://www.linkedin.com/company/rwebsolutions') }}">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-7 col-md-12 col-sm-12 col-12 right-box">
                <div class="contact-form-title">
                    <span>
                        You Can Inquire <span style="color:#fa6f10">Here</span>
                    </span>
                </div>
                <form action="{{ url('submit-inquiry') }}" class="form-inquiry" method="POST">
                    @csrf
                    <div class="input-box">
                        <div class="custom-select">
                            <div class="select-selected">
                                <span>How can we assist you today?</span>
                                <i class="fa-solid fa-play"></i>
                            </div>
                            <div class="select-items">
                                <div data-value="Website Development">Website Development</div>
                                <div data-value="Mobile Development">Mobile Development</div>
                                <div data-value="Custom Software Development">Custom Software Development</div>
                                <div data-value="Digital Marketing Services">Digital Marketing Services</div>
                                <div data-value="Multimedia Services">Multimedia Services</div>
                                <div data-value="Hosting & Server">Hosting & Server</div>
                                <div data-value="Cybersecurity Services">Cybersecurity Services</div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="category" id="selected-service">

                    <div class="input-box">
                        <input type="text" required name="fullname" id="name-input">
                        <span class="animation" onclick="focusInput('name-input')">Full Name</span>
                    </div>
                    <div class="input-box">
                        <input type="tel" required name="phonenumber" id="phone-input">
                        <span class="animation" onclick="focusInput('phone-input')">Phone Number</span>
                    </div>
                    <div class="input-box">
                        <input type="email" required name="email" id="email-input">
                        <span class="animation" onclick="focusInput('email-input')">Email Address</span>
                    </div>
                    <div class="input-box">
                        <textarea required id="myTextarea" maxlength="500" rows="5" name="message"></textarea>
                        <span id="clickSpan" class="animation">Message</span>
                    </div>
                    <div class="count-box">
                        <span id="charCount">0 / 500</span>
                    </div>

                    <div class="">
                        <input type="checkbox" required name="privacy_policy" id="privacy-policy-checkbox">
                        <label for="privacy-policy-checkbox">
                            I agree to the Privacy Policy and Terms of Service
                        </label>
                    </div>

                    <div class="input-box">
                        <div class="g-recaptcha" data-sitekey="6LdotwAqAAAAAIGVLK7Lalv2pU0t9QRokQctxG2p"></div>
                    </div>

                    <div class="contact-button">
                        <a class="contact-second-button">
                            <button type="submit">
                                Submit <img src="{{ asset('assets/homepage/button-right-arrow.png') }}" alt="button-icon">
                            </button>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<section class="contact-third-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12 map-title-left">
            <div class="row">
                <div class="contact-third-section-title">
                    Visit Our Office
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="row contact-map-box">
                <div class="col-lg-5 col-md-5 col-sm-12 col-12 map-left">
                    <div class="contact-map-title">
                        Davao
                    </div>
                    <div class="contact-map-description">
                        Door 8, FAB Bldg., F.S Dizon Rd., Bacaca, Barangay 19-B (Pob.), Davao City, Philippines
                    </div>
                    <div class="contact-map-title">
                        Office Hours
                    </div>
                    <div class="contact-map-description">
                        Monday to Friday 8:00am-5:00pm
                    </div>
                    <div class="contact-map-description">
                        Saturday 8:00am-5:00pm
                    </div>
                    <div class="contact-map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3959.2695291676473!2d125.60048657568208!3d7.094725216260402!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32f96d239e0b8d8d%3A0x6803118d251c27d5!2sR%20Web%20Solutions%20Corp.%20Davao!5e0!3m2!1sen!2sph!4v1716369474754!5m2!1sen!2sph" allowfullscreen="false" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-12 col-12 map-right">
                    <div class="contact-map-title">
                        Manila
                    </div>
                    <div class="contact-map-description">
                        Unit H Freemont Arcade, #11 Shaw Blvd., Brgy. San Antonio, Pasig City 1605
                    </div>
                    <div class="contact-map-title">
                        Office Hours
                    </div>
                    <div class="contact-map-description">
                        Monday to Friday 9:00am-6:00pm
                    </div>
                    <div class="contact-map-description">
                        Saturday 9:00am-12:00pm
                    </div>
                    <div class="contact-map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.406418679829!2d121.05763177574093!3d14.575902477679596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c86b085bda93%3A0x940a69c4a156a4c0!2s%2311%20FREEMONT%20ARCADE%20BLDG.!5e0!3m2!1sen!2sph!4v1716369573528!5m2!1sen!2sph" allowfullscreen="false" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('js')
<script src="{{ asset('js/frontend/contact/contact.js') }}"></script>
<script src="{{ asset('js/frontend/contact/animation.js') }}"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // AJAX form submission
        $('.form-inquiry').submit(function(e) {
            e.preventDefault();

            // Verify if CAPTCHA is checked
            var recaptchaResponse = grecaptcha.getResponse();
            if (recaptchaResponse.length === 0) {
                showErrorAlert({
                    errors: {
                        'captcha': ['Please complete the CAPTCHA']
                    }
                });
                return;
            }

            $.ajax({
                method: "POST",
                url: "{{ url('submit-inquiry') }}",
                data: $(this).serialize(),
                success: function(response) {
                    showSuccessAlert();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(jqXHR.responseText);
                    // Check if the response contains JSON data
                    var errors = null;
                    try {
                        errors = JSON.parse(jqXHR.responseText);
                    } catch (e) {
                        // Ignore parsing errors
                    }
                    showErrorAlert(errors);
                }
            });

            function showSuccessAlert() {
                Swal.fire({
                    title: 'Success!',
                    text: 'Inquiry submitted successfully',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    confirmButtonColor: "#fa6f10",
                    customClass: {
                        confirmButton: 'btn btn-success rounded-0'
                    }
                }).then(function() {
                    location.reload();
                });
            }

            function showErrorAlert(errors) {
                var errorMessage = 'Inquiry submission failed';

                // Check if there are validation errors
                if (errors && errors.errors) {
                    // Iterate over each error and append it to the message
                    for (var key in errors.errors) {
                        if (errors.errors.hasOwnProperty(key)) {
                            // Exclude specific field from the error messages
                            if (key !== '0') {
                                errorMessage += '<br>' + errors.errors[key][0];
                            }
                        }
                    }
                }

                Swal.fire({
                    title: 'Error!',
                    html: errorMessage,
                    icon: 'error',
                    confirmButtonText: 'OK',
                    confirmButtonColor: "#fa6f10",
                    customClass: {
                        confirmButton: 'btn btn-success rounded-0'
                    }
                });
            }

        });

        // Your existing custom-select logic to populate hidden field
        document.querySelectorAll('.select-items div').forEach(item => {
            item.addEventListener('click', function() {
                document.getElementById('selected-service').value = this.getAttribute('data-value');
            });
        });

        // Count characters in the textarea
        document.getElementById('myTextarea').addEventListener('input', function() {
            const charCount = this.value.length;
            document.getElementById('charCount').textContent = `${charCount} / 500`;
        });
    });
</script>
@endsection