@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">

        <div class="col-auto">

            <h5>Follow Up</h5>

        </div>

 <div class="col-auto">

<a href="{{ route('create_follow_up') }}">      

 <button class="btn btn-primary">Create Follow Up</button></a>       

     </div>

    </div>

    <div class="card p-0 m-2">

        <h6 class="p-4 pb-0">Filters</h6>

        <div class="row mb-3 pt-0 p-3 g-3 d-flex justify-content-start">

         <div class="col-lg-2 col-md-12">

    <input type="date" id="fromDate" class="form-control">

</div>



<div class="col-lg-2 col-md-12">

    <input type="date" id="toDateFilter" class="form-control">

</div>



<div class="col-lg-1 col-md-12">

    <button class="btn btn-primary w-100" id="filterBtn">Search</button>

</div>

        </div>

        <hr>

        <div class="row mb-3 align-items-center p-3 g-2">


            <div class="col-md-3 ms-auto">

                {{-- <input type="text" id="toDate" class="form-control" placeholder="Search"> --}}

                <input type="text" id="searchInput" class="form-control" placeholder="Search">

            </div>

        </div>

        <div class="table-responsive pt-0 pb-2">

            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">

                <div class="justify-content-between dt-layout-table">

                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">

                        <table class="table" id="usersTable">

                            <thead>

                                <tr>

                                    <th>Sno</th>

                                    <th>Date</th>

                                    <th>Name</th>

                                    <th>Phone</th>

                                    <th>Address</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                            <tbody></tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



<script>

$(document).ready(function () {



let table = $('#usersTable').DataTable({

    processing: true,

    serverSide: true,

    ajax: {

        url: "{{ route('follow_up_data') }}",

        data: function(d){

            d.fromDate = $('#fromDate').val();

            d.toDate = $('#toDateFilter').val();

        }

    },

   columns: [

    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false }, // ✅ searchable: false added

    { data: 'date', name: 'created_at' },

    { data: 'name', name: 'user.name' },

    { data: 'phone', name: 'user.phone_number' },

    { data: 'address', name: 'user.address' },

    { data: 'action', name: 'action', orderable: false, searchable: false }

]

});



// search

$('#searchInput').keyup(function(){

    table.search(this.value).draw();

});



// date filter

$('#filterBtn').click(function(){

    table.draw();

});



// ✅ normal search

$('#searchInput').keyup(function(){



table.search($(this).val()).draw();



});





// ✅ date filter button click

$('#filterBtn').click(function(){



table.draw();



});



});

</script>

@endsection