@extends('my.admin.layouts.master')

@section('content')
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif


    <div class="col-12   ">
        <div class="card radius-10">
            <div class="card-body">
                <div class="row g-3 align-items-center">
                    <div class="col-9">
                        <h5 class="mb-0">Client Messages</h5>
                    </div>

                </div>
            </div>
            <div class="client-message ps ps--active-y">
                @foreach ($messages as $message)
                    {{-- <div
                        class="d-flex align-items-center gap-3 client-messages-list border-bottom border-top border-radius p-3">
                        <a class="dropdown-item" href="{{ route('message.show', $message->id) }}">
                            <div class="d-flex align-items-center ">
                                <div class="">
                                    <div class="font-22"><i
                                            class="fadeIn animated bx {{ $message->is_read == 1 ? 'bx-envelope-open' : 'bx-envelope text-info' }} "></i>
                                    </div>
                                </div>

                                @if ($message->user->profile_picture && Storage::disk('public')->exists($message->user->profile_picture))
                                    <img src="{{ asset('storage/' . $message->user->profile_picture) }}"
                                        class="rounded-circle mx-4" width="52" height="52"
                                        alt="User's profile picture">
                                @else
                                    <img src="{{ asset('assets/assets/images/profile.png') }}" class="rounded-circle mx-4"
                                        width="52" height="52" alt="Default profile picture">
                                @endif


                                <div class="ms-3 flex-grow-1 ">
                                    <h6 class="mb-0 dropdown-msg-user">{{ $message->user->name }} <span
                                            class="msg-time float-end ">{{ \Carbon\Carbon::parse($message->created_at)->diffForHumans() }}</span>
                                    </h6>
                           
                                    <small
                                        class="mb-0 dropdown-msg-text  d-flex align-items-center">{{ Str::limit($message->message, 20, ' see more...') }}</small>
                                </div>
                                
                            </div>
                        </a>
                    </div> --}}
                    
                    <div class="d-flex align-items-center gap-3 client-messages-list border-bottom border-top border-radius p-3">
                        <a class="dropdown-item flex-grow-1" href="{{ route('message.show', $message->id) }}">
                            <div class="d-flex align-items-center">
                                <div class="font-22">
                                    <i class="fadeIn animated bx {{ $message->is_read == 1 ? 'bx-envelope-open' : 'bx-envelope text-info' }}"></i>
                                </div>
                    
                                @if ($message->user->profile_picture && Storage::disk('public')->exists($message->user->profile_picture))
                                    <div class="text-center mx-4">
                                        <img src="{{ asset('storage/' . $message->user->profile_picture) }}" class="rounded-circle" width="52" height="52" alt="User's profile picture">
                                        <div class="mt-2">{{ $message->user->name }}</div>
                                    </div>
                                @else
                                    <div class="text-center mx-4">
                                        <img src="{{ asset('assets/assets/images/profile.png') }}" class="rounded-circle" width="52" height="52" alt="Default profile picture">
                                        <div class="mt-2">{{ $message->user->name }}</div>
                                    </div>
                                @endif
                                <div class="ms-3 flex-grow-1 d-none d-md-block">
                                    <h6 class="mb-0 dropdown-msg-user">
                                        <span class="msg-time float-end">{{ \Carbon\Carbon::parse($message->created_at)->diffForHumans() }}</span>
                                    </h6>
                                    <small class="mb-0 dropdown-msg-text d-flex align-items-center">{{ Str::limit($message->message, 20, ' see more...') }}</small>
                                </div>
                            </div>
                        </a>
                    
                        <form action="{{ route('message.destroy', $message->id) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-light" onclick="return confirm('Are you sure you want to delete this message?');">
                                <div class="d-flex align-items-center font-24 cursor-pointer rounded btn-outline-danger">
                                    <i class="fadeIn animated bx bx-trash px-2 py-4"></i>
                                </div>
                            </button>
                        </form>
                    </div>
                    

                @endforeach

            </div>
        </div>
    </div>
@endsection