@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="msg-page-cont">
                <div class="msg-block">
                    <div class="block-head">
                        <h3 class="block-title">
                            @if(getCurrentUser()->isFreelancer())
                                @php
                                    $current = $item?->freelancer;
                                    $other = $item?->owner;
                                @endphp
                                {{$current?->name}}
                            @else
                                @php
                                     $current = $item?->owner;
                                    $other = $item?->freelancer;
                                @endphp
                                {{$other?->name}}
                            @endif
                        </h3>
                        <div class="tools">
                            <div class="search-msg-cont">
                                <span class="search-msg-btn">
                                    <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>

                                <form class="header-search">
                                    <input type="search" class="search-input" placeholder="بحث">
                                    <button class="search-btn">
                                        <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>
                                    </button>
                                </form>
                            </div>

                            <span class="opt-msg-btn">
                                <span></span>
                                <span></span>
                                <span></span>
                            </span>
                        </div>
                    </div>
                    <div class="block-body">
                        <div class="chat-body">
                            @if($item->messages->count() > 0)
                                @php
                                    $messagesGrouped = $item->messages->groupBy(function ($message) {
                                                            return $message->created_at->format('H:i Y-m-d '); // Group by date
                                                        })->map(function ($messagesByDate) {
                                                            return $messagesByDate->groupBy('sender_id'); // Group by sender within each date
                                                        });
                                @endphp
                                @foreach ($messagesGrouped as $date => $messagesBySender)

                                    @foreach($messagesBySender as $sender => $msgs)
                                    @if($sender == getCurrentUser()->id)
                                        <div class="msgs-cont msgs-from">
                                            <div class="user-img">
                                                <img src="{{ $current->avatar_thumb_url }}" class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                            </div>
                                            <div class="msgs">
                                                @foreach($msgs as $msg)
                                                <div class="msg">
                                                    {{$msg->message}}
                                                </div>
                                                @endforeach
                                                <span class="time">{{$date}}</span>
                                            </div>
                                        </div>
                                    @else
                                        <div class="msgs-cont msgs-to">
                                            <div class="user-img">
                                                <img src="{{ $other->avatar_thumb_url }}" class="img-fluid" loading="lazy" decoding="async" width="40" height="40">
                                            </div>
                                            <div class="msgs">
                                                @foreach($msgs as $msg)
                                                    <div class="msg">
                                                        {{$msg->message}}
                                                    </div>
                                                @endforeach
                                                <span class="time">{{$date}}</span>
                                            </div>
                                    </div>
                                    @endif
                                @endforeach
                                @endforeach
                            @endif
                        </div>
                        <div class="chat-input">
                            <form action="{{route('chat.store')}}" method="post" enctype="multipart/form-data">
                                @csrf
                            <div class="msg-input" contenteditable>
                                <input class="msg-input" type="text" name="message" required style="width: 100%;"></input>
                            </div>
                            <div class="input-tools">
{{--                                <span class="emojis-btn">--}}
{{--                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="31" viewBox="0 0 32 31">--}}
{{--                                        <g id="smile" transform="translate(.922 1)">--}}
{{--                                            <ellipse id="Ellipse_87" data-name="Ellipse 87" class="cls-1" cx="15"--}}
{{--                                                     cy="14.5" rx="15" ry="14.5" transform="translate(.078)" />--}}
{{--                                            <path id="Path_77" data-name="Path 77" class="cls-1"--}}
{{--                                                  d="M8 14a8.014 8.014 0 0 0 5.937 2.969A8.014 8.014 0 0 0 19.874 14"--}}
{{--                                                  transform="translate(.359 3.444)" />--}}
{{--                                            <path id="Line_3" data-name="Line 3" class="cls-1"--}}
{{--                                                  transform="translate(10.078 10)" d="M0 0h0" />--}}
{{--                                            <path id="Line_4" data-name="Line 4" class="cls-1"--}}
{{--                                                  transform="translate(19.078 10)" d="M0 0h0" />--}}
{{--                                        </g>--}}
{{--                                    </svg>--}}
{{--                                </span>--}}

                                <label class="attachments-btn" for="file-upload">
                                    <input id="file-upload" name="attachments[]" multiple type="file" style="display: none;" />
                                    <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>
                                </label>

                                <button class="send-btn" type="submit">
                                    <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>
                <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