@extends(get_view('index'))
@section('title')
{{ translate('contact') }} - 
@endsection
@section('header')

@endsection
@section('content')

    @include(get_view('components.pages.page-title'), ['title' => translate('contact')])



    

    <div class="container pt-4 pb-5 pb-sm-0 my-5">
        <div class="row pb-2 mb-5">
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">
                <div class="row">

                    @if ( isset(Site::contact()->contact_phone) && Site::contact()->contact_phone != null )
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('Bizi Arayın') }}</h3>
                        <a href="tel:{{ Site::contact()->contact_phone ?? '' }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ get_asset('img/demos/construction/icons/phone.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ Site::contact()->contact_phone ?? '' }}
                        </a>
                    </div>
                    @endif

                    @if ( isset(Site::contact()->contact_email) && Site::contact()->contact_email != null )
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('E-Posta Gönderin') }}</h3>
                        <a href="mailto:{{ Site::contact()->contact_email ?? '' }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ get_asset('img/demos/construction/icons/email.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ Site::contact()->contact_email ?? '' }}
                        </a>
                    </div>
                    @endif

                </div>
            </div>

            @if ( isset(Site::contact()->contact_address) && Site::contact()->contact_address != null )
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1600">
                <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('Bizi Ziyaret Edin') }}</h3>
                <span class="d-flex align-items-center text-color-dark font-weight-bold text-3-5">
                    <img width="23" height="23" src="{{ get_asset('img/demos/construction/icons/location.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                    {{ Site::contact()->contact_address ?? '' }}
                </span>
            </div>
            @endif

        </div>
        <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1400">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ __('Bize Mesaj Bırakın') }}</h2>
                <p class="text-3-5 font-weight-light mb-5-5">Contact us or give us a call to discover how we can help.</p>
                <form class="form-style-3" action="{{ url('message/send') }}" method="POST">
                    @csrf

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @else
                        @if (session('success'))
                        <div class="contact-form-success alert alert-success mt-4">
                            <strong>{{ __('İşlem Başarılı!') }}</strong> {{ session('success') }}
                        </div>
                        @elseif(session('error'))
                            <div class="contact-form-error alert alert-danger mt-4">
                                <strong>{{ __('Hata!') }}</strong> {{ session('error') }}
                                <span class="mail-error-message text-1 d-block"></span>
                            </div>
                        @endif
                    @endif



                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Lütfen adınızı giriniz.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="name" placeholder="{{ __('Adınız') }}" required>
                        </div>
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Lütfen soyadınızı giriniz.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="surname" placeholder="{{ __('Soyadınız') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="email" value="" data-msg-required="{{ __('Lütfen e-posta adresinizi giriniz.') }}" data-msg-email="{{ __('Lütfen geçerli bir e-posta adresi giriniz.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="email" placeholder="{{ __('E-posta Adresi') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Lütfen konu başlığını giriniz.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="subject" placeholder="{{ __('Konu') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <textarea maxlength="5000" data-msg-required="{{ __('Lütfen mesajınızı giriniz.') }}" rows="8" class="form-control text-3 h-auto py-3-5" name="message" placeholder="{{ __('Mesajınız') }}" required></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-12">
                            <div id="google_recaptcha"></div>
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col">
                            <button type="submit" class="custom-view-more d-inline-flex align-items-center btn btn-primary font-weight-semibold rounded-0 text-3-5 btn-px-4 btn-py-2" data-loading-text="{{ __('Yükleniyor...') }}">
                                {{ __('Gönder') }}
                                <img width="27" height="27" src="{{ get_asset('img/demos/construction/icons/arrow-right.svg') }}" alt="Next" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1800">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ __('Şirket Merkezi') }}</h2>
                <p class="text-3-5 font-weight-light mb-5-5">Altıevler Mah. Can Sokak No:5 Narlıdere – İzmir </p>
                <div class="google_map_iframe">
                    {!! Site::contact()->google_maps ?? '' !!}
                </div>
            </div>
        </div>
    </div>

    <div class="position-relative pb-5 d-none d-xl-block">
        <div class="position-absolute transform3dy-n50 left-0">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="1500ms">
                <div class="custom-square-1 bg-primary mt-0 mb-5"></div>
            </div>
        </div>
    </div>

@endsection
@section('footer')
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
        })
    })()
</script>
@endsection