@extends('admin.layouts.main')

@section('content')
<main class="main">
    <section class="section lyt-section">
        <div class="inner-app-main">
            <h2 class="bs-heading typ-27 typ-blue typ-800 mt-18 mb-24">
                Messages
            </h2>
            <div class="maintenance-main-box">

                <div class="bs-search-box mb-24">
                    <label>Search:</label>
                    <input type="search" class="search-input" placeholder="Search messages...">
                </div>

                <div id="messages-container">
                    @foreach ($messages as $message)
                        <div class="bs-maintenance-noti-box">
                            <div class="leftBox">
                                <div class="customer-profile">
                                    <div class="profile-icon">
                                        <img src="assets/images/owner-admin/maintenance/profile.jpg" class="img-fluid" alt="profile" />
                                    </div>
                                    <div class="profile-content">
                                        <p class="bs-para typ-theme typ-700 mb-16">
                                            {{ $message->user->first_name }} {{ $message->user->last_name }} <span class="tag">{{ucfirst($message->user->user_type)}}</span>
                                        </p>
                                        <a href="tel:{{ $message->user->phone_number }}">
                                            <p class="bs-para typ-14 typ-black mb-6">
                                                +91 {{ $message->user->phone_number }}
                                            </p>
                                        </a>
                                        <a href="mailto:{{ $message->user->email }}">
                                            <p class="bs-para typ-14 typ-black">
                                                {{ $message->user->email }}
                                            </p>
                                        </a>
                                    </div>
                                </div>
                                <p class="bs-para">
                                    {{ $message->description }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Custom Pagination Links -->
                {{ $messages->links('admin.messages.pagination') }}
            </div>
        </div>
    </section>
</main>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    // Load initial messages
    $('#messages-container').on('ready', function() {
        loadMessages();
    });

    // Search functionality
    $('.search-input').on('keyup', function() {
        loadMessages();
    });

    function loadMessages() {
        let query = $('.search-input').val();

        $.ajax({
            url: "{{ route('admin.messages.search') }}",
            type: "GET",
            data: {'search': query},
            success: function(data) {
                $('#messages-container').html('');

                if(data.data && data.data.length > 0) {
                    $.each(data.data, function(index, message) {
                        let html = `
                            <div class="bs-maintenance-noti-box">
                                <div class="leftBox">
                                    <div class="customer-profile">
                                        <div class="profile-icon">
                                            <img src="assets/images/owner-admin/maintenance/profile.jpg" class="img-fluid" alt="profile" />
                                        </div>
                                        <div class="profile-content">
                                            <p class="bs-para typ-theme typ-700 mb-16">
                                                ${message.user.first_name} ${message.user.last_name}
                                            </p>
                                            <a href="tel:${message.user.phone_number}">
                                                <p class="bs-para typ-14 typ-black mb-6">
                                                    ${message.user.phone_number}
                                                </p>
                                            </a>
                                            <a href="mailto:${message.user.email}">
                                                <p class="bs-para typ-14 typ-black">
                                                    ${message.user.email}
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                    <p class="bs-para">
                                        ${message.description}
                                    </p>
                                </div>
                            </div>`;
                        
                        $('#messages-container').append(html);
                    });
                } else {
                    $('#messages-container').html('<p>No messages found.</p>');
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText); // Check for errors in the console
            }
        });
    }
});
</script>
@endsection