@extends('layouts.master')

@section('content')
<style>
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
</style>
@php
if (!function_exists('shortTitle')) {
function shortTitle($title, $maxLength = 50) {
    if (strlen($title) <= $maxLength) {
        return $title;
    }
    return substr($title, 0, $maxLength) . '...';
}
}
@endphp
<!-- Content Header (Page header) -->
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Filters</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Filters</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
          @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>	
                    <strong>{{ $message }}</strong>
            </div>
            @endif
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">All Filters</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>Name</th>
                    <th>Title Search</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                  @foreach($filters as $value)
                  <tr>
                    <td>{{$value->search_name}}</td>
                    <td>{{ shortTitle($value->title_search, 50) }}</td>
                    <td>
                      @if($value->filter_type==1)
                        RSS
                      @else
                        API
                      @endif
                    </td>
                    <td>
                      <label class="switch">
                          <input type="checkbox" class="switchToggle" data-id="{{ $value->id }}" {{ $value->status ? 'checked' : '' }}>
                          <span class="slider round"></span>
                      </label>
                    </td>
                    <td>
                      <a href="{{ route('filter.edit', $value->id) }}"><li class="fa fa-edit"></li></a>
                      <a href="{{ route('filter.destroy', $value->id) }}" onclick="return confirm('Delete flter?')"><li class="fa fa-trash"></li></a>
                    </td>
                  </tr>   
                  @endforeach          
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->

@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
      
    $('.switchToggle').on('change', function() {
        let isChecked = $(this).is(':checked');  // true if enabled, false if disabled
        let dataId = $(this).data('id');  // Get any relevant data like ID
        
        // Send the AJAX request
        $.ajax({
            url: "{{ route('api.filterStatus') }}",
            type: 'POST',
            data: {
                id: dataId,
                status: isChecked ? 1 : 0,  // Send 1 for enabled, 0 for disabled
                _token: '{{ csrf_token() }}'  // Laravel CSRF token for security
            },
            success: function(response) {
                // Handle success response
                if (response.status === 'success') {
                    // Show green notification for success
                    toastr.success(response.message);
                }
            },
            error: function(xhr) {
                // Handle error response
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    // Show red notification for error
                    toastr.error(xhr.responseJSON.message);
                } else {
                    // Generic error if no message from server
                    toastr.error('An unexpected error occurred');
                }
            }
        });
    });
});

</script>