@extends('layout.store_layout.master')
@section('content')
    <!--begin::Products-->
    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <form id="search_form">
                    <div class="d-flex align-items-center position-relative my-1">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                        <span class="svg-icon svg-icon-1 position-absolute ms-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                      transform="rotate(45 17.0365 15.1223)" fill="currentColor"/>
                                <path
                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                    fill="currentColor"/>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <input type="hidden" name="per_page" value="{{request()->get('per_page',10)}}" id="per_page">
                        <input type="hidden" name="status" value="{{request()->get('status','all')}}" id="status">
                        <input type="text" name="q" data-kt-ecommerce-product-filter="search" value="{{request()->get('q')}}"
                               class="form-control form-control-solid w-250px ps-14 search-field" placeholder="@lang('super_admin.search')"/>
                        <span>
                           <button type="submit" class="btn btn-icon btn-xs btn-light-primary me-2 search-btn">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                      transform="rotate(45 17.0365 15.1223)" fill="currentColor"/>
                                <path
                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                    fill="currentColor"/>
                            </svg>
                           </button>
                       </span>
                    </div>
                </form>
                <!--end::Search-->
            </div>
            <!--end::Card title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                <div class="w-100 mw-200px">
                    <!--begin::Select2-->

                    <select class="form-select form-select-solid" id="status_filter" data-control="select2" data-hide-search="true"
                            data-placeholder="{{__('super_admin.select ...')}}" data-kt-ecommerce-product-filter="status">
                        <option value="all" {{request()->get('status','all') == 'all' ||is_null( request()->get('status'))?'selected':''}}>{{__('super_admin.all')}}</option>
                        <option value="activated" {{!is_null( request()->get('status')) && request()->get('status') == 'activated' ? 'selected':''}}>{{__('super_admin.enabled')}}</option>
                        <option value="deactivated" {{!is_null( request()->get('status')) && request()->get('status') == 'deactivated' ? 'selected':''}}>{{__('super_admin.disabled')}}</option>
                    </select>
                    <!--end::Select2-->
                </div>
                <div class="w-100 mw-150px">
                    <a href="#" class="form-select form-select-solid text-nowrap" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        {{ __('super_admin.procedures') }}
                    </a>
                    <!--begin::Menu-->
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">


                        <div class="menu-item px-3">
                            <a href="javascript:;" class="menu-link px-3 DoAction"
                               data-url="{{route('super_admin.system_pages.activate')}}"
                               data-token="{{  csrf_token() }}">
                                <i class="fas fa-unlock fs-8"></i>
                                <span class="px-3">{{__('super_admin.activated')}}</span>
                            </a>
                        </div>
                        <div class="menu-item px-3">
                            <a href="javascript:;" class="menu-link px-3 DoAction"
                               data-url="{{route('super_admin.system_pages.deactivate')}}"
                               data-token="{{  csrf_token() }}">
                                <i class="fas fa-lock  fs-8"></i>
                                <span class="px-3">{{__('super_admin.r_active')}}</span>
                            </a>
                        </div>

                    </div>
                    <!--end::Menu-->
                </div>
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                <div class="table-responsive" style=" border-radius: 12px;">
                    <!--begin::Table-->
                    <table class="table text-center align-middle table-row-dashed fs-6 gy-5" id="categories_table">
                        <!--begin::Table head-->
                        <thead>
                        <!--begin::Table row-->
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0" style=" background: #f1f9ff;">
                            <th class="text-center w-10px pe-2 pr-10">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true"
                                           data-kt-check-target="#categories_table .form-check-input.selector"
                                           value="1"/>
                                </div>
                            </th>
                            <th class="text-center min-w-200px">@lang('general.title')</th>
                            <th class="text-center min-w-100px">@lang('admin.last_update_date')</th>
                            <th class="text-center min-w-100px">@lang('general.status')</th>
                            <th class="text-center min-w-70px">@lang('general.operations')</th>
                        </tr>
                        <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="fw-semibold text-gray-600">
                        @forelse($items as $item)
                            <tr id="TR_{{$item->id}}">
                                <td class="text-center pr-10">
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input selector CheckedItem" type="checkbox" value="{{$item->id}}"/>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex align-items-center pr-10">
                                        <div class="ms-5">
                                            <a href="{{ route('super_admin.system_pages.edit',[$item]) }}" class="text-gray-800 text-hover-primary fs-5 fw-bold"
                                               data-kt-ecommerce-product-filter="product_name">{{$item->name }}</a>
                                        </div>

                                    </div>
                                </td>
                                <td class="text-center">
                                    {{getFormattedTime($item->updated_at ?? $item->created_at)}}
                                </td>
                                <td class="text-center" data-order="Inactive">
                                    @if($item->status == 1)
                                        <span class="badge badge-light-success fs-7 fw-bold">@lang('super_admin.enabled')</span>
                                    @else
                                        <span class="badge badge-light-danger fs-7 fw-bold">@lang('super_admin.disabled')</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="{{ route('super_admin.system_pages.edit',[$item]) }}" class="btn btn-sm btn-light btn-active-light-primary text-nowrap">
                                            <i class="fas fa-pen fs-4"></i>
                                        </a>
                                    </div>

                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">
                                    @lang('super_admin.data_empty')
                                </td>
                            </tr>
                        @endforelse

                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <!--end::Table-->
                </div>
            </div>
            @include('pages.store_admin.general_partials.custom_pagination',['items'=>$items])


        </div>
        <!--end::Card body-->
    </div>

@endsection
@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>

    <script>
        $(document).ready(function(){
            $('#page_filter').on('change',function(){
                var value = $(this).val();
                $('#per_page').val(value);
                $('#search_form').submit();
            });
            $('#status_filter').on('change',function(){
                var value = $(this).val();
                $('#status').val(value);
                $('#search_form').submit();
            });

        })

    </script>
@endpush