@extends('layouts.masterDashboard')
@section('content')
    <style>
        .mx-75{
            max-width: 75%;
        }
        div#allMsg::-webkit-scrollbar-thumb {
            border-radius: unset;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .common{
            border-radius: 5px;
            display: inline-block;
            padding: 10px;
            color: #fff;
            font-weight: lighter;
            font-size: small;
            box-shadow: 1px 1px 2px rgba(0,0,0,.3);
            margin: 5px;
            position: relative;
        }
        .common.sender{
            background: #72b8ff;
            float: left;
            clear: both;
            border-top-left-radius: 0px;
        }
        .common.receiver{
            background: #00D025;
            float: right;
            clear: both;
            border-top-right-radius: 0px;
        }
        .common.sender:before, .common.receiver:before{
            content: "";
            width: 0px;
            height: 0px;
            display: block;
            position: absolute;
            top: 0px;
        }
        .common.sender:before{
            border-left: 5px solid transparent;
            border-right: 5px solid #72b8ff;
            border-top: 5px solid #72b8ff;
            border-bottom: 5px solid transparent;
            left: -10px;
        }
        .common.receiver:before{
            border-left: 5px solid #00D025;
            border-right: 5px solid transparent;
            border-top: 5px solid #00D025;
            border-bottom: 5px solid transparent;
            right: -10px;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <div class="card-header pt-4 d-flex justify-content-center border-0">
                    <h3>Reported Concern detail</h3>
                </div>
                <div class="card-body">
                    @if(isset($concern))
                        <?php
                            $imageList = isset($concern->images) ? explode(", ", $concern->images) : [];
                            $imagePath = asset('public/storage/concerns/client').'/'.$concern->clientId.'/';
                            // dd($concern);
                        ?>
                        <div class="container-fluid mb-1">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="raisedBy">Client Name - Client Code</label>
                                                <input type="text" value="{{ $concern->client_name . ' - ' . $concern->client_username }}" class="form-control" name="raisedBy" readonly />
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="vendorName">Vendor Name - Vendor Code</label>
                                                <input type="text" name="vendorName" value="{{ $concern->vendor_name . ' - ' . $concern->vendor_username }}" class="form-control" id="vendorName" disabled />
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="mapped_marshal">Mapped Marshal</label>
                                                <input type="text" name="mapped_marshal" value="{{ $concern->marshal_name . ' - ' . $concern->marshal_username }}" class="form-control" id="mapped_marshal" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="description">Subject of Concern</label>
                                                <input type="text" name="description" value="{{ $concern->description }}" class="form-control" id="description" disabled />
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="comment">Comment</label>
                                                <textarea class="form-control" id="comment" name="comment" style="resize: none;" rows="2" readonly>{{ $concern->comment }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="d-flex flex-wrap justify-content-center" id="preview">
                                                @forelse($imageList as $imageName)
                                                    <img class="rounded m-2" style="box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.25) !important;" src="{{ $imagePath.$imageName }}" alt="Concerned Images.." width="150" height="100" />
                                                @empty
                                                    <div class="badge badge-info mb-4" style="font-size: 1rem;">No Images</div>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="main-card card my-2 shadow-sm" style="height: 70%;max-height: 400px;border: 2px solid #fff; border-radius: 9px;">
                                        <div class="card-header p-2 border-bottom-0" style="background-color: #efefef !important;border-top-right-radius: 5px;border-top-left-radius: 5px;">
                                            <h5 class="text-center w-100 m-0" style="color: #000;">Discussion Board</h5>
                                        </div>
                                        <div class="card-body p-1" style="height: inherit;">
                                            <div class="flex flex-column px-2" id="allMsg" style="overflow-y: scroll;height: 100%;">
                                                <?php
                                                    // dd($concern);
                                                ?>
                                                @forelse($messages as $message)
                                                    <div class="d-flex flex-row px-2 py-1 justify-content-{{ Auth::user()->username !== $message->sender ? 'start' : 'end' }}">
                                                        <div class="common mx-75 {{ Auth::user()->username !== $message->sender ? 'sender' : 'receiver' }}">
                                                            @if(Auth::user()->username !== $message->sender)
                                                                <div class="d-flex flex-row justify-content-start">
                                                                    <span class="text-secondary">{{ $message->sender }}</span>
                                                                </div>
                                                            @endif
                                                            <span class="text-white {{ Auth::user()->username !== $message->sender ? 'ml-1' : 'mr-3' }}">
                                                                {{ $message->messages }}
                                                            </span>
                                                            <div class="d-flex flex-row justify-content-end ml-2">
                                                                <small class="text-muted">{{ date('dM H:i', strtotime($message->created_at)) }}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <div class="d-flex flex-row px-2 py-1 justify-content-center">
                                                        <p class="badge" style="background: #efe7e7;color: cadetblue;">No Chats Yet!</p>
                                                    </div>
                                                @endforelse
                                            </div>
                                        </div>
                                        <div class="card-footer p-2" style="background-color: #e8e8e887 !important;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;">
                                            <div class="input-group" title="Not Working Right Now.">
                                                <div class="input-group-prepend mx-1">
                                                    <span class="input-group-text rounded" id="smile">
                                                        <i class="fa fa-smile-o" aria-hidden="true"></i>
                                                    </span>
                                                </div>
                                                <div class="form-control" id="concern_msg" dir="ltr" spellcheck="false" data-text="Enter your message..." contenteditable="true" style="border-radius: 4px; overflow-y: hidden; cursor: text; color: dimgray;"></div>
                                                <?php $newurl = url('message/concern'); ?>
                                                <div class="input-group-append mx-1" onclick="sendToConcernForm('{{ $concern->id }}', '{{ $concern->status }}', '{{ $newurl }}')">
                                                    <span class="input-group-text rounded" id="send">
                                                        <i class="fa fa-send" aria-hidden="true"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex justify-content-center">
                            <a href="{{ url()->previous() }}" class="btn btn-secondary font-weight-bolder mx-3">Back</a>
                            <a href="{{ url()->previous() }}" class="btn btn-info font-weight-bolder mx-3">Export as PDF</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection