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


    <div class="container">
     <input type='hidden' name='trip_id' id='trip_id' value="{{ $trip->id  }}" />
      <input type="hidden" value="{{ $trip->emisson_rate}}" name="emissions" id="emissions">
      <input type="hidden" value="{{ $trip->no_of_passenger}}" name="no_of_travel_hidden" id="no_of_travel_hidden">

     <div class="row">
      <div class="col-md-12">
        <ul class="trip-bx">
          <li>
             <input type="hidden" name="from_loc_hidden" id="from_loc_hidden"  value="@if(isset($trip->from_loc)){{ trim($trip->from_loc) }}@endif" />
            <input type="hidden" name="to_loc_hidden" id="to_loc_hidden"  value="@if(isset($trip->to_loc)){{ trim($trip->to_loc) }}@endif" />
            <input type="hidden" name="dep_date_hidden" id="dep_date_hidden" value="@if(isset($trip->from_date)){{ date('m/d/Y', strtotime($trip->from_date)) }}@endif" />
            <input type="hidden" name="ret_date_hidden" id="ret_date_hidden" value="@if(isset($trip->to_date)){{ date('m/d/Y', strtotime($trip->to_date)) }}@endif" />
            <div class="trip-image-part">
              <img src="{{ config('constants.activities_image_webpath') }}/{{ gettripimage($trip->to_loc)  }}" class="img-responsive" style="width: 286px;height: 186px;" alt="" />
            </div>
            <div class="trip-content-part">
              <h2>{{ ucfirst($trip->from_loc) }} to {{ ucfirst($trip->to_loc) }}</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 style="text-align: -webkit-center;"><canvas id="guage_can"  class="img-responsive" style="width: 200px; height: 100px;"></canvas></div>
              <div id="preview-textfield" style="font-size: 30px;text-align: center;"></div><div style="font-size: 15px;text-align: center;">CO2 Emission</div>
            </div>
          </li>

        </ul>


      </div>
    </div>


  </div>
  <div class="container-fluid padlftrght">
    <div class="row">
      @foreach($transport as $trans)
       @php
    $flight = json_decode($trans->jsondata);
 @endphp
          
            <div class="col-xl-6 col-lg-6">
            <div class="tbl-bx">
              <h3>Transportation</h3>
              <div class="table-responsive">
                <table class="table main-table">
                  <colgroup width="20%"></colgroup>
                  <colgroup width="18%"></colgroup>
                  <colgroup width="18%"></colgroup>
                  <colgroup width="24%"></colgroup>
                  <colgroup width="20%"></colgroup>

                  <tr>
                    <span class="close-div" onclick='$(this).parent().parent().hide();'></span>
                    <td><img src="https://content.airhex.com/content/logos/airlines_{{ $flight->airline->iata }}_84_56_r.png" class="img-responsive2" /></td>
                    <td><span class="timer">{{ Carbon\Carbon::parse($flight->departure->scheduled)->format('H:i') }}</span> <span class="txt-cnt">{{ $flight->departure->airport }}</span></td>
                    <td><span class="timer">{{  Carbon\Carbon::parse($flight->arrival->scheduled )->format('H:i') }}</span> <span class="txt-cnt">{{ $flight->arrival->airport }}</span></td>
                    <td><span class="txt-cnt2">{{ Carbon\Carbon::parse($flight->arrival->scheduled)->diff(Carbon\Carbon::parse($flight->departure->scheduled))->format('%Hh:%im'); }}</span> <span class="hrline"></span> <!-- <span class="txt-cnt2">Non
                        stop</span> <span class="hrline"></span> -->
                      <span class="gbx">{{ $trip->emisson_rate}} CO2 emissions</span>
                    </td>
                    <!-- <td>
                      <span class="gtx gtxnw">$157.59</span>
                    </td> -->
                  </tr>






                </table>

              </div>

            </div>
          </div>
      @endforeach
      @foreach($rides as $ride_det)
      <div class="col-xl-6 col-lg-6">
       <div class="tbl-bx">
        <h3>Your Ride</h3>
        <div class="table-responsive">
          <table class="table inner-table2">
            <colgroup width="80%"></colgroup>
            <colgroup width="10%"></colgroup>
            <colgroup width="10%"></colgroup>
            <colgroup width="20%"></colgroup>

            <tr>
              <span class="close-div" data-type='rides' data-id='{{ $ride_det->id }}'  style="z-index: 0"></span>
              <td>
                <div class="tan-img-part">
                  <img src="/img/trip/1.png" class="img-responsive" />
                </div>
                <div class="tan-cnt-part">
                  <h4>{{ $ride_det->name }}</h4>
                  <span class="paranew">{{ $ride_det->description  }}</span>

                  <ul>
                    <li><span><img src="/img/leaf2.png" /></span>{{ $ride_det->vehicle_type  }}</li>
                  </ul>
                </div>

              </td>

              <td align="center">
                <h6>Passengers</h6>
                <span>@if(isset($ride_det->max_passenger) && isset($ride_det->min_passenger) )
                  <span>{{ $ride_det->max_passenger }}-{{ $ride_det->min_passenger }}</span>
                  @elseif(isset($ride_det->max_passenger))
                  <span>{{ $ride_det->max_passenger }}</span>
                  @elseif(isset($ride_det->min_passenger))
                  <span>{{ $ride_det->min_passenger }}</span>
                @endif</span>
              </td>
              <td align="center">
                <h6>Luggage</h6>
                <div class="lug"><span>3X</span> <span>3X</span></div>
              </td>
              <td>
                <span class="gtx gtxnw">$878</span>

              </td>
            </tr>


          </table>

        </div>

      </div>
    </div> 
    @endforeach

    @foreach($activity as $activity_det)
    <div class="col-xl-6 col-lg-6">
      <div class="tbl-bx">
        <h3>Your Activities</h3>
        <div class="table-responsive">
          <table class="table inner-table2">
            <colgroup width="80%"></colgroup>
            <colgroup width="20%"></colgroup>
            <tbody>
              <tr>
                <span class="close-div" data-type='activities' data-id='{{ $activity_det->id }}' style="z-index: 0"></span>
                <td>
                  <div class="tan-img-part">
                    <img src="/img/trip/2.png" class="img-responsive wdth132">
                  </div>
                  <div class="tan-cnt-part">
                    <h4>{{ $activity_det->title }}</h4>
                    <span class="paranew">Skip the entrance line at the Colosseum so...</span>
                    <ul>
                      <li><span><img src="/img/star2.png"></span>4.5 (1,278)</li>
                      <li><span><img src="/img/leaf2.png"></span>Carbon Footprint</li>
                    </ul>
                  </div>
                </td>

                <td>
                  <span class="gtx gtxnw">{{ $activity_det->amount }}</span>


                </td>
              </tr>



            </tbody>
          </table>

        </div>

      </div>
    </div>
    @endforeach

    @foreach($hotels as $hotel_det)
    <div class="col-xl-6 col-lg-6">
      <div class="tbl-bx">
        <h3>Your Hotel</h3>
        <div class="table-responsive">
          <table class="table inner-table2">
            <colgroup width="80%"></colgroup>
            <colgroup width="20%"></colgroup>
            <tbody>
              <tr>
                <span class="close-div" data-type='hotels' data-id='{{ $hotel_det->id }}'  style="z-index: 0"></span>
                <td>
                  <div class="tan-img-part">
                    <img src="/img/trip/3.png" class="img-responsive wdth132">
                  </div>
                  <div class="tan-cnt-part">
                    <h4>{{ $hotel_det->name }}</h4>
                    <span class="paranew">{{ $hotel_det->address }}</span>
                    <ul>
                      <li><span><img src="/img/star2.png"></span>{{ $hotel_det->rating }} ({{ $hotel_det->reviews  }})</li>
                      <li><span><img src="/img/leaf2.png"></span>Carbon Footprint</li>
                    </ul>
                  </div>
                </td>

                <td>
                  <span class="gtx gtxnw">${{ $hotel_det->amount  }}/night</span>


                </td>
              </tr>



            </tbody>
          </table>

        </div>



      </div> 
    </div>
    @endforeach

    @foreach($restaurants as $rest_det)
    <div class="col-xl-6 col-lg-6">
      <div class="tbl-bx">
        <h3>Your Restaurants</h3>
        <div class="table-responsive">
          <table class="table inner-table2">
            <colgroup width="80%"></colgroup>
            <colgroup width="20%"></colgroup>
            <tbody>
              <tr>
                <span class="close-div" data-type='restaurants' data-id='{{ $rest_det->id }}'  style="z-index: 0"></span>
                <td>
                  <div class="tan-img-part">
                    <img src="/img/trip/4.png" class="img-responsive wdth132">
                  </div>
                  <div class="tan-cnt-part">
                    <h4>{{ $rest_det->name }}</h4>
                    <span class="paranew">{{ $rest_det->cuisines }}</span>
                    <ul>
                      <li><span><img src="/img/star2.png"></span>{{ $rest_det->ratings }} ({{ $rest_det->ratings }})</li>
                      <li><span><img src="/img/leaf2.png"></span>Carbon Footprint</li>
                    </ul>
                  </div>
                </td>

                <td>
                  <span class="gtx gtxnw">$15 - $200</span>


                </td>
              </tr>



            </tbody>
          </table>

        </div>

      </div>
    </div>
    @endforeach

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

@include('frontend::trips.other_choices')

</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="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="/js/frontend/gauge.min.js"></script>


<script>
      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},
        ],
    // 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
    };


  $(".close-div").click(function(){
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
       var id = $(this).data('id');
       var type = $(this).data('type');
       var trip_id = $('#trip_id').val();

       $.ajax('/removetrip/', {
        type: 'get',  // http method
        data: { 'trip_id': trip_id, 'id': id , 'type' : type  },  
        success: function (data, status, xhr) {
         window.location = "/trip/" + trip_id;
         // $('p').append('status: ' + status + ', data: ' + data);
       },
       error: function (jqXhr, textStatus, errorMessage) {
        // $('p').append('Error' + errorMessage);
      }
    });


     }
   })
  });


  $(".heart-save").click(function(){
    $(this).toggleClass("heart-save-active");
    if(!$(this).hasClass("heart-save-active")){
      return false;
    }
    var transjson = '';
    var dataid = $(this).attr('data-id');
    var type = $(this).attr('data-type');
    var from_loc = $('#from_loc_hidden').val();
    var to_loc = $('#to_loc_hidden').val();
    var dep_date = $('#dep_date_hidden').val();
    var ret_date = $('#ret_date_hidden').val();
     var no_of_travel = $('#no_of_travel_hidden').val();
    var emission = parseFloat($('#emissions').val());
    if(type == 'transport'){
      transjson = $('.transportcls_'+dataid).find('.jsonval').val();
    }
    if(dataid != null && type != null){
      $.ajax('/addtrip', {
        type: 'post',  // http method
        data: { 'id': dataid, 
                'type' : type ,
                'from_loc' : from_loc,
                'to_loc' : to_loc,
                'dep_date' : dep_date,
                'ret_date' : ret_date,
                'no_of_passenger':no_of_travel,
               'emrate' : emission,
                 'transjson': transjson,
               "_token": "{{ csrf_token() }}" },  
        success: function (data, status, xhr) {
         var target = document.getElementById('guage_can'); 
          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(data.em);
          $('#emissions').val(data.em);
          gauge.animationSpeed = 30;
       
       },
       error: function (jqXhr, textStatus, errorMessage) {
        // $('p').append('Error' + errorMessage);
      }
    });
    }
    

  });

$(document).ready(function() {

    var emssion = parseFloat($('#emissions').val());

    var target = document.getElementById('guage_can'); 
    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);
     function updateGaugeValue(value) {
  gauge.set(value); // Update the gauge value
  document.getElementById("preview-textfield").textContent =  value + ' Kg'; // Update the preview text
}
updateGaugeValue(emssion);
    gauge.animationSpeed = 30;

  });

</script>
@endsection