@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 row">
        <div class="col-md-6">
            <h1 class="h3">{{ translate('Chat Log') }}</h1>
        </div>
    </div>
    <div class="admin-list-table pt-0 border-0">
        <div class="d-flex align-items-center py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
            <div class="common-tbl-head m-0 ml-1">
                <div class="common-tbl-heading">{{ translate('Chat Log List') }}</div>
            </div>
            <div class="table-search ml-auto">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control form-control-sm searching" id="search" name="search"
                    @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search By Name">
            </div>
        </div>
    </div>
    <div class="admin-table table-freezed">
        <div class="table-responsive tbl-hgt-fixed" style="max-height: 640px;">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width: 1%" class="text-center tbl-shadow">
                            S.No.
                        </th>
                        <th>{{ translate('User Id') }}</th>
                        <th>{{ translate('Chat ID') }}</th>
                        <th>{{ translate('Chat Source Channel') }}</th>
                        <th>{{ translate('Recipient Name/ID') }}</th>
                        <th>Chat Status</th>
                        <th>Attachments</th>
                        {{-- <th>Source</th>
                        <th>Subject/Topic</th>
                        <th>Priority Level</th>
                        <th>Timestamp</th> --}}
                        <th>Duration</th>
                        <th>Message Preview</th>
                        {{-- <th>Tags/Labels</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @php $key = ($chatMessages->currentPage() - 1) * $chatMessages->perPage() + 1; @endphp
                    @foreach ($chatMessages as $message)
                        <tr>
                            <td class="text-center">{{$key++}}</td>
                            <td>{{$message->user_id}}</td>
                            <td>{{$message->room_id}}</td>
                            <td>PDP</td>
                            <td>{{$message->request_send_from}}</td>
                            <td>{{$message->status}}</td>
                            <td>{{$message->message_type}}</td>
                            {{-- <td>Website</td>
                            <td>None</td>
                            <td>If applicable</td>
                            <td>12:30:00 - 01:30:00</td> --}}
                            <td>1 hour</td>
                            <td>
                                <a href="javascript:void(0);" data-url="" id="editUnit" data-room_id="{{$message->room_id}}">
                                    Preview
                                </a>
                            </td>
                            
                            {{-- <td>Tags/Labels</td> --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

   
    <div class="modal right fade  newAttributes-modal1" data-refresh="true" id="newAttributes-modal1" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Chat Preview</h4>
                </div>
                <div class="modal-body pt-1" id ="editData" style="padding:16px;">
                </div>
            </div>
        </div>
    </div>
    <div class="aiz-pagination">
        <div class="perPage">
            Total chat(s) : <strong>{{ $chatMessages->total() }}</strong>
        </div>
        {{ $chatMessages->appends(request()->input())->links() }}
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).on('click', '#editUnit', function(event) {
            // Get the room_id from the clicked element
            var room_id = $(this).data('room_id');
            
            $.ajax({
                url: '{{ url('admin/chat/listing/') }}/' + room_id, // Correct URL structure
                type: 'get',
                success: function(data) {
                    $('#newAttributes-modal1').modal('show');
                    $('#editData').html(data); // Populate the modal with the returned data
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                }
            });
        });

            
        });
    </script>
@endsection