@extends('v1.enduser.genericpage')

@push('subContents')
    <br/>
    <div class="row">
        <div class="col-md-9 col-sm-12 conatctFormCon">
            <h4 class="contactHeading">Contact Form</h4>
            <form class="row formFormatOne" id="contactForm">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <label for="contactSubject">Subject *</label>
                            <input id="contactSubject" placeholder="Please write subject"/>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <label for="contactName">Name *</label>
                            <input id="contactName" placeholder="Please enter your full name"/>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <label for="contactEmail">Email *</label>
                            <input id="contactEmail" placeholder="Please enter your email address"/>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <label for="contactPhone">Phone *</label>
                            <input id="contactPhone" placeholder="Please enter your phone number"/>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <label for="contactMesg">Message *</label>
                    <textarea id="contactMesg" placeholder="Please write your message here"></textarea>
                </div>
                <div class="col-md-12 text-right">
                    <button class="btnRadiusOutlineInvert sendButton" id="sendBtn" type="submit">Send</button>
                    <span id="sendLoading" style="display: none;">Sending...</span>
                </div>
            </form>
        </div>
        <div class="col-md-3 col-sm-12">
            <h4 class="contactHeading">Head Office</h4>
            <div class="contactOffice contactWithIconPrefix">
                <div class="contactIconPrefix">
                    <i class="material-icons">location_on</i>
                </div>
                <div class="contactPrefixContent">
                    <address>{{ $pageInfo['subContent']['headOffice']['other_info']['headOffice']['location']['address'] }}</address>
                    <a href="https://www.google.com/maps/?q={{ $pageInfo['subContent']['headOffice']['other_info']['headOffice']['location']['lat'] }},{{ $pageInfo['subContent']['headOffice']['other_info']['headOffice']['location']['lng'] }}" target="_blank">Get Direction</a>
                </div>
            </div>
            <div class="contactPhone contactWithIconPrefix">
                <div class="contactIconPrefix">
                    <i class="material-icons">phone</i>
                </div>
                <div class="contactPrefixContent">
                    <p>{{ $pageInfo['subContent']['headOffice']['other_info']['headOffice']['phone'] }}</p>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('footerScript')
    <script>
        $(document).ready(function() {
            $("#contactForm").on("submit", function(e) {
                e.preventDefault();
                
                var subject = $("#contactSubject").val();
                if(subject=="") {
                    alert("Subject field is required!");
                    return;
                }
                var name = $("#contactName").val();
                if(name=="") {
                    alert("Name field is required!");
                    return;
                }
                var email = $("#contactEmail").val();
                if(email=="") {
                    alert("Email field is required!");
                    return;
                }
                var phone = $("#contactPhone").val();
                if(phone=="") {
                    alert("Phone field is required!");
                    return;
                }
                var mesg = $("#contactMesg").val();
                if(mesg=="") {
                    alert("Message field is required!");
                    return;
                }

                $("#sendLoading").show();
                $("#sendBtn").hide();

                var data = new FormData();
                data.append('name', name);
                data.append('_token', '{{ csrf_token() }}');
                data.append('email', email);
                data.append('phone', phone);
                data.append('mesg', mesg);
                data.append('subject', subject);

                $.ajax({
                    method: "post",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        $("#contactForm input, #contactForm textarea").val('');
                        $("#sendLoading").hide();
                        $("#sendBtn").show();
                    },
                    error: function(error) {
                        alert("Filed to send a message.")
                        $("#sendLoading").hide();
                        $("#sendBtn").show();
                    }
                });

            });
        });
    </script>
@endpush