@extends('web.app')

@push('styles')
<link href="{{ url('public/css/game.css') }}" rel="stylesheet">
@endpush

@section('main-content')
<div class="game_bg">
  <div class="container">
    <div class="col-md-12">
        <div class="row">
          <div>
             <div class="markdown-body">
                <div id="game" class="gameTitle">
                Winabike Spot The Ball - Game Of Skill</div>
                <div class="col-md-12 imageSection" >
                  <!-- undo button -->
                  <button class="btn-left-undo-section"><!-- Change class : btn-undo-section -->
                    <img src="{{ url('public/img/ic_w.png') }}" />
                  </button>
                  <div id="spot-the-ball-demo"></div>
                </div>
                <div class="col-md-12 selectball">
                  <button id="btn-selectball" class="red_btn">
                    Choose Ball Position
                    <!-- <img src="{{ url('public/img/ic_point.png') }}" /> -->
                  </button>
                  <!-- image circle on left -->
                  <button id="btn-undo" class="red_btn" is_show="1">UNDO</button>
                  <!-- remove class : btn-left-undo-section -->
                    <!-- <img src="{{ url('public/img/ic_w.png') }}" /> -->
                  <button class="happy-finish red_btn" id="happy-finish">FINISH</button>
                   <!-- <img src="{{ url('public/img/ic_finish.png') }}" /> -->
                  <a class=" no_bdr_red_btn red_btn pull-right" href="{{ url('/bikes/UM-Renegade Commando Mojave') }}" style="line-height: 34px; margin-right:32px !important;width: 184px;padding-left: 7px;color: white !important;">BUY MORE TICKETS</a>
                  <!-- <button class="no_bdr_red_btn red_btn pull-right" style="margin-right:32px !important;">BUY MORE TICKETS</button> -->
                  <input type="hidden" value="#DE2509" id="line-color-code" />
                </div>
                   <!-- remove all line -->
                  <!-- <div class="removeall" style="margin-top: -30px;">
                      <a class="btn" href="javascript:void(0);" id="btn-remove-lines">
                      Restart (delete all)
                      </a>
                  </div>
                   draw line
                   <button id="btn-drawline">
                     <img src="{{ url('public/img/ic_drawline.png') }}" />
                   </button>
                   hide/show line
                   <button id="btn-hide-show-line" is_show="1" >
                     <img src="{{ url('public/img/ic_show.png') }}" />
                   </button> -->

                <!-- color line button section -->
                <div class="colorlineblock text-right hidden-xs">
                  <button type="button" class="btn btn-default draw_line_btn" id="btn-drawline">Draw Line</button>
                  <!-- green -->
                  <button type="button" class="btn btn-default btn_circle" id="btn-color-green" style="background-color:#55F905;"  colorline="#55F905"></button>
                  <!-- yellow -->
                  <button type="button" class="btn btn-default btn_circle" id="btn-color-black" style="background-color:#FFDA05;" colorline="#FFDA05" ></button>
                  <!-- red -->
                  <button type="button" class="btn btn-default btn_circle" id="btn-color-red" style="background-color:#DE2509;" colorline="#DE2509" ></button>
                  <!-- light blue -->
                  <button type="button" class="btn btn-default btn_circle" id="btn-color-blue" style="background-color:#0E8FEA;" colorline="#0E8FEA" ></button>
                </div>
             </div>
          </div>
        </div>
    </div>  
    <div class="col-md-12">
      <p class="game_txt hidden-xs">Use your skill to determine the centre of the ball, which has been removed from the picture - Good luck!</p>
      <p class="game_txt visible-xs">Use your skill to determine the centre of the ball, which has been removed from the picture - Good luck!<br>(Play with ‘line-draw’ facility via PC or laptop)</p>
    </div>
    <div id="myModal" class="modal fade" role="dialog">
       <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Win A Bike</h4>
             </div>
             <div class="modal-body">
                <p>You have already selected point.</p>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
             <div style="display: none;">
              <input type="hidden" name="x_cordinate" value="" id="x-cordinate" />
              <input type="hidden" name="y_cordinate" value="" id="y-cordinate" />
              <input type="hidden" name="winpoints_id" value="{{$spotBall->id}}" id="winpoint_id" />
              <input type="hidden" name="bike_id" value="{{$spotBall->bike_id}}" id="bike_id" />
             </div>
          </div>
       </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<!-- <script type="text/javascript" src="{{ url('public/js/bootstrap-notify.js') }}"></script> -->

<!-- js for drawing line start -->
<link href="{{ url('public/css/custom.css') }}" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<script type="text/javascript" src="{{ url('public/js/swg.drawv2.0.3.js') }}"> </script>
<!-- js for drawing line end -->
<!-- Template Specisifc Custom Javascript File -->
<script src="{{ url('public/js/game-custom.js') }}"></script>
<script type="text/javascript">
   var purpose ="drawline";
   var challenge = "{{ url('public/uploads/winpoint') }}/{{ $spotBall->chellenge_image }}";
   var solution = "{{ url('public/uploads/winpoint') }}/{{ $spotBall->chellenge_image }}";
</script>
<script src="{{ url('public/js/demo.js') }}"></script>
<script type="text/javascript">
  $('#happy-finish').click(function(){
    if($("input[name='x_cordinate']").val() != '' && $("input[name='y_cordinate']").val() != '' && $("input[name='winpoints_id']").val() != ''){
      var cx = parseFloat($("input[name='x_cordinate']").val()).toFixed(2);
      var cy = parseFloat($("input[name='y_cordinate']").val()).toFixed(2);
      var winpoint_id = $("input[name='winpoints_id']").val();
      var bike_id = $("input[name='bike_id']").val();
      //console.log(cx+':'+cy);
      
      $.ajax({
          url: "{{ url('spot-a-ball/store') }}",
          type: 'GET', 
          async: false,
          data: {'x_cordinate':cx,'y_cordinate':cy,'winpoint_id':winpoint_id,'bike_id':bike_id},
          beforeSend: function() {
            $('#happy-finish').attr("disabled","disabled");  
          },
          success: function (data) {
            //console.log(data.message);
            if(data.error == "true") {
              window.location.href = "{{ url('spot-a-ball/thank-you') }}";
            }else{
              // console.log(data.message);
              alert(data.message);
              $('#happy-finish').removeAttr("disabled");
            }
          },
          error: function () {
            alert("something went wrong please try later");
            $('#happy-finish').removeAttr("disabled");
          }
      });
      
    }else{
      alert("Please Choose Ball Position");
    }
  });
</script>
<script type="text/javascript">
  var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

if(isMobile==1)
{
    $("#btn-remove-lines,#btn-drawline,#btn-hide-show-line,#btn-selectball").hide();
    var purpose ="selectball";
}else{
    var purpose ="drawline";
}
   $("#btn-selectball").click(function(){
      purpose ="selectball";
   });
   $("#btn-drawline").click(function(){
     purpose ="drawline";
   });
   $("#btn-color-black,#btn-color-blue,#btn-color-red,#btn-color-green").click( function() {
     $("#line-color-code").val($(this).attr('colorline'));
   })
</script>
<style type="text/css">
   .live_coordinates {
   position: absolute;
   display: block;
   color: #FFFFFF;
   white-space: nowrap;
   font-size: 16px;
   text-shadow: 1px 0 0 #333333, -1px 0 0 #333333, 0 1px 0 #333333, 0 -1px 0 #333333, 1px 1px #333333, -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333;
   }
</style>
<script type="text/javascript">
   const draw = SVG('drawing');
   const shapes = [];
   let index = 0;
   let shape;

   const getDrawObject = () => {
     //shape       = document.getElementById('shape').value;
     //const color = document.getElementById('color').value;
     shape = "mouse paint";
     const color = "#ff0099";
     const option = {
       stroke: color,
       'stroke-width': 2,
       'fill-opacity': 0,
     };
     return draw.polyline().attr(option);
     /*
     switch (shape) {
       case 'mouse paint':
         return draw.polyline().attr(option);
       case 'ellipse':
         return draw.ellipse().attr(option);
       case 'rect':
         return draw.rect().attr(option);
     }
     return null;
     */
   }

   draw.on('mousedown', event => {
      const shape = getDrawObject();
      shapes[index] = shape;
      shape.draw(event);
   });
   draw.on('mousemove', event => {
     if (shape === 'mouse paint' && shapes[index]) {
       shapes[index].draw('point', event);
     }
   })
   draw.on('mouseup', event => {
     if (shape === 'mouse paint') {
       shapes[index].draw('stop', event);
     } else {
       shapes[index].draw(event);
     }
     index++;
   })
</script>
@endpush