@php($routeExport = route('configuration.chat.export-log','__FMT__'))
<div class="row">
    <div class="col-12">
        <div class="project-form w-25">
            <label>Chat Room</label>
            <select class="form-select form-control chat-room-filter select2 no-search" aria-label="Select chat room">
                <option value="">Select chat room</option>
                @foreach($chatRooms as $room)
                    <option value="{{ $room->id }}" {{ request()->get('chat_room_id') == $room->id ? 'selected' : '' }}>{{ $room->title }}</option>
                @endforeach
            </select>
        </div>

        <div class="heading-btn-sec resp-flex-column">
            <div class="head-form w-100 resp-fix">
                <div class="project-form w-165">
                    <label>Viewing</label>
                    <select class="form-select form-control chat-viewing-filter select2 no-search" aria-label="Viewing range">
                        @php($ranges = ['today'=>'Today','yesterday'=>'Yesterday','7d'=>'Last 7 Days','30d'=>'Last 30 Days','custom'=>'Custom'])
                        @foreach($ranges as $rk=>$rv)
                            <option value="{{ $rk }}" {{ request()->get('range')==$rk?'selected':'' }}>{{ $rv }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="project-form form-line custom-range {{ (request()->get('range')=='custom')? '' : 'd-none' }}">
                    <label for="chat-start-time" class="form-label mb-0">Start Time</label>
                    <input class="form-control form-control-lg chat-start-time" type="datetime-local" name="start_time" id="chat-start-time" value="{{ request()->get('start_time') }}" placeholder="dd/mm/yyyy, --:--" />
                </div>
                <div class="project-form form-line custom-range {{ (request()->get('range')=='custom')? '' : 'd-none' }}">
                    <label for="chat-end-time" class="form-label mb-0">End Time</label>
                    <input class="form-control form-control-lg chat-end-time" type="datetime-local" name="end_time" id="chat-end-time" value="{{ request()->get('end_time') }}" placeholder="dd/mm/yyyy, --:--" />
                </div>
                <a href="javascript:void(0)" class="green-btn-inner waves-effect chat-log-search-btn {{ (request()->get('range')=='custom')? '' : 'd-none' }}">Search</a>
            </div>
            <div class="heading-btn">
                <div class="search-field"><input type="text" class="form-control pr-45 chat-log-search" placeholder="Search messages" value="{{ request()->get('search_text') }}"><i class="bx bx-search-alt-2"></i></div>
                <div class="d-inline-block position-relative me-2 hw-export-wrapper" id="chat-log-export-wrapper" data-route="{{ $routeExport }}">
                    <button type="button" class="green-btn-inner hw-export-btn"><i class="bx bx-download"></i> <span>Export</span></button>
                    <div class="hw-export-menu shadow" data-export-menu>
                        <button type="button" class="hw-export-item" data-format="csv">CSV</button>
                        <button type="button" class="hw-export-item" data-format="xlsx">XLS</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="project-box">
            <div class="table-responsive project-table no-border">
                <table id="datatable-chat-log" class="table mb-0 dt-responsive nowrap">
                    <thead class="thead-light">
                        <tr>
                            <th>From</th>
                            <th>Chat Room</th>
                            <th>Message</th>
                            <th>Date</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($messages as $msg)
                            <tr>
                                <td>{{ $msg->fromUser->full_name ?? 'N/A' }}</td>
                                <td>{{ $msg->room->title ?? 'N/A' }}</td>
                                <td>{{ Str::limit($msg->message, 120) }}</td>
                                <td>{{ \App\Helpers\Helper::showdate($msg->created_at) }}</td>
                                <td>
                                    <a href="javascript:void(0)" class="action-btn single-delete" data-toggle="tooltip" title="Delete"
                                       data-confirm="Delete message?|This cannot be undone"
                                       data-confirm-yes="event.preventDefault(); document.getElementById('delete-chat-message-form-{{ $msg->id }}').submit();">
                                        <i class="{{ \Config::get('settings.icon_delete') }}"></i>
                                    </a>
                                    {!! html()->form('DELETE', route('configuration.chat.destroy-message',$msg->id))->attributes(['style'=>'display:inline','id'=>'delete-chat-message-form-'.$msg->id])->open() !!}
                                    {!! html()->form()->close() !!}
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center">No Messages Found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @include('admin.components.pagination', ['data' => $messages])
        </div>
    </div>
</div>
@push('page_script')
<div id="chat-index-route" data-route="{{ route('configuration.chat.index') }}" style="display:none"></div>
<script src="{{ asset('assets/js/chat_log.js') }}"></script>
@endpush