@php
    use App\Models\Page;
    $page = Page::where('slug', '/contact')->first();
    $title = $page?->title ?? 'Contact';
    $metaTitle = $page?->meta_title;
    $metaDescription = $page?->meta_description;
    $canonicalUrl = $page?->canonical_url ?: route('contact');
@endphp

@extends('layouts.app')

@section('content')
    <article class="active">
        <header>
            <h2 class="h2 article-title">Contact</h2>
        </header>

        <section class="mapbox" data-mapbox>
            <figure>
                <iframe width="400" height="300" loading="lazy"
                        src="https://www.openstreetmap.org/export/embed.html?bbox=-97.10403442382812%2C32.896740970654655%2C-96.90370559692383%2C33.020466867509846&amp;layer=mapnik">
                </iframe>
            </figure>
        </section>

        <section class="contact-form">
            <h3 class="h3 form-title">Contact Form</h3>

            <form action="{{ route('submit-contact-form') }}" class="form" method="POST" id="contactForm">
                @csrf
                @method('POST')
                <div class="input-wrapper">
                    <input type="text" name="name" class="form-input" placeholder="Full name" required>
                    <input type="email" name="email" class="form-input" placeholder="Email Address" required>
                </div>

                <textarea name="message" class="form-input" placeholder="Your Message" required></textarea>

                <div id="captchaBackground" class="input-wrapper">
                    <canvas id="captcha">captcha text</canvas>
                    <input id="textBox" type="text" name="captchaBox" required class="form-input" placeholder="Captcha">
                    <div id="output"></div>
                </div>

                <button id="submitButton" class="form-btn" type="submit">
                    <i class="fa-solid fa-paper-plane"></i>
                    <span id="submitBtnText">Send Message</span>
                </button>
            </form>
        </section>
    </article>
@endsection

@section('head')
<style>
    #captchaBackground {
        height: 150px;
        width: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #captcha {
        height: 70px;
        width: 100%;
        font-size: 30px;
        letter-spacing: 3px;
        margin: auto;
        display: block;
    }

    #textBox {
        height: 25px;
    }

    .incorrectCaptcha {
        color: #FF0000;
    }
    .correctCaptcha {
        color: #7FFF00;
    }
</style>
@endsection

@section('schema')
<script type="application/ld+json">
    {!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'ContactPage',
        'name' => $title,
        'url' => $canonicalUrl,
        'description' => $metaDescription ?? 'Get in touch with Nexxuz for IT services, web development, and tech support.',
        'mainEntity' => [
            '@type' => 'Organization',
            'name' => 'Nexxuz',
            'telephone' => '+1-469-383-8649',
            'email' => 'info@nexxuz.co',
        ],
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endsection

@section('script')
<script>
    let captchaText = document.getElementById('captcha');
    let ctx = captchaText.getContext("2d");
    ctx.font = "55px Roboto";
    ctx.fillStyle = "#08e5ff";

    let userText = document.getElementById('textBox');
    let submitButton = document.getElementById('submitButton');
    let output = document.getElementById('output');

    let captchaStr = @json(session('contact_captcha', ''));

    let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G',
                     'H', 'I', 'J', 'K', 'L', 'M', 'N',
                     'P', 'Q', 'R', 'S', 'T', 'U', 'V',
                     'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
                     'd', 'e', 'f', 'g', 'h', 'i', 'j',
                     'k', 'm', 'n', 'o', 'p', 'q', 'r',
                     's', 't', 'u', 'v', 'w', 'x', 'y',
                     'z', '2', '3', '4', '5', '6', '7',
                     '8', '9'];

    function drawCaptcha(text) {
       ctx.clearRect(0, 0, captchaText.width, captchaText.height);
       ctx.fillText(text, captchaText.width / 8, captchaText.height / 1.5);
    }

    function generate_captcha() {
        if (!captchaStr) {
            let emptyArr = [];

            for (let i = 1; i <= 7; i++) {
                emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
            }

            captchaStr = emptyArr.join('');
        }

        drawCaptcha(captchaStr);
    }

    let check_captcha = () => {
        if (userText.value === captchaStr) {
            return true;
        }

        $('#output').addClass("incorrectCaptcha");
        $('#output').html("Incorrect, please try again!");
        generate_captcha();

        return false;
    }

    userText.addEventListener('keyup', function(e) {
        if (e.key === 'Enter') {
            check_captcha();
        }
    });

    $('#textBox').on('focus', () => {
        $('#output').html('');
    });

    $(document).ready(() => {
        setTimeout(() => {
            generate_captcha();
        }, 100);
    });

    $('#contactForm').on('submit', (event) => {
        if (check_captcha()) {
            $('#submitButton').prop('disabled', true);
            $('#submitBtnText').html('Submitting...');
        } else {
            event.preventDefault();
        }
    });
</script>
@endsection