<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Modal Popup</title>
    <link href="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.js"></script>
</head>
<body>
<div class="payment-status-top">
    <div class="payment-status-top-left d-flex align-items-center">
        <!-- SVG Icon -->
        <svg width="50" height="42" viewBox="0 0 50 42" id="tog_svg3" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_ddd_708_18664)">
                <rect x="5" y="3" width="40" height="32" rx="6" fill="white"/>
                <path d="M30.79 13.6156C31.3029 12.9591 30.8351 12 30.002 12H20.0019C19.1687 12 18.7009 12.9591 19.2138 13.6156L24.0398 19.7287C24.1772 19.9045 24.2518 20.1212 24.2518 20.3443V25.7961C24.2518 25.9743 24.4672 26.0635 24.5932 25.9375L25.6054 24.9254C25.6991 24.8316 25.7518 24.7044 25.7518 24.5718V20.3443C25.7518 20.1212 25.8264 19.9045 25.9638 19.7287L30.79 13.6156Z" fill="#464F60"/>
            </g>
            <defs>
                <filter id="filter0_ddd_708_18664" x="0" y="0" width="50" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                    <feOffset dy="2"/>
                    <feGaussianBlur stdDeviation="2.5"/>
                    <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.376471 0 0 0 0 0.470588 0 0 0 0.1 0"/>
                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_708_18664"/>
                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                    <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_708_18664"/>
                    <feOffset/>
                    <feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.308497 0 0 0 0 0.376471 0 0 0 0.16 0"/>
                    <feBlend mode="normal" in2="effect1_dropShadow_708_18664" result="effect2_dropShadow_708_18664"/>
                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                    <feOffset dy="1"/>
                    <feGaussianBlur stdDeviation="0.5"/>
                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
                    <feBlend mode="normal" in2="effect2_dropShadow_708_18664" result="effect3_dropShadow_708_18664"/>
                    <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_708_18664" result="shape"/>
                </filter>
            </defs>
        </svg>
        
        <!-- Payment Status Boxes -->
        <div class="payment-status-box" style="margin-left:15px;">
            <p class="mb-0">Today</p>
            <span>425</span>
        </div>
        <div class="payment-status-box">
            <p class="mb-0">Yesterday</p>
            <span>425</span>
        </div>
        <div class="payment-status-box">
            <p class="mb-0">Vendor</p>
            <span>425</span>
        </div>
        <div class="payment-status-box">
            <p class="mb-0">Email</p>
            <span>425</span>
        </div>
        <div class="payment-status-box">
            <p class="mb-0">Number</p>
            <span>425</span>
        </div>
    </div>
</div>
<style>
    .searchbar{
            margin-top: 10px;
    z-index: 9;
    position: absolute;
        width: 320px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 6px;
    }
    .searchbar input{
        border: none;
        outline: none;
        overflow: hidden;
    width: 85%;
    border: none;
    outline: none;
    font-size: 13px;
    line-height: 20px;
    padding: 5px 0;
    }
</style>

<!-- Search Bar -->
<div class="searchbar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 14px; height: 14px; margin-left:10px;">
        <path fill="#a0a0a2" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
    </svg>
    <input type="text" placeholder="Search" id="custom-search4">
</div>

<!-- DataTable -->
<table id="example5" class="display table-striped table-hover table-borderless" style="width:100%">
    <thead>
        <tr>
            <th class="th-1">Message Id</th>
            <th class="th-5">Type</th>
            <th class="th-6">Messages</th>
            <th class="th-7">Date</th>
            <th class="th-7">Time</th>
            <th class="th-7">Status</th>
            <th class="th-7">Action</th>
        </tr>
    </thead>
    <tbody id="searchResults4">
        @foreach ($deliveryAgentQueries as $queries)
        <tr>
            <td>{{ $queries->ID }}</td>
            <td>{{ $queries->type }}</td>
            <td>{{ Str::limit($queries->description, 50, '...') }}</td>
            <td>{{ $queries->created_at->format('jS F, Y') }}</td>
            <td>{{ $queries->created_at->format('h:i A') }}</td>
            <td>
                @if($queries->status == 'P')
                <button class="status-btn" style="background: #DBEAFE; border: 0.695431px solid #93C5FD; color: #1E40AF;">Pending</button>
                @elseif($queries->status == 'A')
                <button class="status-btn" style="background: #DCFCE7; border: 0.695431px solid #A7F3D0; color: #166534;">Accepted</button>
                @else
                <button class="status-btn" style="background: #FECACA; border: 0.695431px solid #FCA5A5; color: #7F1D1D;">Rejected</button>
                @endif
            </td>
            <td><button class="view-details" data-id="{{ $queries->ID }}" data-toggle="modal" data-target="#exampleModal">View Details</button></td>
        </tr>
        @endforeach
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Message Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Message Id:</strong> <span id="message-id"></span></p>
                <p><strong>Type:</strong> <span id="message-type"></span></p>
                <p><strong>Description:</strong> <span id="message-description"></span></p>
                <p><strong>Date:</strong> <span id="message-date"></span></p>
                <p><strong>Time:</strong> <span id="message-time"></span></p>
                <p><strong>Status:</strong> <span id="message-status"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
 <script>
   document.querySelectorAll('.view-details-btn4').forEach(function(button) {
    button.addEventListener('click', function() {
        var messageId = this.getAttribute('data-messageId'); // ID of the query
        var senderId = this.getAttribute('data-id'); // ID of the query
        var currentStatus = this.getAttribute('data-status'); // Current status
        
        var updateUrl = '/cleaneomain/query_management/updateStatus/' + messageId; // URL for status update
        if (currentStatus === 'P') {
        $.ajax({
            url: updateUrl,
            type: 'PATCH', // PATCH request to update status
            data: {
                _token: '{{ csrf_token() }}' // CSRF token for security
            },
            success: function(response) {
                if (response.success) {
                    console.log('Status updated to Active'); // Status update feedback
                    currentStatus = 'A';
                    updateModalContent(currentStatus);
                } else {
                    alert('Failed to update status: ' + response.message); // Error handling
                }
            },
            error: function(xhr, status, error) {
                alert('Error updating status: ' + error); // Handle AJAX errors
            }
        });
        }

        // Update the modal with the current data
        var DetailsModel = $('#simplePopup4');
        DetailsModel.find('#inputId4').text(messageId);
        DetailsModel.find('#modal-message-id').text(senderId);
        DetailsModel.find('#detailsModalLabel2').text(this.getAttribute('data-name'));
        DetailsModel.find('#modal-message-status').text(currentStatus); // Keeping the status as-is
        DetailsModel.find('#modal-message-type').text(this.getAttribute('data-type'));
        DetailsModel.find('#modal-message-email').text(this.getAttribute('data-email'));
        DetailsModel.find('#modal-message-phone').text(this.getAttribute('data-phone'));
        DetailsModel.find('#modal-message-description').text(this.getAttribute('data-messages'));
         var popup = document.getElementById('simplePopup4');
    popup.style.display = 'block'; // Display the popup
     var buttonContainer = document.getElementById('conditional-button-container4');
    buttonContainer.innerHTML = ''; // Clear previous content
        if (currentStatus === 'P') {
            // If status is 'P', show Pending button
            var pendingButton = document.createElement('button');
            pendingButton.innerText = 'Active';
            pendingButton.style.color = '#0CCF2B'; // Blue for pending
            pendingButton.style.border = 'none'; // Blue for pending
            pendingButton.style.background = 'none'; // Blue for pending
            buttonContainer.appendChild(pendingButton); // Insert into the container
        } else if (currentStatus === 'A') {
            // If status is 'A', show Active button
            var activeButton = document.createElement('button');
            activeButton.innerText = 'Active';
            activeButton.style.color = '#0CCF2B'; // Green for active
            activeButton.style.border = 'none'; // Blue for pending
            activeButton.style.background = 'none'; // Blue for pending
            buttonContainer.appendChild(activeButton);
        } else if (currentStatus === 'C') {
            // If status is 'C', show Closed button
            var closedButton = document.createElement('button');
            closedButton.innerText = 'Closed';
            closedButton.style.color = 'red'; // Red for closed
            closedButton.style.border = 'none'; // Blue for pending
            closedButton.style.background = 'none'; // Blue for pending
            buttonContainer.appendChild(closedButton);
        }
       
    });
});

</script>
<script>
document.querySelectorAll('.closeConversition4').forEach(function(button) {
    button.addEventListener('click', function() {
                    var conversationId = document.getElementById("inputId4").textContent.trim();

            var updateUrl2 = '/cleaneomain/query_management/closeStatus/' + conversationId; // URL for status update
        $.ajax({
            url: updateUrl2,
            type: 'PATCH', // PATCH request to update status
            data: {
                _token: '{{ csrf_token() }}' // CSRF token for security
            },
            success: function(response) {
                if (response.success) {
                    console.log('Status updated to Close'); // Status update feedback
                    // var popup = document.getElementById('simplePopup2');
                    popup.style.display = 'none'; // Display the popup
                } else {
                    alert('Failed to update status: ' + response.message); // Error handling
                }
            },
            error: function(xhr, status, error) {
                alert('Error updating status: ' + error); // Handle AJAX errors
            }
        });
    });
});
    </script>
    <script>
   document.getElementById('modelClose4').addEventListener('click', function() {
   var popup = document.getElementById('simplePopup4');
    popup.style.display = 'none'; // Display the popup
});
</script>
<script>
   document.getElementById('closePopup4').addEventListener('click', function() {
   var popup = document.getElementById('simplePopup4');
    popup.style.display = 'none'; // Display the popup
});
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get the search input
        var searchInput = document.getElementById('custom-search4');
        // Get the table body
        var tableBody = document.getElementById('searchResults4');

        // Add event listener for input changes
        searchInput.addEventListener('input', function () {
            var searchText = this.value.toLowerCase();
            // Get all rows of the table
            var rows = tableBody.getElementsByTagName('tr');

            // Loop through all rows
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var rowData = row.innerText.toLowerCase();

                // If the row data contains the search text, display the row, otherwise hide it
                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });
</script> 

    <script>
       
        document.getElementByClassName("input.form-control.form-control-sm").placeholder = "Search...";

        let ck3 = document.getElementById('globalCheck');
        ck3.addEventListener("click", function() {
            let checkboxes = document.querySelectorAll('#example5 tr input[type="checkbox"]');

            checkboxes.forEach(function(checkbox) {
                checkbox.checked = true;
                console.log(checkbox);
            });
        });
    </script>
        <script>
        var tog_svg3= document.getElementById('tog_svg3');
        const divs3 = document.querySelectorAll(".payment-status-box");
        tog_svg3.addEventListener('click',function(){
            divs3.forEach(function(di){
                 di.classList.toggle("active");
            });
        });
</script>
<script>
$(document).ready(function() {
    // Initialize DataTables
    var table = $('#example5').DataTable();

    // Custom search input
    $('#custom-search4').on('keyup', function() {
        table.search(this.value).draw();
    });

    // Event listener for view details button
    $('.view-details').on('click', function() {
        var id = $(this).data('id');
        var rowData = table.row($(this).closest('tr')).data();

        // Update modal content
        $('#message-id').text(rowData[0]);
        $('#message-type').text(rowData[1]);
        $('#message-description').text(rowData[2]);
        $('#message-date').text(rowData[3]);
        $('#message-time').text(rowData[4]);
        $('#message-status').text($(this).closest('tr').find('.status-btn').text());

        // Show modal
        $('#exampleModal').modal('show');
    });
});
</script>
</body>
</html>
