@extends('staff.layout2')
@section('content')
    <div class="container-fluid px-1 py-4">
         <div class="col-auto">

                <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') }}">

                            <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>
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                {{-- <h5 class="fw-bold mb-4 text-dark"></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