@extends('layout.master')

@section('content')

<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	

        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tour Package List</li>
          </ol>
        </div>



      <div class="">
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Tour Package List</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Employee</button> -->
            <!-- <a href="/form" class="btn btn-primary">Create Hotel</a> -->
            <a type="button" href="{{ route('tour_package.create') }}" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
              <i class="btn-icon-prepend" data-feather="package"></i>
              Add Tour Package
            </a>
          </div>

        </div>

        <hr class="main-separator">        
    


<!--         <h5 id="section9" class="main-subtitle">Basic Example</h5>
 -->        <!-- <p>In this examples, we load the data from an existing HTML table.</p> -->

        <div class="card card-example">
          <div class="card-body" style="background-color:white;">
            <div class="table-responsive ">
              <div class="active_status"> 
                <table id="tableGrid1" class="table table-hover">
                  <thead>
                  <tr>
                    <th>No</th>
                    <th>Package Name</th>
                    <th>Continent</th>
                    <th>Region</th>
                    <th>Days</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    @foreach ($tour->where('status','Active') as $key => $toureach)
                    <tr>
                      <td>{{ $key+1 }}</td>
                      <td>{{ $toureach->package_name }}</td>
                      <td>{{ $toureach->continent }}</td>
                      <td>{{ $toureach->region }}</td>
                      <td>{{ $toureach->days }}</td>
                      @if($toureach->status == "Active")
                      <td><span class="badge bg-success">Active</span></td>
                      @else
                      <td><span class="badge bg-danger">Inactive</span></td>
                      @endif
                      <td>
                        <!--<a href="group_package/{{$toureach->id}}/view/" class=""><i style="font-size: 20px;" class="ri-eye-line"></i></a>-->
                        <a href="tour_package/{{$toureach->id}}/edit/" class=""><i style="font-size: 20px;" class="ri-share-box-line"></i></a>
                        <button style="padding:0;background-color: transparent;  background-repeat: no-repeat;  border: none;    cursor: pointer;    overflow: hidden;    outline: none;"  value="tour_package/{{$toureach->id}}/delete" class="  deletebtnpopup" style="color:blue;"><span style="color:#506fd9;"><i style="font-size: 20px;" class="ri-delete-bin-6-line"></i></span></button>
                        
                      </td>
                    </tr>
                    @endforeach
                  
                  </tbody>
                </table>
              </div>
              <div class="inactive_status" style="display:none;"> 
                <table id="tableGrid2" class="table table-hover">
                  <thead>
                  <tr>
                    <th>No</th>
                    <th>Package Name</th>
                    <th>Continent</th>
                    <th>Region</th>
                    <th>Days</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    <?php $i=0; ?>
                    @foreach ($tour->where('status','Inactive') as $key => $toureach)
                    <tr>
                      <td>{{ ++$i }}</td>
                      <td>{{ $toureach->package_name }}</td>
                      <td>{{ $toureach->continent }}</td>
                      <td>{{ $toureach->region }}</td>
                      <td>{{ $toureach->days }}</td>
                      @if($toureach->status == "Active")
                      <td><span class="badge bg-success">Active</span></td>
                      @else
                      <td><span class="badge bg-danger">Inactive</span></td>
                      @endif
                      <td>
                        <!--<a href="tour_package/{{$toureach->id}}/view/" class=""><i style="font-size: 20px;" class="ri-eye-line"></i></a>-->
                        <a href="tour_package/{{$toureach->id}}/edit/" class=""><i style="font-size: 20px;" class="ri-share-box-line"></i></a>
                        <button style="padding:0;background-color: transparent;  background-repeat: no-repeat;  border: none;    cursor: pointer;    overflow: hidden;    outline: none;"  value="tour_package/{{$toureach->id}}/delete" class="  deletebtnpopup" style="color:blue;"><span style="color:#506fd9;"><i style="font-size: 20px;" class="ri-delete-bin-6-line"></i></span></button>
                        
                      </td>
                    </tr>
                    @endforeach
                  
                  </tbody>
                </table>
              </div>
            </div><!-- table-responsive -->
          </div><!-- card-body -->
          
        </div><!-- card -->

        <br><br><br>

        

      </div><!-- container -->

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>

    <script type="text/javascript">
      $("#tableGrid1").Grid({
        className: {
          table: 'table table-bordered mb-0'
        },
        search: true
      });
    </script>
     
     <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    .gridjs-head{
      display: flex;
    }
    .gridjs-search{
      width: 50%;
    }
    .filter{
      margin-left: auto;
      width: 200px;
    }
    </style>

   <script>
$(document).ready(function() {
  setTimeout(function(){
    $('.active_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div></div>');
    $('.inactive_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div></div>');
  }, 200);
});
function getval(sel){
  var value = sel.value;
  console.log(value);
  $('.active_status .gridjs-head .filter').html('');
  $('.active_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div>');
  $('.inactive_status .gridjs-head .filter').html('');
  $('.inactive_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div>');
    if (value=='Active') {
    $('.active_status').show();
    $('.inactive_status').hide();
    }
    else if (value=='Inactive') {
    $('.inactive_status').show();
    $('.active_status').hide();
    }
    // console.log($("#fliterdrop").val);
    // $(".filter").html("");
}
// $('.filter').change(function() {
//   console.log("here is my on change");
//     var value = $(this).val();
//     if (value=='Active') {
//     $('.active_status').show();
//     $('.inactive_status').hide();
//     }
//     else if (value=='Inactive') {
//     $('.inactive_status').show();
//     $('.active_status').hide();
//     }
// });
</script>


    <script type="text/javascript">

      $("#tableGrid1").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  search: true
});

 //       $('#filter').change(function() {
 //   console.log('Button clicked!');
 //   var value = $(this).val();
 //   alert(value)

 // });


    </script>


@endsection