@extends('layout.master')

@section('content')


<style>
    .active_btn{
        background-color: #1c3fb7!important;
    }

    .arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}



.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
</style>

<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">Rim Inspection History</li>
          </ol>
        </div>



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

          <div class="col-lg-8">
            <h2 class="main-title">RIm Inspection History</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 href="{{ URL::previous() }}" class="btn btn-primary">Back</a>

          </div>

        </div>
        
        <br><br>
        
        



        <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 style="" id="service">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
            <table id="tableGrid1" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>Tread Depth</th>
                        <th>Pressure</th>
                        <th>Condition</th>
                        <th>Current Rolling (KM)</th>
                        <th>Faq</th>
                        <th>Attachment</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($inspection_history as $key => $tire)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $tire->inspection_date }}</td>
                        <td>{{ $tire->tread_depth_mm }}</td>
                        <td>{{ $tire->pressure }}</td>
                        <td>{{ $tire->tire_condition }}</td>
                        <td>{{ $tire->current_rolling_km }}</td>
                        <td>
                            <a class="editbtn" data-id="{{ $tire->id }}">View</a>
                            
                        </td>
                        
                        <td>
                            <a class="editbtn" href="">
                                {{ $tire->attachment }}
                            </a>
                            
                        </td>
                        
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>




        <br><br><br>


<div class="modal" id="inspection">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Inspection Faq</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="margin-top: 1px;"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body" style="margin-top: -15px;">
        <div class="card-body">
          <form action="/tyre/service/history/store" method="POST" id="cat" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="tire_id" id="tire_id" value="{{ $id }}">

          <br>
          <div class="row faq-data">
            
              
           
                                        
          </div><!-- Row -->
            </form>
        </div>
      </div>
    </div>
  </div>
</div>
        

</div>

<script>
    $(document).ready(function() {
    $(document).on('click', '.editbtn', function() {

      var cat_id = $(this).data('id');
      $('#inspection').modal('show');
             console.log(cat_id)


    var initialData = {!! json_encode($inspection_history->toArray()) !!};
    console.log(initialData)

   var filteredData = initialData.filter(function(category) {
       return category.id == cat_id;
      });

       console.log(filteredData[0].faq)
       var faqs=filteredData[0].faq; 
       var faqs = JSON.parse(faqs);

       console.log('fq', faqs)
    
       // Append options for each question
      faqs.forEach(function(faq) {
      var newQuestion = $('<div class="col-lg-12">')
      .append($('<div class="mb-3">')
        .append($('<label class="form-label">').text(faq.question))
        .append($('<select name="faq_answer[]" class="form-control" required>')
          .append($('<option value="Yes">').text(faq.answer))
        )
      );
    // Append the new question to the parent element
    $('.faq-data').append(newQuestion);
  });
  


    });
  });

</script>




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

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