@extends('layouts.conversion.app')
@push('style')
    <link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
    <link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
    <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@endpush

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 order-2 order-lg-1">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{$title}}</h5>
                    </div>
                    <div class="card-body" id="vertical-example" style="height: calc(100vh - 260px); overflow-y:auto">
                        <ul class="d-flex flex-column flex-wrap p-0 m-0">
                            @foreach ($replies as $reply)
                                <li class="d-flex mb-3 w-100 flex-wrap {{$reply->user ? 'justify-content-end' : 'justify-content-start'}}">
                                    <div class="{{$reply->user ? 'bg-label-primary' : 'bg-label-secondary'}} rounded-3 text-white message-w  p-2 position-relative">
                                        <div class="d-flex justify-content-between w100">
                                            <span class="badge bg-primary text-white">{{$reply->user ? $reply->user->name : $clientName}}</span>
                                            <span class="badge bg-success text-white">{{$reply->received_at}}</span>
                                        </div>
                                        <div class="message-content d-flex justify-content-between align-items-center pt-2">
                                            <span>
                                                {{$reply->message}}
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 order-1 order-lg-2 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0">Reply</h5>
                        <div class="actionButtons">
                            <a href="#" class="btn btn-sm btn-icon rounded-circle btn-primary"  data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-original-title="Teliqon"><i class="ti ti-phone-call"></i></a>
                            <a href="#" class="btn btn-sm btn-icon rounded-circle btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-warning" data-bs-original-title="MMD"><i class="ti ti-phone-call"></i></a>
                            <a href="#" class="btn btn-sm btn-icon rounded-circle btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-original-title="Send Mail"><i class="ti ti-mail"></i></a>
                            <a href="#" class="btn btn-sm btn-icon rounded-circle btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" data-bs-original-title="See Stats"><i class="ti ti-chart-pie"></i></a>
                            <a href="#" class="btn btn-sm btn-icon rounded-circle btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-secondary" data-bs-original-title="Login as Client"><i class="ti ti-login"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{route('conversion.messages.reply')}}" method="POST">
                            @csrf
                            <input type="text" name="messageId" value="{{$message->id}}" hidden>
                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Write a message here" id="message" name="message" style="height: 100px;"></textarea>
                                <label for="message">Message</label>
                            </div>
                            <div class="col-12 mt-2 text-end">
                                <button type="submit" class="btn btn-sm btn-success"><i class="ti ti-send me-2"></i>Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script src="/assets/vendor/libs/select2/select2.js"></script>



<script src="/assets/js/forms-selects.js"></script>
<script src="/assets/js/cards-actions.js"></script>
<script src="/assets/js/ui-popover.js"></script>
<script src="/assets/vendor/js/sweet.js"></script>

<script src="/assets/js/extended-ui-perfect-scrollbar.js"></script>
@endpush