@extends('manager.layouts.app')
@section('page_title')
    {{$page_title ?? ''}}
@endsection
@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('admin/datatable/datatables.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            {{-- Page Header --}}
            <x-page-header :title="$p_title" :summary="$p_summary" :url="auth()->user()->can('manager_transaction_faqs-create') ? $url : null" :urlText="$url_text" icon="cil-plus"/>

            {{-- Datatable : Start --}}
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table id="indextable" class="table table-bordered table-striped table-hover w-100 pt-1">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Question</th>
                                    <th>Answer</th>
                                    <th>Order</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            {{-- Datatable : End --}}
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="del-model" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Deletion</h5>
                    <button type="button" class="btn-close shadow-none" data-coreui-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="fw-bold mb-2">Are you sure you want to delete this FAQ?</p>
                    <p class="text-muted small">This action will softly remove the FAQ.</p>
                </div>
                <div class="modal-footer">
                    <form method="POST" id="del-form">
                        @csrf
                        {{method_field('DELETE')}}
                        <button type="button" class="btn btn-light btn-sm" data-coreui-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger btn-sm"><i class="cil-trash me-1"></i>Delete Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-scripts')
    <script type="text/javascript" src="{{ asset('admin/datatable/datatables.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            const routes = {
                show: "{{ route('manager.faqs.show', ':id') }}",
                status: "{{ route('manager.faqs-status', ':id') }}",
                activity: "{{ route('manager.faqs-activity', ':id') }}",
                restore: "{{ route('manager.faqs-restore', ':id') }}"
            };
            $('#indextable').DataTable({ 
                destroy: true, 
                processing: true, 
                serverSide: true, 
                order: [[ 0, "desc" ]],
                ajax: { "url": "{{ route('manager.get.faqs') }}" },
                columns: [
                    { data: 'id' },
                    { data: 'question' },
                    { data: 'answer' },
                    { data: 'sort_order' },
                    { data: 'status' },
                    { data: null, orderable: false, searchable: false },
                ],                
                columnDefs: [
                    {
                        targets: 0,
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                    },
                    {
                        targets: 4,
                        render: (data) => data == '1' ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'
                    },
                    {
                        targets: -1,
                        render: function (data, type, row) {
                            let actions = '<div class="d-flex">';
                            
                            if (!row.deleted_at) {
                                @can('manager_transaction_faqs-restore')
                                    actions += `<a class="me-1" href="${routes.restore.replace(':id', row.id)}"><span class="badge bg-success">Restore</span></a>`;
                                @endcan
                            } else {
                                @can('manager_transaction_faqs-status')
                                    let sColor = row.status == '1' ? 'bg-warning text-dark' : 'bg-success';
                                    let sText = row.status == '1' ? 'Deactivate' : 'Activate';
                                    actions += `<a class="me-1" href="${routes.status.replace(':id', row.id)}"><span class="badge ${sColor}">${sText}</span></a>`;
                                @endcan

                                @can('manager_transaction_faqs-show')
                                    actions += `<a class="me-1" href="${routes.show.replace(':id', row.id)}"><span class="badge bg-primary">Show</span></a>`;
                                @endcan

                                @can('manager_transaction_faqs-edit')
                                    actions += `<a class="me-1" href="${routes.show.replace(':id', row.id)}/edit"><span class="badge bg-info text-dark">Edit</span></a>`;
                                @endcan

                                @can('manager_transaction_faqs-delete')
                                    actions += `<a href="javascript:void(0)" data-url="${routes.show.replace(':id', row.id)}" data-coreui-toggle="modal" data-coreui-target="#del-model"><span class="badge bg-danger">Delete</span></a>`;
                                @endcan
                            }

                            @can('manager_transaction_faqs-activity-log')
                                actions += `<a class="ms-1" href="${routes.activity.replace(':id', row.id)}"><span class="badge bg-dark">Activity</span></a>`;
                            @endcan

                            return actions + '</div>';
                        }       
                    }
                ]
            });
        });
        // Delete Modal logic
        $("#del-model").on('show.coreui.modal', function (e) {
            $(this).find("#del-form").attr('action', $(e.relatedTarget).data("url"));
        });
    </script>
    @if(Session::has('messages'))
        <script> noti({!! json_encode((Session::get('messages'))) !!}); </script>
    @endif
@endpush