@extends('admin.layout.header')
@section('content')


<style>

/* active button >>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.toggle-btn{
    width: 40px;
    height: 20px;
    margin: 10px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    background : 25px center #8f8383;
    cursor: pointer;
    -webkit-transition: background-color .40s ease-in-out;
    -moz-transition: background-color .40s ease-in-out;
    -o-transition: background-color .40s ease-in-out;
    transition: background-color .40s ease-in-out;
    cursor:pointer;
    &.active{
      background : 5px center #2ecc71;
      .round-btn{
        left: 20px;
      }
    }
    .round-btn{
      width: 15px;
      height: 15px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: 5px;
      top: 85%;
      margin-top: -15px;
      -webkit-transition: all .30s ease-in-out;
    -moz-transition: all .30s ease-in-out;
    -o-transition: all .30s ease-in-out;
    transition: all .30s ease-in-out;
    }
    .cb-value{
      position: absolute;
      left:0;
      right:0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 9;
      cursor:pointer;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
  }
</style>
<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">medQ Test</p>
                        <form action="{{ route('medqtest.bulkDelete') }}" method="POST">
                            @csrf
                            @method('DELETE')

                            <div class="table-responsive">
                                <table id="recent-purchases-listing" class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Customer Details</th>
                                            <th>Contact</th>
                                            <th>Test</th>
                                            <th>Status</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($kyh as $key => $t)

                                        <tr>
                                            <td>{{$key+1}}</td>

                                            <td>
                                                {{$t->name}} <br>
                                                {{$t->gender}}
                                                {{$t->age}}
                                                {{$t->comany}}

                                            </td>
                                            <td>{{$t->phone}}</td>
                                            <td>{{$t->test}}</td>
                                            <td>
                                                <div class="toggle-btn {{ $t->is_active == 1 ? 'active' : '' }}">
                                                    <input type="checkbox" class="cb-value"  data-id="{{ $t->id}}" />
                                                    <span class="round-btn"></span>
                                                </div>
                                            </td>

                                        </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                                <button type="submit" class="btn btn-danger">Delete Selected</button>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->



    @endsection

    @push('scripts')

<script>
  $(function() {
    
    $('.cb-value').click(function() {
        var userid = $(this).data('id');
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ route('change-kyh-Status') }}",
            data: { 'id': userid,
                "_token": "{{ csrf_token() }}",
            },
            success: function (data) {
                console.log(data.message);
                location.reload();
            }
        });

    })
  })
</script>

    <script>
        document.getElementById('select-all').addEventListener('click', function() {
            const checked = this.checked;
            document.querySelectorAll('input[name="medqtest[]"]').forEach(checkbox => {
                checkbox.checked = checked;
            });
        });
    </script>
    @endpush