@extends('adminlte::page')

@section('title', 'banquet')

@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>Banquet</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">Banquet </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 Banquet</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>Event Date</th>
                                    <th> Event Time</th>
                                    <th> Event Type</th>
                                    <th> No Of Pax</th>
                                    <th> Venue</th> 
                                    <th>Membership No</th> 
                                     <th>Membership Name</th> 
                                     <th>Membership Phone</th> 
                                     <th>Email</th> 
                                     <th>Remarks</th> 
                                     <th>Created At</th> 
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($banquets))
                                @foreach ($banquets as $banquet)
                                <tr>
                                  
                                    <td>{{ optional($banquet->event_date)->format('d-m-Y') }}</td>
                                    <td>{{ $banquet->event_time }}</td>
                                    <td>{{ $banquet->event_type }}</td>
                                    <td>{{ $banquet->no_of_pax }}</td>
                                    <td>{{ $banquet->venue }}</td>
                                    <td>{{ $banquet->membership_no }}</td>
                                    <td>{{ $banquet->membership_name }}</td>
                                    <td>{{ $banquet->membership_phone }}</td>
                                    <td>{{ $banquet->email }}</td>
                                    <td>{{ $banquet->remarks }}</td>
                                    <td>{{ optional($banquet->created_at)->format('d-m-Y') }}</td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                   <th>Event Date</th>
                                    <th> Event Time</th>
                                    <th> Event Type</th>
                                    <th> No Of Pax</th>
                                    <th> Venue</th> 
                                    <th>Membership No</th> 
                                     <th>Membership Name</th> 
                                     <th>Membership Phone</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 banquet 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">banquet 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 banquet Content will be dynamically populated here -->
                <div id="banquet-details-content">
                    <!-- banquet details (like Member Name, Location, Comment) -->
                </div>

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

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

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

        // Populate the modal with the main banquet 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
        $('#banquet-details-content').html(detailsHtml);
        $('#banquet-email').text(email);
        $('#banquet-phone').text(phone);

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

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