@extends('layout.store_layout.master')
@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="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>
                <!--begin::Add product-->
                {{--<a href="{{route('admin.pages.add')}}" class="btn btn-primary">اضف جديد</a>--}}
                <!--end::Add product-->
            </div>
            <!--end::Card toolbar-->
        </div>
    </form>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body ">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5"
               id="fabric_textures_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="min-w-200px">@lang('admin.title')</th>
                <th class=" min-w-100px">@lang('admin.last_update_date')</th>
                <th class=" min-w-70px">@lang('admin.actions')</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>
                        <div class="d-flex align-items-center">
                            {{--<a href="#" class="symbol symbol-50px">--}}
                                {{--<span class="symbol-label" style="background-image:url('{{asset("assets/media//stock/ecommerce/71.gif")}}');"></span>--}}
                            {{--</a>--}}
                            <div class="ms-5">
                                <a href="{{ route('admin.pages.edit',[$item]) }}" class="text-gray-800 text-hover-primary fs-5 fw-bold" >{{$item->title}}</a>
                            </div>
                        </div>

                    </td>
                    <td class="">
                        {{getFormattedTime(optional($item->store_page)->updated_at ?? $item->created_at)}}
                    </td>
                    <td class="">
                        <div class="btn-group">
                            {{--<a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-light-primary ">--}}
                                {{--<i class="fas fa-eye fs-4"></i>--}}
                            {{--</a>--}}
                            <a href="{{ route('admin.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('admin.no_data_found')
                    </td>
                </tr>
            @endforelse




            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>


<!--begin::Modal - category - show-->
<div class="modal fade" id="cs_modal_show" tabindex="-1" aria-hidden="true">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--begin::Modal title-->
                <h2>عرض التفاصيل</h2>
                <!--end::Modal title-->
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>

            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-row-bordered table-striped" >
                        <tbody>
                        <tr>
                            <th>العنوان</th>
                            <td>عن التطبيق</td>
                        </tr>
                        <tr>
                            <th>تاريخ الاضافه</th>
                            <td>01-01-1111</td>
                        </tr>
                        <tr>
                            <th>تاريخ اخر تعديل</th>
                            <td>01-01-1111</td>
                        </tr>
                        <tr>
                            <th>الحالة</th>
                            <td><span class="badge badge-light-success fs-7 fw-bold">مفعل</span></td>
                        </tr>
                        <tr>
                            <th>الايقونة </th>
                            <td>
                                <div class="symbol symbol-100px">
                                    <img src="{{ asset('assets/media//stock/ecommerce/72.gif') }}" class="img-thumbnail" alt="image">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - category - show-->

@endsection

@push('custom_js')
    <script>
        var table = '#cs_datatable';
        var datatable;
        $(document).ready(function(){
            table = '#cs_datatable';
            // table = document.querySelector('#kt_ecommerce_category_table');
            // Init datatable --- more info on datatables: https://datatables.net/manual/
            datatable = $(table).DataTable({
                "info": false,
                'order': [],
                'pageLength': 10,
                'columnDefs': [
                    //{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
                    { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
                ]
            });

        })
    </script>
@endpush