@extends('layouts.app')

@section('title', $thread->subject)

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Message: {{ $thread->subject }}</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li><a href="{{ route('messages.index') }}">Messages</a></li>
                        <li>{{ $thread->subject }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="py-5">
            <div class="container px-5">
                <div class="bg-light rounded-0 py-4 px-4 px-md-5 mb-5">
                    <div class="row gx-5 justify-content-center">
                        <div class="col-md-12">
                            <div id="scrollingDiv">
                                @foreach($thread->messages as $message)
                                    <div id="messageWrapper{{ $message->id }}">
                                        <div class="d-flex mb-3">
                                            <img
                                                src="{{ $message->user->getProfilePhotoUrl() }}"
                                                alt="{{ $message->user->first_name ?? '' }} {{ $message->user->last_name ?? '' }}"
                                                class="me-3"
                                                style="width:48px;height:48px;"
                                            />
                                            <div>
                                                <p class="fw-bold">{{ $message->user->first_name.' '.$message->user->last_name }}
                                                    <small class="text-muted">Posted {{ $message->created_at->diffForHumans() }}</small>
                                                </p>
                                                <p>
                                                    <span id="{{ $message->id }}">{{ $message->body }}</span>
                                                    <div class="float-right">
                                                        {{-- <a href="#" class="replyMessageButton" data-id="{{ $message->id }}">Reply</a> --}}
                                                        @if($message->user->id == Auth::id())
                                                        <a href="#" data-bs-toggle="modal" data-bs-target="#messageModal{{ $message->id }}">Edit</a>
                                                        | <a href="#" class="deleteMessageButton" data-id="{{ $message->id }}">Delete</a>
                                                        @endif
                                                    </div>
                                                </p>
                                            </div>
                                        </div>
                                        <form name="deleteMessageForm{{ $message->id }}" method="post" action="{{ route('messages.destroyMessage', $message->id) }}">
                                            @csrf
                                            @method('delete')
                                        </form>
                                        <div class="modal fade" id="messageModal{{ $message->id }}" tabindex="-1" aria-labelledby="messageModal{{ $message->id }}Label" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="messageModal{{ $message->id }}Label">Edit Message</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <form action="{{ route('messages.updateMessage', $message->id) }}" name="editMessageForm" method="post">
                                                        @method('put')
                                                        @csrf
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <label for="message{{ $message->id }}" class="d-none"></label>
                                                                        <textarea name="message"
                                                                            id="message{{ $message->id }}"
                                                                            class="form-control messageTextArea" rows="5">{{ $message->body }}</textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-primary">Save Message</button>
                                                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <hr />
                            <div class="col-md-12">
                                <form action="{{ route('messages.update', $thread->id) }}" method="POST">
                                    @method('put')
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="reply" class="form-label">Reply:</label>
                                                <textarea name="reply" id="reply" rows="3" class="form-control">{{ old('reply') }}</textarea>
                                            </div>
                                            <button type="submit" class="btn btn-primary mt-2 rounded-0">Submit Reply</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('styles')
<style>
    #scrollingDiv {
        height: 400px;
        overflow-y: auto;
    }
</style>
@endpush

@push('scripts')
    {{-- <script src="https://cdn.tiny.cloud/1/f9fooujhh9num7f3plm9xaryp3zm6t3293xran7y9llobace/tinymce/6/tinymce.min.js"></script> --}}
    <script>
        // tinymce.init({
        //     selector: '#message',
        //     plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount linkchecker',
        //     toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
        // });

        $(document).on('submit', 'form[name="editMessageForm"]', function(event) {
            event.preventDefault();

            $.ajax({
                type: 'post',
                url: $(this).attr('action'),
                data: $(this).serialize(),
            }).done(function(response) {
                console.log(response);
                $('span#'+response.id).html(response.body);
                bootstrap.Modal.getInstance(document.getElementById('messageModal'+response.id)).hide();
            }).fail(function(error) {
                console.log(error);
            });
        });

        $(document).on('click', '.deleteMessageButton', function(event) {
            event.preventDefault();
            let id = $(this).attr('data-id');
            Swal.fire({
                title: "Are you sure?",
                text: "Are you sure you want to delete this message? You will not be able to revert!",
                icon: "warning",
                buttons: true,
                showCancelButton: true,
            }).then(function(result) {
                if (result.value === true) {
                    $("form[name='deleteMessageForm" + id + "']").submit();
                }
            });
        });
    </script>
@endpush