@extends('layout.master')
@section('content')

<style>
    .image-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Space between images */
    }
    .image-row img {
        max-width: 100%;
        height: auto;
    }
</style>
<div class="main-content app-content">
    <div class="container-fluid">
        
        <div class="row main-chart-wrapper row-sm">
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">

                <div>
                    <h2 class="main-content-title fs-24 mb-1">Tasks</h2>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Task List</li>
                    </ol>
                </div>
            </div>

            <div class="row card custom-card">
                
                <div class="row" style="margin-top:20px" >
                    <div class="col-md-10">
                        <h3>Task Title</h3>
                        <p>{{ $task->name }}</p>

                        <h3>Task Deatil</h3>
                        <p>{{ $task->task_detail }}</p>
                    </div>
                    <div class="col-md-2">
                        <h3>Task Team</h3>
                        @foreach($task->taskteam as $team)
                            <div class="avatar avatar-rounded avatar-sm">
                                <img alt="avatar" class="rounded-circle" title="{{ $team->user->name ?? "no name" }}"
                                    src="{{ $team->user->profile ?? "no image" }}">
                            </div>

                        @endforeach()

                    </div>
                </div>

                <div class="col-md-12" style="border: solid 1px black;">
                    <div class="card custom-card">
                        <div class="main-content-app pt-0">
                            <div class="main-content-body main-content-body-chat">
                                
                                <div class="main-chat-body" id="ChatBody" style="max-height: 400px; overflow-y: auto;">
                                    <div class="content-inner chat-content" id="main-chat-content">
                                        <label class="main-chat-time"><span>3 days ago</span></label>
                                        @foreach($task->comments as $comment)
                                            @if($comment->user_id == Auth::user()->id)
                                                <div class="media flex-row-reverse">
                                                    <div class="main-img-user online"><img alt="avatar" src=" {{ $comment->user->profile ?? "no image" }}" title=" {{ $comment->user->name }}"></div>
                                                    <div class="media-body">
                                                        <div class="main-msg-wrapper">
                                                            {{ $comment->comment }}
                                                        </div>
                                                        <div class="d-flex flex-wrap">
                                                            @foreach ($comment->commentfile as $files)
                                                                <div class="col-md-3 mb-3">
                                                                    <img src="{{ asset($files->file) }}" >
                                                                </div>

                                                            @endforeach
                                                        </div>
                                                        <div>
                                                            <span> {{ $comment->created_at }}</span> <a href="javascript:void(0);"><i class="icon ion-android-more-horizontal"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="media">
                                                <div class="main-img-user online"><img alt="avatar" src=" {{ $comment->user->profile ?? "no image" }}" title=" {{ $comment->user->name }}"></div>
                                                <div class="media-body">
                                                        <div class="main-msg-wrapper">
                                                        {{ $comment->comment }}                                                    
                                                        </div>
                                                        <div class="d-flex flex-wrap">
                                                            @foreach ($comment->commentfile as $files)
                                                                <div class="col-md-3 mb-3">
                                                                    <img src="{{ asset($files->file) }}" >
                                                                </div>

                                                            @endforeach
                                                        </div>
                                                        <div>
                                                       
                                                            <span>{{ $comment->created_at }}</span> <a href="javascript:void(0);"><i class="icon ion-android-more-horizontal"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif


                                        @endforeach

                                        
                                    </div>
                                </div>
                                <form action="{{ route('task.comment') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                    <input type="hidden" name="task_id" value="{{ $task->id }}">
                                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">

                                    <div class="main-chat-footer">
                                        <nav class="nav">
                                            <a class="nav-link" data-bs-toggle="tooltip" href="javascript:void(0);" title="Add Photo"><i class="fe fe-image"></i></a>
                                            <input type="file" name="files[]" class="form-control" multiple>
                                            <i class="fe fe-paperclip"></i></a>
                                            <a class="nav-link" data-bs-toggle="tooltip" href="javascript:void(0);" title="Emoji"><i class="far fa-smile"></i></a>
                                            <a class="nav-link" data-bs-toggle="tooltip" href="javascript:void(0);" title="Record Voice"><i class="fe fe-mic"></i></a>
                                        </nav>
                                        <input class="form-control" name="comment"  placeholder="Type your message here..." required type="text">
                                        <button class="" type="submit"><i class="far fa-paper-plane"></i></button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                    
            </div>

        
    
        </div>
    
    </div>
</div>
<!-- jQuery CDN (Latest Version) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

$(document).ready(function(){
    var container = $('#ChatBody');
    container.scrollTop(container[0].scrollHeight);
});
</script>
@endsection