@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="page-breadcrumb d-sm-flex align-items-center mb-3">
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('FAQ List') }}</li>
                        </ol>
                    </nav>
                </div>
                @if(auth()->check() && auth()->user()->hasPermission('faq', 'create'))
                    <div class="ms-auto">
                        <a href="{{ route('admin.faqs.create') }}" class="btn btn-primary">{{ __('Add FAQ') }}</a>
                    </div>
                @endif
            </div>

            <hr />
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                        @if(auth()->user()->hasPermission('faq', 'delete') || auth()->user()->hasPermission('faq', 'edit'))
                            <div class="d-flex align-items-center gap-2">
                                <select id="bulk-action" class="form-select" style="max-width: 220px;">
                                    <option value="">{{ __('Select Bulk Action') }}</option>
                                    @if(auth()->user()->hasPermission('faq', 'edit'))
                                        <option value="activate">{{ __('Activate') }}</option>
                                        <option value="deactivate">{{ __('Deactivate') }}</option>
                                    @endif
                                    @if(auth()->user()->hasPermission('faq', 'delete'))
                                        <option value="delete">{{ __('Delete') }}</option>
                                    @endif
                                </select>
                                <button type="button" class="btn btn-primary" id="apply-bulk-action">{{ __('Apply') }}</button>
                            </div>
                        @else
                            <div></div>
                        @endif

                        <div class="d-flex align-items-center gap-2">
                            <label for="type-filter" class="form-label mb-0 fw-bold">{{ __('Type:') }}</label>
                            <select id="type-filter" class="form-select" style="min-width: 150px;">
                                <option value="">{{ __('All Types') }}</option>
                                <option value="home">{{ __('Home') }}</option>
                                <option value="plan">{{ __('Plan') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="faqs-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="select-all-checkbox-in-table"></th>
                                    <th>#</th>
                                    <th>{{ __('Question') }}</th>
                                    <th>{{ __('Answer') }}</th>
                                    <th>{{ __('Type') }}</th>
                                    <th>{{ __('Position') }}</th>
                                    <th>{{ __('Status') }}</th>
                                    <th>{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @include('includes.commonjs')
        <script>
            $(function() {
                initBulkActionModule({
                    bulkActionUrl: "{{ route('admin.faqs.bulk-action') }}",
                    csrfToken: "{{ csrf_token() }}",
                    namespace: 'faqs-index',
                    tableSelector: '#faqs-table',
                    dataTableOptions: {
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('admin.faqs.index') }}",
                            data: function(d) {
                                d.type = $('#type-filter').val();
                            }
                        },
                        columns: [
                            {
                                data: 'select_checkbox',
                                name: 'select_checkbox',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'question',
                                name: 'question'
                            },
                            {
                                data: 'answer',
                                name: 'answer'
                            },
                            {
                                data: 'type',
                                name: 'type'
                            },
                            {
                                data: 'position',
                                name: 'position'
                            },
                            {
                                data: 'status_toggle',
                                name: 'status_toggle',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'actions',
                                name: 'actions',
                                orderable: false,
                                searchable: false
                            },
                        ]
                    },
                    selectors: {
                        selectAll: '#select-all-checkbox-in-table',
                        rowCheckbox: '.single-checkbox-in-table',
                        bulkActionSelect: '#bulk-action',
                        applyButton: '#apply-bulk-action',
                        singleActionButton: '.single-action-btn',
                        statusToggleButton: '.status-toggle-btn',
                    }
                });

                // Filter by type
                $('#type-filter').on('change', function() {
                    $('#faqs-table').DataTable().ajax.reload();
                });

                // Position change handler
                $(document).on('change', '.position-input', function() {
                    const id = $(this).data('id');
                    const position = $(this).val();

                    $.ajax({
                        url: "{{ route('admin.faqs.update-position') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            position: position
                        },
                        success: function(response) {
                            if (response.success || response.status) {
                                toastr.success(response.message || 'Position updated.');
                                $('#faqs-table').DataTable().ajax.reload(null, false);
                            } else {
                                toastr.error(response.message || 'Failed to update position.');
                            }
                        },
                        error: function() {
                            toastr.error('Failed to update position.');
                        }
                    });
                });
            });
        </script>
    </div>
@endsection