@extends('layouts.app')
@section('content')

<div class="row">
    <div class="col-md-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Feedback <small>Users</small></h2>
               
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="col-md-12 col-xs-12">
                    <form class="form-horizontal form-label-left input_mask" id="frmfilter" name="frmfilter">
                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Rating</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="filter_rating" name="filter_rating" class="form-control col-md-12 col-xs-12">
                                    <option value="0">Select Rating</option>

                                    @for ($i = 1; $i <= 5; $i++)
                                        <option value="{{ $i }}" {{ old('filter_rating') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor
                                </select>

                            </div>

                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Categories</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="filter_categories" name="filter_categories" class="form-control col-md-12 col-xs-12">
                                    <option value="-1">Select Categories</option>
                                    @if (isset($categories))
                                    @foreach ($categories as $category)
                                  
                                    <option value="{{ $category }}" {{ !empty(old('filter_categories') ) && old('filter_categories') == $category ? 'selected' : '' }}>
                                        {{ $category }}
                                    </option>
                                    @endforeach
                                    @endif
                                </select>

                            </div>

                        </div>
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3 text-center">
                                <button type="button" class="btn btn-primary" id="btn-reset">Cancel</button>
                                <button type="button" class="btn btn-success" id="btn-filter">Apply</button>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="ln_solid"></div>
                    </form>
                </div>
            </div>
            <div class="x_content table-responsive">
                <table id="feedback-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <!-- <th>#</th> -->
                            <th style="width: 2%">Id</th>
                            <th style="width: 10%">User ID</th>
                            <th style="width: 10%">User Name</th>
                            <th style="width: 10%">Rating</th>
                            <th style="width: 10%">Categories</th>
                            <th style="width: 10%">Created At</th>
                            <th style="width: 10%"></th>
                        </tr>
                    </thead>


                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- BEGIN responsive modal-->
<div id="feedbackDescription" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="btn-close" data-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            </div>

        </div>
    </div>
</div>
<!-- END responsive modal-->
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function() {
        var table = $('#feedback-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            pageLength: 50,
            order: [[0, 'desc']],
            ajax: {
                url: '{{ route("feedback.list") }}',
                type: 'POST',
                data: function(d) {
                    d._token = '{{ csrf_token() }}';
                    d.filter_rating = $('#filter_rating').val();
                    d.filter_categories = $('#filter_categories').val();
                }
            },
            columns: [{
                    data: 'iFeedbackID',
                    name: 'iFeedbackID'
                },
                {
                    data: 'iUserID',
                    name: 'iUserID'
                },
                {
                    data: 'vName',
                    name: 'vName',
                },
                {
                    data: 'iRating',
                    name: 'iRating'
                },
                {
                    data: 'vCategories',
                    name: 'vCategories'
                },
                {
                    data: 'dDateCreated',
                    name: 'dDateCreated'
                },
                {
                    data: 'description',
                    name: 'description',
                    orderable: false
                }
            ],
             columnDefs: [{
                targets: '_all',
                orderSequence: ["asc", "desc"]
            }]
        });

        // Apply Filter
        $('#btn-filter').on('click', function() {
            table.ajax.reload();
        });

        // Reset Filter
        $('#btn-reset').on('click', function() {
            $('#filter_rating').val(0);
            $('#filter_categories').val(-1);
            table.ajax.reload();
        });


    });

    // show description

    $('#feedback-table tbody').on('click', '.feedbackdescription', function() {
        var feedback_id = $(this).attr('data-id');
        var user_name = $(this).attr('data-name');

        $.ajax({
            url: "{{ route('userfeedback.getDescription') }}",
            type: 'POST',
            data: {
                feedbackid: feedback_id,
                _token: "{{ csrf_token() }}"
            },
            
            success: function(response) {
                try {
                    var resp = response;
                    $(".modal-title").html(user_name + ' Feedback');
                    $(".modal-body").html('<p class="ow">' + resp.description + '</p>');
                    $('#feedbackDescription').modal('show');
                } catch (error) {
                    console.error("Parsing error:", error);
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", error);
            }
        });
    });
</script>
@endpush