@extends('front.layout.app')
@section('title',__('general.contact')." - ")
@section('header')
@endsection
@section('seo')
@endsection
@section('content')

    <style>
        .contact-text{
            font-size: .9rem;
        }

        .contact-text p{
            font-size: .9rem !important;
        }
    </style>

    <section class="space">
        <div class="container container-custom">
            <div class="row">
                <div class="col-md-5">
                    <div class="contact-box">
                        <div class="contact-title">
                            <h4>@lang('general.contact_information')</h4>
                            <i class="fas fa-phone-volume"></i>
                            <div class="contact-title_icon">
                                <h6>{{ \App\Models\Back\Settings\Settings::find(1)->phone }}</h6>
                            </div>
                        </div>
                        <div class="contact-title">
                            <i class="fas fa-phone-volume"></i>
                            <div class="contact-title_icon">
                                <h6>{{ \App\Models\Back\Settings\Settings::find(1)->phone2 }}</h6>
                            </div>
                        </div>
                        <div class="contact-title">
                            <i class="fas fa-envelope"></i>
                            <div class="contact-title_icon">
                                <h6>{{ \App\Models\Back\Settings\Settings::find(1)->mail }}</h6>
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div class="contact-box">
                        <div class="contact-title">
                            <h4>@lang('general.office')</h4>
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="contact-title_icon">
                                <p>@lang('general.address')</p>
                                <h6>{!! \App\Models\Back\Settings\Settings::find(1)->adress !!}</h6>
                            </div>
                        </div>
                        <div class="contact-text">
                            <strong class="d-block mb-1">Ulaşım</strong>
                            <div class="">
                                <p>
                                Tıp Merkezimize ulaşım oldukça kolaydır.
                                <br>
                                •	Çanakkale Havalimanı’ndan: Taksi veya özel araç ile tıp merkezimize 10 dakikada ulaşabilirsiniz.<br>
                                •	Çanakkale Feribot İskelesi’nden: Feribottan indikten sonra 12 dakika yürüme mesafesiyle tıp merkezimize ulaşabilirsiniz.<br>
                                •	Çanakkale Otogar’dan: Şehir içi otobüsler, özel araç ve taksiyle tıp merkezimize 18 dakikada ulaşabilirsiniz.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="get-in-touch get-in-touch-style2">
                        <img src="{{ asset('front/images/contact-form-bg.png') }}" class="img-fluid get-in-bg" alt="#">
                        <h3>@lang('general.contact_us')</h3>
                        <form action="https://formsubmit.co/a88f03b85f34f392ea33047c112ba4e6" method="POST">
                            @csrf
                            <input type="hidden" name="_captcha" value="false">
                            <input type="text" name="_honey" style="display:none">


                            <div class="form__ic">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="alert alert-success" role="alert" style="display: none" id="success_alert">
                                            @lang('general.form_1_alert_success')
                                        </div>
                                        <div class="alert alert-danger" role="alert" style="display: none" id="error_alert">
                                            @lang('general.form_1_alert_danger')
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" required="" name="name" class="form-control" placeholder="@lang('general.contact_item_1')">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="phone" required="" class="form-control" placeholder="@lang('general.contact_item_2')">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="email" name="email" required="" class="form-control" placeholder="@lang('general.contact_item_3')">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" required="" name="name" class="form-control" placeholder="@lang('general.contact_item_4')">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group textarea-icon">
                                        <textarea class="form-control" name="note" required
                                                  placeholder="@lang('general.contact_item_5')" id="" rows="3"></textarea>
                                            <i class="far fa-envelope"></i>
                                            <button type="submit" class="btn btn-success has-spinner" id="set_btn">@lang('general.send')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="map">
        <div class="container container-custom">
            <div class="row">
                <div class="col-md-12">
                    <iframe width="100%" height="450" id="gmap_canvas"
                            src="{{ \App\Models\Back\Settings\Settings::find(1)->maps }}"
                            frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script>
        (function ($) {
            $.fn.buttonLoader = function (action) {
                var self = $(this);
                if (action == 'start') {
                    if ($(self).attr("disabled") == "disabled") {
                        e.preventDefault();
                    }
                    $('.has-spinner').attr("disabled", "disabled");
                    $(self).attr('data-btn-text', $(self).text());
                    $(self).html('<span class="spinner"><i class="icon-spinner icon-spin"></i></span> @lang('general.please_wait')');
                    $(self).addClass('active');
                }
                if (action == 'stop') {
                    $(self).html($(self).attr('data-btn-text'));
                    $(self).removeClass('active');
                    $('.has-spinner').removeAttr("disabled");
                }
            }
        })(jQuery)
    </script>
    <script type="text/javascript">
        var btn = $('#set_btn');
        $('#set_form').unbind('submit').bind('submit',function (event){
            event.preventDefault();
            btn.buttonLoader('start');
            $('#success_alert').hide();
            $('#error_alert').hide();
            var data = new FormData(this);
            $.ajax({
                type: 'POST',
                url: '{{ route('setContact') }}',
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if(response.code == true)
                    {

                        if(response.type == "success")
                        {
                            $('#success_alert').show();
                            $('#set_form')[0].reset();
                        }
                        else
                        {
                            $('#error_alert').show();
                        }
                    }
                    btn.buttonLoader('stop')
                    console.log(response);
                },
                error: function (data) {
                    btn.buttonLoader('stop')
                    console.log(data);
                }
            });
        });
    </script>
@endsection