@extends('admin.layouts.index')

@push('style')

<!-- DataTables CSS -->
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KzY5v3Z/y2mc6TBx1+YpwwBR2cM5GRFd4iEQjIqtsydLb9ncppntq62GK6ad4CCekfT0HTl4Z5BjUdgHmR4vww==" crossorigin="anonymous" />

@endpush

@section('content')

<style>
     a {
          color: #47a0b6;
     }
     .btn-group{
          box-shadow: none;
     }
</style>

<!-- Overlay For Sidebars -->
<div class="overlay"></div><!-- Search  -->
<div class="search-bar">
     <div class="search-icon"> <i class="material-icons">search</i> </div>
     <input type="text" placeholder="Explore Nexa...">
     <div class="close-search"> <i class="material-icons">close</i> </div>
</div>


<section class="content">
     <div class="block-header">
          <div class="row">
               <div class="col-lg-7 col-md-6 col-sm-12">
                    <h2>FAQ Data Tables
                         <small class="text-muted">Welcome to Language Cafe</small>
                    </h2>
               </div>
               <div class="col-lg-5 col-md-6 col-sm-12">
                    <ul class="breadcrumb float-md-right">
                         <li class="breadcrumb-item"><a href="{{route('admin.home')}}"><i class="zmdi zmdi-home"></i>Dashboard</a></li>
                         <li class="breadcrumb-item active">FAQ DataTables</li>
                    </ul>
               </div>
          </div>
     </div>


     <div class="container-fluid">
          <div class="row clearfix">
               <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                         <div class="header">
                              <h2> Cafe Data</h2>
                         </div>
                         <div class="body">

                              <a href="{{route('admin.add_faq')}}" class="btn mb-3 mt-2" style="background-color: #47a0b6; color:white;">Add FAQ</a>

                              @include('admin.common.flash')
                              <div class="form-group form-float">
                                        <div class="form-line" style="width: 20%; margin-left: 13px;">
                                        <input type="text" id="myinput" class="form-control" placeholder="Search here"/>
                                        </div>
                                   </div>
                              <div class="table-responsive">
                                   <table id="user_table" class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                        <thead>
                                             <tr>
                                                  <th>Id</th>
                                                  <th>Question</th>
                                                  <th>Answer</th>
                                                  <th>Action</th>
                                             </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                   </table>
                              </div>
                         </div>
                    </div>
               </div>
          </div>

     </div>
</section>
@endsection

@push('script')
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>


<script>
     var table;

     $(document).ready(function() {

          table = $('#user_table').DataTable({
               searching: false,
               processing: true,
               serverSide: true,
               responsive: false,
               aaSorting: [
                    [0, 'asc']
               ],
               "ajax": {
                    type: 'GET',
                    url: "{{route('admin.get_faq_listing')}}",
                    data: function(d) {
                         d.keyword = $('#search-input').val();
                    }
               },
               "columns": [{
                         data: 'id',
                         render: function(data, type, row, meta) {
                              var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                              return serialNumber;
                         },
                    },
                    {
                         data: 'question',
                         orderable: false,
                    },
                    {
                         data: 'answer',
                         orderable: false,
                    },
                    {
                         data: 'action',
                         orderable: false,
                    },

               ],
          });

          $('#search-input').on('keyup', function() {
               table.search($(this).val()).draw();
          });


               $(document).on('click', '.delete-btn', function(e) {
                    e.preventDefault();
                    var rowId = $(this).data('id');

                    Swal.fire({
                         title: 'Are you sure?',
                         text: "You want to delete this Shelter Information!",
                         icon: 'warning',
                         showCancelButton: true,
                         confirmButtonColor: '#3085d6',
                         cancelButtonColor: '#d33',
                         confirmButtonText: 'Yes, delete it!'
                    }).then(function(result) {
                         if (result.isConfirmed) {
                              $.ajax({
                                   url: "{{ route('admin.delete_faq', ['id' => '__rowId__']) }}".replace('__rowId__', rowId),
                                   type: 'POST',
                                   dataType: 'json',
                                   data: {
                                        _token: '{{ csrf_token() }}',
                                   },
                                   success: function(response) {
                                        // Handle success response
                                        Swal.fire('Deleted!', 'The record has been deleted.', 'success');
                                        $('#user_table').DataTable().ajax.reload(null, false); // Reload without page refresh
                                   },
                                   error: function(xhr, status, error) {
                                        // Handle error response
                                        Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
                                   }
                              });
                         }
                    });
               });


     });


     $(document).ready(function() {
          $("#myinput").on("keyup", function() {
               var value = $(this).val().toLowerCase();
               $("tbody tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
               });
          });
     });
</script>
@endpush