{{-- {{ dd(old('typeoforg')) }} --}}
@extends('layouts.home')
@section('styles')
    <style>
        body {
            background-image: url(../images/bg.png);
            background-size: 100% 100%;
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection
@section('body')
    <section class="section pb-5 mb-5" id="contact">

        <h1 class="section-header ">Contact</h1>
        <div class="row ">
            <div class="col-12 pl-4">
                <div class="is-invalid "></div>
                <div class="invalid-feedback" style="
                text-align: center;
            ">

{{(session()->get("error"))}}
                </div>
                @if (session('success'))
                    <div class="is-valid"></div>
                    <div class="valid-feedback" style="
                    text-align: center;
                ">
                       {{(session()->get("success"))}}
                    </div>
                @endif
            </div>
        </div>
        <div class="contact-wrapper">

            <!-- Left contact page -->

            <form id="contact-form" class="form-horizontal" role="form" action={{ route('contact.save') }}
                method="POST">
                @csrf
                <div class="form-group ">
                    <div class="col-sm-12">
                        <input type="text" class="form-control {{ $errors->has('orgname') ? 'is-invalid' : '' }}"
                            id="orgname" placeholder="Organization Name" name="orgname" value="{{ old('orgname') }}"
                            required>
                        <div class="invalid-feedback">
                            {{ $errors->first('orgname') }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control {{ $errors->has('country') ? 'is-invalid' : '' }}"
                            id="country" placeholder="Country" name="country" value="{{ old('country') }}" required>
                        <div class="invalid-feedback">
                            {{ $errors->first('country') }}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">

                        <select id="contact_reason" name="contact_reason"
                            class="form-control {{ $errors->has('contact_reason') ? 'is-invalid' : '' }}" required>
                            <option value="" disabled {{ old('contact_reason') ? '' : 'selected' }}>Select Contact
                                Reason</option>
                            <option value="Request Demo"
                                {{ old('contact_reason') == 'Request Demo' ? 'selected' : '' }}> Request Demo
                            </option>
                            <option value="General Inquiry"
                                {{ old('contact_reason') == 'General Inquiry' ? 'selected' : '' }}>General Inquiry
                            </option>
                            {{-- <option value="Pilot-Africa" {{ old('contact_reason') == 'Pilot-Africa' ? 'selected' : '' }}>
                                Pilot-Africa</option> --}}
                            <option value="Quote Request"
                                {{ old('contact_reason') == 'Quote Request' ? 'selected' : '' }}>Quote Request</option>
                            {{-- <option value="Collaboration Request"
                                {{ old('contact_reason') == 'Collaboration Request' ? 'selected' : '' }}>Collaboration
                                Request</option>
                            <option value="General Inquiry"
                                {{ old('contact_reason') == 'General Inquiry' ? 'selected' : '' }}>General Inquiry</option> --}}
                        </select>
                        <div class="invalid-feedback">
                            {{ $errors->first('contact_reason') }}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8">
                        <select id="typeoforg" name="typeoforg"
                            class="form-control {{ $errors->has('typeoforg') ? 'is-invalid' : '' }}" required>
                            <option value="{{ old('typeoforg') }}" disabled {{ old('contact_reason') ? '' : 'selected' }}>Type of Organization</option>
                            <option>Consulting</option>

                            <option value="Project Manager" {{ old('typeoforg') == 'Project Manager' ? 'selected' : '' }}>
                                Project Management Organization</option>
                            <option value="Contractor" {{ old('typeoforg') == 'Contractor' ? 'selected' : '' }}>Contractor
                            </option>
                            <option value="Project Owner" {{ old('typeoforg') == 'Project Owner' ? 'selected' : '' }}>
                                Project Owner
                            </option>
                            <option value="Quantity Surveyor"
                                {{ old('typeoforg') == 'Quantity Surveyor' ? 'selected' : '' }}>Quantity Surveyor
                            </option>

                            <option>Other</option>
                        </select>
                        <div class="invalid-feedback">
                            {{ $errors->first('typeoforg') }}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <select id="numberusers" name="numberusers"
                            class="form-control {{ $errors->has('numberusers') ? 'is-invalid' : '' }}" required>
                            <option value="{{ old('numberusers') }}" disabled {{ old('contact_reason') ? '' : 'selected' }}>Number of users</option>

                            <option value="Single User" {{ old('numberusers') == 'Single User' ? 'selected' : '' }}>Single
                                User
                            </option>
                            <option value="Multiple Users" {{ old('numberusers') == 'Multiple Users' ? 'selected' : '' }}>
                                Multiple Users
                            </option>
                        </select>

                        <div class="invalid-feedback">
                            {{ $errors->first('numberusers') }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control {{ $errors->has('orgwebsite') ? 'is-invalid' : '' }}"
                            name="orgwebsite" id="orgwebsite" placeholder="Organization Website (optional)"
                            name="Organization Website" value="{{ old('orgwebsite') }}">
                        <div class="invalid-feedback">
                            {{ $errors->first('orgwebsite') }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control {{ $errors->has('contactname') ? 'is-invalid' : '' }}"
                            id="contactname" placeholder="Contact Person" name="contactname"
                            value="{{ old('contactname') }}" required>
                        <div class="invalid-feedback">
                            {{ $errors->first('contactname') }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                            id="email" placeholder="E-mail" name="email" value="{{ old('email') }}" required>
                        <div class="invalid-feedback">
                            {{ $errors->first('email') }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}"
                            id="phone" placeholder="Phone (optional)" name="phone" value="{{ old('phone') }}">
                        <div class="invalid-feedback">
                            {{ $errors->first('phone') }}
                        </div>
                    </div>
                </div>

                <textarea class="form-control {{ $errors->has('message') ? 'is-invalid' : '' }}" rows="10"
                    placeholder="Tell us more" name="message" required>{{ old('message') }}</textarea>
                <div class="invalid-feedback">
                    {{ $errors->first('message') }}
                </div>
                <br>

                {{-- <input type="hidden" name="sum_key" value={{ $sum['key'] }}>
                <div class="form-group">
                    <div class="col-4">
                        What is {{ $sum['a'] }} added to {{ $sum['b'] }}
                    </div>

                    <div class="col-4">
                        <input type="text" class="form-control {{ $errors->has('sum') ? 'is-invalid' : '' }}"
                            id="sum" placeholder="Sum" name="sum" value="{{ old('sum') }}" required>
                        <div class="invalid-feedback">
                            {{ $errors->first('sum') }}
                        </div>
                    </div>
                </div> --}}
                <br><br>
                {{-- <div class="g-recaptcha" data-sitekey="6LezBJkmAAAAAFe7AgtxTgPUJLVnmG8lx5GCXeNo" data-callback="onSubmit"
                    data-size="invisible">
                </div> --}}

                <button class="g-recaptcha" data-sitekey="6LezBJkmAAAAAFe7AgtxTgPUJLVnmG8lx5GCXeNo" data-callback='onSubmit'
                    data-action='submit'> Send Message</button>

           {{--      <button id="submit" type="submit" value="SEND">
                    Submit
                </button> --}}

            </form>
            <script>
                function onSubmit(token) {

                    document.getElementById("contact-form").submit();
                }
            </script>

            <!-- Left contact page -->

            <div class="direct-contact-container">

                <ul class="contact-list">
                    <li class="list-item">
                        <div class="footer_num">
                            <img src={{ asset('images/canada.png') }} alt="">
                            <span>+1 778 806 1450</span>
                        </div>

                        <div class="footer_num">
                            <img src={{ asset('images/nigeria.png') }} alt="">
                            <span>+234 810 174 2221</span>
                        </div>
                        <div class="footer_num">
                            <ion-icon name="mail"></ion-icon>
                            <span class="contact-text gmail"><a href="mailto:#"
                                    title="Send me an email">info@rapisurv.com</a></span>
                        </div>
                    </li>


                    {{-- <li class="list-item">
                        <ion-icon name="mail"></ion-icon><span class="contact-text gmail"><a href="mailto:#"
                                title="Send me an email">info@rapisurv.com</a></span>
                     --}}

                </ul>

                <hr>
                <ul class="social-media-list">
                    <a href="https://www.facebook.com/Rapisurv" target="_blank" class="contact-icon">
                        <li>
                            <ion-icon name="logo-facebook"></ion-icon>
                        </li>
                    </a>

                    <a href="https://twitter.com/rapisurv" target="_blank" class="contact-icon">
                        <li>
                            <ion-icon name="logo-twitter"></ion-icon>
                        </li>
                    </a>

                    <a href="https://www.instagram.com/rapisurv/" target="_blank" class="contact-icon">
                        <li><ion-icon name="logo-instagram"></ion-icon></li>
                    </a>

                    <a href="https://www.youtube.com/channel/UCWIGqepQGZPHmiWNDC3tZSw" target="_blank"
                        class="contact-icon">
                        <li> <ion-icon name="logo-youtube"></ion-icon></li>
                    </a>
                </ul>
                <hr>


            </div>

        </div>

    </section>
@endsection