@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>

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

@endsection