@extends('admin.includes.layout')
@section('title', $page_title)
@section('content')
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-sm-6 col-12">
            </div>
            <div class="col-sm-6 col-12">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('admin') }}"> <i class="fa-solid fa-home me-2"></i></a></li>
                  <li class="breadcrumb-item">{{ $page_title }}</li>
               </ol>
               </ol>
            </div>
         </div>
      </div> 
   </div>
   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-12">
            <div class="card shadow-lg border-0 rounded-3">
               <!-- Card Header -->
               <div class="card-header bg-light border-bottom-0 py-3 d-flex justify-content-between align-items-center rounded-top">
                  <h3 class="mb-0 fw-bold text-primary">
                     {{ $page_title }}
                  </h3>
                  <div>
                     <button type="button" class="btn btn-sm btn-sm btn-outline-secondary me-2" id="filterToggle">
                     <i class="fas fa-filter"></i> Filter
                     </button>
                  </div>
               </div>
               <!-- Divider -->
               <div class="border-top"></div>
               <div class="card-body border-bottom" id="filterForm" style="display: none;">
                  <form id="searchForm" class="row g-3">
                     <div class="col-sm-3">
                        <label for="filterName" class="form-label">Name</label>
                        <input type="text" name="filterName" placeholder="Enter Name" class="form-control" id="filterName">
                     </div>
                     <div class="col-sm-3">
                        <label class="form-label d-block">&nbsp;</label>
                        <button type="submit" class="btn btn-sm btn-primary me-2">
                        <i class="fas fa-search"></i> Search
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" id="resetFilter">
                        <i class="fas fa-undo"></i> Reset
                        </button>
                     </div>
                  </form>
               </div>
               <!-- Card Body -->
               <div class="card-body p-4">
                  <div class="table-responsive">
                     <table class="table table-striped table-bordered align-middle mb-0" id="myTable">
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    // Toggle filter form
    $('#filterToggle').click(function() {
        $('#filterForm').slideToggle();
    });

    // Initialize DataTable
    var table = $('#myTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: "{{ route('callbackInquiry.getRecords') }}",
            data: function(d) {
                d.name = $('#filterName').val();
            }
        },
        columns: [
            {
                data: null,
                title: 'Sr.No.',
                orderable: false,
                searchable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            }, 
            { data: 'name', name: 'name', title: 'Name' },
            { data: 'phone_no', name: 'phone_no', title: 'Phone No' },
            { data: 'email_id', name: 'email_id', title: 'Email ID' },
            { data: 'course_name', name: 'course_name', title: 'Course Name' },
            { data: 'created_at', name: 'created_at', title: 'Created At' },
            { data: 'action', name: 'action', title: 'Action', orderable: false, searchable: false }
        ]
    });

    // On filter submit
    $('#searchForm').on('submit', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });

    // Reset filter
    $('#resetFilter').on('click', function() {
        $('#filterName').val('');
        table.ajax.reload();
    });


});
</script> 


<script>
   function deleteData(id) {
       confirmDelete(function() {
           $.ajax({
               url: "{{ route('callbackInquiry.delete') }}",
               type: "POST",
               data: {
                   id: id,
                   _token: "{{ csrf_token() }}"
               },
               success: function(response) {
                   if (response.status) {
                       showToast('success', response.message);
                       $('#myTable').DataTable().ajax.reload(null, false);
                   } else {
                       showToast('error', response.message);
                   }
               },
               error: function() {
                   showToast('error', "Something went wrong!");
               }
           });
       });
   }
</script>
@endpush