@extends('layout.store_layout.master')
@push('custom_css')
    <style>
        .cs-card .badge{
            position: absolute;
            top:8px;
            left: 8px;
        }
        .cs-card .symbol{
            position:absolute;
            left:8px;
            bottom: 8px;
        }
    </style>
@endpush
@section('content')
    <!--begin::Products-->
    <div class="card card-flush">
        <!--begin::Card header-->
        <form id="search_form" action="{{request()->fullUrl()}}">
        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->

                    <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="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('general.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>

                <!--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-150px">
                    <!--begin::Select2-->
                    <select name="type" id="type_filter" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="نوع الجيب" data-filter="type">
                        <option value="all" {{request()->get('type','all') == 'all' ||is_null( request()->get('type'))?'selected':''}}>
                            @lang('admin.filter_by_type')
                        </option>
                        @foreach($pocketTypes as $type)
                            <option value="{{ $type->getKey() }}" {{!is_null( request()->get('type')) && request()->get('type') == $type->getKey() ? 'selected':''}}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                    <!--end::Select2-->
                </div>
                <div class="w-100 mw-200px">
                    <!--begin::Select2-->

                    <select name="status" class="form-select form-select-solid" id="status_filter" data-control="select2"
                            data-hide-search="true"
                            data-placeholder="الحالة" data-kt-ecommerce-product-filter="status">
                        <option value="all" {{request()->get('status','all') == 'all' ||is_null( request()->get('status'))?'selected':''}}>
                            @lang('admin.filter_by_status')
                        </option>
                        <option value="activated" {{!is_null( request()->get('status')) && request()->get('status') == 'activated' ? 'selected':''}}>
                            @lang('admin.active')
                        </option>
                        <option value="deactivated" {{!is_null( request()->get('status')) && request()->get('status') == 'deactivated' ? 'selected':''}}>
                            @lang('admin.inactive')
                        </option>
                    </select>
                    <!--end::Select2-->
                </div>

            </div>
            <!--end::Card toolbar-->
        </div>
        </form>
        <!--end::Card header-->
    </div>
    <div class="row gb-5 mt-5">

        @forelse($items as $item)
            <div class="col-lg-2 mb-3">
                <div class="card cs-card" id="item_{{$item->getKey()}}">
                    <figure class="card-img-top bg-gray-300 mb-0 position-relative">
                        <span class="badge badge-light-danger fs-7 fw-bold">{{ optional($item->pocketType)->name }}</span>
                        <img src="{{ $item->image_url }}" class="img-fluid" >
                        <div class="symbol symbol-75px ">
                            <div class="symbol-label" style="background-image:url('{{ $item->small_image_url }}');background-size: contain;"></div>
                        </div>
                    </figure>

                    <div class="card-body">
                        <h5 class="card-title">{{ $item->name }}</h5>
                        {{--<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>--}}
                        {{--<a href="#" class="btn btn-success btn-sm float-end">@lang('admin.active')</a>--}}
                        <div class="d-flex justify-content-end">
                            <label  class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                <input class="form-check-input js-switch" type="checkbox" value="1" {{ $item->store_form_status ? 'checked' : '' }}  data-id="{{$item->getKey()}}"/>
                                <span class="form-check-label">
                            @lang('admin.activate')
                            </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center text-dark mt-3 fs-3">
                @lang('admin.no_data_found')
            </div>
        @endforelse

    </div>
    <div class="mt-3">
        @include('pages.store_admin.general_partials.custom_pagination',['items'=>$items])
    </div>


@endsection

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

    <script>
        $(document).ready(function () {
            $('body').on('change', '.js-switch', function () {
                let status = $(this).prop('checked') === true ? 1 : 0;
                let elementId = $(this).data('id');
                // let isFrequent = $(this).data('value');
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{ route('admin.pocket_forms.status') }}",
                    data: {'status': status, 'id': elementId},
                    success: function (data) {
                        if(data.success){
                            swal.fire({
                                title: 'تمت العملية بنجاح',
                                // text: data.msg,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            })
                        }
                        console.log(data.message);
                    }
                });
            });

            $('#page_filter,#status_filter,#type_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();
            // });
            // $('#type_filter').on('change', function () {
            //     // var value = $(this).val();
            //     // $('#type').val(value);
            //     $('#search_form').submit();
            // });

        })

    </script>
@endpush