@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-lg-6">
                        <h4 class="card-title mb-0">{{ translate('Adds Details') }}</h4>
                    </div>
                    <div class="col-lg-3 d-flex justify-content-end">
                        <a href="{{ route('adds-banners.create', ['lang'=>  request()->session()->get('locale')]) }}" class="btn btn-outline-warning"><i class="ri-add-line align-bottom me-1"></i>Add New </a>
                    </div>
                    <div class="col-3">
                        <div class="row">
                            <input type="text" id="filter" class="form-control search" placeholder="{{ translate('Search...') }}">
                        </div>
                    </div>   
                </div>
            </div><!-- end card header -->
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table align-middle table-hover table-nowrap" id="myTable">
                        <thead class="table-light">
                            <tr>
                                <th>{{ translate('#') }}</th>
                                <th>{{ translate('Image') }}</th>
                                <th>{{ translate('Position') }}</th>
                                <th>{{ translate('Order') }}</th>
                                <th>{{ translate('Status') }}</th>
                                <th>{{ translate('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="list form-check-all">
                            @if ($banners->count() > 0)
                                @foreach ($banners as $banner)
                                    <tr id="tr_{{ $banner->id }}">
                                        <td class="count">{{ $loop->iteration }}</td>
                                        <td>
                                            @if ($banner->image)
                                                <img class="rounded-circle header-profile-user" src="{{ uploaded_asset($banner->image) }}" alt="Profile">
                                            @endif
                                        </td>
                                        <td>
                                            @if ($banner->position == 'in_question')
                                                {{ translate('In Question') }}
                                            @elseif ($banner->position == 'after_question')
                                                {{ translate('After Question') }}
                                            @elseif ($banner->position == 'after_quiz')
                                                {{ translate('After Quiz') }}
                                            @endif
                                        </td>
                                        <td>
                                            {{ $banner->order }}
                                        </td>
                                        <td class="rtl">
                                            <div class="form-check form-switch form-switch-right form-switch-md">
                                                <input onchange="updateRtl(this)" class="form-check-input" type="checkbox" value="{{ $banner->id }}" @if($banner->status == 1) checked @endif>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <div class="edit">
                                                    <a class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-button" href="{{ route('adds-banners.edit', ['adds_banner' => $banner->id]) }}">
                                                        <i class="las la-edit"></i>
                                                    </a>
                                                </div>

                                                <div class="remove">
                                                    <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#deleteRecordModal" data-href="{{ route('adds-banners.delete', ['id' => $banner->id]) }}"><i class="las la-trash"></i></button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8">No Content Please Create</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>                    
                    <div class="row">
                        <div class="pagination pagination-sm">
                            {{ $banners->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection
@section('script')
<script>
    //update Status
    function updateRtl(el) {
        var status = el.checked ? 1 : 0;
        $.post("{{ route('adds-banners.status') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function (data) {
            if (data == 1) {
                RNS.plugins.notify('success', '{{ __('Question Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }

    //Search Filter
    $(document).ready(function (){
        $("#filter").on("keyup", function() {
            var value =$(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });


</script>
@endsection