@extends('adminlte::page')

@section('title', 'Room Reservation Request')

@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>Room Reservation Request</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">Room Reservation Request </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 Room Reservation Request</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>User Id</th> -->
                                    <th> Reservation For</th>
                                    <th> Affiliated Club Id</th>
                                    <th> Name</th>
                                    <th> Check In Date</th> 
                                    <th>Check Out Date</th> 
                                     <th>Room Type</th> 
                                     <th>No Of Rooms</th> 
                                     <th>No Of Pax</th> 
                                     <th>Membership No</th> 
                                     <th>Contact No</th> 
                                     <th> Email </th> 
                                     <th>Remarks</th> 
                                     <th>Created At</th> 
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($rooms))
                                @foreach ($rooms as $room)
                                <tr>
                                  
                                    <!-- <td>{{ $room->user_id }}</td> -->
                                    <td>{{ $room->reservation_for }}</td>
                                    <td>{{ $room->affiliatedClub->club_name ?? "" }}</td>
                                    <td>{{ $room->name }}</td>
                                    <td>{{ $room->check_in_date }}</td>
                                    <td>{{ $room->check_out_date }}</td>
                                    <td>{{ $room->roomType->name ?? "" }}</td>
                                    <td>{{ $room->no_of_rooms }}</td>
                                    <td>{{ $room->no_of_pax }}</td>
                                    <td>{{ $room->membership_no }}</td>
                                    <td>{{ $room->contact_no }}</td>
                                    <td>{{ $room->email }}</td>
                                    <td>{{ $room->remarks }}</td>
                                    <td>{{ optional($room->created_at)->format('Y-m-d') }}</td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            <!-- <tfoot>
                                <tr>
                                   <th>User Id</th>
                                    <th> Reservation For</th>
                                    <th> Affiliated Club Id</th>
                                    <th> Name</th>
                                    <th> Check In Date</th> 
                                    <th>Check Out Date</th> 
                                     <th>Room Type</th> 
                                     <th>No Of Rooms</th> 
                                     <th>No Of Pax</th> 
                                     <th>Membership No</th> 
                                     <th>Contact No</th> 
                                     <th> Email </th> 
                                     <th>Remarks</th> 
                                     <th>Created At</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 room 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">room 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 room Content will be dynamically populated here -->
                <div id="room-details-content">
                    <!-- room details (like Member Name, Location, Comment) -->
                </div>

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

                <!-- Detailed rooms 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')


<!-- 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 locationName = $(this).data('location-name');
        var date = $(this).data('date');
        var email = $(this).data('email');
        var phone = $(this).data('phone');
        var roomId = $(this).data('room-id'); // Use the room ID here, not suggestion ID
        var normalroom = $(this).data('room'); // The main room (e.g., "Excellent")
        var detailedrooms = $(this).data('detailed-rooms'); // Detailed reviews

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

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

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

        // Populate the Detailed rooms Section (Ambience, Cleanliness, etc.)
        var detailedHtml = '';
        if (detailedrooms && detailedrooms.length > 0) {
            detailedrooms.forEach(function(detail) {
                detailedHtml += `
                    <div class="form-group">
                        <label for="detail-room-${detail.id}">${detail.location_review_detail.review_name}</label><br>
                        <div class="checkbox-group">
                            <label class="checkbox-label"><input type="radio" name="detail-room-${detail.id}" value="excellent" ${detail.review === 'excellent' ? 'checked' : ''}> Excellent</label>
                            <label class="checkbox-label"><input type="radio" name="detail-room-${detail.id}" value="very good" ${detail.review === 'very good' ? 'checked' : ''}> Very Good</label>
                            <label class="checkbox-label"><input type="radio" name="detail-room-${detail.id}" value="good" ${detail.review === 'good' ? 'checked' : ''}> Good</label>
                            <label class="checkbox-label"><input type="radio" name="detail-room-${detail.id}" value="fair" ${detail.review === 'fair' ? 'checked' : ''}> Fair</label>
                            <label class="checkbox-label"><input type="radio" name="detail-room-${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