@extends('adminlte::page')

@section('title', 'location-review-details')

@section('content_header')
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@stop

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Member Suggestion</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Member Suggestion</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List of Member Suggestion</h3>
                    </div>
                    <!-- <div class="filter-group pl-4 pt-4">
                        <a href="{{ route('admin.locationReviewPage') }}">
                            <button type="button" class="btn btn-primary">Add Location Review Details</button>
                        </a>
                    </div> -->

                    @if (Session::has('error'))
                    <p style="color:red; text-align:center;"><strong>{{ session()->get('error') }}</strong></p>
                    @elseif (session()->has('success'))
                    <h5 class="alert-heading" style="color:green; text-align:center;">Well done !!!</h5>
                    <p style="color:green; text-align:center;"><strong>{{ session()->get('success') }}</strong></p>
                    @endif

                    <div class="card-body">
                        <div class='overflow-auto'>
                            <table id="example" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Suggestion No.</th>
                                        <th>Member Name</th>
                                        <th> Location Name</th>
                                        <th> Review Content</th>
                                        <th> Date</th>
                                        <th> Status</th>
                                        <!-- <th>Visibility</th> -->
                                        <!-- <th>Status</th> -->
                                        <th data-orderable="false">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(!empty($suggestions))
                                    @foreach ($suggestions as $suggestion)
                                    @php
                                        $isOpen = (int) $suggestion->status === 1;
                                        $ageDays = (int) optional($suggestion->created_at)->diffInDays(now());
                                        $openBadgeClass = $ageDays <= 15 ? 'badge-success' : ($ageDays <= 30 ? 'badge-warning' : 'badge-danger');
                                        $statusText = $isOpen ? 'Open' : 'Closed';
                                    @endphp
                                    <tr>
                                        <td>{{ $suggestion->reference_no ?? ('TC/SS/' . optional($suggestion->created_at)->format('Y') . '/' . str_pad((string) $suggestion->id, 4, '0', STR_PAD_LEFT)) }}</td>

                                        <td>
                                            <div>{{ $suggestion->member->name ?? 'N/A' }}</div>
                                        </td>
                                        <td>{{ $suggestion->location->location_name ?? 'N/A'}}</td>
                                        <td>{{ $suggestion->comment }}</td>
                                        <td>{{ optional($suggestion->created_at)->format('d-m-Y') }}</td>
                                        <td>
                                            @if($isOpen)
                                                <span class="badge {{ $openBadgeClass }}">{{ $statusText }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ $statusText }}</span>
                                            @endif
                                        </td>

                                        <!-- <td>
                                        @if ($suggestion['visibility'] == 1)
                                        <span class="badge badge-secondary">public</span>
                                        @else
                                        <span class="badge badge-danger">private</span>
                                        @endif
                                    </td> -->

                                        <!-- <td>
                                        @if ($suggestion['status'] == 1)
                                        <span class="badge badge-success">Active</span>
                                        @else
                                        <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td> -->
                                        <td class="text-center py-0 align-middle">
                                            <div class="btn-group btn-group-sm">
                                                <!-- <a href="{{ route('admin.editLocation', ['id' => $suggestion->id]) }}"
                                                class="edit_notice"><i class="fas fa-edit"></i></a>&nbsp;&nbsp;
                                            <a href="javascript:void(0)" class="status_change"
                                                data-id="{{ $suggestion->id }}"><i
                                                    class="fas fa-exchange-alt"></i></a>&nbsp;&nbsp; -->
                                                <!-- Show Details Button with Icon -->
                                                <button type="button" class="btn btn-info show-details-btn"
                                                    data-reference-no="{{ $suggestion->reference_no ?? '' }}"
                                                    data-member-name="{{ $suggestion->member->name ??  'N/A' }}"
                                                    data-location-name="{{ $suggestion->location->location_name ?? 'N/A' }}"
                                                    data-comment="{{ $suggestion->comment }}"
                                                    data-email="{{ $suggestion->email }}"
                                                    data-phone="{{ $suggestion->contact_us }}"
                                                    data-status="{{ $statusText }}"
                                                    data-created-at="{{ optional($suggestion->created_at)->format('d-m-Y H:i') }}"
                                                    data-open-count="{{ $suggestion->open_count }}"
                                                    data-reply-count="{{ $suggestion->reply_count }}"
                                                    data-closed-count="{{ $suggestion->closed_count }}"
                                                    data-lifecycle='@json($suggestion->lifecycle)'
                                                    data-reply-history='@json($suggestion->reply_history)'
                                                    data-image-one="{{ $suggestion->image_one ? asset('storage/' . $suggestion->image_one) : '' }}"
                                                    data-image-two="{{ $suggestion->image_two ? asset('storage/' . $suggestion->image_two) : '' }}"
                                                    data-image-three="{{ $suggestion->image_three ? asset('storage/' . $suggestion->image_three) : '' }}"
                                                    data-is-reopened="{{ $suggestion->is_reopened }}"
                                                    data-reopen-comment="{{ $suggestion->reopen_comment }}"
                                                    data-reopened-at="{{ optional($suggestion->reopened_at)->format('d-m-Y H:i') }}"
                                                    data-toggle="modal" data-target="#showDetailsModal">
                                                    <i class="fas fa-eye"></i> <!-- Font Awesome Eye Icon -->
                                                </button>

                                                <!-- Reply Through Mail Button with Icon -->
                                                <button type="button" class="btn btn-primary open-email-editor-btn"
                                                    data-id="{{ $suggestion->id }}">
                                                    <i class="fas fa-envelope"></i> <!-- Email Icon -->
                                                </button>

                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @endif
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Suggestion No.</th>
                                        <th>Department Name</th>
                                        <th> Location Name</th>
                                        <th> Review Content</th>
                                        <th> Date</th>
                                        <th> Status</th>
                                        <!-- <th>Visibility</th> -->
                                        <!-- <th>Status</th> -->
                                        <th data-orderable="false">Actions</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal for Show Details -->
<div class="modal fade" id="showDetailsModal" tabindex="-1" role="dialog" aria-labelledby="showDetailsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showDetailsModalLabel">Suggestion Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="suggestion-details-content">
                    <!-- Suggestion Details will be dynamically populated here -->
                </div>
                <!-- Email and Phone -->
                <p><strong>Email:</strong> <span id="suggestion-email"></span></p>
                <p><strong>Phone:</strong> <span id="suggestion-phone"></span></p>
                <p><strong>Status:</strong> <span id="suggestion-status"></span></p>
                <p><strong>Open Count:</strong> <span id="suggestion-open-count"></span></p>
                <p><strong>Reply Count:</strong> <span id="suggestion-reply-count"></span></p>
                <p><strong>Closed Count:</strong> <span id="suggestion-closed-count"></span></p>

                <!-- Images -->
                <div id="suggestion-images">
                    <!-- Images will be appended here -->
                </div>
                <div id="reopen-details" class="mt-3" style="display:none;">
                    <h6 class="text-danger">Reopening Comment:</h6>
                    <p id="modal-reopen-comment" class="p-2 border rounded bg-light"></p>
                </div>
                <div id="lifecycle-details" class="mt-3"></div>
                <div id="reply-history" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Writing Email -->
<div class="modal fade" id="emailEditorModal" tabindex="-1" role="dialog" aria-labelledby="emailEditorModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailEditorModalLabel">Write Email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Text Editor -->
                <textarea id="email-editor" name="email-content"></textarea>

                <!-- File Attachment -->
                <div class="form-group mt-3">
                    <label for="attachment">Attachment</label>
                    <input type="file" class="form-control" id="attachment" name="attachment">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="send-email-btn">
                    <span class="btn-text">Send Email</span>
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>


<style>
    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 54px;
        height: 27px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #24BC4A;
    }

    input:checked+.slider:before {
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>
@stop

@section('js')
@include('admin.locationReviewDetails.scripts.index')
<script>
    $(document).on('click', '.show-details-btn', function () {
        // Get the data attributes from the clicked button
        var referenceNo = $(this).data('reference-no');
        var memberName = $(this).data('member-name');
        var locationName = $(this).data('location-name');
        var comment = $(this).data('comment');
        var email = $(this).data('email');
        var phone = $(this).data('phone');
        var status = $(this).data('status');
        var createdAt = $(this).data('created-at');
        var openCount = $(this).data('open-count');
        var replyCount = $(this).data('reply-count');
        var closedCount = $(this).data('closed-count');
        var lifecycleItems = $(this).data('lifecycle') || [];
        var replyHistoryItems = $(this).data('reply-history') || [];
        var imageOne = $(this).data('image-one');
        var imageTwo = $(this).data('image-two');
        var imageThree = $(this).data('image-three');
        var isReopened = $(this).data('is-reopened');
        var reopenComment = $(this).data('reopen-comment');
        var reopenedAt = $(this).data('reopened-at');

        // Populate the modal with the details
        var detailsHtml = `
            <p><strong>Reference No:</strong> ${referenceNo || 'N/A'}</p>
            <p><strong>Member Name:</strong> ${memberName}</p>
            <p><strong>Location Name:</strong> ${locationName}</p>
            <p><strong>Review Content:</strong> ${comment}</p>
        `;

        // Set the modal content
        $('#suggestion-details-content').html(detailsHtml);
        $('#suggestion-email').text(email);
        $('#suggestion-phone').text(phone);
        $('#suggestion-status').text(status || 'N/A');
        $('#suggestion-open-count').text(openCount ?? 0);
        $('#suggestion-reply-count').text(replyCount ?? 0);
        $('#suggestion-closed-count').text(closedCount ?? 0);

        // Append the images to the modal
        // Append the images to the modal
        var imagesHtml = '<div>';

        if (imageOne && imageOne.trim().length > 0) {
            imagesHtml += `<img src="${imageOne}" class="img-fluid mb-2" style="width:200px; height:auto;">`;
        }
        if (imageTwo && imageTwo.trim().length > 0) {
            imagesHtml += `<img src="${imageTwo}" class="img-fluid mb-2" style="width:200px; height:auto;">`;
        }
        if (imageThree && imageThree.trim().length > 0) {
            imagesHtml += `<img src="${imageThree}" class="img-fluid mb-2" style="width:200px; height:auto;">`;
        }

        imagesHtml += '</div>';

        $('#suggestion-images').html(imagesHtml);

        const lifecycleHtml = lifecycleItems.map((item) => `
            <div class="d-flex justify-content-between align-items-start p-2 border rounded mb-2">
                <div>
                    <strong>${item.label}</strong>
                    <div>${item.details || ''}</div>
                </div>
                <small class="text-muted">${item.date || ''}</small>
            </div>
        `).join('');

        $('#lifecycle-details').html(`<h6>Lifecycle</h6>${lifecycleHtml}`);

        var replyHistoryHtml = '<h6>Reply Trail</h6>';
        replyHistoryItems.forEach(function(item) {
            if (item.type === 'reply') {
                replyHistoryHtml += `
                    <div class="mt-3">
                        <p><strong>${item.title || 'Reply'}:</strong> <small class="text-muted">${item.date || ''}</small></p>
                        <div class="p-2 border rounded bg-light">${item.message || 'No reply content'}</div>
                    </div>
                `;
            } else if (item.type === 'rating') {
                replyHistoryHtml += `
                    <div class="mt-2">
                        <p><strong>${item.title || 'Member Rating'}:</strong> ${'★'.repeat(item.rating || 0)} <small class="text-muted">${item.date || ''}</small></p>
                        <p><strong>Member Comment:</strong> ${item.message || 'No comment provided'}</p>
                        ${item.reopen_requested ? '<p><strong>Action:</strong> Reopened by member</p>' : ''}
                    </div>
                `;
            }
        });

        $('#reply-history').html(replyHistoryHtml);

        if (isReopened == 1) {
            $('#reopen-details').show();
            $('#modal-reopen-comment').text(reopenComment || 'No comment provided');
        } else {
            $('#reopen-details').hide();
        }






    });
</script>

<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<script>
    $(document).ready(function () {
        // Initialize Summernote text editor
        $('#email-editor').summernote({
            height: 300,
            placeholder: 'Write your email here...',
            tabsize: 2,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']]
            ]
        });

        // Open the Email Editor Modal
        $(document).on('click', '.open-email-editor-btn', function () {
            $('#emailEditorModal').modal('show');
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).on('click', '.open-email-editor-btn', function () {
            var suggestionId = $(this).data('id'); // Get the suggestion id from the clicked button

            // Store the suggestion ID in the "Send Email" button (for later use)
            $('#send-email-btn').data('id', suggestionId);

            // Show the modal
            $('#emailEditorModal').modal('show');
        });


        // Handle Email Sending with Attachment
        $(document).on('click', '#send-email-btn', function () {
            var emailContent = $('#email-editor').summernote('code'); // Get content from the editor
            var suggestionId = $(this).data('id');
            var $button = $(this);
            // alert(suggestionId);
            var formData = new FormData();
            formData.append('email_content', emailContent);
            formData.append('suggestion_id', suggestionId);

            // Check if there is a file selected for attachment
            var attachment = $('#attachment')[0].files[0]; // Get the first selected file
            if (attachment) {
                formData.append('attachment', attachment);  // Add the file to FormData
            }

            // Submit the form via AJAX
            $button.prop('disabled', true);
            $button.find('.btn-text').text('Sending...');
            $button.find('.spinner-border').removeClass('d-none');

            $.ajax({
                url: "{{route('admin.sendSuggestionEmail')}}", // Ensure this matches your route
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    alert('Email sent successfully!');
                    $('#emailEditorModal').modal('hide');
                },
                error: function () {
                    alert('Error sending email. Please try again.');
                },
                complete: function () {
                    $button.prop('disabled', false);
                    $button.find('.btn-text').text('Send Email');
                    $button.find('.spinner-border').addClass('d-none');
                }
            });
        });
    });
</script>
@stop