@extends('layouts.master')

<title>Waiting</title>

@section('content')

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

<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></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;
}
/* Hide checkboxes initially */
.checkbox-wrapper {
    display: none;
}

/* Show checkboxes when 'Handle Multiple' is active */
.handle-multiple-active .checkbox-wrapper {
    display: block;
}

.chat-content {
    padding: 12px 11px !important;
}

.chat-user-img{
    margin-left:12px !important;
}


 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
  }

  /* When checkbox is checked, set background to green */
  input[type="checkbox"]:checked {
    background-color: #748C62;
    border-color: #748C62;
  }
  
  /* Optional: Add checkmark icon or any visual effect */
input[type="checkbox"]:checked::before {
    transform: translate(0px, -1px);
    content: '✔';
    display: block;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: -1px;
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    margin-right: 7px;
}
.handle_multiple__options label {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
}
.handle_multiple__options label {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
    /* margin-top: 12px; */
    transform: translate(2px, 6px);
}
</style>

<div class="content-wrapper">
    <div class="ui card chat-card waiting-chat-card">
        <!--handle multiple-->
        <x-handle-filter />
        
        @if(count($tickets) > 0)
        <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="checkbox-wrapper">
                            <input type="checkbox" class="ticket-checkbox" id="ticket-{{$ticket->id}}">
                        </div>
                        <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>
        @else
        <div class="content chat-content waiting-content">
            <p class="waiting-content-message color-dark-green" >It looks a bit empty: No conversations yet!</p>
        </div>
        @endif

    </div>
</div>

<x-custom-modals />
@endsection