@extends('backend.layouts.master')
@section('title')
    {{translate('Faq')}}
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">{{ translate('Faqs') }}</h5>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="{{route('faqs.create', ['lang'=>  App::getLocale()])}}" class="btn btn-soft-primary add-btn"><i class="ri-add-line align-bottom me-1"></i>{{translate('Create')}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row h-10 mt-0">
                <div class="col-lg-9"></div>
                <div class="col-lg-3">
                    <form class="app-search d-none d-md-block">
                        <div class="position-relative">
                            <input type="text" class="form-control" placeholder="Search..." autocomplete="off" id="filter" value="">
                            <span class="mdi mdi-magnify search-widget-icon"></span>
                            <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none" id="search-close-options"></span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                    </ul>
                    <div class="table-responsive table-card mb-1">
                        <table class="table table-nowrap align-middle" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{translate('Title')}}</th>
                                    <th>{{translate('Content')}}</th>
                                    <th>{{translate('Status')}}</th>
                                    <th>{{translate('Action')}}</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                                @php
                                    $i = 1;
                                @endphp
                                @if (!$faqs->isEmpty())
                                    @foreach ($faqs as $key => $faq)
                                    <tr>
                                        <td class="count">{{ ($key+1) + ($faqs->currentPage() - 1)*$faqs->perPage() }}</td>
                                        
                                        <td>{{ $faq->title }}</td>
                                        <td>{!! translate(substr($faq->content, 0, 30)) !!}</td>
                                        <td class="status">
                                            <div class="form-check form-switch form-switch-secondary">
                                                <input class="form-check-input" onchange="updateStatus(this)" value="{{ $faq->id }}" type="checkbox" role="switch" id="SwitchCheck7" @if($faq->status ==1) checked @endif>
                                                <label class="form-check-label @if($faq->status == 1) text-success @else text-danger @endif" for="SwitchCheck2">@if($faq->status == 1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                    <a href="{{route('faqs.edit', ['faq' => $faq->id, 'lang'=>  App::getLocale()] )}}" class="text-primary d-inline-block edit-item-btn" title="Edit">
                                                        <i class="ri-pencil-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Remove">
                                                    <a class="text-danger d-inline-block remove-item-btn confirm-delete" data-bs-toggle="modal"href="#deleteRecordModal" data-href="{{ route('faqs.delete', $faq->id)}}">
                                                        <i class="ri-delete-bin-5-fill fs-16"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                @endif 
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="pagination-wrap hstack gap-2">
                            <ul class="pagination listjs-pagination mb-0">
                                {{ $faqs->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end col-->
</div>

@include('backend.modals.delete')
@endsection
@section('script')
<script>
    
    // Filter Search
    $(document).ready(function() {
        $("#filter").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#orderTable tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });

    //Update Status
    function updateStatus(el){
        if(el.checked){
            var status = 1;
        }
        else{
            var status = 0;
        }
        $.post('{{ route('faqs.status') }}', {_token:'{{ csrf_token() }}', id:el.value, status:status}, function(data){
            if(data == 1){
                RNS.plugins.notify('success', '{{ ('Status updated successfully') }}');
            }
            else{
                RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
            }
        });
        if(el.checked){
            let sp = el.nextElementSibling.className = 'text-success';
            el.nextElementSibling.textContent = 'Active';
        }else{
            let sp = el.nextElementSibling.className = 'text-danger';
            el.nextElementSibling.textContent = 'Inactive';
        }
    }
</script>

@endsection