@extends('front.layout.master')
@php
    $authUser = Auth::user();
    $sellerac = App\Store::where('user_id','=', $authUser->id)->first();
@endphp
@section('title', __('My Chats') . ' | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('My Chats') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="bg-white rounded-2xl shadow-card overflow-hidden grid lg:grid-cols-[1fr_320px] min-h-[600px]">

        {{-- Conversations list --}}
        <div class="border-r border-slate-100 flex flex-col">
            <div class="p-5 border-b border-slate-100 flex items-center justify-between">
                <div>
                    <h1 class="font-display font-extrabold text-xl">{{ __('My Chats') }}</h1>
                    <p class="text-[12px] text-slate-500">{{ $conversations->count() }} {{ __('conversations') }}</p>
                </div>
                <div class="w-10 h-10 bg-brand-50 rounded-full grid place-items-center text-brand-600">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg>
                </div>
            </div>

            <div class="flex-1 overflow-y-auto divide-y divide-slate-100">
                @forelse($conversations as $chat)
                    @php
                        $other = $chat->sender;
                        $last = $chat->chat->last();
                        $img = $other && $other->image && file_exists(public_path() . '/images/user/' . $other->image)
                            ? url('images/user/' . $other->image)
                            : ($other ? Avatar::create($other->name)->toBase64() : '');
                    @endphp
                    <a href="{{ route('user.chat.view', $chat->conv_id) }}" class="flex items-start gap-3 p-4 hover:bg-slate-50 transition-colors">
                        @if($img)<img src="{{ $img }}" class="w-12 h-12 rounded-full object-cover shrink-0">@endif
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                <h4 class="font-semibold text-[14px] truncate">{{ $other->name ?? __('User') }}</h4>
                                @if($last && $last->created_at)
                                    <span class="text-[11px] text-slate-400 whitespace-nowrap">{{ $last->created_at->diffForHumans() }}</span>
                                @endif
                            </div>
                            <div class="text-[12px] text-slate-500 mt-0.5 truncate">
                                @if($last && $last->message)
                                    {{ \Illuminate\Support\Str::limit(strip_tags($last->message), 60) }}
                                @else
                                    <span class="italic">{{ __('No messages yet') }}</span>
                                @endif
                            </div>
                            <div class="text-[10px] text-slate-400 mt-1 font-mono">#{{ $chat->conv_id }}</div>
                        </div>
                    </a>
                @empty
                    <div class="text-center py-12">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg>
                        <h3 class="font-display font-bold text-lg mt-3">{{ __('No chats yet') }}</h3>
                        <p class="text-[13px] text-slate-500 mt-1">{{ __('Start a new conversation from the right.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Start new chat sidebar --}}
        <div class="bg-slate-50 flex flex-col">
            <div class="p-5 border-b border-slate-100">
                <h2 class="font-semibold text-[15px]">{{ __('Start new chat') }}</h2>
                <form class="mt-3">
                    <div class="relative">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                        <input type="search" name="user" placeholder="{{ __('Search') }}" class="w-full h-10 pl-9 pr-3 rounded-lg border border-slate-200 focus:border-brand-500 outline-none text-[13px] bg-white">
                    </div>
                </form>
            </div>

            <div class="flex-1 overflow-y-auto p-3 space-y-1">
                @foreach($users as $u)
                    @php
                        $img = $u->image && file_exists(public_path() . '/images/user/' . $u->image)
                            ? url('images/user/' . $u->image)
                            : Avatar::create($u->name)->toBase64();
                    @endphp
                    <a href="{{ route('adminchat.start', $u->id) }}" class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-white transition-colors">
                        <img src="{{ $img }}" class="w-10 h-10 rounded-full object-cover shrink-0">
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-[13px] truncate">{{ $u->name }}</div>
                            <div class="text-[11px] text-slate-500">{{ $u->role_id == 'a' ? __('Admin') : ($u->role_id == 'v' ? __('Vendor') : __('Customer')) }}</div>
                        </div>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400"><path d="m9 6 6 6-6 6"/></svg>
                    </a>
                @endforeach
            </div>

            <div class="p-3 border-t border-slate-100">{!! $users->links() !!}</div>
        </div>
    </div>
</section>

@include('front.partials.change-password-modal')
@endsection