@extends('Frontend.partials.layout')
@section('styles')
    <!-- boostrap select css -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.css') }}">
    <!-- select2 css -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">

    <style>
         #group_list + .select2-container.select2-container--default{
            width: 297px !important;
         } 
         
        .efit-datatable {
            position: relative;
            padding: 25px;
            background-color: #fff;
            border-radius: 5px;
        }
        .efit-datatable .row {
            margin: 0px auto !important;
        }
    
        .efit-datatable .col-sm-12 {
            padding: 0px !important;
        }
        .feedback-text-wrap {
            position: relative;
            padding: 80px;
        }
    
        .feedback-text-wrap svg {
            position: absolute;
            height: 100%;
            width: 100%;
            fill: #c1e8ff;
            left: 0;
            top: 0;
            z-index: 1;
        }
    
        p.feedback-text {
            position: relative;
            z-index: 1;
        }
        
        #feedBackModal .modal-body {
            padding-top: 0px;
            padding-bottom: 30px;
        }
        .feedback-meta {
            position: relative;
            border: 1px solid #c1e8ff;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
    
        h4.feedback-name {
            text-transform: capitalize;
            font-size: 18px;
            margin: 5px auto;
        }
    
        .feedback-view-btn {
            cursor: pointer;
        }
    </style>
@endsection


@section('content')
{{-- user list section --}}
<section class="user-list">
    {{-- analysis content header--}}
    <div class="row">
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{ trans('action.feedback') }}</h2>
                    <p>{{ brandName() }}</p>
                </div>
            </div>
        </div>
    </div>
    {{-- /analysis content header--}}

    {{-- user list table --}}
    <div class="row">
        <div class="col-md-12">
            <div class="add-user-group-button">
                <div class="button-demo">
                    <div class="row justify-content-between align-items-center mx-0">
                        <div class=""> 
                        </div>
                        <div class="">
                            <a href="{{ route('users.users') }}">
                                <button class="btn btn-success ladda-button m-0"  data-style="expand-right">
                                    <span class="ladda-label"><i class="fas fa-user"></i> {{  trans('action.users')}} </span>
                                    <span class="ladda-spinner"></span>
                                    <div class="ladda-progress" style="width: 121px;"></div>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card mt-2">   
                    <div class="col-md-12">
                        <div class="efit-datatable">
                            <table id="feedback_table" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ trans('action.user_name') }}</th>   
                                        <th>{{ trans('action.feedback') }}</th>
                                        <th>{{ trans('action.feedback_from') }}</th>
                                        <th>{{ trans('action.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
             
            </div>

        </div>
    </div>
    {{-- /user list table --}}
    
    
</section>
{{-- /user list section --}}

<!-- Modal -->
<div class="modal fade" id="feedBackModal" tabindex="-1" role="dialog" aria-labelledby="feedBackModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="feedback-box">
            
            <div class="fbox">
                <div class="feedback-text-wrap">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"/></svg>
                    <p class="feedback-text text-center">Curabitur viverra magna nec neque rutrum varius. Integer dictum molestie vehicula. In varius id lectus eget rhoncus. Donec eleifend purus sit amet felis sollicitudin, id consequat lectus porta. Suspendisse in gravida purus. Donec ut metus lacus. Duis sit amet eros magna. Nullam hendrerit felis vitae urna interdum porttitor. Morbi bibendum orci nisi, hendrerit eleifend ante lacinia vel. Quisque id lacinia nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean egestas dignissim libero, eu varius erat sodales ut.</p>
                </div> 
                <div class="feedback-meta">
                    <h4 class="feedback-name">david philips</h4>
                    <a href="#" class="treaturl">{{ trans('action.feedback_url') }}</a>
                </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>

@endsection


@section('scripts')
 <!-- Dependencies -->
 <script src="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
 <!-- select2 js -->
 <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>

 <script>
     var products_id = []
     var submenus_id = []
     $(document).ready(function(){
 
         
        $('#feedback_table').DataTable({
                ajax: {
                    url: "{{ route('users.feedback') }}", // Removed the slash in the route name
                },
                autoWidth: true,
                serverSide: true,
                pageLength: 25,
                ordering: true,
                searching: true,
                processing: true,
                paging: true,
                pagingType: 'full_numbers',
                columns: [
                    { 
                        data: 'user_id', 
                        name: 'user_id', 
                        searchable: true,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).addClass('user-name');
                        }
                    },
                    { 
                        data: 'feedback', 
                        name: 'feedback', 
                        searchable: true,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).addClass('feedback');
                        }
                    },
                    { 
                        data: 'url', 
                        name: 'url', 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).addClass('url');
                        }
                    },
                    { 
                        data: 'action', 
                        name: 'action', 
                        searchable: false 
                    },
                ],
            });

        

       
       
    });
    $(document).on('click', '.feedback-view-btn', function () {
            var $row = $(this).closest('tr');

            // Find and access the specific <td> elements within the row
            var userName = $row.find('.user-name').text();
            var feedback = $row.find('.feedback').text();
            var url = $row.find('.url').text();

            $('.feedback-text').html(feedback);
            $('.feedback-name').html(userName);
            // $('.treaturl').attr('href', url);
            $('.treaturl').attr('href', url);
            
        
        
            console.log("User Name: " + userName);
            console.log("Feedback: " + feedback);
            console.log("URL: " + url);
        });
</script>

@endsection