@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">
<style>
    /* Style for checkboxes in horizontal layout */
    .checkbox-group {
        display: flex;
        flex-wrap: wrap; /* Allows wrapping to the next line if space is limited */
        gap: 10px; /* Adds space between checkboxes */
    }

    .checkbox-group .checkbox-label {
        display: flex;
        align-items: center;
    }

    .checkbox-group input[type="checkbox"] {
        margin-right: 5px; /* Adds space between checkbox and label */
    }

</style>
@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 Ratings</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 Ratings</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 Ratings</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" data-order='[[ 3, "desc" ]]'>
                            <thead>
                                <tr>
                                    <th>Rating Ref No.</th>
                                    <th>Member Name</th>
                                    <th> Location Name</th>
                                    <th> Rating</th>
                                    <th> Date</th>
                                    <!-- <th> Is Replied</th> -->
                                    <!-- <th>Visibility</th> -->
                                    <!-- <th>Status</th> -->
                                    <th data-orderable="false">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($ratings))
                                @foreach ($ratings as $rating)
                                <tr>
                                  
                                    <td>{{ $rating->reference_no ?? ('TC/RS/' . optional($rating->created_at)->format('Y') . '/' . str_pad((string) $rating->id, 4, '0', STR_PAD_LEFT)) }}</td>
                                    <td>{{ $rating->member->name ?? 'N/A' }}</td>
                                    <td>{{ $rating->location->location_name ?? 'N/A'}}</td>
                                    <td>{{ $rating->rating }}</td>
                                    <td data-order="{{ $rating->created_at }}">{{ optional($rating->created_at)->format('Y-m-d H:i:s') }}</td>
                                    <!-- <td>{{ $rating->is_replied == 1 ? 'Yes' : 'No'  }}</td> -->
                                    
                                    <!-- <td>
                                        @if ($rating['visibility'] == 1)
                                        <span class="badge badge-secondary">public</span>
                                        @else
                                        <span class="badge badge-danger">private</span>
                                        @endif
                                    </td> -->

                                    <!-- <td>
                                        @if ($rating['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' => $rating->id]) }}"
                                                class="edit_notice"><i class="fas fa-edit"></i></a>&nbsp;&nbsp;
                                            <a href="javascript:void(0)" class="status_change"
                                                data-id="{{ $rating->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-member-name="{{ $rating->member->name ?? 'N/A' }}"
                                                    data-reference-no="{{ $rating->reference_no ?? ('TC/RS/' . optional($rating->created_at)->format('Y') . '/' . str_pad((string) $rating->id, 4, '0', STR_PAD_LEFT)) }}"
                                                    data-location-name="{{ $rating->location->location_name ?? 'N/A' }}"
                                                    data-comment="{{ $rating->rating }}" 
                                                    data-date="{{ $rating->created_at }}" 
                                                    data-email="{{ $rating->member->email ?? 'N/A' }}"
                                                    data-phone="{{ $rating->member->phone ?? 'N/A' }}"
                                                    data-rating-id="{{ $rating->id }}"  
                                                    data-rating="{{ $rating->rating }}" 
                                                    data-detailed-ratings="{{ json_encode($rating->detailRating) }}"  
                                                    data-toggle="modal" 
                                                    data-target="#showDetailsModal">
                                                <i class="fas fa-eye"></i> <!-- Font Awesome Eye Icon -->
                                            </button>

                                        

                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Rating Ref No.</th>
                                    <th>Member Name</th>
                                    <th> Location Name</th>
                                    <th> Rating</th>
                                    <!-- <th> Is Replied</th> -->
                                    <th> Date</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 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">Send Email</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Show Rating 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">Rating 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">
                <!-- Main Rating Content will be dynamically populated here -->
                <div id="rating-details-content">
                    <!-- Rating details (like Member Name, Location, Comment) -->
                </div>

                <!-- Normal Rating Section -->
                <div class="form-group">
                    <label for="normal-rating">Normal Rating</label>
                    <div id="normal-rating">
                        <!-- Radio buttons for normal rating (Excellent, Very Good, etc.) -->
                    </div>
                </div>

                <!-- Detailed Ratings Section -->
                <div id="detailed-reviews">
                    <!-- Dynamic detailed reviews will be populated here (e.g., Ambience, Cleanliness, etc.) -->
                </div>
            </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 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 imageOne = $(this).data('image-one');
    //     var imageTwo = $(this).data('image-two');
    //     var imageThree = $(this).data('image-three');

    //     // Populate the modal with the details
    //     var detailsHtml = `
    //         <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);

    //     // Append the images to the modal
    //     var imagesHtml = `
    //         <div>
    //             <img src="${imageOne}" alt="Image 1" class="img-fluid mb-2" />
    //             <img src="${imageTwo}" alt="Image 2" class="img-fluid mb-2" />
    //             <img src="${imageThree}" alt="Image 3" class="img-fluid mb-2" />
    //         </div>
    //     `;
    //     $('#suggestion-images').html(imagesHtml);
    // });
</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');
            // 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
            $.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.');
                }
            });
        });
    });

    $(document).on('click', '.show-details-btn', function() {
        // Get the data attributes from the clicked button
        var memberName = $(this).data('member-name');
        var referenceNo = $(this).data('reference-no');
        var locationName = $(this).data('location-name');
        var date = $(this).data('date');
        var email = $(this).data('email');
        var phone = $(this).data('phone');
        var ratingId = $(this).data('rating-id'); // Use the rating ID here, not suggestion ID
        var normalRating = $(this).data('rating'); // The main rating (e.g., "Excellent")
        var detailedRatings = $(this).data('detailed-ratings'); // Detailed reviews

        // alert(JSON.stringify(detailedRatings));

        // Populate the modal with the main rating details
        var detailsHtml = `
            <p><strong>Member Name:</strong> ${memberName}</p>
            <p><strong>Rating Ref No.:</strong> ${referenceNo}</p>
            <p><strong>Location Name:</strong> ${locationName}</p>
            <p><strong>Date:</strong> ${date}</p>
        `;
        
        // Set the modal content
        $('#rating-details-content').html(detailsHtml);
        $('#rating-email').text(email);
        $('#rating-phone').text(phone);

        // Populate the Normal Rating Section (main rating)
        var normalRatingHtml = `
            <label><input type="radio" name="normal-rating" value="Excellent" ${normalRating === 'Excellent' ? 'checked' : ''}> Excellent</label>
            <label><input type="radio" name="normal-rating" value="Very Good" ${normalRating === 'Very Good' ? 'checked' : ''}> Very Good</label>
            <label><input type="radio" name="normal-rating" value="Good" ${normalRating === 'Good' ? 'checked' : ''}> Good</label>
            <label><input type="radio" name="normal-rating" value="Fair" ${normalRating === 'Fair' ? 'checked' : ''}> Fair</label>
            <label><input type="radio" name="normal-rating" value="Poor" ${normalRating === 'Poor' ? 'checked' : ''}> Poor</label>
        `;
        $('#normal-rating').html(normalRatingHtml);

        // Populate the Detailed Ratings Section (Ambience, Cleanliness, etc.)
        var detailedHtml = '';
        if (detailedRatings && detailedRatings.length > 0) {
            detailedRatings.forEach(function(detail) {
                detailedHtml += `
                    <div class="form-group">
                        <label for="detail-rating-${detail.id}">${detail.location_review_detail.review_name}</label><br>
                        <div class="checkbox-group">
                            <label class="checkbox-label"><input type="radio" name="detail-rating-${detail.id}" value="excellent" ${detail.review === 'excellent' ? 'checked' : ''}> Excellent</label>
                            <label class="checkbox-label"><input type="radio" name="detail-rating-${detail.id}" value="very good" ${detail.review === 'very good' ? 'checked' : ''}> Very Good</label>
                            <label class="checkbox-label"><input type="radio" name="detail-rating-${detail.id}" value="good" ${detail.review === 'good' ? 'checked' : ''}> Good</label>
                            <label class="checkbox-label"><input type="radio" name="detail-rating-${detail.id}" value="fair" ${detail.review === 'fair' ? 'checked' : ''}> Fair</label>
                            <label class="checkbox-label"><input type="radio" name="detail-rating-${detail.id}" value="poor" ${detail.review === 'poor' ? 'checked' : ''}> Poor</label>
                        </div>
                    </div>
                `;
            });
        } else {
            detailedHtml = '<p>No detailed reviews available.</p>';
        }
        $('#detailed-reviews').html(detailedHtml);
    });
</script>
@stop