@extends('user.layouts.user')
@section('title', 'عرض محادثة')
@section('content')
    <!-- Start Section -->
    <section class="py-5 main-section">
        <div class="container">
            <div class="row g-4">
                <div class="col-12 col-lg-3">
                    <div class="content-side">
                        <h6 class=" mb-0">المرفقات</h6>
                        <hr style="opacity: 0.1;">
                        <ul class="list-attached">
                            <li>
                                <div class="box-file">
                                    <div class="info">
                                        <h6 class="title">FileName.pdf</h6>
                                        <span class="size">540 KB</span>
                                    </div>
                                    <div class="icon">
                                        <img src="{{ asset('front-asset') }}/img/pdf.png" alt="pdf">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-file">
                                    <div class="info">
                                        <h6 class="title">FileName.pdf</h6>
                                        <span class="size">540 KB</span>
                                    </div>
                                    <div class="icon">
                                        <img src="{{ asset('front-asset') }}/img/photo.png" alt="pdf">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-file">
                                    <div class="info">
                                        <h6 class="title">FileName.pdf</h6>
                                        <span class="size">540 KB</span>
                                    </div>
                                    <div class="icon">
                                        <img src="{{ asset('front-asset') }}/img/pdf.png" alt="pdf">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-file">
                                    <div class="info">
                                        <h6 class="title">FileName.pdf</h6>
                                        <span class="size">540 KB</span>
                                    </div>
                                    <div class="icon">
                                        <img src="{{ asset('front-asset') }}/img/photo.png" alt="pdf">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-lg-9">
                    <div class="content-side">
                        <div class="box-chat">
                            <div class="user-info">
                                <img src="{{ asset('admin-asset') }}/img/login_bg.png" alt="user">
                                <h6 class="name">{{ $msg->from->name }} </h6>
                                <i class="fa-solid fa-circle active"></i>
                            </div>
                            @foreach ($messages as $message)
                                @if ($message->to_user == auth()->user()->id && $message->from_user !== auth()->user()->id && $message->do_message == $message->from_user)

                                    <div class="box-replay">
                                        <div class="holder">
                                            <div class="content">
                                                {{ $message->message }}


                                            </div>
                                            <div class="img-holder">
                                                <img src="{{ asset('admin-asset') }}/img/login_bg.png" alt="user">
                                            </div>
                                        </div>
                                        <div class="d-flex flex-column gap-1 mt-1">
                                            <span class="time">{{ $message->created_at->format('Y-m-d') }}</span>
                                        </div>
                                    </div>
                                @endif
                                @if ($message->from_user == auth()->user()->id && $message->to_user !== auth()->user()->id && $message->do_message == auth()->user()->id)

                                    <div class="box-replay client">
                                        <div class="holder">
                                            <div class="content">
                                                {{ $message->message }}


                                            </div>
                                            <div class="img-holder">
                                                <img src="{{ asset('admin-asset') }}/img/login_bg.png" alt="user">
                                            </div>
                                        </div>
                                        <div class="d-flex flex-column gap-1 mt-1">
                                            <span class="time"> {{ $message->created_at->format('Y-m-d') }}</span>
                                        </div>
                                    </div>
                                @endif
                            @endforeach

                            <form action="{{route('sendMessage',$msg->id)}}" method="POST">
                                @csrf
                            <textarea class="form-control" id="message" name="message" cols="5"></textarea>
                            <div class="d-flex aling-items-center mt-3 mb-1 gap-1">
                                <a class="btn btn-light" data-bs-toggle="collapse" href="#collapseExample" role="button"
                                    aria-expanded="false" aria-controls="collapseExample">
                                    ارفاق ملفات
                                </a>
                                <button class="btn btn-primary btn-sm" id="send" type="submit">ارسال</button>
                            </div>
                            <div class="collapse" id="collapseExample">
                                <input type="file" multiple name="images" class="form-control" id="images">
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->
@endsection