@extends('admin.layouts.index')

@push('style')

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


@endpush

@section('content')

<style>
     a {
          color: #47a0b6;
     }
</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>Subscription Plans 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">Subscription Plans 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> Subscription Plans Data</h2>
                         </div>
                         <div class="body">
                         <a href="{{route('admin.add_subcribe_plan')}}" class="btn mb-3 mt-2" style="background-color: #47a0b6; color:white;">Add Plan</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>Name</th>
                                                  <!-- <th>Image</th> -->
                                                  <th>Description</th>
                                                  <th>Validity </th>
                                                  <th>Free Matches</th>
                                                  <th>Golden Likes</th>
                                                  <th>Price</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_subcribe_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: 'name',
                         orderable: false,
                    },
                    // {
                    //      data: 'image',
                    //      orderable: false,
                    // },
                    {
                         data: 'description',
                         orderable: false,
                    },
                    {
                         data: 'validity',
                         orderable: false,
                    },
                    {
                         data: 'free_matches',
                         orderable: false,
                    },
                    {
                         data: 'golden_likes',
                         orderable: false,
                    },
                    {
                         data: 'price',
                         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_subcribe_plan', ['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