@extends('user.layout.master')
@section('body')
<style>
    .truncated-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Adjust according to your needs */
    cursor: pointer; /* Show pointer cursor on hover */
}
</style>
<div class="mb-4">

<div class="relative overflow-x-auto sm:rounded-lg">

<div class="xl:w-10/12 lg:w-11/12 w-full mx-auto p-4 relative overflow-x-auto shadow-lg sm:rounded-lg bg-white mb-6">
  <p class="text-lg text-gray-700 uppercase px-6 py-3 font-bold text-center barlow">এড কার্ট</p>
  <table id="" class="w-full text-sm text-left text-gray-500 data-table">
  <thead class="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
                <th>
                    নং
                </th>
                <th scope="col" class="px-6 py-3">
                    এডমিনের নাম
                </th>
                <th scope="col" class="px-6 py-3">
                    আইডি/ইনভোয়েস
                </th>
                <th scope="col" class="px-6 py-3">
                   এন্ট্রির নাম
                </th>
                <th scope="col" class="px-6 py-3">
                   বিবরন
                </th>
                <th scope="col" class="px-6 py-3">
                   তারিখ ও সময়
                </th>
                <th scope="col" class="px-6 py-3">
                    ইভেন্ট
                </th>
            </tr>
        </thead>
        <tbody id="table_body">
           
        </tbody>
    </table>

</div>
</div>


<script type="text/javascript">
    function loadCurrentData()
    {
      $(function () {

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 20,
            "language": {
              "emptyTable": "ডাটা পাওয়া যায়নি",
              "search": "সার্চ করুন : ",
              "info":  "",
              "infoEmpty":   "",
              "infoFiltered":   "",
              "lengthMenu":     "_MENU_টি এন্ট্রি দেখুন",
              "loadingRecords": "লোড হচ্ছে...",
              "zeroRecords":    "রেকর্ড পাওয়া যায়নি",
              "paginate": {
                  "first":      "প্রথম",
                  "last":       "শেষ",
                  "next":       "পরবর্তি",
                  "previous":   "পুর্বে"
              },
            },
            ajax: "{{ url('user_history') }}",
            columns: [
                {data: 'sl', name: 'sl'},
                {data: 'users_name', name: 'users_name'},
                {data: 'entry_id', name: 'entry_id'},
                {data: 'entry_name', name: 'entry_name'},
                {data: 'description', name: 'description'},
                {data: 'created_at', name: 'created_at'},
                {data: 'event', name: 'event'},
            
            ]
        });

        });
    }

    loadCurrentData();

    $(document).ready(function() {
        $('.data-table').on('click', '.description-cell', function() {
            // Toggle visibility of full description
            $(this).find('.truncated-description').toggle();
            $(this).find('.full-description').toggle();
        });
    });
    
  </script>
@endsection