@extends('frontend.layouts.template')
@section('content')
<div class="row box-banner" style="background: #fff;">
    <div class="col-12">

        <div class="box-page">
            <div class="row" style="">
                <div class="col-md-12 col-xl-1"></div>
                <div class="col-md-12 col-xl-10">
                    <div>
                        {!! $article->description !!}
                    </div>
                    <div class="sec-contact">
                        <div class="topic-content-detail f-bold c-black pt-4">
                            {!! $article->subject !!}
                        </div>
                        <div class="c-black" style="margin-top: 0px;">
                            {!! $article->detail !!}
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<div class="row" style="background:#EDEDED;">
    <div class="col-md-12 col-xl-1"></div>
    <div class="col-md-12 col-xl-10">
        <div class="sec-contact">

            <div class="topic-content-detail f-bold c-black pt-4">
                SEND US MAIL
            </div>
             @if (Session::has('success') )
                <div class="alert alert-success" id="success-contact">
                    <h2>Thank you for contacting us.</h2>
                    <p>You are very important to us, all information received will always remain confidential. We will contact you as soon as we review your message.</p>
                </div>
            @else
            <form accept-charset="utf-8" method="post" action="{{ url('sender/contact') }}" class="needs-validation" enctype="multipart/form-data" id="form-contact">
                {{ csrf_field() }}
                <div class="mb-5">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control border-r0"  placeholder="Full Name" id="name" name="name">
                                <small class="w-100 text-danger" id="error-name"></small>
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <input type="email" class="form-control border-r0"  placeholder="Email Address" id="email" name="email">
                                <small class="w-100 text-danger" id="error-email"></small>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <textarea class="form-control border-r0" rows="3" id="message" name="message" placeholder="Message"></textarea>
                                <small class="w-100 text-danger" id="error-message"></small>
                            </div>
                        </div>


                        <div class="col-12 col-md-12">
                            <div class="text-right " style="margin-top:15px;">
                                <button type="submit" class="btn button-b text-center border-r0" style="" >SEND</button>
                            </div>
                        </div>


                    </div>
                </div>
            </form>
            @endif
        </div>
    </div>
    <div class="col-md-12 col-xl-1"></div>
</div>
@endsection
@section('stylesheet')
	<link href="{{ asset('frontend/assetsnew/css/resources.css')}}" rel="stylesheet">
	<link href="{{ asset('frontend/assetsnew/css/about.css')}}" rel="stylesheet">
@endsection
@section('javascript')
    <script type="text/javascript">
        (function($){
            $('#form-contact').on('submit',function(e){
                let x = 0;
                $('#error-name').text('');
                $('#error-email').text('');
                $('#error-message').text('');

                if( !$('#name').val() ){
                    $('#error-name').text('* Please enter your name');
                    x++;
                }
                if( !$('#email').val() ){
                    $('#error-email').text('* Please enter your email');
                     x++;
                }
                if( !$('#message').val() ){
                    $('#error-message').text('* Please enter your message');
                    x++;
                }
                if( !emailIsValid( $('#email').val() ) ){
                    $('#error-email').text('* Error Invalid your email address.');
                    x++;
                }
                console.log('x : ', x);
                if( x > 0 ) return false;
            });
            $('input, textarea').on('blur',function(e){
                let _this = $(this);
                let err = $('#error-' + _this.attr('name') );
                if( !_this.val() ){
                    err.text('* Please enter your ' + _this.attr('name') );
                }else{
                    if( _this.attr('name') == 'email' && !emailIsValid( _this.val() ) ){
                        $('#error-email').text('* Error Invalid your email address.');
                    }else{
                    err.text('');
                    }
                }
            });
            function emailIsValid (email) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
            }
            @if (Session::has('success') )
                document.querySelector('#success-contact').scrollIntoView();
            @endif

        }(jQuery));
    </script>
@endsection