@extends('layouts.master')

<title>All Tickets</title>

@section('content')

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

<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="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->subject }}</p>
                                    <p class="receiver-message"> - {{ $ticket->content }}</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>

@endsection