@extends('front.layouts.master-auth')

@section('meta')
    @if(isset($item))
        <meta name="chat-id" content="{{ $item->id }}">
    @endif
    <meta name="user-type" content="{{ auth()->user()->type }}">
    <meta name="user-username" content="{{ auth()->user()->username }}">
@endsection

@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="msg-page-cont">
                @php
                    if(getCurrentUser()->isFreelancer()) {
                        $current = $item?->freelancer;
                        $other = $item?->owner;
                    } else {
                        $current = $item?->owner;
                        $other = $item?->freelancer;
                    }
                @endphp

                @include('front.partials._chat_block', [
                    'chat' => $item,
                    'current' => $current,
                    'other' => $other,
                ])

                <div class="msg-block">
                    <div class="block-head">
                        <h3 class="block-title">
                            @lang('Attachments')
                        </h3>
                        <span class="head-icon">
                            <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)"
                                    style="fill:none;stroke:#afbbc6;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px" />
                            </svg>
                        </span>
                    </div>
                    <div class="block-body">
                        @if($item->getMedia('chats')->count() > 0)
                            @foreach($item->getMedia('chats') as $media)
                            <a data-fancybox="attaches" href="{{$media->getUrl()}}" class="attachment">
                            <div class="aspect">
                                <div class="attach-img">
                                    <img src="{{$media->getUrl()}}" class="img-fluid" loading="lazy" decoding="async">
                                </div>
                            </div>
                            <div class="attach-text">
                                <h6 class="attach-name">
                                    {{$media->file_name}}
                                </h6>
                                <span class="attach-date">
                                    {{\Carbon\Carbon::parse($media->created_at)->locale(app()->getLocale())->translatedFormat('j F Y - h:i')}}
                                </span>
                            </div>
                        </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- End Page Content -->
@endsection

@section('js-body')
    <script>
        ///////// Auto-expand textarea /////////
        $(document).ready(function() {
            $('.msg-input-field').each(function() {
                if (this.tagName === 'TEXTAREA') {
                    const textarea = this;
                    let manualMinHeight = 40;
                    
                    // Track manual resize (user dragging the resize handle)
                    $(textarea).on('mousedown', function() {
                        const startHeight = this.offsetHeight;
                        $(document).one('mouseup', () => {
                            if (this.offsetHeight !== startHeight) {
                                manualMinHeight = this.offsetHeight;
                            }
                        });
                    });
                    
                    // Auto-expand on input, respecting manual resize
                    $(textarea).on('input', function() {
                        this.style.height = 'auto';
                        this.style.height = Math.max(this.scrollHeight, manualMinHeight) + 'px';
                    });
                    
                    // Reset after message is sent
                    $(textarea).on('chat:reset', function() {
                        manualMinHeight = 40;
                        this.style.height = '40px';
                    });
                }
            });
            
            // Reset textarea after message is sent
            const observer = new MutationObserver(function() {
                const textarea = document.querySelector('.msg-input-field');
                if (textarea && textarea.tagName === 'TEXTAREA' && textarea.value === '') {
                    $(textarea).trigger('chat:reset');
                }
            });
            
            const chatContainer = document.querySelector('.chat-body');
            if (chatContainer) {
                observer.observe(chatContainer, { childList: true, subtree: true });
            }
        });
    </script>
@endsection