@extends('admin.layouts.index')

@push('style')

<!-- third party css end -->
@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>Contact Us 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">Contact Us 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> Users Data</h2>
                         </div>
                         <div class="body">
                              <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>Email</th>
                                                  <th>Subject</th>
                                                  <th>Message</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_contact_us')}}",
                    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: 'email',
                         orderable: false,
                    },
                    {
                         data: 'subject',
                         orderable: false,
                    },
                    {
                         data: 'message',
                         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_contact_us', ['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