Kundesone/resources/views/index.blade.php

@extends('layouts.master')

<title>Chats</title>

@section('content')

<script>
    
    $(document).ready(function(){
        $('.side-bar-links a').removeClass('bg-light-color');
        $('.aw-a-inbox').addClass('bg-light-color');
    });
    
</script>

<script>
$(document).ready(function() {
    // Toggle filter dropdown on button click
    $('.list-filter-btn').click(function() {
        $('.filter-options').toggle();
    });

    // Initial hide for handle_multiple__options
    $('.filter-options').hide();
    $('.handle_multiple__options').hide();

    // Toggle visibility of handle_multiple__options on button click
    $('.handle-multiple-btn').click(function() {
        $('.handle_multiple__options').toggle();
    });

    // Initially disable all the buttons
    $('.handle_multiple__options .tags button').prop('disabled', true);

    // Enable/disable buttons based on the select all checkbox
    $('#select-all').change(function() {
        if ($(this).is(':checked')) {
            $('.handle_multiple__options .tags button').prop('disabled', false);
        } else {
            $('.handle_multiple__options .tags button').prop('disabled', true);
        }
    });

    // Show the modal when "Assign post" button is clicked
    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
        e.preventDefault();
        $('#customModal').show();
    });

    // Show the modal when "Move" button is clicked
    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
        e.preventDefault();
        $('#customModal2').show();
    });

    // Show the modal when "Reply to multiple" button is clicked
    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
        e.preventDefault();
        $('#customModal3').show();
    });

    // Close the modal when the close button or outside the modal is clicked
    $('.modal-close, .modal').click(function() {
        $('.modal').hide();
    });

    // Prevent modal content from closing the modal when clicked
    $('.modal-content').click(function(e) {
        e.stopPropagation();
    });

    // Update Select status options based on Select filter selection
    $('#filter-select').change(function() {
        var selectedFilter = $(this).val();
        console.log("Selected filter:", selectedFilter); // Debugging log
        updateStatusOptions(selectedFilter);
    });

    // Initially hide filter based data section
    $('.filter_based__data').hide();

    // Function to update status options based on selectedFilter
    function updateStatusOptions(selectedFilter) {
        console.log("Updating status options for:", selectedFilter); // Debugging log
        switch (selectedFilter) {
            case 'Assigned to':
                $('#status-select').html(`
                    <option disabled value="">Select assigned to</option>
                    <option value="Assigned">Assigned</option>
                    <option value="Unassigned">Unassigned</option>
                    <option value="Margin">Margin</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Which activity':
                $('#status-select').html(`
                    <option disabled value="">Select activity</option>
                    <option value="Marked as spam">Marked as spam</option>
                    <option value="Not spam">Not spam</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'No activity':
                $('#status-select').html(`
                    <option disabled value="">Select No activity</option>
                    <option value="Exercise">Exercise</option>
                    <option value="Not Yoga">Not Yoga</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Editor':
                $('#status-select').html(`
                    <option disabled value="">Select Editor</option>
                    <option value="Computer tool">Computer tool</option>
                    <option value="Direct editor">Direct editor</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Spam':
                $('#status-select').html(`
                    <option disabled>Select Spam</option>
                    <option value="Marked as spam">Marked as spam</option>
                    <option value="Not spam">Not spam</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Status':
                $('#status-select').html(`
                    <option disabled value="">Select status</option>
                    <option value="Completed">Completed</option>
                    <option value="Not Completed">Not Completed</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Tags':
                $('#status-select').html(`
                    <option disabled value="">Select Tags</option>
                    <option value="Target">Target</option>
                    <option value="Mustafa">Mustafa</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Users':
                $('#status-select').html(`
                    <option disabled value="">Select Users</option>
                    <option value="Merrs">Merrs</option>
                    <option value="Abdullah">Abdullah</option>
                `);
                $('.filter_based__data').show();
                break;
            default:
                $('#status-select').html(`
                    <option disabled value="">Select status</option>
                `);
                $('.filter_based__data').show();
                break;
        }
    }
});

</script>


<style>
    .handle_multiple__options {
        display: none;
        background-color: #f8f9fa; 
        padding: 10px; 
        border: 1px solid #ddd; 
        margin-top: 10px;
    }

    .handle_multiple__options label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .handle_multiple__options .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; 
    }

    .handle_multiple__options .tags button {
        background-color: #748C62; 
        color: white; 
        border: none; 
        padding: 5px 10px; 
        border-radius: 4px; 
        cursor: pointer; 
    }

    .handle_multiple__options .tags button:hover {
        background-color: #383F33; 
    }
    .handle_multiple__options .tags button:disabled {
    background-color: #ccc; 
    cursor: not-allowed;
}

.handle_multiple__options input{
    width: 32px;
    height: 19px;
}
.handle_multiple__options .common_shre{
    display: flex;
    justify-content: space-between;
}
/* Custom Modal CSS */
.modal {
        display: none;
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%;
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4); 
    }

    .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 13%;
    border-radius: 10px;
    position: relative;
}
   #customModal3 .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 10px;
    position: relative;
}
    .modal-content .btn-primary{
        background-color: #748C62 !important;

}

    .modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 20px;
        top: 10px;
        cursor: pointer;
    }

    .modal-close:hover,
    .modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .filter-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f3f3f3;
}

.filter {
    display: flex;
    align-items: center;
}

.filter select {
    margin-right: 10px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}



</style>

<div class="content-wrapper">
    <div class="ui card chat-card">
        <div class="content chat-card-header d-flex align-items-center justify-content-between">
            <div class="header">Chats</div>
            <div class="data-actions d-flex justify-content-end">
                <div class="date-filter  d-flex align-items-center">
                    <img src="{{ asset('images/icons/calendar.png') }}" alt="Calendar">

                    <select class="date-filter-selectbox" name="">
                        <option value="">Last 7 Days</option>
                    </select>
                </div>
                <button class="action-button d-flex align-items-center list-filter-btn">
                    <img src="{{ asset('images/icons/list-filter.png') }}" alt="">
                </button>

                <button class="action-button bg-dark-green-color color-light handle-multiple-btn">
                    <img src="{{ asset('images/icons/Add_Plus.png') }}" alt="Plus Icon">
                    <span>Handle Multiple</span>
                </button>

            </div>

        </div>
            <div class="filter-options">
            <div class="filter">
       <span> <b>Filter on:</b> &nbsp;</span>
               <select id="filter-select" name="">
                    <option disabled >Select filter</option>
                    <option value="Assigned to">Assigned to</option>
                    <option value="Which activity">Which activity</option>
                    <option value="No activity">No activity</option>
                    <option value="Editor">Editor</option>
                    <option value="Spam">Spam</option>
                    <option value="Status">Status</option>
                    <option value="Tags">Tags</option>
                    <option value="Users">Users</option>
                </select>
                    <div class="filter_based__data">
                    <select id="status-select" name="">
                        <option disabled>Select status</option>
                        <!-- Options will be dynamically updated based on selected filter -->
                    </select>
                </div>
            </div>
            </div>
        <div class="handle_multiple__options">
           <div class="common_shre">
           <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
            <div class="tags">
                <button>Assign post</button>
                <button>Delete</button>
                <button>Move</button>
                <button>Open</button>
                <button>Waiting</button>
                <button>Done</button>
                <button>Tag</button>
                <button>Not spam</button>
                <button>Reply to multiple</button>
            </div>
           </div>
        </div>
        <div class="content chat-content">
            <ul class="chat-details">
                @foreach($tickets as $ticket)
                <li>
                    <a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
                        <div class="chat-user-img">
                            <img src="{{ asset('images/Avatar.png') }}" alt="User">
                        </div>
                        <div class="chat-message-info d-flex align-self-baseline">
                            <div class="chat-ticket-row d-flex justify-content-between">
                                <div class="ticket-status d-flex">
                                    <p class="color-light-green">#{{$ticket->id}}</p>
                                    <div class="ui tiny label bg-dark-green-color color-light">
                                    {{$ticket->status}}
                                    </div>
                                </div>
                                <p class="color-dark-green">{{ \Carbon\Carbon::parse($ticket->created_at)->format('d/m/Y')}}</p>
                            </div>
                            <div class="chat-ticket-row d-flex justify-content-between">
                                <div class="ticket-status d-flex">
                                    <p class="color-dark-green receiver-name">{{$ticket->sender_name}}</p>
                                    <p class="receiver-message"> - {{\Illuminate\Support\Str::limit($ticket->subject, 90)}}.</p>
                                </div>
                                <p class="color-dark-green bold message-time">{{ \Carbon\Carbon::parse($ticket->created_at)->format('h:i A')}}</p>
                            </div>
                        </div>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>

    </div>
</div>

<!-- Custom Modal post -->
<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <h5>Assign Post</h5>
    <form>
      <div class="mb-3">
        <label for="recipient-name" class="col-form-label">Recipient:</label>
        <input type="text" class="form-control" id="recipient-name">
      </div>
      <div class="mb-3">
        <label for="message-text" class="col-form-label">Message:</label>
        <textarea class="form-control" id="message-text"></textarea>
      </div>
    </form>
    <button type="button" class="btn btn-primary">Send</button>
  </div>
</div>
<!-- Custom Modal move-->
<div id="customModal2" class="modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <h5>Move</h5>
    <form>
      <div class="mb-3">
        <label for="recipient-name" class="col-form-label">Conversation moved:</label>
        <input type="text" class="form-control" id="recipient-name" placeholder="Inbox">
      </div>
     
    </form>
    <button type="button" class="btn btn-primary">Confirm</button>
  </div>
</div>
<!-- Custom Modal Replay to multiple-->
<div id="customModal3" class="modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <h5>Replay to multiple</h5>
    <form>
      <div class="mb-3 mt-4">
        <p>Please choose only email conversations and try again</p>
      </div>
     
    </form>

  </div>
</div>
@endsection