@extends('v2.layout.apps')

@section('content')
<div class="text-center contact-whiteboard">
    <h5 class="h1 text-white pt-6"><strong>Contact Us</strong></h5>
</div>
<div class="clearfix"></div>
<div class="mt-5 mb-5">
    @if((new \Jenssegers\Agent\Agent())->isMobile())
    <div class="card-deck">
        <div class="card">
            <div class='card-body'>
                <div id="map" style="width: auto;">
                    <iframe class="custom-img-fluid" style="width:100%; height:300px;"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3977.3438801508123!2d101.07599121497219!3d4.531946996707235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31caeece94a37b53%3A0xb2f94521ecb30c96!2sSalutica%20Allied%20Solutions!5e0!3m2!1sen!2smy!4v1580800099328!5m2!1sen!2smy"
                        frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>
                <div class='row'>
                    <div class='col-sm-6 col-md-6'>
                        <p class="mt-4 font-weight-bold">Salutica Allied Solutions Sdn. Bhd.
                            <br>
                            <small>199001014672 (206341-H)</small>
                            <h5 class="card-text text-justify">
                                3, Jalan Zarib 6, Kawasan Perindustrian Zarib,
                                <br>
                                31500 Lahat, Ipoh, Perak, Malaysia.
                            </h5>
                        </p>
                    </div>
                    <div class=" col-sm-6 col-md-6">
                        <table class="table table-borderless table-sm h6">
                            <tr>
                                <th class="float-right text-right">Email:</th>
                                <td><a href="mailto:sbu@salutica.com.my">sbu@salutica.com.my</a></td>
                            </tr>
                            <tr>
                                <th class="float-right text-right">Tel:</th>
                                <td>+(605) 320 6800</td>
                            </tr>
                            <tr>
                                <th class="float-right text-right">Working Hours:</th>
                                <td>Monday - Friday,
                                    <br>
                                    8:00am - 5:30pm (GMT+8)
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <form method="POST" action="/contact-us" id="contact-form">
                @csrf
                <h5 class='h3'>Let's Connect</h5>
                <div class="clearfix"></div>
                <div class='form-row mt-2'>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>First Name *</label>
                            <input type="text" class="form-control" required
                                placeholder="Please enter your first name *" name="firstname">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>Last Name *</label>
                            <input type="text" class="form-control" rtequired
                                placeholder="Please enter your last name *" name="lastname">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class='col-md-6 col-sm-6'>
                        <div class="form-group">
                            <label>Email *</label>
                            <input type="email" class="form-control" required placeholder="Please enter your email *"
                                name="email">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="tel" class="form-control" required placeholder="Please enter your phone number"
                                name="phone">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Message *</label>
                    <textarea class="form-control" rows="4" required placeholder="Message for me *"
                        name="message"></textarea>
                </div>
                <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
                <div class='form-group'>
                    <button class='btn btn-info' type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@else
<div class="card-deck">
    <div class="card">
        <div class='card-body'>
            <div id="map" style="width: auto;">
                <iframe class="custom-img-fluid" style="width:100%; height:300px;"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3977.3438801508123!2d101.07599121497219!3d4.531946996707235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31caeece94a37b53%3A0xb2f94521ecb30c96!2sSalutica%20Allied%20Solutions!5e0!3m2!1sen!2smy!4v1580800099328!5m2!1sen!2smy"
                    frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
            <div class='row'>
                <div class='col-sm-6 col-md-6'>
                    <p class="mt-4 font-weight-bold">Salutica Allied Solutions Sdn. Bhd.
                        <br>
                        <small>199001014672 (206341-H)</small>
                        <h5 class="card-text text-justify">
                            3, Jalan Zarib 6, Kawasan Perindustrian Zarib,
                            <br>
                            31500 Lahat, Ipoh, Perak, Malaysia.
                        </h5>
                    </p>
                </div>
                <div class=" col-sm-6 col-md-6 mt-4">
                    <table class="table table-borderless table-sm h6">
                        <tr>
                            <th class="float-right text-right">Email:</th>
                            <td><a href="mailto:sbu@salutica.com.my">sbu@salutica.com.my</a></td>
                        </tr>
                        <tr>
                            <th class="float-right text-right">Tel:</th>
                            <td>+(605) 320 6800</td>
                        </tr>
                        <tr>
                            <th class="float-right text-right">Working Hours:</th>
                            <td>Monday - Friday
                                <br>
                                8:00am - 5:30pm (GMT+8)</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <form method="POST" action="/contact-us" id="contact-form">
                @csrf
                <h5 class='h3'>Let's Connect</h5>
                <div class="clearfix"></div>
                <div class='form-row mt-2'>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>First Name *</label>
                            <input type="text" class="form-control" required
                                placeholder="Please enter your first name *" name="firstname">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>Last Name *</label>
                            <input type="text" class="form-control" rtequired
                                placeholder="Please enter your last name *" name="lastname">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class='col-md-6 col-sm-6'>
                        <div class="form-group">
                            <label>Email *</label>
                            <input type="email" class="form-control" required placeholder="Please enter your email *"
                                name="email">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="tel" class="form-control" required placeholder="Please enter your phone number"
                                name="phone">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Message *</label>
                    <textarea class="form-control" rows="4" required placeholder="Message for me *"
                        name="message"></textarea>
                </div>
                <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
                <div class='form-group'>
                    <button class='btn btn-info' type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
</div>
@endsection

@section('script')
<script src="https://www.google.com/recaptcha/api.js?render=6Ldwv2waAAAAAHUTthoEk-98Y1N8KJ3lGh7P6cVF"></script>
<script>
    $("#contact-form").submit(function () {
        if ($("#g-recaptcha-response").val() == "") {
            event.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute('6Ldwv2waAAAAAHUTthoEk-98Y1N8KJ3lGh7P6cVF', {
                        action: 'validate_captcha'
                    })
                    .then(function (token) {
                        document.getElementById('g-recaptcha-response').value = token;
                        $("#contact-form").submit();
                    });
            });
        }
    })

</script>
@endsection