@extends('layouts.default')
@section('content')
{{ HTML::style('css/spectrum.css') }}

<div class="container">

<h3><span class="glyphicon glyphicon-qrcode"></span> {{$product->name}}</h3>
<hr>



<ol class="breadcrumb">
  <li><a href="{{ URL::route('qrpay-user_myproducts')}}">{{Lang::get('messages.my_products')}}</a></li>
  <li class="active">{{Lang::get('messages.create_qrcodes')}}</li>
</ol>


<div class="panel panel-default">

  <div class="panel-heading get-qrcode">{{Lang::get('messages.modify_qrcode')}}</div>

  <div class="panel-body">

    <div class="row">


      <div class="col-md-8 col-lg-8 col-sm-8">

        <form role="form" id="create_qrcode">
          <div class="form-group">

            <label class="code-width">{{Lang::get('messages.title')}}</label>
            <input type="text" class="form-control code-width" placeholder="{{Lang::get('messages.name_of_your_campaign')}}" id="code_title"
            name="code_title">

          </div>

          <div class="form-group">
            <div class="row">
              <div class="col-md-4 col-xs-4">

                <label class="code-width">Width(cm)</label>
                <input type="text" class="form-control code-width" placeholder="150" id="code_width"
                name="code_width">

              </div>

              <div class="col-md-4 col-xs-4">
                <label class="code-height">Height(cm)</label>
                <input type="text" class="form-control code-height" placeholder="150" id="code_height"
                name="code_height">
              </div>

              <div class="col-md-4 col-xs-4">
               <label for="exampleInputPassword1">Pick a Color</label></br>
               <input type="hidden" id='colorpicker' value="rgb(0, 0, 0)"/><input type="hidden" id='color_hash' value="#000000"/>
             </div>

           </div>
         </div>


         <div class="form-group">

         </div>

         <div class="form-group">

          <label class="control-label">Location</label>
          <span class="help-inline"><small>(Type in an address for your qrcode campaign)</small></span>
          <div class="row">
            <div class="col-lg-9 col-md-9 col-xs-9">
              <input class="form-control" type="text" id='geocomplete' placeholder="Type in an address" value=""/>

            </div>

            <div class="col-lg-2 col-md-2 col-xs-2">
              <button class="btn btn-default" id="find"><span class="glyphicon glyphicon-search"></span> {{Lang::get('messages.search')}}</button>
            </div>
          </div>

        </div>

        <div class="Flexible-container popin">
         <div class="map_canvas"></div>
       </div>

       <center><p class="lead">You can drag the pin to define the exact address of your qrcode</p></center>
       <div class="details row">

         <div class="form-group">
           <div class="col-lg-12 col-md-10 col-sm-10 col-xs-12">
             <label class="control-label">Campaign Address</label>
             <span data-geo="formatted_address" class="lead campaign_address">None</span>
             <input name="formatted_address" class="form-control" type="hidden" id="qrcode_address" value="">
           </div>
         </div>

         <div class="form-group">
          <div class="col-lg-6 col-md-6 col-xs-12">
            <label class="control-label">Latitude</label>
            <span data-geo="lat" class="lead lat">None</span>
            <input  class="form-control" name="lat" type="hidden" id="qrcode_latitude" value="">
          </div>

          <div class="col-lg-6 col-md-6 col-xs-12">
           <label class="control-label">Longtitude</label>
           <span data-geo="lng" class="lead lng">None</span>
           <!-- <p class="lead lng">None</p> -->
           <input class="form-control" name="lng" type="hidden"  id="qrcode_longitude" value="">
         </div>
       </div>
       <div class="form-group">
        <a class="btn btn-default" id="reset" href="#" style="display:none;">Reset Marker</a>
      </div>
    </div>
    <p>
     <button type="submit" class="btn btn-primary btn-lg btn-block" id="create_qrcode"><span class="glyphicon glyphicon-qrcode"></span> Create QrCode</button>
   </p>
 </div>
 <div class="col-md-4 col-lg-4 col-sm-4 qrcode-private">{{$qrcode}}</div>
 <div class="your-qr-code"> <img src="{{ asset('/files/images_files/your-qr-code.png') }}" </div>

</form>

</div>
<hr>




</div>
</div>
</div>


<div class="panel panel-success">
  <div class="panel-heading"><i class="fa fa-qrcode"></i> <strong>Qrcodes of your campaign</strong></div>
  <div class="panel-body">


    <table class="table table-hover">

      <thead>
        <tr>
          <th>QR Code</th>
          <th>{{Lang::get('messages.title')}}</th>
          <th>{{Lang::get('messages.address')}}</th>
          <th>{{Lang::get('messages.created_at')}}</th>
          <th>{{Lang::get('messages.width')}}</th>
          <th>{{Lang::get('messages.height')}}</th>
          <th>{{Lang::get('messages.status')}}</th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      @if(!$productSaveQrcode->isEmpty())


      <tbody class="qrcode_result">
       @foreach ($productSaveQrcode as $key => $qrcode)
       <tr class="qrcode_box_{{$qrcode->id}} qrcodes">
        <td>{{$qrcode->svg}}</td>
        <td>{{$qrcode->title}}</td>
        <td>{{$qrcode->address}}</td>
        <td>{{$qrcode->created_at}}</td>
        <td>{{$qrcode->width}}</td>
        <td>{{$qrcode->height}}</td>
        <td>

          <div class="form-group">
            <div class="col-sm-10">
              @if($qrcode->status)
              <input type="checkbox" name="product_status" id="status" rel="{{$qrcode->id}}" checked>
              @else
              <input type="checkbox" name="product_status" rel="{{$qrcode->id}}" id="status">
              @endif

            </div>
          </div>
        </td>
        <td><a class="btn btn-primary" href="{{ route('qrpay-qrcode_download',array($qrcode->id))}}"><span class="glyphicon glyphicon-qrcode"></span> {{Lang::get('messages.download')}}</a> </td>
        <td><a class="btn btn-danger qrcode_delete" href="#"  rel="{{$qrcode->id}}"><span class="glyphicon glyphicon-trash"></span> Delete</a></p>
          <input type="hidden" id="qrcode_delete_id" value="{{$qrcode->id}}"/></td>
        </tr>
        @endforeach

        <tr class='no_qrcode' style="display:none;"><td><p class='lead text-danger'>{{Lang::get('messages.dont_have_qrcode')}}</p></td></tr>
      </tbody>

      @else

      <tbody class="qrcode_result">
        <tr class="no_qrcode"><td><p class="lead text-danger">{{Lang::get('messages.dont_have_qrcode')}}</p></td></tr>
      </tbody>
      @endif

    </table>


  </div>
</div>
</div>
@stop

@section('footer_js')

{{ HTML::script('js/jquery.validate.js') }}
{{ HTML::script('js/additional-methods.js') }}

@if(Request::segment(1)=='tr')
{{ HTML::script('js/messages_tr.js') }}
@endif

{{ HTML::script('js/spectrum.js') }}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>

{{ HTML::script('js/jquery.geocomplete.min.js') }}
{{ HTML::script('js/bootstrap-switch.min.js') }}
{{ HTML::style('css/bootstrap-switch.min.css')}}

@if(Request::segment(1)=='tr')
{{ HTML::script('js/jquery.spectrum-tr.js') }}
@endif

<script type="text/javascript">

  $(document).ready(function () {

    $("[name='product_status']").bootstrapSwitch({
    });



    $("[name='product_status']").on('switchChange.bootstrapSwitch', function(event, state) {
     var statusUrl = "{{URL::route('qrpay-qrcode_status')}}";
     var statusID = $(this).attr('rel');
     console.log(state.value);
     $.ajax({
      url: statusUrl,
      dataType: 'json',
      type: 'POST',
      data: {'id':statusID, 'status':state.value},
      success: function (data) {
        console.log('gonderdim');
      },
    });


     console.log($(this).val());
   });


    var qrcodeForm  = $('form#create_qrcode');


    var options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };

    function success(pos) {
      var crd = pos.coords;

      console.log('Your current position is:');
      console.log('Latitude : ' + crd.latitude);
      console.log('Longitude: ' + crd.longitude);

      var lat_long = crd.latitude +","+ crd.longitude;

      console.log('More or less ' + crd.accuracy + ' meters.');

      $("#geocomplete").geocomplete("find", lat_long);

    };

    function error(err) {
      console.warn('ERROR(' + err.code + '): ' + err.message);
    };

    navigator.geolocation.getCurrentPosition(success, error, options);


    $("#geocomplete").geocomplete({
      map: ".map_canvas",
      details: ".details",
      detailsAttribute: "data-geo",
      markerOptions: {
        draggable: true
      }
    });

    $("#geocomplete").bind("geocode:dragged", function(event, latLng){
      $("span.lat").html(latLng.lat());
      $("span.lng").html(latLng.lng());

      $("#geocomplete").geocomplete("find", latLng.lat() + "," + latLng.lng());

      $("#reset").show();
    });


    $("#reset").click(function(){
      $("#geocomplete").geocomplete("resetMarker");
      $("#reset").hide();
      return false;
    });

    $("#find").click(function(e){
      e.preventDefault();
      $("#geocomplete").trigger("geocode");
    }).click();


    $("#colorpicker").spectrum({
      color: "rgb(0, 0, 0)",
      change: function (color) {
        $("input#color_hash").val(color.toHexString());
        $('input#colorpicker').val(color);
      }
    });


    $('a.qrcode_delete').click(function (e) {

      e.preventDefault();

      console.log('delete tiklandi');

      var qrcode_id   = $(this).attr('rel');
      var qrcodeURL   = "{{ URL::route('qrpay-delete_qrcode_ajax') }}";
      var no_qrcode   = $('tr.no_qrcode');
      var qrcode_box  = $('tr.qrcode_box_'+qrcode_id);

      console.log(qrcode_id);

      $.ajax({
        url: qrcodeURL,
        dataType: 'json',
        type: 'POST',
        data: {QrcodeID: qrcode_id},
        success: function (data) {

          if (data == 'ok') {

            if($('tr.qrcodes').length==1){

              console.log('asil');

              $(qrcode_box).fadeOut('slow',function(){
                $(no_qrcode).fadeIn('slow');
              });
            }else{
              $(qrcode_box).fadeOut('slow');
            }
          }
        },
      });

    });

    $('form#create_qrcode').validate({
      rules: {
        code_title: {
          required: true,
        },
        code_height: {
          required: true,
          number:true
        },
        code_width: {
          required: true,
          number:true
        },
        color_hash:{
          required:true,
        }
      },
      submitHandler: function(form) {

        var qrcodeURL   = "{{route('qrpay-user_product_qrcode')}}";
        var QrcodeArray = new Array();
        QrcodeArray[0]  = $("#code_title").val();
        QrcodeArray[1]  = $("#code_width").val();
        QrcodeArray[2]  = $("#code_height").val();
        QrcodeArray[3]  = "{{Auth::user()->id}}";
        QrcodeArray[4]  = "{{$product_id}}";
        QrcodeArray[5]  = $("#colorpicker").val();
        QrcodeArray[6]  = $("#color_hash").val();
        QrcodeArray[7]  = $("span.lat").html();
        QrcodeArray[8]  = $("span.lng").html();
        QrcodeArray[9]  = $("span.campaign_address").html();

        $.ajax({
          url: qrcodeURL,
          type: 'POST',
          dataType:'html',
          data: {QrcodeArray: QrcodeArray},
          success: function (data) {

            $("form#create_qrcode")[0].reset();

            $(data).appendTo('tbody.qrcode_result').each(function(){

              var qrcode_wrapper = $(this);
              // var no_qrcode      = $(this).find('tr.no_qrcode');

              $('tr.no_qrcode').remove();

              $(this).find('a.qrcode_delete').click(function(e){

                  e.preventDefault();
                  $(qrcode_wrapper).fadeOut('slow');
              });
            });

          },
        });

},
highlight: function (element) {
  $(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
  console.log('asd');
  $(element).closest('.form-group').removeClass('has-error');
  $(element).next('.help-block').removeClass('form-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
  console.log(error);
  console.log(element);
  if (element.parent('.input-group').length) {
    error.insertAfter(element.parent()).addClass('form-error');
    element.parent('.input-group').addClass('has-error');
  } else {
    error.insertAfter(element).addClass('form-error');
  }
}
});


});
</script>
@stop