@extends('layouts.template')

@section('title')
| Concours
@endsection

@section('share')

@if( $page && $page->meta_desc != '' )  
  <meta property="og:title" content="{{ $page->meta_title }}" />
@endif
@if( $page && $page->meta_desc != '' )
  <meta name="description" content="{{ strip_tags($page->meta_desc) }}">
  <meta property="og:description" content="{{ strip_tags($page->meta_desc) }}" />
@endif
@if( $page && $page->meta_img != '' )
  <meta property="og:image" content="{{url('/')}}/{{config('imagespath.path')}}/{{$page->meta_img}}" />
@endif
<meta property="og:url" content="{{ url( $page->friendlyurl ) }}" />

@endsection

@section('content')
<div style="position:relative">
  <img src="{{ asset("/img/illu-home-2018.png") }}" alt="Concours" alt="Concours" style="width: 100%; height: auto;">
  <!--div class="home-baseline home-baseline-fix">
    GAGNE<br>1 AN DE BONHEUR<br>CROUSTILLANT<br>BABY!<br><br><span>BJ Scott</span>
  </div-->
</div>
<main role="main">
  <section class="page-static">
    <div class="container baseline">
      <div class="row">
        <div class="col-xs-12">
          <h1>Concours</h1>
          <ul class="ariane">
            <li><a href="{{ url('/') }}">Accueil</a></li>
            <li>Concours</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <div class="contest-explain">
            <p>Ce concours est réalisé à l’initiative de la Fédération Francophone de la Boulangerie-Pâtisserie et de l’APAQ-W. Il se déroule du 1er au 31 octobre 2018 inclus, sur le territoire belge exclusivement.</p>
            <ul id="step-nav">
              <li>loading</li>
            </ul>
            <p><strong>A gagner : un an de pain croustillant ou un bon d’achat de 15€ à faire valoir dans votre boulangerie-patisserie préférée.</strong></p>
            <p><small><em>Attention, ce concours avec obligation d&#39;achat dans l’un des points de vente « Maître Boulanger-Pâtissier » est soumis à un règlement. <a href="{{ asset("/uploads/reglement_2018.pdf") }}" target="_blank">Cliquez ici pour le consulter</a>.</em></small></p>
          </div>
        </div>
        <div class="col-sm-7">
          
          {!! Form::open(array('url' => 'concours', 'method' => 'POST', 'id' => 'contest')) !!}
            
            {{ Form::hidden('shop_id', '', array('id' => 'shop_id')) }}
            <div class="contest-step" id="step1">
              <fieldset>
                <legend><span>1</span> Votre code</legend>
                
                <div class="contest-body">
                  <p>Veuillez entrer votre code</p>
                  <div class="row">
                    <div class="col-xs-6">                  
                      {!! Form::text('scratch', null, array('placeholder' => 'Votre code', 'class' => 'form-control required')) !!}<br>
                      {!! $errors->first('scratch', '<small class="help-block">:message</small>') !!}                    
                    </div>
                  </div>
                  <p>Veuillez sélectionner votre boulangerie/pâtisserie</p>
                  <div class="row">
                    <div class="col-xs-12">                  
                      {!! Form::text('shop_name', null, array('placeholder' => 'Votre boulangerie/patisserie', 'class' => 'form-control shop_autocomplete required')) !!}<br>
                      {!! $errors->first('shop_id', '<small class="help-block">:message</small>') !!}                    
                    </div>
                  </div>
                  <p id="shop_choice"><strong>Votre boulangerie-pâtisserie</strong> : <span id="bp">Aucune</span></p>
                  <div class="row">
                    <div class="col-xs-12">
                      <div class="checkbox">
                        <label>{!! Form::checkbox('rules_acception', 'yes') !!} J'ai lu et j'accepte le <a href="{{ asset("/uploads/reglement_2018.pdf") }}" target="_blank">règlement du concours</a>.</label>
                      </div>
                    </div>
                  </div>
                  
                  <div class="row">
                    <div class="text-right"> 
                      {!! Form::button("Suivant", array('class' => 'btn btn-baker nextstep')) !!}
                    </div>
                  </div>
                </div>

              </fieldset>
            </div>

            <div class="contest-step" id="step2">
              <fieldset>
                <legend><span>2</span> Concours</legend>
                
                <div class="contest-body">
                  <p>Répondez aux questions ci-dessous et cliquez sur le bouton Suivant.</p>
                  
                  {!! Form::label('q_1', '1) Quelle phrase ne se trouve pas dans la charte des Maîtres Boulangers-Pâtissiers Wallons&nbsp;? Un Maitre Boulanger-Pâtissier s’engage au travers de sa compétence professionnelle à&nbsp;:') !!}
                  <div class="radio-box" style="margin-bottom: 30px;">
                    <div class="radio">
                      <label>{{ Form::radio('q_1', 'Mettre en œuvre des recettes traditionnelles de terroir au moyen de techniques de production modernes', false, array('class' => 'required')) }} Mettre en œuvre des recettes traditionnelles de terroir au moyen de techniques de production modernes</label>
                    </div>
                    <div class="radio">
                      <label>{{ Form::radio('q_1', 'Assurer une fabrication quotidienne en maximisant les qualités nutritionnelles', false, array('class' => '')) }} Assurer une fabrication quotidienne en maximisant les qualités nutritionnelles</label>
                    </div>
                    <div class="radio">
                      <label>{{ Form::radio('q_1', 'Ecouter, informer, conseiller et servir ses clients avec le sourire', false, array('class' => '')) }} Ecouter, informer, conseiller et servir ses clients avec le sourire</label>
                    </div>
                  </div>
                  {!! $errors->first('q_1', '<small class="help-block">:message</small>') !!}

                  {!! Form::label('q_2', '2)  Quelle(s) vitamine(s) trouve-t-on dans le pain traditionnel complet&nbsp;?') !!}
                  <div class="radio-box" style="margin-bottom: 30px;">
                    <div class="radio">
                      <label>{{ Form::radio('q_2', 'La vitamine D', false, array('class' => 'required')) }} La vitamine D</label>
                    </div>
                    <div class="radio">
                      <label>{{ Form::radio('q_2', 'La vitamine A', false, array('class' => '')) }} La vitamine A</label>
                    </div>
                    <div class="radio">
                      <label>{{ Form::radio('q_2', 'La vitamine B et E', false, array('class' => '')) }} La vitamine B et E</label>
                    </div>
                  </div>
                  {!! $errors->first('q_3', '<small class="help-block">:message</small>') !!}

                  <div class="row">
                    <div class="col-sm-12"> 
                      {!! Form::label('q_sub', 'Question subsidiaire : combien de personnes participeront à ce concours cette année&nbsp;?') !!}
                      <div class="row">
                        <div class="col-sm-6"> 
                          {!! Form::text('q_sub', null, array('class' => 'form-control required number')) !!}                          
                          {!! $errors->first('q_sub', '<small class="help-block">:message</small>') !!}
                          <small>*Indice : en 2017, il y a eu 12 981 participations</small>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="text-right"> 
                      {!! Form::button("Suivant", array('class' => 'btn btn-baker nextstep')) !!}
                    </div>
                  </div>
                </div>              

              </fieldset>
            </div>

            <div class="contest-step" id="step3">
              <fieldset>
                <legend><span>3</span> Vos coordonnées</legend>
                
                <div class="contest-body">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="radio-inline">
                        <label>{{ Form::radio('gender', 'mr', false, array('class' => '')) }} Monsieur</label>
                      </div>
                      <div class="radio-inline">
                        <label>{{ Form::radio('gender', 'mrs', false, array('class' => '')) }} Madame</label>
                      </div>
                      {!! $errors->first('gender', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('lastname', 'Nom') !!}
                      {!! Form::text('lastname', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('lastname', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('firstname', 'Prénom') !!}
                      {!! Form::text('firstname', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('firstname', '<small class="help-block">:message</small>') !!}
                    </div>                
                    <div class="col-sm-6"> 
                      {!! Form::label('address', 'Adresse') !!}
                      {!! Form::text('address', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('address', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('zip', 'Code postal') !!}
                      {!! Form::text('zip', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('zip', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('city', 'Localité') !!}
                      {!! Form::text('city', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('city', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('phone', 'Téléphone') !!}
                      {!! Form::text('phone', null, array('class' => 'form-control required')) !!}
                      {!! $errors->first('phone', '<small class="help-block">:message</small>') !!}
                    </div>
                    <div class="col-sm-6"> 
                      {!! Form::label('email', 'Adresse email') !!}
                      {!! Form::text('email', null, array('class' => 'form-control required email')) !!}
                      {!! $errors->first('email', '<small class="help-block">:message</small>') !!}
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12 text-right"> 
                      {!! Form::submit("Envoyer", array('class' => 'btn btn-baker')) !!}
                    </div>
                  </div>
                </div>

              </fieldset>
            </div>

          {!! Form::close() !!}

        </div>
      </div>
    </div>
  </section>
</main>

@endsection

@section('javascript')
<style type="text/css">
  .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
  .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
  .autocomplete-selected { background: #F0F0F0; }
  .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
  .autocomplete-group { padding: 2px 5px; }
  .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
  #shop_choice {
    background: #fff;
    padding: 10px;
    border: 1px solid #a94a1a;
    display: none;    
  }
  #shop_choice span {
    display: block;
    font-size: 15px;
    color: #a94a1a;
  }
</style>
<script type="text/javascript">

(function($){
  "use strict";
  $(window).load(function() {
    // use $

    var step = 1;

    var countries = [
      @foreach($shops as $shop)
        { value: "{!! $shop->name !!} | {!! $shop->street !!} - {!! $shop->zip !!} {!! $shop->city !!}", data: "{{ $shop->id }}" },
      @endforeach
    ];

    $('.shop_autocomplete').autocomplete({
      lookup: countries,
      onSelect: function (suggestion) {
        $(".shop_autocomplete").val( suggestion.value );
        $("#shop_id").val( suggestion.data );
        $("#bp").html( suggestion.value );
        $("#shop_choice").slideDown();
      }
    });
    if( $("#shop_id").val() != "" ){
      $("#shop_id").val( "" );
    }

    function nextStep(){

      $( "#step-nav li" ).remove();
      $( ".contest-step" ).hide();

      var a = 0;
      $( ".contest-step" ).each( function(){
        a++;
        $( "#step-nav" ).append( '<li class="'+ ( step == a ? 'active' : '' ) +'"">' + $(this).find("legend").html() + '</li>' );        
      });
      $( "#step"+step ).slideDown();

      if( step > 1 ){
        $('html, body').animate({
          scrollTop: $(".baseline").offset().top
      }, 500);
      }      

    }
    nextStep();

    $(document).on("click", ".nextstep", function(){

      if( step == 1 ){
        if( $("input#shop_id").val() != '' ){

          if( $("input[name=rules_acception]").is(":checked") ){
            $.ajax({
              url: 'ajax/checkscratch',
              type: "post",
              dataType:"json",
              data: {'scratch':$("input[name='scratch']").val(), '_token': $('input[name=_token]').val()},
              success: function(data){
                
                if( data.result == 1 ){
                  step++;
                  nextStep();              
                }else{
                  // error
                  swal(
                    'Attention',
                    data.message,
                    'error'
                  );    
                  
                }

              }
            });      
          }else{
            swal(
              'Attention',
              'Les conditions générales doivent êtres cochées',
              'error'
            );   
          }
        }else{
          swal(
            'Attention',
            'Veuillez sélectionner votre Boulangerie-Pâtisserie',
            'error'
          );   
        }
      }else if( step == 2 ){
        if( $("input[name=q_1]:checked").length > 0 &&
            $("input[name=q_2]:checked").length > 0 &&
            //$("input[name=q_3]:checked").length > 0 &&
            $("input[name=q_sub]").val() != ''/**/ ){
          step++;
          nextStep();
        }else{
          if( $("input[name='q_4[]']:checked").length > 3 ){
            swal(
              'Attention',
              'Veuillez sélectionner entre 1 et 3 festivals auxquels vous souhaiteriez assister',
              'error'
            );   
          }else{
            swal(
              'Attention',
              'Tous les champs sont requis',
              'error'
            );   
          }
        }
      }else{
        step++;
        nextStep();
      }
      
    });

    $(document).on("submit", "#contest", function(e){
      
      var error = false;
      $( "#step3" ).find("input.required").each(function(){
        if( $(this).val() == '' ){ error = true; }        
      });

      if( !error && $("input[name=gender]:checked").length > 0 && validateEmail(  $("input[name=email]").val() ) ){        
        $('#contest').submit();
      }else{
        if( $("input[name=email]").val()!='' && !validateEmail(  $("input[name=email]").val() ) ){
          swal(
            'Attention',
            'Votre email est incorrect',
            'error'
          ); 
        }else{
          swal(
            'Attention',
            'Tous les champs sont requis',
            'error'
          );           
        }
        e.preventDefault();
        return false;     
      }      

    });

    $('#contest').on('keyup keypress', function(e) {
      var keyCode = e.keyCode || e.which;
      if (keyCode === 13) { 
        e.preventDefault();
        return false;
      }
    });

    $(".number").keypress(function (e) {
      //if the letter is not digit then display error and don't type anything
      if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; }
    });

    function validateEmail(email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

  });
       
})(jQuery);

</script>

@endsection