@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">
          @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>
          </li>
          @endforeach


        </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>
  $(".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');
    };

</script>
@endsection