@extends('layouts.site')
@section('title', 'Contact')
@section('content')
    <section>
        <div class="container mt-4 mt-lg-5">
            <div class="row justify-content-between justify-content-lg-center">
                <div class="col-md-12 col-lg-5 col-xxl-6 pt-md-5 mb-5 mb-lg-0">
                    <h1 class="contact__title mb-4 mb-xxl-5">Contactează-ne</h1>
                    <div class="contact-info">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-3">
                                <a href="tel:{{ config('company.phone') }}" class="d-inline-flex align-items-center">
                                    <span class="icon icon-phone-solid mr-3"></span>
                                    <span class="info">{{ config('company.phone') }}</span>
                                </a>
                            </li>
                            <li class="mb-3">
                                <a href="mailto:{{ config('company.email') }}" class="d-inline-flex align-items-center">
                                    <span class="icon icon-mail-solid mr-3"></span>
                                    <span class="info">{{ config('company.email') }}</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="d-inline-flex align-items-center" target="_blank">
                                    <span class="icon icon-facebook-solid mr-3"></span>
                                    <span class="font-underline info">Facebook</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6">
                    <div class="contact-form bg-light p-4 p-lg-5">
                        <form>
                            <div class="form-group">
                                <label class="has-float-label">
                                    <input type="text" class="form-control" name="name" required=""
                                           placeholder="&nbsp;">
                                    <span>Nume</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="has-float-label">
                                    <input type="text" class="form-control" name="phone" required=""
                                           placeholder="&nbsp;">
                                    <span>Telefon</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="has-float-label">
                                    <input type="email" class="form-control" name="email" required=""
                                           placeholder="&nbsp;">
                                    <span>Email</span>
                                </label>
                            </div>
                            <div class="form-group mb-4">
                                <label class="has-float-label h-auto">
                                    <textarea class="form-control h-auto pt-4" name="body" rows="4" required=""
                                              placeholder="&nbsp;"></textarea>
                                    <span>Mesajul tău</span>
                                </label>
                            </div>
                            <div class="form-group font-small">
                                <div class="custom-control custom-checkbox mb-2">
                                    <input type="checkbox" class="custom-control-input" value="1" id="accept_terms"
                                           name="_accept_terms" required="">
                                    <label class="custom-control-label" for="accept_terms">
                                        <span class="text-muted">Am citit si sunt de acord cu </span>
                                        <a href="{{ route('site.page', 'termeni-si-conditii') }}" target="_blank" class="btn-link text-primary">Termenii și
                                            condițiile</a>.
                                    </label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="accept_gdpr"
                                           name="_accept_gdpr" value="1" required="">
                                    <label class="custom-control-label" for="accept_gdpr">
                                        <span class="text-muted">Am citit si sunt de acord cu </span>
                                        <a href="{{ route('site.page', 'politica-de-confidentialitate') }}" target="_blank" class="btn-link text-primary">Politica de
                                            confidențialitate a datelor personale (GDPR)</a>.
                                    </label>
                                </div>
                            </div>
                            <div class="my-4">
                                recaptcha
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary px-4 px-lg-5 rounded-md">
                                    <span class="font-xs font-weight-light d-inline-block px-5 py-2">Trimite</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="contact__map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2757.1848777224504!2d21.305604976641902!3d46.28630117821246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4745bdc335c01c43%3A0x3382d4a242308303!2sstrada%2029%2C%20%C8%98ofronea%20317350!5e0!3m2!1sen!2sro!4v1699688856235!5m2!1sen!2sro"
                            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection