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

{% block title %}Technical Support & Help Desk | PixelShield Software Australia{% 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">
                    <h1>Technical Support & Help Desk</h1>
                    <p style="color: var(--primary-blue); margin-top: 10px;">Fast, local help for your website, software, or WorkBird account.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="w3l-support-page">
        <div class="support">
            <div class="wrapper">
                <div class="d-grid align-support-grids">
                    <div class="host-supportform">
                        <h4 style="margin-bottom: 20px; color: var(--navy-shield);">Request Assistance</h4>
                        <form name="sentMessage" id="contactForm" novalidate>
                            <label for="subject" style="font-weight: bold; font-size: 0.9em;">How can we help today?</label>
                            <select id="subject" required style="margin-bottom: 15px; margin-top:10px;">
                                <option value="General Enquiry">General Enquiry</option>
                                <option value="WorkBird Support">WorkBird Support</option>
                                <option value="Billing & Accounts">Billing & Accounts</option>
                                <option value="Remote Technical Assistance">Remote Technical Assistance</option>
                                <option value="Request In-Person Support (Local)">Request In-Person Support (Local)</option>
                            </select>

                            <div class="control-group form-group">
                                <div class="controls">
                                    <input type="text" class="form-control" placeholder="Your Name *" id="name">
                                </div>
                            </div>
                            <div class="control-group form-group">
                                <div class="controls">
                                    <input type="email" class="form-control" placeholder="Email Address *" id="email">
                                </div>
                            </div>
                            <div class="control-group form-group">
                                <div class="controls">
                                    <input type="tel" class="form-control" name="phone" placeholder="Mobile Number" id="phone">
                                </div>
                            </div>
                            <div class="control-group form-group">
                                <div class="controls">
                                    <textarea rows="6" cols="100" class="form-control" placeholder="Tell us what's happening..." id="message" style="resize:none"></textarea>
                                </div>
                            </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 type="button" class="submit btn btn-primary" style="width: 100%; padding: 15px;" id="contact-request">Get Help Now</button>
                            <div class="clearfix"></div>
                        </form>
                    </div>

                    <div class="my-support" style="padding: 0;">
                        <div class="contact-box" style="background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 5px solid var(--primary-blue);">
                            <h4>Urgent Assistance</h4>
                            <p style="font-size: 0.9em; margin-bottom: 15px;">On a job site and need an answer now? Give us a call.</p>
                            <ul style="list-style: none; padding: 0;">
                                <li style="margin-bottom: 10px;">
                                    <strong>Call:</strong> <a href="tel:+061450728481" style="color: var(--primary-blue); font-weight: bold;">+61 450 728 481</a>
                                </li>
                                <li style="margin-bottom: 10px;">
                                    <strong>Email:</strong> <a href="mailto:support@pixelshield.com.au">support@pixelshield.com.au</a>
                                </li>
                            </ul>
                            <hr>
                            <a class="host-faq btn" href="{{ path('faq_action') }}" style="display: inline-block; margin-top: 10px; background: var(--navy-shield); color: white; padding: 10px 20px;">Browse Common Questions (FAQ)</a>
                        </div>
                    </div>
                </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_support_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 %}