@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"  action="{{request()->fullUrl()}}">
                    <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('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>
                </form>
                <!--end::Search-->
            </div>
            <!--end::Card title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">

            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="cs_datatable">
                <!--begin::Table head-->
                <thead>
                <!--begin::Table row-->
                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                    <th class="text-start min-w-200px">@lang('general.screen')</th>
                    <th class=" min-w-100px">@lang('general.content_text')</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">
                                <div class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url({{asset($item->imageUrl)}});"></span>
                                </div>
                                <div class="ms-5">
                                    <div class="text-gray-800 text-hover-primary fs-5 fw-bold" >{{$item->title}}</div>
                                </div>
                            </div>

                        </td>
                        <td>{{$item->description}}</td>
                        <td class="">
                            <div class="btn-group">
                                <a href="{{ route('admin.intro_screens.edit',['item'=>$item->id]) }}" class="btn btn-icon btn-sm btn-light-warning">
                                    <i class="fas fa-pen fs-4"></i>
                                </a>
                            </div>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="6" class="text-center">
                            @lang('admin.no_data_found')
                        </td>
                    </tr>
                @endforelse




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


    <!--begin::Modal - shipping methods configuration-->
    <div class="modal fade" id="cs_modal_config" 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">

                    <form action="">
                        <div class="mb-10 fv-row">
                            <label class="required form-label">مدينة الشحن الداخلي</label>
                            {{-- multiple="multiple" --}}
                            <select class="form-select mb-2"  data-control="select2" data-hide-search="false" data-placeholder="اختر">
                                <option></option>
                                <option value="1">الرياض</option>
                                <option value="2">جدة</option>
                                <option value="3">مكه</option>
                            </select>
                        </div>
                        <div class="mb-10 fv-row">
                            <label class="required form-label">سعر التوصيل الداخلي</label>
                            <input type="text" name="internal_shipping_price" class="form-control mb-2" placeholder="سعر التوصيل الداخلي" value="" />
                        </div>
                        <div class="mb-10 fv-row">
                            <label class="required form-label">سعر التوصيل الخارجي</label>
                            <input type="text" name="external_shipping_price" class="form-control mb-2" placeholder="سعر التوصيل الخارجي" value="" />
                        </div>

                        <div class="fv-row mb-10">
                            <label class="form-label"> التوصيل المجاني</label>
                            <div class="form-check form-check-custom form-check-solid mb-2">
                                <input class="form-check-input free_shipping_check"  type="checkbox" value="" />
                                <label class="form-check-label">متاح</label>
                            </div>
                            <div class="text-muted fs-7">تفعيل أو تعطيل التوصيل المجاني.</div>
                        </div>

                        <div class="mb-10 fv-row" id="free_shipping_city" style="display: none;">
                            <label class="required form-label">مدينة التوصيل المجاني</label>
                            {{-- multiple="multiple" --}}
                            <select class="form-select mb-2"  data-control="select2" data-hide-search="false" data-placeholder="اختر">
                                <option></option>
                                <option value="1">الرياض</option>
                                <option value="2">جدة</option>
                                <option value="3">مكه</option>
                            </select>
                        </div>
                        <div class="justify-content-end d-flex align-items-center">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
                            <button type="button" class="btn btn-primary ms-2">حفظ</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!--end::Modal - shipping methods configuration-->

    <!--begin::Modal - shipping methods - 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>طريقة الشحن 2</td>
                            </tr>
                            <tr>
                                <th>مدينة الشحن الداخلي</th>
                                <td>الرياض</td>
                            </tr>
                            <tr>
                                <th>سعر الشحن الداخلي</th>
                                <td>15 ريال</td>
                            </tr>
                            <tr>
                                <th>سعر الشحن الخارجي</th>
                                <td>20 ريال</td>
                            </tr>
                            <tr>
                                <th>الشحن المجاني</th>
                                <td><span class="badge badge-light-success fs-7 fw-bold">مفعل</span></td>
                            </tr>
                            <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/features-logos/laravel-guzlle.png') }}" class="img-thumbnail" alt="image">
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal - shipping methods - 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: 2 }, // Disable ordering on column 3 (actions)
                ]
            });

            // Re-init functions on datatable re-draws
            // datatable.on('draw', function () {
            //     handleDeleteRows();
            // });
            handleSearchDatatable1();
            // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
            function handleSearchDatatable1() {
                const filterSearch = document.querySelector('[data-table-filter="search"]');
                filterSearch.addEventListener('keyup', function (e) {
                    // alert('pass '+e.target.value);
                    datatable.search(e.target.value).draw();
                });
            }

        })
    </script>
@endpush