@extends('admin.layout')
@section('content')
    <div class="container-fluid px-1 py-4">
        <h5>

            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

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

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>

            </button>

            Call History

        </h5>
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                {{-- <h5 class="fw-bold mb-4 text-dark">Call History</h5> --}}
                <div class="row align-items-center mb-3 g-2">
                    <div class="col-md-6 col-12">
                        <select id="pageLength" class="form-select border-1" style="width: 80px;">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div class="col-md-6 col-12 d-flex justify-content-md-end gap-2">
                        <input type="text" id="customSearch" class="form-control" style="max-width: 250px;"
                            placeholder="Search history...">
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="historyTable" class="table align-middle text-center w-100 mb-0">
                        <thead>
                            <tr>
                                <th>S.NO</th>
                                <th>CALL DATE</th>
                                {{-- <th>PROMISE DATE</th> --}}
                                {{-- <th>NAME</th> --}}
                                {{-- <th>NUMBER</th> --}}
                                <th>CALLED BY</th>
                                <th>DESCRIPTION</th>
                                <th>STATUS</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script class="code-js">
        $(document).ready(function () {
            let table = $('#historyTable').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: false,
                ajax: window.location.href,
                pageLength: 10,
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'call_date', name: 'call_date'},
                    // { data: 'customer_name', name: 'customer_name' },
                    // { data: 'vehicle_number', name: 'vehicle_number' },
                    {data: 'called_by', name: 'called_by'},
                    {data: 'description', name: 'description'},
                    // { data: 'promise_date', name: 'promise_date' },
                    {data: 'status', name: 'status', orderable: false, searchable: false}
                ]
            });

            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            $('#pageLength').on('change', function () {
                table.page.len(this.value).draw();
            });
        });
    </script>
@endsection