@extends('backend.layouts.app')

@section('title', $data['p_heading'])

@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <strong>{{ $data['p_heading'] }}</strong>
                </div>
                <div class="card-body">
                    @if(sizeof($data['faqs']) > 0)
                        <p>{{ $data['p_description'] }}</p>
                        <div id="flashMessage" style="display: none;">
                            <div class="alert alert-success" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <th width="5%">ID</th>
                                        <th width="15%">Name</th>
                                        <th width="15%">Email</th>
                                        <th width="5%">Status</th>
                                        <th width="25%">Question</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                    @foreach($data['faqs'] as $faq)
                                        <tr>
                                            <td>{{ $faq->id }}</td>
                                            <td>{{ $faq->user->first_name .' '. $faq->user->last_name }}</td>
                                            <td>{{ $faq->user->email }}</td>
                                            <td>@if($faq->status == 'P') Pending @else Resolved @endif</td>
                                            <td>{{ str_limit($faq->question, 25) }}</td>
                                            <td>
                                                <a class="btn btn-primary btn-sm edit-faq" data-toggle="modal" data-target="#editFaqModal" data-id="{{ $faq->id }}" ><i class="fa fa-pencil-alt"></i></a>
                                                <form method="POST" style="display: inline-block" action="{{ route('admin.product.faqs.destroy', $faq->id) }}" onsubmit="return window.confirm('Are you sure, you want to delete this record?');">
                                                    @method('DELETE')
                                                    @csrf
                                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="clearfix">
                            <div class="pagination pagination-sm no-margin pull-right">
                                {!! $data['faqs']->render() !!}
                            </div>
                        </div>
                    @else
                        <strong>Sorry!</strong>, no pages found.
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Edit FAQ Modal -->
    <div class="modal fade" id="editFaqModal" tabindex="-1" role="dialog" aria-labelledby="editFaqModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editFaqModalLabel">Repy!</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="updateFaqForm">
                        @csrf
                        @method('POST')
                        <div class="form-group">
                            <label for="question">Question:</label>
                            <input type="text" class="form-control" id="question" name="question" readonly>
                        </div>
                        <div class="form-group">
                            <label for="answer">Answer:</label>
                            <input type="text" class="form-control" id="answer" name="answer">
                            <input type="hidden" class="form-control" id="user_id" name="user_id">
                        </div>
                        <div class="form-group">
                            <label for="status">Status:</label>
                            <select class="form-control" id="status" name="status">
                                <option value="P">Pending</option>
                                <option value="R">Resolved</option>
                            </select>
                        </div>
                        <input type="hidden" id="faq_id" name="id">
                        <button type="submit" class="btn btn-primary">Reply</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $('.edit-faq').click(function() {
                var faqId = $(this).data('id');
                $.ajax({
                    url: "{{ route('admin.product.faqs.edit', ':id') }}".replace(':id', faqId),
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('#faq_id').val(response.faq.id);
                            $('#question').val(response.faq.question);
                            $('#answer').val(response.faq.answer);
                            $('#status').val(response.faq.status);
                            $('#user_id').val(response.faq.user_id);
                            $('#editFaqModal').modal('show');
                        } else {
                            alert('Error: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });

            $('#updateFaqForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: "{{ route('admin.product.faqs.update') }}",
                    type: 'PATCH',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            $('#flashMessage').text(response.message); // Update the flash message
                            $('#editFaqModal').modal('hide'); // Hide the modal
                            $('#flashMessage').show(); // Show the flash message
                            setTimeout(function() {
                                $('#flashMessage').fadeOut('slow'); // Hide the flash message after some time
                            }, 3000); // Adjust the time as needed
                        } else {
                            alert('Error: ' + response.message);
                        }
                        // Remove disabled attribute from all buttons
                        $('button').removeAttr('disabled');
                    },
                    error: function(xhr, status, error) {
                        alert('Error: ' + xhr.responseText);
                        // Remove disabled attribute from all buttons
                        $('button').removeAttr('disabled');
                    }
                });
            });
        });
    </script>
@endsection