@extends('layouts.master')

<title>All Tickets</title>

@section('content')

<script>
  $(document).ready(function() {
        // Initially disable all the buttons
        $('.handle_multiple__options .tags button').prop('disabled', true);

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

        // 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(); // Prevent default action to avoid any conflict
            $('#customModal').show();
        });

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

        // Prevent modal content from closing the modal when clicked
        $('.modal-content').click(function(e) {
            e.stopPropagation();
        });
        // Show the modal when "Move" button is clicked
        $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
            e.preventDefault(); // Prevent default action to avoid any conflict
            $('#customModal2').show();
        });

        // Close the modal when the close button or outside the modal is clicked
        $('.modal-close, .modal').click(function() {
            $('#customModal2').hide();
        });
        // Show the modal when "Reply to multiple" button is clicked
        $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
            e.preventDefault(); // Prevent default action to avoid any conflict
            $('#customModal3').show();
        });

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

    
    });

</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;
    }
  

</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">

                <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="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 all-tickets position-relative">
                            <img src="{{ asset('images/Avatar.png') }}" alt="User">
                            <div
                                class="chat-status-icon rounded-circle text-center align-content-center position-absolute">
                                <img src="{{ asset('images/icons/chat-round.svg') }}" alt="Chat Round">
                            </div>
                        </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-light-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