@extends('layouts.master')

@section('title')
    @lang('translation.Grievance_Management')
@endsection

@section('css')
    <style>
        /* Custom Scrollbar Styles */
        .chat-list.scroll {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 410px;
            scroll-behavior: smooth;
        }

        .chat-list.scroll::-webkit-scrollbar {
            width: 6px;
        }

        .chat-list.scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .chat-list.scroll::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
            transition: background 0.3s ease;
        }

        .chat-list.scroll::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        /* Firefox */
        .chat-list.scroll {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e0 #f1f1f1;
        }

        /* Grievance Table Scroll */
        .grievance-table-container {
            max-height: 500px;
            overflow-y: auto;
        }

        .grievance-table-container::-webkit-scrollbar {
            width: 8px;
        }

        .grievance-table-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .grievance-table-container::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
        }

        /* Badge Styling */
        .priority-high {
            background-color: #dc3545;
        }

        .priority-medium {
            background-color: #ffc107;
        }

        .priority-low {
            background-color: #28a745;
        }

        .status-open {
            background-color: #6c757d;
        }

        .status-in-progress {
            background-color: #0dcaf0;
        }

        .status-resolved {
            background-color: #198754;
        }

        .status-closed {
            background-color: #343a40;
        }

        /* Message List Scroll */
        #messagesList {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 486px;
            scroll-behavior: smooth;
        }

        #messagesList::-webkit-scrollbar {
            width: 6px;
        }

        #messagesList::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        #messagesList::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
        }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Dashboard
        @endslot
        @slot('title')
            Grievance Management
        @endslot
    @endcomponent

    <div class="row">
        <!-- Grievance List Section -->
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="card-title mb-0">Grievance Tickets</h4>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addGrievanceModal">
                            <i class="bx bx-plus"></i> Add Grievance
                        </button>
                    </div>

                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="text" id="searchGrievance" class="form-control" placeholder="Search...">
                        </div>
                        <div class="col-md-2">
                            <select id="filterStatus" class="form-select">
                                <option value="">All Status</option>
                                <option value="Open">Open</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Resolved">Resolved</option>
                                <option value="Closed">Closed</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="filterPriority" class="form-select">
                                <option value="">All Priority</option>
                                <option value="High">High</option>
                                <option value="Medium">Medium</option>
                                <option value="Low">Low</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="filterCategory" class="form-select">
                                <option value="">All Categories</option>
                                <option value="Technical">Technical</option>
                                <option value="Billing">Billing</option>
                                <option value="User Access">User Access</option>
                                <option value="Operational">Operational</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-info" onclick="filterGrievances()">
                                <i class="bx bx-filter"></i> Filter
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetFilters()">
                                <i class="bx bx-reset"></i> Reset
                            </button>
                        </div>
                    </div>

                    <!-- Table -->
                    <div class="grievance-table-container">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>S.No</th>
                                    <th>Ticket ID</th>
                                    <th>Date</th>
                                    <th>Restaurant Name</th>
                                    <th>Category</th>
                                    <th>Priority</th>
                                    <th>Complaint</th>
                                    <th>Accepted By</th>
                                    <th>Assigned To</th>
                                    <th>Status</th>
                                    <th>Expected Resolution</th>
                                    <th>Remarks</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="grievanceTableBody">
                                @forelse($grievances as $index => $grievance)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $grievance->ticket_id }}</td>
                                        <td>{{ $grievance->created_at->format('d-m-Y') }}</td>
                                        <td>{{ $grievance->restaurant_name }}
                                            @if ($grievance->branch_name)
                                                <br><small class="text-muted">{{ $grievance->branch_name }}</small>
                                            @endif
                                        </td>
                                        <td>{{ $grievance->category }}</td>
                                        <td>
                                            <span
                                                class="badge priority-{{ strtolower($grievance->priority) }}">{{ $grievance->priority }}</span>
                                        </td>
                                        <td>{{ \Str::limit($grievance->complaint, 50) }}</td>
                                        <td>{{ $grievance->acceptedBy ? $grievance->acceptedBy->name : '-' }}</td>
                                        <td>{{ $grievance->assignedTo ? $grievance->assignedTo->name : 'Unassigned' }}</td>
                                        <td>
                                            <span
                                                class="badge status-{{ strtolower(str_replace(' ', '-', $grievance->status)) }}">{{ $grievance->status }}</span>
                                        </td>
                                        <td>{{ $grievance->expected_resolution_date ? $grievance->expected_resolution_date->format('d-m-Y') : '-' }}
                                        </td>
                                        <td>{{ \Str::limit($grievance->remarks, 30) }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-info"
                                                onclick="viewGrievance({{ $grievance->id }})">
                                                <i class="bx bx-show"></i>
                                            </button>
                                            <button class="btn btn-sm btn-primary"
                                                onclick="openUpdateModal({{ $grievance->id }})">
                                                <i class="bx bx-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-warning"
                                                onclick="openForwardModal({{ $grievance->id }})">
                                                <i class="bx bx-share"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="13" class="text-center">No grievances found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chat Section -->
        {{-- <div class="col-lg-12">
            <div class="d-lg-flex">
                <div class="chat-leftsidebar me-lg-4">
                    <div class="">
                        <div class="py-4 border-bottom">
                            <div class="d-flex">
                                <div class="flex-shrink-0 align-self-center me-3">
                                    <div class="avatar-xs">
                                        <span class="avatar-title rounded-circle bg-primary text-white">
                                            {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="flex-grow-1">
                                    <h5 class="font-size-15 mb-1">{{ Auth::user()->name }}</h5>
                                    <p class="text-muted mb-0">
                                        <i class="mdi mdi-circle text-success align-middle me-1"></i> Super Admin
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="search-box chat-search-box py-4">
                            <div class="position-relative">
                                <input type="text" id="searchConversations" class="form-control"
                                    placeholder="Search conversations...">
                                <i class="bx bx-search-alt search-icon"></i>
                            </div>
                        </div>

                        <div class="chat-leftsidebar-nav">
                            <div class="py-4">
                                <h5 class="font-size-14 mb-3">Grievance Conversations</h5>
                                <ul class="list-unstyled chat-list scroll" id="conversationsList">
                                    @forelse($conversations as $conversation)
                                        <li class="conversation-item" data-user-id="{{ $conversation->user_id }}">
                                            <a href="javascript:void(0);"
                                                onclick="loadConversation({{ $conversation->user_id }})">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 align-self-center me-3">
                                                        <i
                                                            class="mdi mdi-circle {{ $conversation->unread_count > 0 ? 'text-success' : '' }} font-size-10"></i>
                                                    </div>
                                                    <div class="flex-shrink-0 align-self-center me-3">
                                                        <div class="avatar-xs">
                                                            <span
                                                                class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                                                {{ strtoupper(substr($conversation->user->name, 0, 1)) }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="text-truncate font-size-14 mb-1">
                                                            {{ $conversation->user->name }}</h5>
                                                        <p class="text-truncate mb-0">
                                                            {{ $conversation->latestMessage->message ?? 'No messages yet' }}
                                                        </p>
                                                    </div>
                                                    <div class="font-size-11">
                                                        {{ $conversation->last_message_at ? $conversation->last_message_at->diffForHumans() : '' }}
                                                        @if ($conversation->unread_count > 0)
                                                            <span
                                                                class="badge bg-danger rounded-pill ms-2">{{ $conversation->unread_count }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @empty
                                        <li class="text-center text-muted py-3">No conversations yet</li>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="w-100 user-chat">
                    <div class="card">
                        <div class="p-4 border-bottom" id="chatHeader" style="display: none;">
                            <div class="row">
                                <div class="col-md-4 col-9">
                                    <h5 class="font-size-15 mb-1" id="chatUserName">Select a conversation</h5>
                                    <p class="text-muted mb-0" id="chatUserStatus"></p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="chat-conversation p-3">
                                <ul class="list-unstyled mb-0" id="messagesList">
                                    <li class="text-center text-muted py-5">
                                        <i class="bx bx-message-rounded-dots font-size-24 d-block mb-2"></i>
                                        Select a conversation to start chatting
                                    </li>
                                </ul>
                            </div>
                            <div class="p-3 chat-input-section border-top">
                                <form id="messageForm" style="display: none;">
                                    @csrf
                                    <input type="hidden" id="currentUserId" name="user_id">
                                    <div class="row">
                                        <div class="col">
                                            <div class="position-relative">
                                                <input type="text" id="messageInput" name="message"
                                                    class="form-control chat-input" placeholder="Enter Message..." required
                                                    autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit"
                                                class="btn btn-primary btn-rounded chat-send w-md waves-effect waves-light">
                                                <span class="d-none d-sm-inline-block me-2">Send</span>
                                                <i class="mdi mdi-send"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <div id="emptyStateMessage" class="text-center text-muted py-3">
                                    Select a conversation to send messages
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>

    <!-- Add Grievance Modal -->
    <div class="modal fade" id="addGrievanceModal" tabindex="-1" aria-labelledby="addGrievanceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addGrievanceModalLabel">Add New Grievance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addGrievanceForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="restaurant_id" class="form-label">Restaurant <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="restaurant_id" name="restaurant_id" required>
                                    <option value="">Select Restaurant</option>
                                    @foreach ($users as $tenants)
                                        <option value="{{ $tenants->id }}">{{ $tenants->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="branch_id" class="form-label">Branch (Optional)</label>
                                <select class="form-select" id="branch_id" name="branch_id">
                                    <option value="">Select Branch</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="category" class="form-label">Category <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="category" name="category" required>
                                    <option value="">Select Category</option>
                                    <option value="Technical">Technical</option>
                                    <option value="Billing">Billing</option>
                                    <option value="User Access">User Access</option>
                                    <option value="Operational">Operational</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="priority" class="form-label">Priority <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="priority" name="priority" required>
                                    <option value="">Select Priority</option>
                                    <option value="High">High</option>
                                    <option value="Medium">Medium</option>
                                    <option value="Low">Low</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="assigned_to" class="form-label">Assign To</label>
                                <select class="form-select" id="assigned_to" name="assigned_to">
                                    <option value="">Select Support Admin</option>
                                    @foreach ($supportAdmins as $admin)
                                        <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="expected_resolution_date" class="form-label">Expected Resolution Date</label>
                                <input type="date" class="form-control" id="expected_resolution_date"
                                    name="expected_resolution_date" min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="complaint" class="form-label">Complaint Description <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control" id="complaint" name="complaint" rows="4" required minlength="10"
                                    placeholder="Minimum 10 characters"></textarea>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="attachment" class="form-label">Attachment (Optional)</label>
                                <input type="file" class="form-control" id="attachment" name="attachment"
                                    accept=".pdf,.jpg,.jpeg,.png">
                                <small class="text-muted">Max 5MB. Allowed: PDF, JPG, PNG</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit Grievance</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- View Grievance Modal -->
    <div class="modal fade" id="viewGrievanceModal" tabindex="-1" aria-labelledby="viewGrievanceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewGrievanceModalLabel">Grievance Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="viewGrievanceContent">
                    <!-- Content will be loaded dynamically -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Update Grievance Modal -->
    <div class="modal fade" id="updateGrievanceModal" tabindex="-1" aria-labelledby="updateGrievanceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateGrievanceModalLabel">Update Grievance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="updateGrievanceForm">
                    @csrf
                    <input type="hidden" id="update_grievance_id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="update_status" class="form-label">Status <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="update_status" name="status" required>
                                <option value="Open">Open</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Resolved">Resolved</option>
                                <option value="Closed">Closed</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="update_priority" class="form-label">Priority <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="update_priority" name="priority" required>
                                <option value="High">High</option>
                                <option value="Medium">Medium</option>
                                <option value="Low">Low</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="update_assigned_to" class="form-label">Assign To</label>
                            <select class="form-select" id="update_assigned_to" name="assigned_to">
                                <option value="">Select Support Admin</option>
                                @foreach ($supportAdmins as $admin)
                                    <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="update_expected_resolution_date" class="form-label">Expected Resolution
                                Date</label>
                            <input type="date" class="form-control" id="update_expected_resolution_date"
                                name="expected_resolution_date">
                        </div>
                        <div class="mb-3">
                            <label for="update_remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" id="update_remarks" name="remarks" rows="3" maxlength="200"></textarea>
                            <small class="text-muted">Max 200 characters</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Forward Grievance Modal -->
    <div class="modal fade" id="forwardGrievanceModal" tabindex="-1" aria-labelledby="forwardGrievanceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="forwardGrievanceModalLabel">Forward Grievance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="forwardGrievanceForm">
                    @csrf
                    <input type="hidden" id="forward_grievance_id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="forward_assigned_to" class="form-label">Forward To <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="forward_assigned_to" name="assigned_to" required>
                                <option value="">Select Support Admin</option>
                                @foreach ($supportAdmins as $admin)
                                    <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="forward_remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" id="forward_remarks" name="remarks" rows="3" maxlength="200"></textarea>
                            <small class="text-muted">Max 200 characters</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Forward</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let currentUserId = null;
        let currentConversationId = null;
        let messageRefreshInterval = null;

        $(document).ready(function() {
            console.log('Grievance chat initialized');
        });

        // Chat Functions (Same as your existing chat)
        function loadConversation(userId) {
            currentUserId = userId;
            $('#currentUserId').val(userId);

            if (messageRefreshInterval) {
                clearInterval(messageRefreshInterval);
            }

            $('.conversation-item').removeClass('active');
            $(`.conversation-item[data-user-id="${userId}"]`).addClass('active');

            $.ajax({
                url: `{{ url('/') }}/chat/conversation/${userId}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    currentConversationId = response.conversation ? response.conversation.id : null;

                    $('#chatUserName').text(response.user.name);
                    $('#chatUserStatus').html(
                        '<i class="mdi mdi-circle text-success align-middle me-1"></i> Active now');
                    $('#chatHeader').show();
                    $('#messageForm').show();
                    $('#emptyStateMessage').hide();

                    displayMessages(response.messages);
                    scrollToBottom();

                    messageRefreshInterval = setInterval(function() {
                        refreshMessages(userId);
                    }, 3000);
                },
                error: function(xhr) {
                    console.error('Error loading conversation:', xhr);
                    alert('Error loading conversation. Please try again.');
                }
            });
        }

        function refreshMessages(userId) {
            if (!userId) return;

            $.ajax({
                url: `{{ url('/') }}/chat/conversation/${userId}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    displayMessages(response.messages);
                },
                error: function(xhr) {
                    console.error('Error refreshing messages:', xhr);
                }
            });
        }

        function displayMessages(messages) {
            let html = '';

            if (messages.length === 0) {
                html =
                    '<li class="text-center text-muted py-5"><i class="bx bx-message-rounded-dots font-size-24 d-block mb-2"></i>No messages yet. Start the conversation!</li>';
            } else {
                messages.forEach(function(message) {
                    const isCurrentUser = message.sender_id == {{ Auth::id() }};
                    const alignment = isCurrentUser ? 'right' : '';

                    html += `
                    <li class="${alignment}">
                        <div class="conversation-list">
                            <div class="ctext-wrap">
                                <div class="conversation-name">${escapeHtml(message.sender.name)}</div>
                                <p>${escapeHtml(message.message)}</p>
                                <p class="chat-time mb-0">
                                    <i class="bx bx-time-five align-middle me-1"></i>
                                    ${formatTime(message.created_at)}
                                </p>
                            </div>
                        </div>
                    </li>
                `;
                });
            }

            $('#messagesList').html(html);
        }

        $('#messageForm').on('submit', function(e) {
            e.preventDefault();

            const message = $('#messageInput').val().trim();
            if (!message || !currentUserId) return;

            $.ajax({
                url: '{{ route('chat.send') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    user_id: currentUserId,
                    message: message,
                    type: 'grievance'
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#messageInput').val('');

                    const messageHtml = `
                    <li class="right">
                        <div class="conversation-list">
                            <div class="ctext-wrap">
                                <div class="conversation-name">${escapeHtml(response.message.sender.name)}</div>
                                <p>${escapeHtml(response.message.message)}</p>
                                <p class="chat-time mb-0">
                                    <i class="bx bx-time-five align-middle me-1"></i>
                                    ${formatTime(response.message.created_at)}
                                </p>
                            </div>
                        </div>
                    </li>
                `;

                    $('#messagesList').append(messageHtml);
                    scrollToBottom();
                },
                error: function(xhr) {
                    console.error('Error sending message:', xhr);
                    alert('Error sending message. Please try again.');
                }
            });
        });

        function scrollToBottom() {
            const messagesList = document.getElementById('messagesList');
            if (messagesList) {
                messagesList.scrollTop = messagesList.scrollHeight;
            }
        }

        function formatTime(datetime) {
            const date = new Date(datetime);
            return date.toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });
        }

        function escapeHtml(text) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, m => map[m]);
        }

        $('#messageInput').on('keypress', function(e) {
            if (e.which === 13 && !e.shiftKey) {
                e.preventDefault();
                $('#messageForm').submit();
            }
        });

        $(window).on('beforeunload', function() {
            if (messageRefreshInterval) {
                clearInterval(messageRefreshInterval);
            }
        });

        // Grievance Functions
        $('#addGrievanceForm').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: '{{ route('chat.grievances.store') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#addGrievanceModal').modal('hide');
                    $('#addGrievanceForm')[0].reset();
                    alert(response.message);
                    location.reload();
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = 'Please fix the following errors:\n';
                    for (let key in errors) {
                        errorMessage += '- ' + errors[key][0] + '\n';
                    }
                    alert(errorMessage);
                }
            });
        });

        function viewGrievance(id) {
            $.ajax({
                url: `{{ url('/') }}/chat/grievances/${id}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    let grievance = response.grievance;
                    let html = `
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <strong>Ticket ID:</strong> ${grievance.ticket_id}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Date:</strong> ${new Date(grievance.created_at).toLocaleDateString()}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Restaurant:</strong> ${grievance.restaurant_name}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Branch:</strong> ${grievance.branch_name || '-'}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Category:</strong> ${grievance.category}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Priority:</strong> <span class="badge priority-${grievance.priority.toLowerCase()}">${grievance.priority}</span>
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Status:</strong> <span class="badge status-${grievance.status.toLowerCase().replace(' ', '-')}">${grievance.status}</span>
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Expected Resolution:</strong> ${grievance.expected_resolution_date ? new Date(grievance.expected_resolution_date).toLocaleDateString() : '-'}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Accepted By:</strong> ${grievance.accepted_by ? grievance.accepted_by.name : '-'}
                        </div>
                        <div class="col-md-6 mb-2">
                            <strong>Assigned To:</strong> ${grievance.assigned_to ? grievance.assigned_to.name : 'Unassigned'}
                        </div>
                        <div class="col-md-12 mb-2">
                            <strong>Complaint:</strong><br>${grievance.complaint}
                        </div>
                        <div class="col-md-12 mb-2">
                            <strong>Remarks:</strong><br>${grievance.remarks || '-'}
                        </div>
                        ${grievance.attachment ? `<div class="col-md-12 mb-2"><strong>Attachment:</strong><br><a href="/storage/${grievance.attachment}" target="_blank" class="btn btn-sm btn-info">View Attachment</a></div>` : ''}
                    </div>
                `;

                    $('#viewGrievanceContent').html(html);
                    $('#viewGrievanceModal').modal('show');
                },
                error: function(xhr) {
                    alert('Error loading grievance details');
                }
            });
        }

        function openUpdateModal(id) {
            $.ajax({
                url: `{{ url('/') }}/chat/grievances/${id}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    let grievance = response.grievance;
                    $('#update_grievance_id').val(grievance.id);
                    $('#update_status').val(grievance.status);
                    $('#update_priority').val(grievance.priority);
                    $('#update_assigned_to').val(grievance.assigned_to);
                    $('#update_expected_resolution_date').val(grievance.expected_resolution_date);
                    $('#update_remarks').val(grievance.remarks);
                    $('#updateGrievanceModal').modal('show');
                },
                error: function(xhr) {
                    alert('Error loading grievance details');
                }
            });
        }

        $('#updateGrievanceForm').on('submit', function(e) {
            e.preventDefault();

            let id = $('#update_grievance_id').val();
            let formData = $(this).serialize();

            $.ajax({
                url: `{{ url('/') }}/chat/grievances/${id}/update`,
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#updateGrievanceModal').modal('hide');
                    alert(response.message);
                    location.reload();
                },
                error: function(xhr) {
                    alert('Error updating grievance');
                }
            });
        });

        function openForwardModal(id) {
            $('#forward_grievance_id').val(id);
            $('#forwardGrievanceModal').modal('show');
        }

        $('#forwardGrievanceForm').on('submit', function(e) {
            e.preventDefault();

            let id = $('#forward_grievance_id').val();
            let formData = $(this).serialize();

            $.ajax({
                url: `{{ url('/') }}/chat/grievances/${id}/forward`,
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#forwardGrievanceModal').modal('hide');
                    $('#forwardGrievanceForm')[0].reset();
                    alert(response.message);
                    location.reload();
                },
                error: function(xhr) {
                    alert('Error forwarding grievance');
                }
            });
        });

        function filterGrievances() {
            let search = $('#searchGrievance').val();
            let status = $('#filterStatus').val();
            let priority = $('#filterPriority').val();
            let category = $('#filterCategory').val();

            $.ajax({
                url: '{{ route('chat.grievances.list') }}',
                type: 'GET',
                data: {
                    search: search,
                    status: status,
                    priority: priority,
                    category: category
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    updateGrievanceTable(response.grievances);
                },
                error: function(xhr) {
                    alert('Error filtering grievances');
                }
            });
        }

        function resetFilters() {
            $('#searchGrievance').val('');
            $('#filterStatus').val('');
            $('#filterPriority').val('');
            $('#filterCategory').val('');
            filterGrievances();
        }

        function updateGrievanceTable(grievances) {
            let html = '';

            if (grievances.length === 0) {
                html = '<tr><td colspan="13" class="text-center">No grievances found</td></tr>';
            } else {
                grievances.forEach(function(grievance, index) {
                    html += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${grievance.ticket_id}</td>
                        <td>${new Date(grievance.created_at).toLocaleDateString()}</td>
                        <td>${grievance.restaurant_name}${grievance.branch_name ? '<br><small class="text-muted">' + grievance.branch_name + '</small>' : ''}</td>
                        <td>${grievance.category}</td>
                        <td><span class="badge priority-${grievance.priority.toLowerCase()}">${grievance.priority}</span></td>
                        <td>${grievance.complaint.substring(0, 50)}...</td>
                        <td>${grievance.accepted_by ? grievance.accepted_by.name : '-'}</td>
                        <td>${grievance.assigned_to ? grievance.assigned_to.name : 'Unassigned'}</td>
                        <td><span class="badge status-${grievance.status.toLowerCase().replace(' ', '-')}">${grievance.status}</span></td>
                        <td>${grievance.expected_resolution_date ? new Date(grievance.expected_resolution_date).toLocaleDateString() : '-'}</td>
                        <td>${grievance.remarks ? grievance.remarks.substring(0, 30) : '-'}</td>
                        <td>
                            <button class="btn btn-sm btn-info" onclick="viewGrievance(${grievance.id})"><i class="bx bx-show"></i></button>
                            <button class="btn btn-sm btn-primary" onclick="openUpdateModal(${grievance.id})"><i class="bx bx-edit"></i></button>
                            <button class="btn btn-sm btn-warning" onclick="openForwardModal(${grievance.id})"><i class="bx bx-share"></i></button>
                        </td>
                    </tr>
                `;
                });
            }

            $('#grievanceTableBody').html(html);
        }

        // Search functionality
        $('#searchConversations').on('keyup', function() {
            const value = $(this).val().toLowerCase();
            $('#conversationsList .conversation-item').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });

        // Restaurant change - load branches
        $('#restaurant_id').on('change', function() {
            let restaurantId = $(this).val();
            if (restaurantId) {
                // You'll need to create an endpoint to fetch branches
                // For now, this is a placeholder
                $('#branch_id').html('<option value="">Select Branch</option>');
            } else {
                $('#branch_id').html('<option value="">Select Branch</option>');
            }
        });


        // Restaurant change - load branches
        $('#restaurant_id').on('change', function() {
            let restaurantId = $(this).val();

            // Clear branch dropdown
            $('#branch_id').html('<option value="">Loading branches...</option>');

            if (restaurantId) {
                $.ajax({
                    url: `{{ url('/') }}/get-branches/${restaurantId}`,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        let options = '<option value="">Select Branch</option>';

                        if (response.branches && response.branches.length > 0) {
                            response.branches.forEach(function(branch) {
                                options +=
                                    `<option value="${branch.id}">${branch.branch_name}</option>`;
                            });
                        } else {
                            options = '<option value="">No branches available</option>';
                        }

                        $('#branch_id').html(options);
                    },
                    error: function(xhr) {
                        console.error('Error loading branches:', xhr);
                        $('#branch_id').html('<option value="">Error loading branches</option>');
                    }
                });
            } else {
                $('#branch_id').html('<option value="">Select Branch</option>');
            }
        });


    </script>


@endsection