@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-feedback';
    @endphp




    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage Feedback</h6>
                        </div>
                        <div class="col-md-8">
                        </div>
                    </div>


                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn">
                        <form action="{{ route('export-selected-feedback') }}" method="POST" id="restaurant-form">
                            @csrf
                            <input type="hidden" name="all_id" id="all_id" value="all" disabled>
                            <!-- ... existing table and content ... -->
                            <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                <thead class="text-center">
                                    <tr>
                                        <th class="text-start">Sr No.</th>
                                        <th class="text-start">User ID</th>
                                        <th class="text-start">User Name</th>
                                        <th class="text-start">Feedback Type</th>
                                        <th class="text-start">Reactions</th>
                                        <th class="text-start">Comment</th>
                                        <th class="text-start">Date Received</th>
                                        <th class="no-content">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @foreach ($feedback as $feedbacks)
                                        <tr>
                                            <td class="text-start">{{ $loop->iteration }}</td>
                                            <td class="text-start">{{ $feedbacks->principal->id }}</td>
                                            <td class="text-start">{{ $feedbacks->principal->first_name }}
                                                {{ $feedbacks->principal->last_name }}</td>
                                            <td class="text-start">
                                                @if ($feedbacks->is_app_feedback == 1)
                                                    App Feedback
                                                @elseif ($feedbacks->is_restaurant_feedback == 1)
                                                    {{ $feedbacks->restaurant->name }} Restaurant
                                                @else
                                                    Unknown
                                                @endif
                                            </td>

                                            <td class="text-start">
                                                {{ $feedbacks->feedbackReaction->feedback_reaction_title }}</td>
                                            <td>
                                                <a class="view-btn m-0" href="#" data-toggle="modal"
                                                    data-target="#comment-modal" data-ids="{{ $feedbacks->id }}"
                                                    data-comment="{{ $feedbacks->comment }}">View</a>
                                            </td>
                                            <td class="text-start">
                                                {{ \Carbon\Carbon::parse($feedbacks->principal->created_at)->format('m/d/Y') }}
                                            </td>
                                            <td>
                                                <a class="delete_feedback" data-id="{{ $feedbacks['id'] }}"
                                                    style="gap: 7px;" href="" data-toggle="modal"
                                                    data-target="#delete-modal">
                                                    <img width="15"
                                                        src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                    <span>Delete</span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </form>




                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header p-0">
                        <h5 class="modal-title">Comment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <p id="comment-content"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete_feedback_id" name="feedback_id">
                    <p class="modal-text">Are you sure you want to<br>Delete </p>
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn" href="route{{ 'manage_feedback' }}" data-dismiss="modal">No</a>
                        <a type="button" class="download-btn-custom delete_feedback_button" data-dismiss="modal">Yes</a>

                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('section_script')
    <script src="../src/plugins/src/table/datatable/datatables.js"></script>
    <script>
        $('#zero-config').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 10
        });
    </script>

    <script>
        $(document).ready(function() {
            // Create the button element with the correct structure
            var downloadButton = $(
                '<button class="extra-btn width-max-content" id="download_all">Download Overview</button>');

            // Insert the button before the #zero-config_filter label
            downloadButton.insertBefore("#zero-config_filter label");

            // Handle the button click event
            $(document).on("click", "#download_all", function(e) {
                e.preventDefault();
                $('#all_id').prop('disabled', false); // Enable the hidden input
                $('#restaurant-form').submit(); // Submit the form
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.view-btn').click(function() {
                var commentId = $(this).data('ids');
                var commentContent = $(this).data('comment');
                $('#comment-content').text(commentContent); // Ensure correct modal content ID
                $('#comment-modal').modal('show'); // Show the modal
            });
        });
    </script>
    <script>
        $(document).on("click", ".delete_feedback", function() {
            var delete_id = $(this).data('id');
            $('#delete_feedback_id').val(delete_id);
        });

        $(document).on("click", ".delete_feedback_button", function(e) {
            e.preventDefault();
            let base_url = url_path;
            var delete_id = $('#delete_feedback_id').val();
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
            });
            $.ajax({
                type: "POST",
                url: base_url + "/delete_feedback/" + delete_id,
                data: {
                    _method: 'post',
                },
                success: function(response) {
                    console.log(response);
                    toastr.success("Feedback Deleted Successfully");
                    window.location.reload();
                }
            });
        });
    </script>
@endsection
