@extends('layout')

@section('extra_scripts')
    <script type="text/javascript" src="{!! asset('js/jquery-validation/jquery.validate.min.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('js/jquery-validation/localization/messages_pl.min.js') !!}"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkb6NTEQ5reG4EcQWW_sVQx24t-3_k_JE&callback=initMap"type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#contact').validate({
                rules: {
                    name: {
                        minlength: 2,
                        maxlength: 100,
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    subject: {
                        minlength: 3,
                        maxlength: 100,
                        required: true
                    },
                    text: {
                        minlength: 10,
                        maxlength: 10000,
                        required: true
                    }
                },
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function(error, element) {
                    if(element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            function checkHP() {
                var honeyPot = document.forms["contact"]["hp"].value;
                if (honeyPot !== "") {
                  // Jeśli ukryte pole zostało wypełnione, zatrzymaj wysyłanie formularza
                  return false;
                }
                return true;
            }
            if (navigator.webdriver) {
                // Wykryto bota, uruchom zapętlenie lub blokadę
                while (true) {}
            }
        });
    </script>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12" id="contact-form">
                <h3 class="title">Kontakt</h3>
                <p>
                    Serwis PRZEGRODY.PL obsługuje firma: TRANSFORMATA Michał Marcinkowski
                </p>
                <form method="post" class="reply" id="contact" action="{!! route('front::contact.store') !!}" onsubmit="return checkHP()">
                    <div class="h-captcha" data-sitekey="bed8f512-e8dc-4e62-a9b8-720891a69238"></div>

                    @include('parts.errors')

                    {!! csrf_field() !!}
                    <fieldset>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label>Imię i nazwisko: <span>*</span></label>
                                    <input class="form-control" id="name" name="name" type="text" value="{{ Input::old('name') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label>Email: <span>*</span></label>
                                    <input class="form-control" type="email" id="email" name="email" value="{{ Input::old('email') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Tytuł: <span>*</span></label>
                                    <input class="form-control" id="subject" name="subject" type="text" value="{{ Input::old('subject') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Wiadomość: <span>*</span></label>
                                    <textarea class="form-control" id="text" name="text" rows="3" cols="40" required>{{ Input::old('text') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Weryfikacja - podaj wynik działania 2 + 3 = <span>*</span></label>
                                    <input class="form-control" id="spmtest" placeholder="2 + 3 =" name="spmtest" type="text" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input type="text" name="hp" style="display:none">
                            </div>
                        </div>
                    </fieldset>
                    <button class="btn btn-normal btn-color submit bottom-pad" type="submit">Wyślij <i class="fa fa-envelope"></i></button>

                    <div class="clearfix">
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
                <div class="address widget">
                    <h3 class="title">Lokalizacja</h3>
                    <ul class="contact-us">
                        <li>
                            <i class="fa fa-map-marker"></i>
                            <p>
                                TRANSFORMATA Michał Marcinkowski <br/>
                                ul. Grabowa 32<br/> 62-080 Lusówko k. Poznania
                            </p>
                        </li>
                        @if (isset($settings['phone_kom']) and $settings['phone_kom'])
                        <li>
                            <i class="fa fa-phone"></i>
                            <p><strong>Tel.:</strong> {{ $settings['phone_kom'] }}</p>
                        </li>
                        @endif
                        <li>
                            <i class="fa fa-envelope"></i>
                            <p><strong>Email:</strong><a href="mailto:{{ $settings['site_email'] or 'przegrody@przegrody.pl' }}">{{ $settings['site_email'] or 'przegrody@przegrody.pl' }}</a></p>
                        </li>
                        <li>
                            <i class="fa fa-facebook"></i>
                            <p><strong>Facebook:</strong><a href="{{ $settings['facebook_link'] or 'https://www.facebook.com/pages/Transformata/202964796391852' }}" target="_blank">Transformata</a></p>
                        </li>
                    </ul>
                </div>
                <div class="contact-info widget">
                    <h3 class="title">Godziny otwarcia</h3>
                    <ul class="business-hour">
                        <li><i class="fa fa-clock-o"> </i>Poniedziałek-Piątek 8:00-16:00</li>
                        <li><i class="fa fa-clock-o"> </i>lub inne terminy po kontakcie telefonicznym</li>
                    </ul>
                </div>
                {{--<div class="follow widget">--}}
                    {{--<h3 class="title">Follow Us</h3>--}}
                    {{--<div class="member-social dark">--}}
                        {{--<a style="cursor: pointer;" class="facebook"><i class="fa fa-facebook"></i></a>--}}
                        {{--<a style="cursor: pointer;" class="twitter"><i class="fa fa-twitter"></i></a>--}}
                        {{--<a style="cursor: pointer;" class="dribbble"><i class="fa fa-dribbble"></i></a>--}}
                        {{--<a style="cursor: pointer;" class="gplus"><i class="fa fa-google-plus"></i></a>--}}
                        {{--<a style="cursor: pointer;" class="linkedin"><i class="fa fa-linkedin"></i></a>--}}
                    {{--</div>--}}
                {{--</div>--}}
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 class="title">Na mapie</h3>
                <div id="maps" class="google-maps">
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3644.649457054812!2d16.642621483805836!3d52.43364466102811!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470438894bf34db3%3A0xd97e17da0dc5dafd!2sPRZEGRODY.PL%20-%20najta%C5%84sze%20kurtyny%20paskowe!5e0!3m2!1spl!2spl!4v1639601151741!5m2!1spl!2spl" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
        <div class="divider"></div>
    </div>
@endsection