@extends('admin.layouts.default')
@section('title', 'orders')
@section('content')

<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 500px; /* Adjust height as needed */
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
    }

    /* Messages Section */
    .messages {
        flex: 1;
        padding: 10px;
        overflow-y: auto;
        background-color: #f9f9f9;
    }

    /* Individual Message */
    .message {
        margin-bottom: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .message-sender {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .message-text {
        margin-bottom: 5px;
    }

    .message-time {
        font-size: 0.8em;
        color: #888;
        text-align: right;
    }

    /* Message Input Section */
    .message-input {
        border-top: 1px solid #ddd;
        padding: 10px;
        background-color: #fff;
    }

    .message-input textarea {
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
    }

    .input-actions {
        display: flex;
        justify-content: space-between;
    }

    .input-actions .btn {
        margin-right: 5px;
    }

    /* Orders List */
    #orders-list {
        max-height: 500px; /* Adjust height as needed */
        overflow-y: auto;
    }

    .order-item {
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .order-item:hover {
        background-color: #f1f1f1;
    }
    </style>

    <div class="main-content app-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header bg-info text-white">Orders List</div>
                        <div class="card-body">
                            <input type="text" id="search-orders" class="form-control mb-3" placeholder="Search orders...">
                            <ul class="list-group" id="orders-list">
                                @foreach ($orders as $order)
                                    <li>
                                        <a href="#" class="order-link list-group-item order-item" data-order-id="{{ $order->id }}">
                                            ORDER-{{ $order->order_id }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header bg-info text-white">Message / ORDER</div>
                        <div class="card-body">
                            <div class="chat-container">
                                <div class="messages" id="messages"></div>
                                <div class="message-input">
                                    <form action="" id="mesg-dta-frm">
                                        @csrf
                                        <input type="hidden" class="order_id" name="order_id" id="order_id">
                                        <textarea class="form-control" id="customer-message" name="message" placeholder="Write message..." rows="2"></textarea>
                                        <div class="input-actions">
                                            <button type="button" class="btn btn-primary" onClick="submitMesage('/admin_message_submit', '#mesg-dta-frm', '.submit-customer-message')">Send</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    var baseUrl = "{{ url('/') }}";
    $(document).ready(function() {

        // Search orders functionality
        $('#search-orders').on('input', function() {
            var searchText = $(this).val().toLowerCase();
            $('#orders-list .order-item').each(function() {
                var orderText = $(this).text().toLowerCase();

                if (orderText.includes(searchText)) {
                    $(this).parent().show();
                } else {
                    $(this).parent().hide();
                }
            });
        });

        $('.order-link').click(function(e) {
    e.preventDefault();
    var orderId = $(this).data('order-id');
    loadOrderMessages(orderId);
});

function loadOrderMessages(orderId) {
    // Set the order ID in the hidden input field
    $('#order_id').val(orderId);
    
    // Load messages for the selected order
    $.get(baseUrl + '/orders/' + orderId + '/messages', function(data) {
        $('#messages').empty();
        data.forEach(function(message) {
            $('#messages').append(`
                <div class="message">
                    <div class="message-sender">${message.sender_name}</div>
                    <div class="message-text">${message.message}</div>
                    <div class="message-time">${message.created_at}</div>
                </div>
            `);
        });
    });
}

// Function to reload messages for current order
function reloadMessages() {
    var currentOrderId = $('#order_id').val();
    if (currentOrderId) {
        loadOrderMessages(currentOrderId);
    }
}

// Auto-refresh every 2 seconds (2000ms) instead of 30 seconds
setInterval(reloadMessages, 2000);
    });
</script>

<script>
//     var baseUrl = "{{ url('/') }}";
//     $(document).ready(function() {

//         // Search orders functionality
//         $('#search-orders').on('input', function() {
//             var searchText = $(this).val().toLowerCase();
//             $('#orders-list .order-item').each(function() {
//                 var orderText = $(this).text().toLowerCase();

//                 if (orderText.includes(searchText)) {
//                     $(this).parent().show();
//                 } else {
//                     $(this).parent().hide();
//                 }
//          $('.order-link').click(function(e) {
                e.preventDefault();
                var orderId = $(this).data('order-id');
    
 /         $('.order-link').click(function(e) {
//             e.preventDefault();
//             var orderId = $(this).data('order-id');

//             // Set the order ID in the hidden input field
//             $('#order_id').val(orderId);

//             // Load messages for the selected order
//             $.get(baseUrl + '/orders/' + orderId + '/messages', function(data) {
//                 $('#messages').empty();
//                 data.forEach(function(message) {
//                     $('#messages').append(`
//                         <div class="message">
//                             <div class="message-sender">${message.sender_name}</div>
//                             <div class="message-text">${message.message}</div>
//                             <div class="message-time">${message.created_at}</div>
//                         </div>
//                     `);
//                 });
//             });
//         });
//     });

//     // Function to submit the message form
//     // function submitMesage(url, formId, buttonClass) {
//     //     var form = $(formId);
//     //     var button = $(buttonClass);
//     //     var formData = form.serialize();

//     //     $.ajax({
//     //         url: url,
//     //         type: 'POST',
//     //         data: formData,
//     //         beforeSend: function() {
//     //             button.prop('disabled', true).text('Sending...');
//     //         },
//     //         success: function(response) {
//     //             if (response.success) {
//     //                 // Clear the message input field
//     //                 $('#customer-message').val('');

//     //                 // Reload messages for the current order
//     //                 var orderId = $('#order_id').val();
//     //                 $.get(baseUrl + '/orders/' + orderId + '/messages', function(data) {
//     //                     $('#messages').empty();
//     //                     data.forEach(function(message) {
//     //                         $('#messages').append(`
//     //                             <div class="message">
//     //                                 <div class="message-sender">${message.sender_name}</div>
//     //                                 <div class="message-text">${message.message}</div>
//     //                                 <div class="message-time">${message.created_at}</div>
//     //                             </div>
//     //                         `);
//     //                     });
//     //                 });
//     //             } else {
//     //                 alert('Failed to send message.');
//     //             }
//     //         },
//     //         error: function() {
//     //             alert('An error occurred while sending the message.');
//     //         },
//     //         complete: function() {
//     //             button.prop('disabled', false).text('Send');
//     //         }
//     //     });
//     // }
</script>
    
@endsection