@extends('Admin.layouts.master')

@section('content')
@php
$currentPage = 'manage-faq';
@endphp
<style>
    .action-buttons {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Adjust the gap as needed */
    }

    .action-buttons .switch-btn {
        display: flex;
        align-items: center;
    }

    .action-buttons a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        /* Ensure the text color matches your theme */
    }

    .action-buttons a img {
        width: 20px;
        /* Adjust the width as needed */
        height: 20px;
        /* Adjust the height as needed */
        margin-right: 5px;
        /* Adjust the spacing between the icon and text */
    }
</style>

<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 FAQ</h6>
                    </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" style="overflow: auto;">
                    <table id="zero-config" class="table dt-table-hover" style="width:100%">
                        <thead class="text-center">
                            <meta name="csrf-token" content="{{ csrf_token() }}">
                            <tr>
                                <th class="text-start">Sr no</th>
                                <th class="text-start">Question</th>
                                <th class="text-start">Answer</th>
                                <th class="text-start">FAQ</th>
                                <th class="text-start">Added Date</th>
                                <th class="no-content">Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-center" id="faq-tbody">
                            @foreach ($faq as $index => $faqs)
                            <tr>
                                <td class="text-start">{{ $index + 1 }}</td>
                                <td class="text-start">{{ $faqs['question'] }}</td>
                                <td class="text-start">
                                    @if (isset($faqs['answers']))
                                    {{ $faqs['answers'] }}
                                    @endif
                                </td>
                                <td class="text-start">
                                    @if($faqs['faq_category_id'] == 1)
                                    Customer
                                    @else
                                    Restaurant
                                    @endif
                                </td>
                                <td class="text-start">
                                    @if (isset($faqs['created_at']))
                                    {{ \Carbon\Carbon::parse($faqs['created_at'])->format('d/m/Y') }}
                                    @endif
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <!-- Active Switch Button -->
                                        <div class="switch-btn">
                                            <input data-id="{{ $faqs['id'] }}" {{ $faqs['is_active'] ? 'checked' : '' }} type="checkbox" class="active_newsletter" id="switch{{ $faqs['id'] }}" switch="bool" />
                                            <label for="switch{{ $faqs['id'] }}" data-on-label="Active" data-off-label="Expired"></label>
                                        </div>

                                        <!-- Edit Button -->
                                        <a href="#" data-toggle="modal" data-target="#edit-faq-modal" class="edit-faq-btn" data-faq-id="{{ $faqs['id'] }}" data-faq-question="{{ $faqs['question'] }}" data-faq-answer="{{ $faqs['answers'] }}" data-faq-category="{{ $faqs['faq_category_id'] }}">
                                            <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                        </a>

                                        <!-- Delete Button -->
                                        <a href="#" class="delete_about" data-faq-id="{{ $faqs['id'] }}" data-toggle="modal" data-target="#delete-modal">
                                            <img src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                        </a>
                                        <input type="hidden" id="delete_about_id">
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add_faq_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">Add FAQ</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row">
                    <form id="store_faq">
                        @csrf
                        <div class="col-md-12 mb-3">
                            <label for="add-faq-question">Question</label>
                            <input id="add_faq_question" name="question" class="form-control" type="text">
                        </div>
                        <div class="col-md-12">
                            <label for="add-faq-answer">Answer</label>
                            <textarea id="add_faq_answer" name="answer" rows="5" cols="50" class="form-control"></textarea>
                        </div>
                        <div class="col-md-12">
                            <label for="add-faq-category">Select Category</label>
                            <select class="form-control input_class w-30 mr-2" name="faq_categ" id="add_faq_category">
                                <option value="">Select</option>
                                <option value="1">Customer</option>
                                <option value="2">Restaurant</option>
                            </select>
                        </div>
                        <button type="submit" id="submit_faq" class="download-btn-custom mt-4 mx-auto w-25">
                            <span>Save</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="edit-faq-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">Edit FAQ</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row">
                    <form id="edit_faq">
                        <div class="col-md-12 mb-3">
                            @csrf
                            <label for="">Question</label>
                            <input class="form-control" name="question" type="text" id="edit-question">
                        </div>
                        <input type="hidden" id="edit-faq-id">
                        <div class="col-md-12">
                            <label for="">Answer</label>
                            <textarea name="answer" id="edit-answer" rows="5" cols="50" class="form-control"></textarea>
                        </div>
                        <div class="col-md-12">
                            <label for="add-faq-category">Select Category</label>
                            <select class="form-control w-30 mr-2 input_class" name="faq_categ" id="edit_faq_category">
                                <option value="">Select</option>
                                <option value="1">Customer</option>
                                <option value="2">Restaurant</option>
                            </select>
                        </div>
                        <button type="submit" id="update_faq" class="download-btn-custom mt-4 mx-auto w-25">
                            <span>Save</span>
                        </button>
                    </form>
                </div>
            </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_about_id" name="about_id">
                <p class="modal-text">Are you sure you ?</p>
                <div class="modal-btn d-flex">
                    <a type="button" class="extra-btn" data-dismiss="modal">Cancel</a>
                    <a type="button" class="download-btn-custom delete_about_button" data-dismiss="modal">Delete</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('section_script')
<script src="{{ asset('public/assets/js/admin/manage_cms/manage_faq/main.js') }}"></script>
<script src="{{ asset('public/assets/js/admin/manage_cms/manage_faq/add_faq.js') }}"></script>
<script src="{{ asset('public/assets/js/admin/manage_cms/manage_faq/edit_faq.js') }}"></script>
<script>
    $(document).ready(function() {
        // Insert Add button
        $('<button><a class="extra-btn width-max-content" data-toggle="modal" data-target="#add_faq_modal" href="">Add</a></button>')
            .insertBefore("#zero-config_filter label");

        // Insert Filter dropdown
        $('<select id="filter" class="form-control"><option value="all">All</option><option value="1">Customer</option><option value="2">Restaurant</option></select>')
            .insertBefore("#zero-config_filter label");

        // Filter FAQ
        $('#filter').on('change', function() {
            var filterValue = $(this).val();
            filterFAQs(filterValue);
        });

        function filterFAQs(filterValue) {
            if (filterValue === "all") {
                $("#faq-tbody tr").show();
            } else {
                $("#faq-tbody tr").each(function() {
                    var category = $(this).find('td:eq(3)').text().trim();
                    if ((filterValue == 1 && category === 'Customer') || (filterValue == 2 && category === 'Restaurant')) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        }
    });
</script>
@endsection
