@extends('backend.layouts.app')
@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">Categories</h5>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="{{ route('category.create') }}" class="btn btn-primary add-btn"><i class="ri-add-line align-bottom me-1"></i> Create Category</a>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="{{ route('category.index') }}" method="GET" id="filter_form">
                    <div class="row g-3 justify-content-end">
                        
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="status" onchange="submit_form()">
                                    <option value="" selected>Short By Status</option>
                                    <option value="active" @if(request('status') == 'active') selected @endif>Active</option>
                                    <option value="inactive" @if(request('status') == 'inactive') selected @endif>InActive</option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        {{-- <div class="col-xxl-2 col-sm-2">
                            <div>
                                <select class="form-control rns-selectpicker" name="short_by_order" onchange="submit_form()">
                                    <option value="" selected>Sort By Order Lavel</option>
                                    <option value="high" @if(request('short_by_order') == 'high') selected @endif>Highest</option>
                                    <option value="low" @if(request('short_by_order') == 'low') selected @endif>Lowest</option>
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-xxl-5 col-sm-3">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"placeholder="Type name & Enter..." value="{{ request('search') }}"><i class="las la-search search-icon" ></i>
                            </div>
                        </div>
                        <!--end col-->
                        {{-- <div class="col-xxl-1 col-sm-2">
                            <div>
                                <button type="submit" class="btn btn-primary w-100"> <i class="ri-equalizer-fill me-1 align-bottom"></i>Filters </button>
                            </div>
                        </div>
                        <div class="col-xxl-1 col-sm-2">
                            <div>
                                <button type="reset" class="btn btn-danger w-100"> <i class="ri-equalizer-fill me-1 align-bottom"></i>Reset Filter </button>
                            </div>
                        </div> --}}
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </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 class="text-uppercase">
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Parent Category</th>
                                    <th>Order Level	</th>
                                    <th>Level</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if($categories->isNotEmpty())
                                @foreach($categories as $key => $category)
                                    <tr>
                                        <td class="id">{{ ($key+1) + ($categories->currentPage() - 1)*$categories->perPage() }}</td>
                                        <td><img src="assets/images/products/img-1.png" alt="" class="img-fluid d-block"></td>
                                        <td>{{ $category->getTranslation('name') }}</td>
                                        <td>
                                        @php
                                            $parent = \App\Models\Category::where('id', $category->parent_id)->first();
                                        @endphp
                                        @if ($parent != null)
                                            {{ $parent->getTranslation('name') }}
                                        @else
                                            —
                                        @endif</td>
                                        <td>{{ $category->order_level }}</td>
                                        <td>{{ $category->level }}</td>
                                        <td class="status">
                                            <div class="form-check form-switch form-switch-secondary">
                                                <input class="form-check-input" onchange="updateStatus(this)" value="{{ $category->id }}" type="checkbox" role="switch" id="SwitchCheck7" @if($category->status ==1) checked @endif>
                                                <label class="form-check-label @if($category->status == 1) text-success @else text-danger @endif" for="SwitchCheck2">@if($category->status == 1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                {{-- <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="View">
                                                    <a href="apps-ecommerce-order-details.html" class="text-primary d-inline-block">
                                                        <i class="ri-eye-fill fs-16"></i>
                                                    </a>
                                                </li> --}}
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Edit">
                                                    <a href="{{ route('category.edit', [$category->id,  'lang' => env('DEFAULT_LANGUAGE')]) }}" class="text-primary d-inline-block edit-item-btn">
                                                        <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('category.destroy', $category->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">
                                {{ $categories->appends(request()->input())->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end col-->
</div>
@endsection
@section('modal')

@include('backend.modals.delete')
@endsection
@section('script')
    <script>
         function updateStatus(el){
            if(el.checked){
                var status = 1;
            }
            else{
                var status = 0;
            }
            $.post('{{ route('category.update-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';
            }
        }

        function submit_form(){
            $('#filter_form').submit();
        }
    </script>
@endsection