@extends('layouts.admin_main')

@section('content')
    <div class="content-wrapper">
        <div class="card">
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="pl-3 pt-3">Contact Submissions</h4>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                @if(session('status'))
                    <h5 class="alert alert-success" id="status">{{session('status')}}</h5>
                @endif
                <div id="success_message"></div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Contact Submissions</h3>
                            </div>
                            <div class="card-body">
                                <table id="contact_submissions" class="table table-bordered table-hover dataTable dtr-inline" role="grid">
                                    <thead>
                                        <tr role="row">
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Subject</th>
                                            <th>Message</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal for showing message details and reply -->
    <div class="modal fade" id="contact_modal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-left">Contact Submission Details</h4>
                </div>
                <div class="modal-body">
                    <p><strong>Name:</strong> <span id="modal_name"></span></p>
                    <p><strong>Email:</strong> <span id="modal_email"></span></p>
                    <p><strong>Subject:</strong> <span id="modal_subject"></span></p>
                    <p><strong>Message:</strong> <span id="modal_message"></span></p>

                    <!-- Reply Form -->
                    <form id="reply_form" method="POST" action="{{ route('send_reply') }}">
                        @csrf
                        <div class="form-group">
                            <label for="reply">Your Reply</label>
                            <textarea name="reply" class="form-control" id="ckeditor" rows="5" required></textarea>
                            <input id="editor-container" type="hidden" style="display:none; height: 5px; border: 1px solid #ccc;" hidden></input>
                            <input type="hidden" name="contact_id" id="contact_id">
                        </div>
                        <button type="submit" class="btn btn-primary">Send Reply</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="description_modal" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-left">Full Message</h4>
                </div>
                <div class="modal-body">
                    <p><strong>Message:</strong> <span id="description_message"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function() {
        // Initialize DataTable
        $('#contact_submissions').DataTable({
            "pageLength": 25,
            "order": [[0, 'asc']],
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: "{!! route('all_contacts') !!}",
            columns: [
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'subject', name: 'subject'},
                {
                    data: 'short_description',
                    name: 'short_description',
                    render: function(data, type, row) {

                        // Ensure row.id is passed correctly
                        return '<a href="javascript:void(0)" onclick="view_description(' + row.id + ')">' + data + '</a>';
                    }
                },
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });
    });

    function view_contact(id) {
        $.ajax({
            type: "POST",
            url: '{{ route("view_contact") }}',
            data: {id: id, _token: '{{ csrf_token() }}'},
            dataType: "json",
            success: function(data) {
                $('#modal_name').text(data.name);
                $('#modal_email').text(data.email);
                $('#modal_subject').text(data.subject);
                $('#modal_message').text(data.message);
                $('#contact_id').val(data.id);
                $('#contact_modal').modal('show');
            }
        });
    }

    function view_description(id) {
        {{--  if (!id) {
            alert('Invalid ID');
            return;
        }  --}}

        $.ajax({
            type: "POST",
            url: '{{ route("view_contact") }}',
            data: {id: id, _token: '{{ csrf_token() }}'},
            dataType: "json",
            success: function(data) {
                $('#description_message').text(data.message); // Set the message in the modal
                $('#description_modal').modal('show'); // Show the modal
            },
            error: function(xhr, status, error) {
                console.log("Error: " + error);
            }
        });
    }
</script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/themes/lark.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    let editor;
    ClassicEditor
        .create(document.querySelector('#ckeditor'), {
           ckfinder:{
            uploadUrl:"{{ route('upload',['_token'=>csrf_token()])}}"
           }

        })
        .then(editorInstance => {
            editor = editorInstance;
            editor.model.document.on('change:data', () => {
                document.querySelector('#ckeditor').value = editor.getData();
            });
        })
        .catch(error => {
            console.error('There was a problem initializing CKEditor: ', error);
        });
</script>
@endsection