@extends('layouts.www')

@section('content')

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top"><!-- <span class="agile-color">agile</span> zoo --><img src="/images/agile-zoo-logo-200y.png" alt="Agile ZOO" /></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#goal">{{ trans('www.menu.goal') }}</a>
                </li>
                <li class="page-scroll">
                    <a href="#who">{{ trans('www.menu.who') }}</a>
                </li>
                <li class="page-scroll">
                    <a href="#authors">{{ trans('www.menu.authors') }}</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">{{ trans('www.menu.contact') }}</a>
                </li>
                <li class="dropdown language-change">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ LaravelLocalization::getCurrentLocaleName() }} <span class="caret"></span></a>
                  <ul class="dropdown-menu language_bar_chooser">
                      @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                          <li>
                              <a rel="alternate" hreflang="{{$localeCode}}" href="{{LaravelLocalization::getLocalizedURL($localeCode) }}">
                                  {{ $properties['native'] }}
                              </a>
                          </li>
                      @endforeach
                  </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- Header -->
<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <img class="img-responsive" src="/images/AZlogo800.png" style="height:250px" alt="">
                <div class="intro-text">
                    <span class="skills">{{ trans('www.product_management_game') }}</span>
                </div>
                <div>
                    <a href="{{ LaravelLocalization::getLocalizedURL(null, '/rules') }}" class="btn btn-lg btn-outline">
                        {{ trans('www.lets_play') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

<section id="goal" style="background-color:#eee">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>{{ trans('www.goal_title') }}</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                {!! trans('www.goal_description') !!}
            </div>
        </div>
    </div>
</section>

<section class="success" id="who">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>{{ trans('www.who_title') }}</h2>
                <hr class="star-light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                {!! trans('www.who_description') !!}
            </div>
        </div>
    </div>
</section>

<section id="authors">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>{{ trans('www.authors_title') }}</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <div class="text-center" style="height: 140px">
                    <img class="img-circle" src="/images/Maciek.jpg" />
                </div>
                <p class="text-center">Maciej</p>
                {!! trans('www.authors_maciej') !!}
            </div>
            <div class="col-lg-4">
                <div class="text-center" style="height: 140px">
                    <img class="img-circle" src="/images/Magda.jpg" />
                </div>
                <p class="text-center">Magda</p>
                {!! trans('www.authors_magda') !!}
            </div>
            <div class="col-lg-4">
                <div class="text-center" style="height: 140px">
                    <img class="img-circle" src="/images/Slawek.jpg" />
                </div>
                <p class="text-center">Sławek</p>
                {!! trans('www.authors_slawek') !!}
            </div>
        </div>
    </div>
</section>

<section id="contact" style="background-color: #eee">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>{{ trans('www.contact_title') }}</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <form name="sentMessage" id="contactForm">
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>{{ trans('www.form.name') }}</label>
                            <input type="text" required class="form-control" placeholder="{{ trans('www.form.name') }}" id="name_input" oninvalid="this.setCustomValidity('{{ trans('www.form.please_enter_your_name') }}')" oninput="setCustomValidity('')" data-validation-required-message="{{ trans('www.form.please_enter_your_name') }}">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>{{ trans('www.form.email') }}</label>
                            <input type="email" class="form-control" placeholder="{{ trans('www.form.email') }}" id="email_input">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>{{ trans('www.form.phone') }}</label>
                            <input type="tel" class="form-control" placeholder="{{ trans('www.form.phone') }}" id="phone_input">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>{{ trans('www.form.message') }}</label>
                            <textarea rows="5" required class="form-control" placeholder="{{ trans('www.form.message') }}" id="message_input" oninvalid="this.setCustomValidity('{{ trans('www.form.please_enter_a_message') }}')" oninput="setCustomValidity('')" data-validation-required-message="{{ trans('www.form.please_enter_a_message') }}"></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-success btn-lg">{{ trans('www.form.send_message') }}</button>
                        </div>
                    </div>
                </form>
                <div id="thank_you" class="hidden">
                    <h1 class="text-center">{{ trans('www.form.thank_you') }}</h1>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="text-center">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <p>{{ trans('www.video_desc_1') }}</p>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/_G7OCZIbqHg?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                <p>{!! trans('www.video_desc_2') !!}</p>
                <br />
            </div>
        </div>
    </div>
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    Copyright &copy; Agile ZOO {{ date('Y') }}
                </div>
            </div>
        </div>
    </div>
</footer>

@endsection

@section('scripts')

<script type="text/javascript">
$(function() {
    $("form").submit(function(e){
        e.preventDefault(e);
        $.post( "{{ route('post_api_contact_form') }}", { name: $('#name_input').val(), email: $('#email_input').val(), phone: $('#phone_input').val(), message: $('#message_input').val() })
            .done(function( data ) {
                $('form').hide();
                $('#thank_you').removeClass('hidden');
            });
    });
});
</script>

@endsection