@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  }}" />

     <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>
          </li>

        </ul>


      </div>
    </div>


  </div>
  <div class="container-fluid padlftrght">
    <div class="row">

      @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>

  $(".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 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();
    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,
               "_token": "{{ csrf_token() }}" },  
        success: function (data, status, xhr) {
         //window.location = "/trip/" + trip_id;
        // console.log(data);
        location.reload();
       
       },
       error: function (jqXhr, textStatus, errorMessage) {
        // $('p').append('Error' + errorMessage);
      }
    });
    }
    

  });

</script>
@endsection