@extends('layouts.default')

@section('title')
    How to Contact Us
@endsection
@section('meta')
    <meta name="description" content="If you have any questions or concerns, we are here to help. Book a free appointment, leave us a message or send us an email to hello@nodeblock.io">
    <link rel="canonical" href="{{ url('/') }}"/>
    <script type="application/ld+json" class="yoast-schema-graph"></script>

    <style type="text/css">
        .error {
            color: #e53939;
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            text-align: left;
        }

        .custom-form-group.error {
            border-color: #e53939 !important;
        }
    </style>
@endsection

@section('hero')
    @include('sections/hero/page')
@endsection

@section('content')

    <section class="section-wrapper">
        <div class="container ">
            <div class="row align-items-center">
                <div class="col-12 col-lg-5">
                    <h1 class=" text-left fw-bold">
                        Let’s Talk!
                    </h1>

                    <p>
                        If you have any questions about the subscription or are not sure which plan is right for you,
                        contact our team and let's schedule a call.
                    </p>

                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <div class="card call-us-card">
                                <a href="#" onclick="onAppointment()">
                                    <div class="card-body">
                                        <div>Book Your Appointment Now</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="card mt-3 mt-lg-auto mail-us-card">
                                <a href="mailto:hello@nodeblock.io">
                                    <div class="card-body">
                                        <div class="text-white">Email us</div>
                                        <div class="text-muted small font-weight-bold">hello@nodeblock.io</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-12 col-lg-1"></div>
                <div class="col-12 col-lg-6 ">
                    <div class="card custom-card blur-card mb-3 text-center cursor-pointer">
                        <div class="card-body ">
                            <h6 class="mt-4 mb-3">Shoot us a message</h6>
                            <div class="text-muted">
                                Fill in the form and leave us a message. <br>
                                We will contact you soon!
                            </div>

                            <!-- Success message -->
                            @if(\Illuminate\Support\Facades\Session::has('success'))
                                <div class="alert alert-success mt-3">
                                    {{\Illuminate\Support\Facades\Session::get('success')}}
                                </div>
                            @endif


                            <form class="my-3" method="post" action="{{ route('contact.store') }}">

                                <!-- CROSS Site Request Forgery Protection -->
                                @csrf


                                <div class="row mb-3">
                                    <div class="col-12">
                                        <div class="custom-form-group {{ $errors->has('name') ? 'error' : '' }}">
                                            <input type="text" name="name"
                                                   class="form-control custom-form-control "
                                                   placeholder="Name">
                                        </div>
                                        <!-- Error -->
                                        @if ($errors->has('name'))
                                            <div class="error">
                                                {{ $errors->first('name') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-12 col-lg-6">
                                        <div class="custom-form-group {{ $errors->has('email') ? 'error' : '' }}">
                                            <input type="text" name="email"
                                                   class="form-control custom-form-control "
                                                   placeholder="Email">
                                        </div>
                                        <!-- Error -->
                                        @if ($errors->has('email'))
                                            <div class="error">
                                                {{ $errors->first('email') }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="custom-form-group {{ $errors->has('phone') ? 'error' : '' }}">
                                            <input type="text" name="phone" class="form-control custom-form-control "
                                                   placeholder="Phone">
                                        </div>
                                        <!-- Error -->
                                        @if ($errors->has('phone'))
                                            <div class="error">
                                                {{ $errors->first('phone') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <div
                                            class="custom-form-group textarea-form-group {{ $errors->has('message') ? 'error' : '' }}">
                                            <textarea type="text" name="message" class="form-control "
                                                      placeholder="Message"></textarea>
                                        </div>
                                        <!-- Error -->
                                        @if ($errors->has('message'))
                                            <div class="error">
                                                {{ $errors->first('message') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <p class="text-muted small">
                                            Please enter the details of your request. A member of our support staff will
                                            respond as soon as possible.
                                        </p>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-default w-full">Send your message</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection


@section('foot_script')
    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
    <script type="text/javascript">
        function onAppointment() {
            Calendly.showPopupWidget('https://calendly.com/nodeblock/experiment6')
        }
    </script>
@endsection