{{-- Chat Block Partial --}}
{{-- Required variables: $chat (Chat model), $current (current user), $other (other user) --}}
{{-- Optional variables: $projectId (for project_id hidden field) --}}

<div class="msg-block" id="chat">
    <div class="block-head">
        <h3 class="block-title">
            تواصل مع 
            @if($other->isFreelancer())
            <a href="{{route('freelancers.details', $other->username)}}" style="color: inherit; text-decoration: none; font-size: inherit; font-weight: inherit; font-family: inherit;">
                {{$other?->name}}
            </a>
            @else
            <span>{{$other?->name}}</span>
            @endif
        </h3>
        <div class="tools">
            <div class="search-msg-cont" id="chat-search-cont">
                <span class="search-msg-btn" id="chat-search-toggle" title="بحث في المحادثة">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16.191" height="16.77"
                         viewBox="0 0 16.191 16.77">
                        <path
                            d="m16.929 15.275-3.991-4.151a6.768 6.768 0 1 0-5.182 2.418 6.7 6.7 0 0 0 3.879-1.225l4.021 4.183a.883.883 0 1 0 1.273-1.224zM7.755 1.766a5 5 0 1 1-5 5 5.01 5.01 0 0 1 5-5z"
                            transform="translate(-.984)"/>
                    </svg>
                </span>

                <div class="chat-search-bar" id="chat-search-bar">
                    <input type="text" class="chat-search-input" id="chat-search-input"
                           placeholder="ابحث في المحادثة..." autocomplete="off">
                    <span class="chat-search-meta" id="chat-search-meta"></span>
                    <button type="button" class="chat-search-nav-btn" id="chat-search-prev" title="السابق">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
                    </button>
                    <button type="button" class="chat-search-nav-btn" id="chat-search-next" title="التالي">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                    </button>
                    <button type="button" class="chat-search-close-btn" id="chat-search-close" title="إغلاق">&times;</button>
                </div>
            </div>

           
        </div>
    </div>
    <div class="block-body">
        <div class="chat-body">
            @if(isset($chat) && $chat->messages->count() > 0)
                @php
                    // Group messages by DATE only (Y-m-d) for date separators
                    $messagesByDate = $chat->messages->groupBy(function ($message) {
                        return $message->created_at->format('Y-m-d');
                    });
                @endphp
                @foreach ($messagesByDate as $dateKey => $dayMessages)
                    @php
                        $dateCarbon = \Carbon\Carbon::parse($dateKey);
                        $fullDateLabel = $dateCarbon->locale('ar')->translatedFormat('l، j F Y');
                        $daysDiff = (int) $dateCarbon->diffInDays(now(), false);
                        if ($dateCarbon->isToday()) {
                            $dateLabel = 'اليوم';
                        } elseif ($dateCarbon->isYesterday()) {
                            $dateLabel = 'أمس';
                        } else {
                            $dateLabel = 'منذ ' . $daysDiff . ' ' . ($daysDiff >= 3 && $daysDiff <= 10 ? 'أيام' : 'يوم');
                        }
                    @endphp
                    {{-- Date Separator --}}
                    <div class="chat-date-separator">
                        <span title="{{ $fullDateLabel }}">{{ $dateLabel }}</span>
                    </div>
                    @foreach($dayMessages as $msg)
                        @php
                            $sender = $msg->sender_id;
                            $attachments = $chat->media()->where('collection_name', 'chats')->where('custom_properties->message_id', $msg->id)->get();
                            // Determine online status
                            $msgUser = ($sender == getCurrentUser()->id) ? $current : $other;
                            $msgIsOnline = false;
                            if($msgUser && $msgUser->last_login) {
                                try {
                                    $msgIsOnline = \Carbon\Carbon::parse($msgUser->last_login)->diffInMinutes(now()) < 10;
                                } catch (\Exception $e) {
                                    $msgIsOnline = false;
                                }
                            }
                        @endphp
                        @if($sender == getCurrentUser()->id)
                            <div class="msgs-cont msgs-from">
                                <div class="user-img-wrapper">
                                    <div class="user-img">
                                        @if($current->isFreelancer())
                                            <a href="{{ route('freelancers.details', $current->username) }}" class="user-img-link">
                                                <img src="{{ $current->avatar_thumb_url }}"
                                                     class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                            </a>
                                        @else
                                            <img src="{{ $current->avatar_thumb_url }}"
                                                 class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                        @endif
                                    </div>
                                    <span class="chat-online-dot {{ $msgIsOnline ? 'active' : '' }}" title="{{ $msgIsOnline ? 'متصل الآن' : 'غير متصل' }}"></span>
                                </div>
                                <div class="msgs">
                                    <div class="msg-header">
                                        @if($current->isFreelancer())
                                            <a href="{{ route('freelancers.details', $current->username) }}" class="sender-name sender-name-link">{{ $current->name }}</a>
                                        @else
                                            <span class="sender-name">{{ $current->name }}</span>
                                        @endif
                                        <span class="time" data-ts="{{ $msg->created_at->timestamp }}" title="{{ $msg->created_at->locale('ar')->translatedFormat('l، j F Y، h:i A') }}">{{ $msg->created_at->format('h:i A') }}</span>
                                    </div>
                                    <div class="msg">
                                        {!! format_text($msg->message) !!}
                                        @if($attachments->count() > 0)
                                            <div class="message-attachment">
                                                @foreach($attachments as $media)
                                                    @php
                                                        $mediaExt = strtolower(pathinfo($media->file_name, PATHINFO_EXTENSION));
                                                        $isAudioMedia = str_starts_with($media->mime_type ?? '', 'audio/') || in_array($mediaExt, ['webm','ogg','mp3','m4a','wav','aac','opus']);
                                                        $isImageMedia = str_starts_with($media->mime_type ?? '', 'image/') || in_array($mediaExt, ['jpg','jpeg','png','gif','webp','bmp','svg']);
                                                    @endphp
                                                    @if($isAudioMedia)
                                                        <div class="audio-message">
                                                            <audio controls controlsList="nodownload" src="{{$media->getUrl()}}"></audio>
                                                        </div>
                                                    @elseif($isImageMedia)
                                                        <a data-fancybox="chat-images" href="{{$media->getUrl()}}" class="chat-img-link">
                                                            <img src="{{$media->getUrl()}}" alt="{{$media->file_name}}" class="chat-attachment-img" loading="lazy" decoding="async">
                                                        </a>
                                                    @else
                                                        <div class="attachment-preview">
                                                            <div class="attachment-info">
                                                                <div class="attachment-name">{{$media->file_name}}</div>
                                                                <div class="attachment-size">{{number_format($media->size / 1024, 2)}} KB</div>
                                                            </div>
                                                            <a href="{{$media->getUrl()}}" class="attachment-download" download="{{$media->file_name}}">تحميل</a>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="msgs-cont msgs-to">
                                <div class="user-img-wrapper">
                                    <div class="user-img">
                                        @if($other->isFreelancer())
                                            <a href="{{ route('freelancers.details', $other->username) }}" class="user-img-link">
                                                <img src="{{ $other->avatar_thumb_url }}"
                                                     class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                            </a>
                                        @else
                                            <img src="{{ $other->avatar_thumb_url }}"
                                                 class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                        @endif
                                    </div>
                                    <span class="chat-online-dot {{ $msgIsOnline ? 'active' : '' }}" title="{{ $msgIsOnline ? 'متصل الآن' : 'غير متصل' }}"></span>
                                </div>
                                <div class="msgs">
                                    <div class="msg-header">
                                        @if($other->isFreelancer())
                                            <a href="{{ route('freelancers.details', $other->username) }}" class="sender-name sender-name-link">{{ $other->name }}</a>
                                        @else
                                            <span class="sender-name">{{ $other->name }}</span>
                                        @endif
                                        <span class="time" data-ts="{{ $msg->created_at->timestamp }}" title="{{ $msg->created_at->locale('ar')->translatedFormat('l، j F Y، h:i A') }}">{{ $msg->created_at->format('h:i A') }}</span>
                                    </div>
                                    <div class="msg">
                                        {!! format_text($msg->message) !!}
                                        @if($attachments->count() > 0)
                                            <div class="message-attachment">
                                                @foreach($attachments as $media)
                                                    @php
                                                        $mediaExt = strtolower(pathinfo($media->file_name, PATHINFO_EXTENSION));
                                                        $isAudioMedia = str_starts_with($media->mime_type ?? '', 'audio/') || in_array($mediaExt, ['webm','ogg','mp3','m4a','wav','aac','opus']);
                                                        $isImageMedia = str_starts_with($media->mime_type ?? '', 'image/') || in_array($mediaExt, ['jpg','jpeg','png','gif','webp','bmp','svg']);
                                                    @endphp
                                                    @if($isAudioMedia)
                                                        <div class="audio-message">
                                                            <audio controls controlsList="nodownload" src="{{$media->getUrl()}}"></audio>
                                                        </div>
                                                    @elseif($isImageMedia)
                                                        <a data-fancybox="chat-images" href="{{$media->getUrl()}}" class="chat-img-link">
                                                            <img src="{{$media->getUrl()}}" alt="{{$media->file_name}}" class="chat-attachment-img" loading="lazy" decoding="async">
                                                        </a>
                                                    @else
                                                        <div class="attachment-preview">
                                                            <div class="attachment-info">
                                                                <div class="attachment-name">{{$media->file_name}}</div>
                                                                <div class="attachment-size">{{number_format($media->size / 1024, 2)}} KB</div>
                                                            </div>
                                                            <a href="{{$media->getUrl()}}" class="attachment-download" download="{{$media->file_name}}">تحميل</a>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endforeach
            @endif
        </div>
        <div class="chat-input">
            <form action="{{route('chat.store')}}" method="post"
                  enctype="multipart/form-data" id="chat-form">
                @csrf
                <input type="hidden" name="chat_id" value="{{$chat?->id}}">
                @if(isset($projectId))
                    <input type="hidden" name="project_id" value="{{$projectId}}">
                @endif
                @if(auth()->user()->isFreelancer())
                    <input type="hidden" name="owner_id" value="{{$other->id}}">
                    <input type="hidden" name="freelancer_id" value="{{auth()->id()}}">
                @else
                    <input type="hidden" name="owner_id" value="{{auth()->id()}}">
                    <input type="hidden" name="freelancer_id" value="{{$other->id}}">
                @endif

                <!-- Voice recording UI (shown during recording) -->
                <div id="voice-recording-ui" style="display:none; margin-bottom:6px;">
                    <div class="voice-recording-bar">
                        <span class="voice-rec-dot"></span>
                        <span class="voice-rec-label">جارٍ التسجيل...</span>
                        <span class="voice-rec-timer" id="voice-rec-timer">00:00</span>
                        <button type="button" class="voice-cancel-btn" id="voice-cancel-btn" title="إلغاء">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </button>
                        <button type="button" class="voice-stop-btn" id="voice-stop-btn" title="إيقاف وإرسال">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                            إيقاف
                        </button>
                    </div>
                </div>

                <!-- Voice preview UI (shown after recording stops, before sending) -->
                <div id="voice-preview-ui" style="display:none; margin-bottom:6px;">
                    <div class="voice-preview-bar">
                        <audio id="voice-preview-player" controls controlsList="nodownload" style="height:32px; flex:1; min-width:0;"></audio>
                        <button type="button" class="voice-send-btn" id="voice-send-btn" title="إرسال">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                            إرسال
                        </button>
                        <button type="button" class="voice-discard-btn" id="voice-discard-btn" title="حذف">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
                        </button>
                    </div>
                </div>

                <!-- Drag-and-drop file zone (toggled by icon below) -->
                <div class="file-drop-zone multi-file-zone chat-drop-zone" id="chat-drop-zone" style="display:none; margin-top:8px; margin-bottom:6px">
                    <div class="input-file-text">
                        <svg xmlns="http://www.w3.org/2000/svg" width="39.629" height="27.74" viewBox="0 0 39.629 27.74">
                            <path d="M33.289,14.3A5.951,5.951,0,0,0,27.74,6.213a5.914,5.914,0,0,0-3.3,1,9.908,9.908,0,0,0-18.5,4.941c0,.167.006.334.012.5A8.919,8.919,0,0,0,8.917,29.99H31.7A7.925,7.925,0,0,0,33.289,14.3ZM24.36,18.1H20.31v6.935a.994.994,0,0,1-.991.991H16.347a.994.994,0,0,1-.991-.991V18.1h-4.05a.989.989,0,0,1-.7-1.69l6.526-6.526a.994.994,0,0,1,1.4,0l6.526,6.526a.99.99,0,0,1-.7,1.69Z" transform="translate(0 -2.25)" fill="#393939"/>
                        </svg>
                        <span class="drop-text">اسحب الملفات هنا أو اضغط للاختيار (حتى 5 ملفات)</span>
                        <input id="file-upload" name="attachments[]" multiple type="file" accept="image/*,.pdf,.doc,.docx,.txt">
                    </div>
                    <div class="multi-file-preview" id="chat-file-preview"></div>
                </div>

                <div class="msg-input">
                    <textarea class="msg-input-field" name="message" rows="1"
                           placeholder="@lang('Type your message...')"></textarea>
                </div>
                <div class="input-tools">
                    <!-- Voice record button -->
                    <button type="button" class="voice-record-btn" id="voice-record-btn" title="إرسال مقطع صوتي">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4z"/><path d="M19 10a7 7 0 0 1-14 0"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                    </button>

                    <!-- Attachment icon toggle -->
                    <button type="button" class="attachments-btn" id="chat-dropzone-toggle" title="@lang('front.Attach Files')" style="position:relative; background:none; border:none; padding:0; margin:0 15px; cursor:pointer;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32.099" height="31.685" viewBox="0 0 32.099 31.685">
                            <path d="M31.687 15.3 17.653 28.541a9.564 9.564 0 0 1-12.966 0 8.3 8.3 0 0 1 0-12.228L18.722 3.076a6.376 6.376 0 0 1 8.644 0 5.535 5.535 0 0 1 0 8.152L13.315 24.465a3.188 3.188 0 0 1-4.322 0 2.768 2.768 0 0 1 0-4.076L21.959 8.175" transform="translate(-1.002 -.388)"/>
                        </svg>
                        <span class="toggle-file-count" style="display:none; position:absolute; top:-6px; left:-6px;"></span>
                    </button>

                    <button class="send-btn" type="submit" id="send-message-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40.345"
                             height="39.906"
                             viewBox="0 0 40.345 39.906">
                            <g id="icon.send" transform="rotate(135 15.51 18.113)">
                                <path id="Line_2" data-name="Line 2" class="cls-1"
                                      transform="translate(13.591 13.592)"
                                      d="M13.127 13.127 0 0"/>
                                <path id="Path_76" data-name="Path 76" class="cls-1"
                                      d="M26.717 26.719 21.215 0l-7.624 13.592L0 21.216z"/>
                            </g>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Chat JavaScript will be included by the parent page's @section('js-body') --}}