@extends ('web.layouts-v2.master')

@section ('title')
@lang('messages.menu_support') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_support')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
@endsection

@section ('content')

<!-- Breadcrumbs -->
<section class="container-fluid text-center g-pt-120 g-pb-10 g-pb-40--lg breadcrumbs"> <!-- g-py-40  -->
    <h2 class="h2 g-color-black g-font-weight-600 text-center m-0 p-0">@lang('messages.menu_support')</h2>
</section>
<!-- End Breadcrumbs -->

<!-- Support Form -->
<section class="container g-py-40">
    <div class="row g-mb-20">
        <div class="col-lg-6 g-mb-50">
            <!-- Heading -->
            <h2 class="h1 g-color-black g-font-weight-700 mb-4">@lang('messages.label_support_question')</h2>
            <p class="g-font-size-18 mb-0">@lang('messages.label_support_welcome')</p>
            <!-- End Heading -->
        </div>
        <div class="col-lg-3 align-self-end ml-auto g-mb-50">
            <a class="u-btn-hover-v2-1" href="tel: +{{ $company->phone }}">
                <div class="media">
                    <div class="d-flex align-self-center">
                        <span class="u-icon-v3 u-icon-size--sm g-color-white g-bg-primary rounded-circle mr-3">
                            <i class="g-font-size-16 icon-communication-033 u-line-icon-pro"></i>
                        </span>
                    </div>
                    <div class="media-body align-self-center">
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase mb-0">@lang('messages.label_phone')</h3>
                        <p class="mb-0"><a class="g-color-gray-dark-v4" href="tel: +{{ $company->phone }}" target="_blank">{{ $company->phone }}</a></p>
                    </div>
                </div>
            </a>    

            <!-- Action Button -->
            {{-- <div class="d-inline-block align-self-center">
                <a class="btn u-btn-blue u-btn-hover-v2-1 g-rounded-50 g-font-size-16 text-uppercase g-py-10 g-px-15" href="tel: +{{ $company->phone }}">@lang('messages.button_call_now_short'): {{ $company->phone }}</a>
            </div> --}}
            <!-- End Action Button -->
        </div>

        <div class="col-lg-3 align-self-end ml-auto g-mb-50">
            <a class="u-btn-hover-v2-1" href="mailto:{{ $company->info_email }}">
                <div class="media">
                    <div class="d-flex align-self-center">
                        <span class="u-icon-v3 u-icon-size--sm g-color-white g-bg-primary rounded-circle mr-3">
                            <i class="g-font-size-16 icon-communication-062 u-line-icon-pro"></i>
                        </span>
                    </div>
                    <div class="media-body align-self-center">
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase mb-0">@lang('messages.label_email')</h3>
                        <p class="mb-0"><a class="g-color-gray-dark-v4" href="mailto:{{ $company->info_email }}">{{ $company->info_email }}</a></p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <form class="validatable-form" method="POST" action="{{ URL::to('/postSupport') }}" onsubmit="return validate();">
        {{ csrf_field() }}
        
        <div class="row justify-content-center">
            <div class="col-md-5">

                @if (session('notice'))
                <!-- Teal Alert -->
                <div class="alert alert-dismissible fade show g-bg-teal g-color-white rounded-1" role="alert" data-auto-dismiss="2000">
                    <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>

                    <div class="media">
                        <span class="d-flex g-mr-10 g-mt-5">
                            <i class="icon-check g-font-size-25"></i>
                        </span>
                        <span class="media-body align-self-center">
                            {{ session('notice') }}
                        </span>
                    </div>
                </div>
                <!-- End Teal Alert -->
                @endif

                <div class="row">
                    <div class="col-md-6 form-group g-mb-15">
                        <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_firstname')</label>
                        <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" 
                               type="text" id="firstname" name="firstname" value="{{ old('firstname') }}" required>
                    </div>

                    <div class="col-md-6 form-group g-mb-15">
                        <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_lastname')</label>
                        <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" 
                               type="text" id="lastname" name="lastname" value="{{ old('lastname') }}" required>
                    </div>
                </div>

                <div class="g-mb-10">
                    <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_email')</label>
                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" 
                           type="email" id="email" name="email" aria-describedby="emailHelp" placeholder="@lang('messages.label_email')" value="{{ old('email') }}" required>
                    <small id="emailHelp" class="form-text text-muted g-ml-2">@lang('messages.label_privacy_email')</small>
                </div>

                <div class="g-mb-10">
                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" 
                           type="email" id="confirm_email" name="confirm_email" aria-describedby="emailHelp" placeholder="@lang('messages.label_confirm_email')" value="{{ old('email') }}" required>
                </div>

                <div class="col-lg-12 col-md-12 p-2">

                    <div class="col-lg-8 col-md-12">
                        @include ('web.layouts-v2.errors')
                    </div>

                    <div class="row">
                        <div class="d-flex flex-sm-row g-px-10">
                            <div class="w-100 text-justify">
                                <label class="right">@lang('messages.label_captcha'):</label>
                                <div class="g-recaptcha" data-callback="capcha_filled" data-expired-callback="capcha_expired" data-sitekey="6LcoOjEUAAAAANeJaeYvn8mIAOg58Ue3hs7mh9of"></div>

                                <label id="recaptcha-message" class="c3-error-message d-none" for="g-recaptcha">@lang('messages.label_field_required')</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6 form-group g-mb-15">
                        <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_phone')</label>
                        <!-- -placeholder="(000) 000-0000"-->
                        <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" type="tel" 
                               pattern="^\d{3}-\d{3}-\d{4}$" title="Phone Number (Format: 999-999-9999)" id="phone" name="phone" value="{{ old('phone') }}">
                    </div>

                    <div class="col-md-6 form-group g-mb-15">
                        <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_assistance_with')</label>
                        <select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-3 g-py-10 g-px-15" id="interested" name="interested" required>
                            <option selected value="">@lang('messages.label_select')</option>
                            @foreach ($interests as $interest)
                            @if ($interest->id == old('interest'))
                            <option selected value="{{ $interest->id }}">{{ $interest->name }}</option>
                            @else
                            <option value="{{ $interest->id }}">{{ $interest->name }}</option>
                            @endif
                            @endforeach
                        </select>

                    </div>
                </div>
                
                <div class="g-mb-40">
                    <label class="g-color-gray-dark-v2 g-font-size-13">@lang('messages.label_message')</label>
                    <textarea class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none rounded-3 g-py-12 g-px-15" 
                              rows="8" id="description" name="description" required></textarea>
                </div>

                <div class="text-right">
                    <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-default rounded-3 text-uppercase g-py-10 g-px-30" type="submit" role="button">@lang('messages.button_send')</button>
                </div>
            </div>
            
            <div class="row g-pt-20">
                <!-- Figure Social Icons -->
                <div class="g-pl-20 g-pt-10">
                    <ul class="list-inline">
                        <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_linkedin')">
                            <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-linkedin--hover rounded-circle" href="{{ $company->linkedIn }}" target="_blank">
                                <i class="g-font-size-default fa fa-linkedin"></i>
                            </a>
                        </li>

                        @if ($company->youtube)
                        <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_youtube')">
                            <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-youtube--hover rounded-circle" href="{{ $company->youtube }}" target="_blank">
                                <i class="g-font-size-13 fa fa-youtube"></i>
                            </a>
                        </li>
                        <!--<a class="u-icon-v2 g-rounded-50x g-color-youtube g-color-white--hover g-bg-youtube--hover g-brd-gray-dark-v5--hover g-mr-15 g-mb-20" href="#"><i class="fa fa-youtube"></i></a>-->
                        @endif
                        @if ($company->facebook)
                        <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_facebook')">
                            <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-facebook--hover rounded-circle" href="{{ $company->facebook }}" target="_blank">
                                <i class="g-font-size-13 fa fa-facebook"></i>
                            </a>
                        </li>
                        @endif
                        @if ($company->twitter)
                        <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_twitter')">
                            <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-twitter--hover rounded-circle" href="{{ $company->twitter }}" target="_blank">
                                <i class="g-font-size-13 fa fa-twitter"></i>
                            </a>
                        </li>
                        @endif
                        @if ($company->blog)
                        <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_blog')">
                            <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-facebook--hover rounded-circle" href="{{ $company->blog }}" target="_blank">
                                <i class="g-font-size-default fa fa-rss"></i>
                            </a>
                        </li>
                        @endif
                    </ul>
                </div>
                <!-- End Figure Social Icons -->

                <hr class="g-my-40">
            </div>
        </div>
    </form>
</section>
<!-- End Support Form -->
@endsection

@section ('javascript')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- JS JQuery Validation -->
<script  src="{{ asset('../resources/assets/js/components/validation/jquery.validate.min.js') }}"></script>
<script  src="{{ asset('../resources/assets/js/components/validation/additional-methods.min.js') }}"></script>

<script type="text/javascript">
    // recaptcha validation
    var allowSubmit = false;

    function capcha_filled() {
        allowSubmit = true;
    }

    function capcha_expired() {
        allowSubmit = false;
    }

    function checkIfCapchaIsFilled(e) {
        if (allowSubmit) {
            $('#recaptcha-message').addClass("d-none");
            return true;
        } else {
            $('#recaptcha-message').removeClass("d-none");
            return false;
        }
    }

    function validate() {
        // Validate if Captcha is not empty
        return checkIfCapchaIsFilled();
    }

$(function () {
    $('form.validatable-form').validate({
        rules: {
            "phone" : {
                required: true,
                phoneUS: true
            },
            "confirm_email": {
                required: true,
                equalTo: "#email"
            }
        },
        messages: {
            "confirm_email": {
                equalTo: "Emails don't match."
            }
        },
        errorPlacement: function (error, element) {
            if (element.parent().hasClass('group')) {
                element = element.parent();
                error.insertBefore(element);
            }
            else {
                error.insertAfter(element);
            }
        }
    });
});

</script>
@endsection