@extends('frontend::layouts.master')
@section('content')
<!-- ******************************** Content Part ******************************** -->
<section class="my-trips-bg clearfix">
  <div class="container">
    <h3>My Trips</h3>

    <div class="row">
      <div class="col-md-12">
        <ul class="trip-bx">
          @php
          $cntgauge = 1;
          @endphp
          @foreach($trips as $trip )
          <li>
            <span class="close-div cfrmdelete" data-tripid="{{$trip->id}}" ></span>
            <div class="trip-image-part">
              <img src="{{ config('constants.activities_image_webpath') }}/{{ gettripimage($trip->to_loc)  }}" class="img-responsive" alt="" style="width: 286px;height: 186px;"/>
            </div>
            <div class="trip-content-part">
              <h2><a href="/trip/{{ $trip->id }}" style='color: #000000'> {{ ucfirst($trip->from_loc) }} to {{ ucfirst($trip->to_loc) }}</a></h2>
              <h4>{{ date('D, d M', strtotime($trip->from_date)) }}  -  {{ date('D, d M', strtotime($trip->to_date)) }}</h4>
              <ul class="ic-list">
               <!--  <li><span><img src="img/Icons/tc1.png" class="img-responsive" /></span> -12% emissions</li> -->
               <li><span><img src="img/Icons/tc2.png" class="img-responsive" /></span> Eco-certified</li>
               <li><span><img src="img/Icons/tc3.png" class="img-responsive" /></span> Hybrid</li>
               <li><span><img src="img/Icons/tc4.png" class="img-responsive" /></span> Sustainable</li>
               <li><span><img src="img/Icons/tc5.png" class="img-responsive" /></span> Carbon Footprint</li>
             </ul>
           </div>
           <!--  <div class="trip-img-last">
              <img src="img/tg50.png" class="img-responsive" alt="" />
            </div> -->
            <div class="img-part" style="margin-top:35px;margin-bottom:35px">
              <div style="text-align: -webkit-center;"><canvas class="guage_can" id="guage_can_{{$cntgauge}}" style="width: 200px; height: 100px;"></canvas></div>
              <div id="preview-textfield_{{$cntgauge}}" style=" text-align: center;font-size: 20px;">{{$trip->emisson_rate}} Kg </br>Co2 emissions</div>
              <input type="hidden" name="emisson__{{$cntgauge}}" id="emisson__{{$cntgauge}}" value="{{$trip->emisson_rate}}" />
            </div>
          </li>
           @php
          $cntgauge = $cntgauge+1;
          @endphp
          @endforeach
          @if (count($trips) <= 0)
          <li>
            <span class="close-div cfrmdelete" data-tripid="37"></span>
            
            <div class="trip-content-part">
              <h2 style=" text-align: center;"><a href="#" style="color: #000000"> No Trips Added</a></h2>
           </div>
          </li>
          @endif
          

        </ul>


      </div>
    </div>


  </div>
</section>


@endsection

@section('scripts')
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/libs/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/sweetalert.min.js"></script>
<script src="js/frontend/gauge.min.js"></script>

<script>
  $(".heart-save").click(function(){
    $(this).toggleClass("heart-save-active");
  });
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

  $(document).on("click", ".cfrmdelete", function(e) {

   var tripId = gettripId($(this));
   swal
   .fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, delete it!"
  }).then(function(result) {
    if (result.value) {
      $.ajax({

        url:"/deletetrip/" + tripId,
        type:"post",
        data: { '_method': "delete" },
        dataType:"json",
        success:function(data)
        {

          swal.fire({
            title: 'Deleted!',
            text: 'Your selected records have been deleted!',
            type: 'success',
            buttonsStyling: false,
            confirmButtonText: "OK",
            confirmButtonClass: "btn btn-sm btn-bold btn-info",
          }).then(function(result){
            location.reload();
          })


        }
      });

    } 
  });
});



  var gettripId = function(e) 
  {
   return e.attr('data-tripid');
 };


 var opts = {
    // color configs
  colorStart: "#6fadcf",
  colorStop: void 0,
  gradientType: 0,
  strokeColor: "#e0e0e0",
  generateGradient: true,
  percentColors: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
    // customize pointer
  pointer: {
    length: 0.5,
    strokeWidth: 0.035,
    iconScale: 1.0
  },
    // static labels
  staticLabels: {
    font: "10px sans-serif",
    labels: [200, 500, 1000,1500,2000],
    fractionDigits: 0
  },
    // static zones
  staticZones: [
    {strokeStyle: "#30B32D", min: 0, max: 1000},
    {strokeStyle: "#FFDD00", min: 1000, max: 1500},
    {strokeStyle: "#F03E3E", min: 1500, max: 2000},
      // {strokeStyle: "#FFDD00", min: 2100, max: 2800},
      // {strokeStyle: "#F03E3E", min: 2800, max: 3000}
      // {strokeStyle: "#F03E3E", min: 0, max: 200},
      // {strokeStyle: "#FFDD00", min: 200, max: 500},
      // {strokeStyle: "#30B32D", min: 500, max: 2100},
      // {strokeStyle: "#FFDD00", min: 2100, max: 2800},
      // {strokeStyle: "#F03E3E", min: 2800, max: 3000}
    ],
    // render ticks
  renderTicks: {
    divisions: 10,
    divWidth: 1,
    divLength: 1,
    divColor: "#918c8c",
    subDivisions: 7,
    subLength: 1,
    subWidth: 0,
    subColor: "#918c8c"
  },
    // the span of the gauge arc
  angle: 0,
    // line thickness
  lineWidth: 0.30,
    // radius scale
  radiusScale: 1.0,
    // font size
  fontSize: 100,
    // if false, max value increases automatically if value > maxValue
  limitMax: false,
    // if true, the min value of the gauge will be fixed
  limitMin: false,
    // High resolution support
  highDpiSupport: true
};
var targetcnt = document.getElementsByClassName('guage_can'); 
for (let i = 1; i <= targetcnt.length; i++) {
  var target = document.getElementById('guage_can_'+i); 
  var gauge = new Gauge(target).setOptions(opts);
  document.getElementById("preview-textfield_"+i).className = "preview-textfield"+i;
  gauge.setTextField(document.getElementById("preview-textfield_"+i) +' Kg Co2 emissions');
  gauge.maxValue = 2000;
  gauge.setMinValue(0); 
  var emssion = $('#emisson__'+i).val();
  gauge.set(emssion);
  gauge.animationSpeed = 30;
}
// var gauge = new Gauge(target).setOptions(opts);
// document.getElementById("preview-textfield").className = "preview-textfield";
// gauge.setTextField(document.getElementById("preview-textfield"));
// gauge.maxValue = 2000;
// gauge.setMinValue(0); 
// gauge.set(emssion);
// gauge.animationSpeed = 30;
</script>
@endsection