@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-->
                <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" data-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="بحث" />
                </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 class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="الحالة" data-filter="status">
                        <option></option>
                        <option value="all">الكل</option>
                        <option value="enabled">مفعل</option>
                        <option value="disabled">معطل</option>
                    </select>
                    <!--end::Select2-->
                </div>
                <!--begin::Add product-->
            <a href="{{route('admin.slider.add')}}" class="btn btn-primary">اضف جديد</a>
            <!--end::Add product-->
            </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">العنوان</th>
                    <th class=" min-w-100px">نص المحتوى</th>
                    <th class=" min-w-100px">نوع المحتوى</th>
                    <th class=" min-w-100px">تاريخ الاضافة</th>
                    <th class=" min-w-100px">الحالة</th>
                    <th class=" min-w-70px">العمليات</th>
                </tr>
                <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="fw-semibold text-gray-600">

                <tr>
                    <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/features-logos/theme-api.png")}}');"></span>
                            </a>
                            <div class="ms-5">
                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" >سلايدر 1</a>
                            </div>
                        </div>

                    </td>
                    <td>هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر.</td>
                    <td>رابط خارجي</td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-search="enabled">
                        <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value="" checked/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </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.slider.edit') }}" class="btn btn-icon btn-sm btn-light-warning">
                                <i class="fas fa-pen fs-4"></i>
                            </a>

                            <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-light-danger">
                                <i class="fas fa-trash fs-4"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <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/features-logos/laravel-guzlle.png")}}');"></span>
                            </a>
                            <div class="ms-5">
                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" >عروض رمضان 2</a>
                            </div>
                        </div>
                    </td>
                    <td>هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر.</td>
                    <td>منتج</td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-search="disabled">
                        <label class="form-check form-switch form-switch-sm  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </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.slider.edit') }}" class="btn btn-icon btn-sm btn-light-warning">
                                <i class="fas fa-pen fs-4"></i>
                            </a>

                            <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-light-danger">
                                <i class="fas fa-trash fs-4"></i>
                            </a>
                        </div>
                    </td>
                </tr>



                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </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: 3 }, // Disable ordering on column 3 (actions)
                ]
            });

            // Re-init functions on datatable re-draws
            // datatable.on('draw', function () {
            //     handleDeleteRows();
            // });
            handleSearchDatatable1();
            handleStatusFilter();
            // 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();
                });
            }



            // Handle status filter dropdown
            function handleStatusFilter() {
                const filterStatus = document.querySelector('[data-filter="status"]');
                $(filterStatus).on('change', e => {
                    let value = e.target.value;
                    if(value === 'all'){
                        value = '';
                    }
                    datatable.column(4).search(value).draw();
                    // console.log(value);
                    // datatable.search(value).draw();
                });
            }


            // display and hidden free shipping city field if option is enabled
            $(document).on('change','.free_shipping_check',function (e) {
                let _this = $(this);
                let field = $('#free_shipping_city');
                if(_this.is(':checked')){
                    field.slideDown();
                }else{
                    field.slideUp();
                }
            });

        })
    </script>
@endpush