@extends('layouts.main')
@section('content')

<style>
    :root {
        --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --border-grey: #d5d5d5;
    }

    .contact-map {
        width: 100%;
        height: 420px;
        border: 0;
        display: block;
    }

    .contact {
        max-width: 1140px;
        margin: 0 auto;
        padding: 60px 20px 80px;
        display: flex;
        gap: 60px;
        flex-wrap: wrap;
    }

    .contact__form-col {
        flex: 1.3;
        min-width: 320px;
    }

    .contact__eyebrow {
        color: var(--brand-red);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0 0 10px;
    }

    .contact__title {
        color: var(--text-dark);
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 30px;
    }

    .contact__title .dot {
        color: var(--brand-red);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        color: var(--text-dark);
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        width: 100%;
        border: 1px solid var(--border-grey);
        border-radius: 3px;
        padding: 12px 14px;
        font-size: 14px;
        color: var(--text-dark);
        box-sizing: border-box;
        font-family: inherit;
    }

    .form-group textarea {
        resize: vertical;
    }

    .contact__captcha {
        display: flex;
        align-items: center;
        gap: 15px;
        border: 1px solid var(--border-grey);
        padding: 12px 16px;
        margin-bottom: 20px;
        max-width: 340px;
    }

    .contact__captcha-label {
        font-size: 14px;
        color: var(--text-dark);
        white-space: nowrap;
    }

    .contact__captcha-value {
        font-family: 'Courier New', monospace;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--text-dark);
    }

    .contact__captcha-refresh {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: var(--text-dark);
    }

    .contact__captcha-answer {
        width: 100%;
        max-width: 340px;
        border: 1px solid var(--border-grey);
        border-radius: 3px;
        padding: 10px 14px;
        font-size: 14px;
        margin-bottom: 25px;
        box-sizing: border-box;
    }

    .btn-submit {
        display: inline-block;
        background: var(--brand-red);
        color: #fff;
        border: none;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 14px 45px;
        border-radius: 3px;
        cursor: pointer;
    }

    .btn-submit:hover {
        background: #c92a33;
    }

    .contact__info-col {
        flex: 1;
        min-width: 280px;
    }

    .contact__info-block {
        margin-bottom: 30px;
    }

    .contact__info-block h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--brand-red);
        font-size: 19px;
        font-weight: 700;
        margin: 0 0 12px;
    }

    .contact__info-block p,
    .contact__info-block a {
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.6;
        text-decoration: none;
        margin: 0;
    }

    .contact__socials {
        display: flex;
        gap: 12px;
    }

    .contact__socials a {
        width: 34px;
        height: 34px;
        border: 1px solid var(--brand-red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-red);
        text-decoration: none;
        font-size: 14px;
    }

    .contact__socials a:hover {
        background: var(--brand-red);
        color: #fff;
    }

    @media (max-width: 767px) {
        .contact {
            flex-direction: column;
        }
    }
</style>


<iframe   class="contact-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3077.9109380386767!2d-74.28559506154178!3d40.675996338091295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3b2742cdb8c4d%3A0xcbab76682f929fbe!2s37%20Market%20St%20%23202%2C%20Kenilworth%2C%20NJ%2007033%2C%20USA!5e0!3m2!1sen!2sin!4v1702533782444!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

<section class="contact">

    <div class="contact__form-col">
        <p class="contact__eyebrow">{{ __('messages.contact_feel_free_to_mail_us') }}</p>
        <h2 class="contact__title">{{ __('messages.contact_us') }}<span class="dot">.</span></h2>
        @if ($errors->any())
          <div class="alert-floating" id="errorAlert" role="alert">
            <button type="button" class="alert-close-btn" onclick="document.getElementById('errorAlert').remove()" aria-label="Dismiss">&times;</button>
            <ul>
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif
        
        @if (session('success'))
          <div class="alert-floating alert-success-floating" id="successAlert" role="alert">
            <button type="button" class="alert-close-btn" onclick="document.getElementById('successAlert').remove()" aria-label="Dismiss">&times;</button>
            {{ session('success') }}
          </div>
        @endif

        <form method="POST" action="{{ route('contactus.store') }}" id="contactForm">
@csrf
            <div class="form-group">
                <label for="full_name">{{ __('messages.contact_full_name') }}</label>
                <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required>
            </div>

            <div class="form-group">
                <label for="email">{{ __('messages.contact_email_id') }}</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" required>
            </div>

            <div class="form-group">
                <label for="phone">{{ __('messages.contact_phone_no') }}</label>
                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required>
            </div>

            <div class="form-group">
                <label for="subject">{{ __('messages.contact_subject') }}</label>
                <input type="text" id="subject" name="subject" value="{{ old('subject') }}">
            </div>

            <div class="form-group">
                <label for="message">{{ __('messages.contact_your_message') }}</label>
                <textarea id="message" name="message" rows="5">{{ old('message') }}</textarea>
            </div>

            <div class="captcha-field @error('captcha') ss-field-error-state @enderror">
          <div class="captcha-field-row">
            <div class="captcha-box">
              <img id="captchaImg" src="{{ captcha_src('math') }}" alt="Captcha">
                <button type="button" class="captcha-refresh-btn"  id="reload" aria-label="Refresh captcha">
              <i class="fa-solid fa-rotate"></i>
            </button>
            </div>
            <input type="text" class="captcha-answer" name="captcha" placeholder="{{ __('messages.contact_type_your_answer') }}" autocomplete="off">
          </div>
         </div>
        
    
        <input type="hidden" name="utm_source" value="{{ old('utm_source', $tracking['utm_source'] ?? 'website') }}">
        <input type="hidden" name="utm_medium" value="{{ old('utm_medium', $tracking['utm_medium']) }}">
        <input type="hidden" name="utm_campaign" value="{{ old('utm_campaign', $tracking['utm_campaign']) }}">
        <input type="hidden" name="matchtype" value="{{ old('matchtype', $tracking['matchtype']) }}">
        <input type="hidden" name="device" value="{{ old('device', $tracking['device']) }}">
        <input type="hidden" name="network" value="{{ old('network', $tracking['network']) }}">
        <input type="hidden" name="creative" value="{{ old('creative', $tracking['creative']) }}">
        <input type="hidden" name="keyword1" value="{{ old('keyword1', $tracking['keyword1']) }}">
        <input type="hidden" name="devicemodel" value="{{ old('devicemodel', $tracking['devicemodel']) }}">
        <input type="hidden" name="target" value="{{ old('target', $tracking['target']) }}">
        <input type="hidden" name="adgroupid1" value="{{ old('adgroupid1', $tracking['adgroupid1']) }}">
        <input type="hidden" name="campaignid1" value="{{ old('campaignid1', $tracking['campaignid1']) }}">
        <input type="hidden" name="ip_address" value="{{ old('ip_address', $tracking['ip_address']) }}">
        <input type="hidden" name="url" value="{{ old('url', $tracking['url']) }}">
            <button type="submit" class="btn-submit">{{ __('messages.contact_submit') }}</button>
        </form>
    </div>

    <div class="contact__info-col">

        <div class="contact__info-block">
            <h3>&#128205; {{ __('messages.contact_address') }}</h3>
            <p>{{ __('messages.contact_address_value') }}</p>
        </div>

        <div class="contact__info-block">
            <h3>&#9993; {{ __('messages.contact_email') }}</h3>
            <p><a href="mailto:info@solitairesmile.com">{{ __('messages.contact_email_value') }}</a></p>
        </div>

        <div class="contact__info-block">
            <h3>&#128222; {{ __('messages.contact_phone_no_info') }}</h3>
            <p><a href="tel:+18447654824">{{ __('messages.contact_phone_no_value') }}</a></p>
        </div>

        <div class="contact__info-block">
            <h3>&#8663; {{ __('messages.contact_follow_us') }}</h3>
            <div class="contact__socials">
                <!--<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>-->
                <a href="https://www.instagram.com/solitairesmiledentallab" target="_blank" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://www.linkedin.com/company/solitaire-smile-dental-lab/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
        </div>

    </div>

</section>



@endsection