@extends("app")

@section('head_title', 'Feedback'.' | '.getcong('site_name') )

@section('head_url', Request::url())

@section("content")
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <div class="tp-page-head">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <h1>Feedback</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tp-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <ol class="breadcrumb">
                        <li><a href="{{ URL::to('/') }}">Home</a></li>
                        <li class="active">Feedback</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="main-container">
        <div class="container">
            <h2 style="text-align:center;color:#E72E77" class="ng-scope"><strong>
                    <i class="fa fa-comments" aria-hidden="true"></i>Suggest Us to Serve You Better</strong></h2>
            <div class="row" style="margin-top:50px;">
                <div class="col-md-6">
                    <div class="well-box">
                        {!! Form::open(array('url' => 'feedback_send','class'=>'','id'=>'feedback_form','role'=>'form')) !!}

                        <div class="message">

                            @if (count($errors) > 0)
                                <div class="alert alert-danger  fade in alert-dismissible" role="alert">

                                    <ul style="list-style: none;">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif

                        </div>
                        @if(Session::has('flash_message'))


                            <div class="alert alert-success fade in alert-dismissible"  role="alert">

                                {{ Session::get('flash_message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>


                        @endif
                        @if(Session::has('error_message'))


                            <div class="alert alert-danger fade in alert-dismissible"  role="alert">

                                {{ Session::get('error_message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>


                        @endif

                        <div class="form-group">
                            <label class="control-label" for="first">Name <span class="required">*</span></label>
                            <input id="name" name="name" type="text" placeholder="Name" required class="form-control input-md" >
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="email">Email <span class="required">*</span></label>
                            <input id="email" name="email" type="text" placeholder="Email" required class="form-control input-md" >
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="subject">Contact No <span class="required">*</span></label>
                            <input id="number" name="number" type="number" placeholder="Contact Number" pattern=".{9,15}"   required title="10 minimum numbers required" class="form-control input-md" >

                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="subject">Organisation </label>
                            <input id="subject" name="organisation" type="text" placeholder="Organisation" class="form-control input-md" >
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="subject">Address </label>
                            <input id="address" name="address" type="text" placeholder="Address" class="form-control input-md" >
                        </div>
                        <div class="form-group">
                            <label class="  control-label" for="message">Feedback <span class="required">*</span></label>
                            <textarea class="form-control" rows="6" id="feedback" name="feedback" placeholder="Feedback" required></textarea>
                            <div class="textarea-resize"></div>
                        </div>
                        <input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
                        <div class="g-recaptcha" data-sitekey="6LfNTKYUAAAAAMclqV9M7gXjl7QAwLp5ww8KLvgA"></div>
                        <span id='errorContainer'></span>
                        <div class="form-group">
                            <button id="submit" name="submit" class="btn tp-btn-default tp-btn-lg">Send Feedback</button>
                        </div>
                        {!! Form::close() !!}
                    </div>

                </div>
                <div class="col-md-6 contact-info">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3505.1102606844042!2d77.22153131508048!3d28.536405382455797!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce32404cadba7%3A0x8f97cce39aff55!2sVenue.Events!5e0!3m2!1sen!2sin!4v1556514217310!5m2!1sen!2sin"  width="100%" height="690" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
                <div class="col-md-6">
                    <div class="map" id="googleMap"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('6LdrQ6YUAAAAABf_WTvnJcBsvqcfwXbkdlHZD-9P', {action:'validate_captcha'})
                .then(function(token) {
                    // add token value to form
                    document.getElementById('g-recaptcha-response').value = token;
                });
        });
        function recaptchaCallback() {
            document.getElementById('myField').value = 'nonEmpty';
        }
    </script>

@endsection