{% extends 'front.html.twig' %}

{% block title %}Contact PixelShield Software | Local Sydney Technical Support{% endblock %}

{% block body %}

    <style type="text/css">
        #check-wrapper {
            display: none !important;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">

    <section class="w3l-titles-9">
        <div class="main-host">
            <div class="wrapper">
                <div class="title">
                    <h3>Contact Our Sydney Team</h3>
                    <p style="color: var(--primary-blue); margin-top: 10px;">We’re based in Wentworthville and ready to help you streamline your business.</p>
                </div>
            </div>
        </div>
    </section>


    <div class="w3l-contacts-5">
        <div class="w3l-contacts-5-grid-main">
            <div class="w3l-contacts-5-grid">
                <div class="contacts-sub-5">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13260.864958841978!2d150.9593937555803!3d-33.8067323423062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12a2960c7d36cd%3A0x5017d681632cf40!2sWentworthville%20NSW%202145%2C%20Australia!5e0!3m2!1sen!2slk!4v1768845427547!5m2!1sen!2slk"
                        style="border:0" allowfullscreen></iframe>
                </div>
                <div class="map-content-5">
                    <input id="tab1" type="radio" name="tabs" checked>
                    <label class="tabtle" for="tab1">Sydney Office</label>

                    <section id="content1" class="tab-content">
                        <div class="d-grid grid-col-4">
                            <div class="service-col-4 contact">
                                <h6>Address</h6>
                                <p>29-33, Stapleton Street, Wentworthville <br>2145 NSW</p>

                            </div>
                            <div class="service-col-4 contact">
                                <h6>Email</h6>
                                <a href="mailto:support@pixelshield.com.au" class="link1">support@pixelshield.com.au</a>

                            </div>
                            <div class="service-col-4 contact">
                                <h6>Phone</h6>
                                <a href="tel:+61450728481" class="link1">+61-450-728-481</a>

                            </div>
                            <div class="service-col-4">
                                <div style="background: #eef2f7; padding: 10px; border-radius: 5px; font-size: 0.85em;">
                                    <strong>Secure Infrastructure</strong><br>
                                    Powered by Google Cloud Australia for speed and data safety.
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>

    </div>

    <section class="w3l-form-41">
        <div class="w3l-form-41-mian">
            <div class="wrapper">
                <div class="form-inner-cont">

                    <form method="post" class="signin-form" id="contactForm">
                        <h3>Send us a Message</h3>
                        <p style="margin-bottom: 25px; color: #666;">Have a question about our services or a custom project? We usually reply within 2 business hours.</p>
                        <div  class="form-input">
                            <label for="name">Name <span class="compulsory">*</span> </label>
                            <input type="text" id="name" placeholder="Name" />
                        </div>
                        <div  class="form-input">
                            <label for="email">Email <span class="compulsory">*</span></label>
                            <input type="email" id="email" placeholder="Email" />
                        </div>
                        <div  class="form-input">
                            <label for="phone">Phone</label>
                            <input type="text" id="phone" placeholder="Phone" />
                        </div>
                        <div  class="form-input">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" placeholder="Subject" />
                        </div>
                        <div  class="form-input">
                            <label for="message">Message <span class="compulsory">*</span></label>
                            <textarea placeholder="Message" id="message"></textarea>
                        </div>
                        <div  class="form-input" id="check-wrapper">
                            <label for="reason">Reason</label>
                            <input type="text" id="reason" placeholder="Reason"/>
                        </div>
                        <input type="hidden" name="_csrf_token" id="_csrf_token" value="{{ csrf_token('contact_form') }}">
                        <button class="btn" id="contact-request">Send</button>

                        <p style="text-align: center; margin-top: 15px; font-size: 0.8em; color: #888;">
                            <i class="fa fa-shield"></i> Your data is protected by industry-standard encryption on Google Cloud.
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript" src="{{ asset('jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugins/sweetalert2/seetalert2.min.js') }}"></script>

    <script type="text/javascript">
        $("#contact-request").on("click", function (e) {
            e.preventDefault();

            const $btn = $("#contact-request");
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var subject = $("#subject").val();
            var message = $("#message").val();
            var reason = $("#reason").val();
            var _csrf_token = $("#_csrf_token").val();


            $btn.prop('disabled', true).text('Sending...');

            if (
                validateInput(name, 'Name') &&
                validateInput(email, 'Email') &&
                validateInput(message, 'Message')
            )
            {
                $.ajax({
                    url: "{{ path('api_contact_action') }}",
                    method: "POST",
                    data: {
                        name: name,
                        email: email,
                        phone: phone,
                        subject: subject,
                        message: message,
                        reason: reason,
                        _csrf_token: _csrf_token
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Message Sent!',
                            text: 'We will get back to you within 2 business hours.',
                            confirmButtonColor: '#3085d6'
                        });

                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    },
                    error: function (xhr) {
                        let errorMsg = 'Something went wrong. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.status) {
                            errorMsg = xhr.responseJSON.status;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: errorMsg
                        });
                    },
                    complete: function() {
                        $btn.prop('disabled', false).text('Send');
                    }
                });
            }

        });
    </script>


{% endblock %}