@extends('web.app')

@section('main-content')
<section class="bike-details">
  <br>
  <div class="container">
    <div class="row">
      <article class="top">
        <div class="top-header clearfix">
          <div class="bike-detail bike-name">
            <!-- <a href="{{ url('bikes') }}">« Back to all Bikes</a> -->
            
            
            <h3>{{ $bikes['brand']['name'].' '.$bikes['name'] }}<span> </span></h3>
          </div>
          <div class="bike-detail bike-model">
            <img class="bike-photo" src="{{ imageBikeUrl(2,$bikes['image']) }}" alt="Renegade Commando">
          </div>
          <div class="bike-detail bike-brand">
            <img src="{{ imageBikeUrl(1,$bikes['brand']['logo']) }}" alt="">
          </div>
        </div>
      </article>

      <article class="bike-tickets clearfix">
        {{-- <div class="tickets-add">
          <p class="tip">Any 5 tickets&nbsp;<span>20% off</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Any 10 tickets&nbsp;<span>40% off</span></p>
        </div> --}}
        <div class="tickets-purchase" style="margin-top: 10ox;">
          <form class="quantity ng-pristine">
            <!-- <input type="hidden" name="bike_id" value="{{ $bikes['id'] }}">
            <input type="hidden" name="ticket_price" value="{{ $bikes['ticket_price'] }}"> -->
            <div class="cart-qty" style="margin-top: 10px;display: none;">
              <a class="change qtyminus"></a>
              <input type="text" name="ticket_qty" class="quntity-input" id="ticketQuantity" value="1">
              <a class="change qtyplus"></a>
            </div>
            <div class="cart-add-basket" style="display: none;">
              <input type="submit" value="ADD TO BASKET »" onclick="return addTickets('{{ $bikes['brand']['name'].'-'.$bikes['name'] }}')" class="btn orange">
              <!-- <input type="submit" value="ADD TO BASKET »" class="btn orange"> -->
            </div>
            @if($bikes['ticket_price'])
            <div id="js_buy_ticket">
              <input type="button" value="Buy Ticket" class="btn orange js_buy_ticket">
              <!-- <input type="submit" value="ADD TO BASKET »" class="btn orange"> -->
            </div>
            @endif
            <br>
          </form>
          @if($bikes['ticket_price'])
          <p class="price">Ticket Price <span>{{ setPrice($bikes['ticket_price']) }}</span></p>
          <div>
            @if(Auth::user())
            <a href="{{ url('spot-a-ball') }}" style="max-width: 0px;margin:0 auto;" class="btn orange proceed">PROCEED TO PLAY »</a>
            @else
            <a href="{{ url('register') }}" style="max-width: 0px;margin:0 auto;" class="btn orange proceed">PROCEED TO PLAY »</a>
            @endif
          </div><br>
          <b style="font-size: 18px;">Get two free plays when you first register</b><br>
          <a style="max-width: 0px;margin:0 auto;min-width: 338px;font-weight: bold;" class="btn orange proceed">This competition ends on the 31st May 2018!</a>
       
<!--           FREE ENTRY! This competition ends 31st March 2018</span><br>-->


<!--<br>FREE launch promotion - more bikes coming soon.</p>-->
          @endif
        </div>
      </article>
      
      @if(count($bikes['bike_image']) > 0)
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          @foreach($bikes['bike_image'] as $k => $bike_image)
            <div class="item {{ ($k==0)?'active':'' }}">
              <img src="{{ imageSliderUrl(3,$bike_image['image']) }}" alt="{{ $bikes['name'] }}">
            </div>
          @endforeach
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      @endif

      <article class="bike-review text-center">
          <div class="container">
              <div class="inner">
                  <h2 class="title">REVIEW</h2>
                  @php
                    echo $bikes['review'];
                  @endphp
                  <article class="bikes-tiles">
                    <h2 class="title">Tech spec first</h2>
                    <table border="1" class="bikeDetailsStatsTable">
                        <tbody>
                        <tr>
                            <td valign="top"><strong>Suspension</strong></td>
                            <td>
                              @php
                                echo nl2br($bikes['suspension']);
                              @endphp
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Tyres</strong></td>
                            <td>
                              @php
                                echo nl2br($bikes['tyres']);
                              @endphp
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Brakes</strong></td>
                            <td>
                              @php
                                echo nl2br($bikes['brakes']);
                              @endphp
                            </td>
                        </tr>
                        
                        <tr>
                            <td><strong>Dimensions</strong></td>
                            <td>
                              @php
                                echo nl2br($bikes['dimensions']);
                              @endphp
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Fuel Tank</strong></td>
                            <td>{{ $bikes['fuel_tank'] }}</td>
                        </tr>
                        
                    </tbody></table>
                </article>
                <article class="bikes-tiles">
          <h2 class="title">The engine</h2>
            @php
             echo $bikes['engine'];
            @endphp
            <table border="1" class="bikeDetailsStatsTable">
              <tbody>
              <tr>
                  <td valign="top"><strong>Type:</strong></td>
                  <td>{{ $bikes['engine_type'] }}</td>
              </tr>
              <tr>
                  <td><strong>Displacement: </strong></td>
                  <td>{{ $bikes['displacement'] }}</td>
              </tr>
              
              <tr>
                  <td><strong>Bore & Stroke: </strong></td>
                  <td>{{ $bikes['bore_stroke'] }}</td>
              </tr>
              <tr>
                  <td><strong>Maximum Power (PS/RPM):</strong></td>
                  <td>{{ $bikes['power'] }}</td>
              </tr>
              <tr>
                  <td><strong>Maximum Torque (NM/RPM):</strong></td>
                  <td>{{ $bikes['torque'] }}</td>
              </tr>
              <tr>
                  <td><strong>Gearbox:</strong></td>
                  <td>{{ $bikes['gearbox'] }}</td>
              </tr>
        
              <tr>
                  <td><strong>Final Drive:</strong></td>
                  <td>{{ $bikes['final_drive'] }}</td>
              </tr>
              </tbody>
            </table>
          <div class="inner bikeStatsTickets tickets-purchase">
            <form class="quantity">
                <!-- <div>
                    <a class="change qtyminus"></a>
                    <input type="text" class="quntity-input ng-pristine ng-untouched ng-valid" id="ticketQuantity" value="1" ng-model="ticketQuantity">
                    <a class="change qtyplus"></a>
                </div>
                <div>
                            <input type="submit" value="ADD TO BASKET »" class="btn orange" onclick="return addTickets('{{ $bikes['brand']['name'].'-'.$bikes['name'] }}')">
                </div> -->
                <div>
                    {{-- <input type="submit" value="PROCCED »" class="btn orange"> --}}
                </div>
            </form>
            @if($bikes['ticket_price'])
            @if(Auth::user())
            <a href="{{ url('spot-a-ball') }}" class="btn orange">PROCEED TO PLAY »</a>
            @else
            <a href="{{ url('register') }}" class="btn orange">PROCEED TO PLAY »</a>
            @endif
            @endif
          </div>
      </article>
              </div>
          </div>
      </article>

      
      
      
    @if(count($bikes['bike_features']) > 0)
      <article class="bikes-tiles">
        <h2 class="title">The features (the little extras)!</h2>
        @foreach($bikes['bike_features'] as $br => $bike_features)
        <div class="col-md-12 bike_pro">
          <div class="row">
              <div class="col-md-3 col-sm-12 col-xs-12">
                <img src="{{ imageUploadUrl(4,$bike_features['image']) }}" class="img-responsive">
              </div>
              <div class="col-md-9 col-sm-12 col-xs-12">
                <h3>{{ $bike_features['title'] }}</h3>
                @php 
                echo $bike_features['details'];
                @endphp
              </div>
            </div>
        </div> 
        @endforeach       
        </div>
      </article>
    @endif
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script type="text/javascript" src="{{ url('public/js/bootstrap-notify.js') }}"></script>
<script type="text/javascript">
  //Add tickets
$(".js_buy_ticket").click(function(){
  $("#js_buy_ticket").hide();
  $(".cart-qty").show();
  $(".cart-add-basket").show();
});
function addTickets(name){
    // $(".cart").hide();
    qty = $('.quntity-input').val();
    $.ajax({
        url: '{{ url('cart/add') }}?name='+name+'&qty='+qty,
        type: 'GET',
    })
    .done(function(data) {
        if(data.error){
            getCartTotal();
            $(document).ready(function(){
                $.notify({
                    message: 'Successfully added to cart.'
                },{
                    type: 'success'
                });
            });
        }
        $(".cart").show();
        navCart();
    });
    return false;
}
$(".qtyminus").click(function(event) {
    if ($('.quntity-input').val() > 1) {
        $('.quntity-input').val(parseInt($('.quntity-input').val()) - 1);
    }
});
$(".qtyplus").click(function(event) {
    $('.quntity-input').val(parseInt($('.quntity-input').val()) + 1);
});
</script>
@endpush