@extends('layout.store_layout.master')
@section('content')

<div class="card mb-7">
    <div class="card-header card-header-stretch">
        <h3 class="card-title">@lang('general.app_home_customization')</h3>
        <div class="card-toolbar">
            @include('pages.store_admin.app_settings.sections._tabs')
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body pt-0">
        <div class="tab-content">
            <!--begin::Tab pane-->
            <div class="tab-pane fade active show" id="setting_slider_tab">
                <div class="border p-3 rounded-2 d-flex align-items-center my-3 ">
                    <h4>السلايدر</h4>
                    <label class="form-check form-switch form-switch-sm   me-3 ms-auto">
                        <input class="form-check-input" type="checkbox" value="" checked/>
                        <span class="form-check-label">@lang('general.enable')</span>
                    </label>
                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" class="btn btn-sm btn-light-dark" >@lang('general.add_new')</a>
                </div>
                <div class="table-responsive">
                    <table class="table text-center align-middle table-row-dashed fs-6 gy-5" id="cs_table">
                        <thead>
                        <tr class=" text-gray-400 fw-bold fs-7 text-uppercase gs-0"
                            style=" background: #f1f9ff;">
                            <th class="" width="70px"></th>
                            <th class="">البنر</th>
                            <th class="">نوع المحتوى</th>
                            <th class="min-w-80px">الحاله</th>
                            <th class="min-w-70px">الإجراءات</th>
                        </tr>
                        </thead>
                        <tbody class="draggable-zone">
                            <tr id="1" class="draggable">
                                <td class="draggable-handle">
                                    <i class="fas fa-arrows-alt fs-2x"></i>
                                </td>
                                <td>
                                    <div class="symbol symbol-50px">
                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                    </div>
                                </td>
                                <td>
                                    رابط
                                </td>
                                <td >
                                    <span class="badge badge-light-success fs-7 fw-bold">{{trans('admin.active')}}</span>
                                </td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary text-nowrap" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        @lang('admin.settings')
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                      fill="currentColor"/>
                                            </svg>
                                        </span>
                                    </a>

                                    <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="#cs_modal_add_slider" data-bs-toggle="modal" class="menu-link px-3">
                                                <i class="fas fa-pen fs-8"></i>
                                                <span class="px-3">@lang('admin.edit')</span>
                                            </a>
                                        </div>
                                        <div class="menu-item px-3">
                                            <a href="#" data-id="{{'id'}}"
                                               data-skin="dark" data-tooltip="m-tooltip" data-placement="top"
                                               data-url="{{"delete"}}"
                                               data-token="{{csrf_token()}}" class="menu-link px-3 btn-del">
                                                <i class="fas fa-trash fs-8"></i>
                                                <span class="px-3">@lang('admin.delete')</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                            <tr id="2" class="draggable">
                                <td class="draggable-handle">
                                    <i class="fas fa-arrows-alt fs-2x"></i>
                                </td>
                                <td>
                                    <div class="symbol symbol-50px">
                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                    </div>
                                </td>
                                <td>
                                    رابط 2
                                </td>
                                <td >
                                    <span class="badge badge-light-success fs-7 fw-bold">{{trans('admin.active')}}</span>
                                </td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary text-nowrap" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        @lang('admin.settings')
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                      fill="currentColor"/>
                                            </svg>
                                        </span>
                                    </a>

                                    <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="#cs_modal_add_slider" data-bs-toggle="modal" class="menu-link px-3">
                                                <i class="fas fa-pen fs-8"></i>
                                                <span class="px-3">@lang('admin.edit')</span>
                                            </a>
                                        </div>
                                        <div class="menu-item px-3">
                                            <a href="#" data-id="{{'id'}}"
                                               data-skin="dark" data-tooltip="m-tooltip" data-placement="top"
                                               data-url="{{"delete"}}"
                                               data-token="{{csrf_token()}}" class="menu-link px-3 btn-del">
                                                <i class="fas fa-trash fs-8"></i>
                                                <span class="px-3">@lang('admin.delete')</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                            <tr id="3" class="draggable">
                                <td class="draggable-handle">
                                    <i class="fas fa-arrows-alt fs-2x"></i>
                                </td>
                                <td>
                                    <div class="symbol symbol-50px">
                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                    </div>
                                </td>
                                <td>
                                    رابط 3
                                </td>
                                <td >
                                    <span class="badge badge-light-success fs-7 fw-bold">{{trans('admin.active')}}</span>
                                </td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary text-nowrap" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        @lang('admin.settings')
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                      fill="currentColor"/>
                                            </svg>
                                        </span>
                                    </a>

                                    <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="#cs_modal_add_slider" data-bs-toggle="modal" class="menu-link px-3">
                                                <i class="fas fa-pen fs-8"></i>
                                                <span class="px-3">@lang('admin.edit')</span>
                                            </a>
                                        </div>
                                        <div class="menu-item px-3">
                                            <a href="#" data-id="{{'id'}}"
                                               data-skin="dark" data-tooltip="m-tooltip" data-placement="top"
                                               data-url="{{"delete"}}"
                                               data-token="{{csrf_token()}}" class="menu-link px-3 btn-del">
                                                <i class="fas fa-trash fs-8"></i>
                                                <span class="px-3">@lang('admin.delete')</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end::Tab pane-->
            <!--begin::Tab pane-->
            <div class="tab-pane fade " id="setting_sections_tab" >
                sections
            </div>
            <!--end::Tab pane-->
        </div>


    </div>
</div>

<!--begin::Products-->
<div class="card d-none">
    <!--begin::Card header-->
    <div class="card-header ">
        <div class="card-title">
            <h3>تخصيص رئيسية التطبيق</h3>
        </div>
        <div class="card-toolbar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 active" data-bs-toggle="tab" href="#setting_slider_tab"  tabindex="-1">السلايدر</a>
                </li>
                <li class="nav-item" >
                    <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 " data-bs-toggle="tab"  href="#setting_sections_tab" >البنرات والاقسام</a>
                </li>
            </ul>
        </div>
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <div class="tab-content">
            <!--begin::Tab pane-->
            <div class="tab-pane fade active show" id="setting_slider_tab">
                <div class="border p-3 rounded-2 d-flex align-items-center my-3 ">
                    <h4>السلايدر</h4>
                    <label class="form-check form-switch form-switch-sm   me-3 ms-auto">
                        <input class="form-check-input" type="checkbox" value="" checked/>
                        <span class="form-check-label">@lang('general.enable')</span>
                    </label>
                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" class="btn btn-sm btn-light-dark" >@lang('general.add_new')</a>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5 " id="sliders_table">
                        <thead>
                        <tr class="bg-gray-100 text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="">البنر</th>
                            <th class="">نوع المحتوى</th>
                            <th class="min-w-80px">الحاله</th>
                            <th class="min-w-70px">الإجراءات</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                </div>
                            </td>
                            <td>
                                رابط
                            </td>
                            <td 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">
                                    @lang('general.enable')
                                </span>
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" 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="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                </div>
                            </td>
                            <td>
                                رابط
                            </td>
                            <td 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">
                                    @lang('general.enable')
                                </span>
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" 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>
                    </table>
                </div>
            </div>
            <!--end::Tab pane-->
            <!--begin::Tab pane-->
            <div class="tab-pane fade " id="setting_sections_tab" >
                sections
            </div>
            <!--end::Tab pane-->
        </div>


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


<!--begin::Modal - category - show-->
<div class="modal fade" id="cs_modal_add_slider" 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 py-3">
                <!--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">@lang('admin.title')</label>--}}
                        {{--<input type="text" name="title" class="form-control mb-2" placeholder="عنوان" value="" />--}}
                    {{--</div>--}}


                    <div class="fv-row mb-10">
                        <label class="d-block fw-semibold fs-6 mb-5 required">@lang('general.image')</label>
                        <style>
                            .image-input-placeholder { background-image: url('{{asset('/assets/media/svg/files/blank-image.svg')}}'); }
                            [data-theme="dark"] .image-input-placeholder { background-image: url('{{ asset('/assets/media/svg/files/blank-image-dark.svg') }}'); }
                        </style>

                        <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                            <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{ asset('/assets/media/avatars/300-6.jpg') }});"></div>

                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="@lang('general.change_image')">
                                <i class="bi bi-pencil-fill fs-7"></i>
                                <!--begin::Inputs-->
                                <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                <input type="hidden" name="avatar_remove" />
                                <!--end::Inputs-->
                            </label>
                            <!--begin::Cancel-->
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="@lang('general.cancel_image')">
                                    <i class="bi bi-x fs-2"></i>
                                </span>
                            <!--end::Cancel-->
                            <!--begin::Remove-->
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="@lang('general.remove_image')">
                                    <i class="bi bi-x fs-2"></i>
                                </span>
                            <!--end::Remove-->
                        </div>
                        <!--end::Image input-->
                        <!--begin::Hint-->
                        <div class="form-text">@lang('general.allowed_files_types',['types'=>'png, jpg, jpeg'])</div>
                        <!--end::Hint-->
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="required form-label">نوع المحتوى</label>
                        <select class="form-select content_type mb-2"  data-control="select2" data-hide-search="true" data-placeholder="@lang('admin.select')">
                            <option></option>
                            <option value="-1">بدون</option>
                            <option value="1">رابط</option>
                            <option value="2">صفحة</option>
                            <option value="3">قسم رئيسي</option>
                            <option value="4">قسم فرعي</option>
                            <option value="5">قسم تفصيل</option>
                            <option value="6">منتج</option>
                        </select>
                    </div>

                    <style>
                        .option_item{
                            display: none;
                        }
                    </style>
                    <div class="fv-row mb-10 option_item external_link">
                        <label class="required form-label">@lang('admin.the_customer'):</label>
                        <input type="url" class="form-control">
                    </div>
                    <div class="fv-row mb-10 option_item page">
                        <label class="required form-label">الصفحة:</label>
                        <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            <option value="1">صفحة 1</option>
                            <option value="2">صفحة 2</option>
                            <option value="3">صفحة 3</option>
                        </select>
                    </div>
                    <div class="fv-row mb-10 option_item category">
                        <label class="required form-label">قسم رئيسي:</label>
                        <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            <option value="1">قسم 1</option>
                            <option value="2">قسم 2</option>
                            <option value="3">قسم 3</option>
                        </select>
                    </div>
                    <div class="fv-row mb-10 option_item sub_category">
                        <label class="required form-label">قسم فرعي:</label>
                        <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            <option value="1">قسم 1</option>
                            <option value="2">قسم 2</option>
                            <option value="3">قسم 3</option>
                        </select>
                    </div>
                    <div class="fv-row mb-10 option_item tailor_category">
                        <label class="required form-label">قسم تفصيل:</label>
                        <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            <option value="1">قسم 1</option>
                            <option value="2">قسم 2</option>
                            <option value="3">قسم 3</option>
                        </select>
                    </div>
                    <div class="fv-row mb-10 option_item product">
                        <label class="required form-label">منتج:</label>
                        <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            <option value="1">منتج 1</option>
                            <option value="2">منتج 2</option>
                            <option value="3">منتج 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">@lang('general.cancel')</button>
                        <button type="button" class="btn btn-primary ms-2">@lang('general.save')</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<!--end::Modal - category - show-->

<!--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>@lang('admin.show_details')</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>@lang('admin.name')</th>
                            <td>طول 2</td>
                        </tr>
                        <tr>
                            <th>@lang('admin.number_of_products')</th>
                            <td>30</td>
                        </tr>
                        <tr>
                            <th>تاريخ الاضافه</th>
                            <td>01-01-1111</td>
                        </tr>
                        <tr>
                            <th>@lang('admin.status')</th>
                            <td><span class="badge badge-light-success fs-7 fw-bold">@lang('admin.active')</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - category - show-->

@endsection

@push('custom_js')
    <script src="{{ asset('assets/plugins/custom/draggable/draggable.bundle.js') }}"></script>
    <script>
        function initDragable(){
            var containers = document.querySelectorAll(".draggable-zone");

            if (containers.length === 0) {
                return false;
            }

            // var swappable = new Swappable.default(containers, {
            var swappable = new Sortable.default(containers, {
                draggable: ".draggable",
                handle: ".draggable .draggable-handle",
                mirror: {
                    //appendTo: selector,
                    appendTo: "body",
                    constrainDimensions: true
                }
            });

            // swappable.on('sortable:start', () => console.log('sortable:start'));
            // swappable.on('sortable:sort', () => console.log('sortable:sort'));
            // swappable.on('sortable:sorted', () => console.log('sortable:sorted'));
            swappable.on('sortable:stop', (e) => {
                // console.log('sortable:stop',e.originalSource.getAttribute("id"));
                console.log('sortable:stop',e,e.oldIndex,e.newIndex);
            });

            // swappable.on('swappable:start', () => console.log('swappable:start'));
            // swappable.on('swappable:swapped', () => console.log('swappable:swapped'));
            // swappable.on('swappable:stop', () => console.log('swappable:stop'));
        }
        $(document).ready(function(){
            initDragable();









            var table = '#sliders_table';
            // table = document.querySelector('#kt_ecommerce_category_table');
            // Init datatable --- more info on datatables: https://datatables.net/manual/
            let 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)
                ]
            });


                handleDeleteRows();
            addSliderModalOptions();


        })

        function addSliderModalOptions(){
            // display and hidden base on slider content type
            $(document).on('change','#cs_modal_add_slider select.content_type',function (e) {
                let _val = $(this).val();
                $('.option_item').hide();
                if(_val=='1'){
                    $('.option_item.external_link').show();
                }
                else if(_val=='2'){
                    $('.option_item.page').show();
                }
                else if(_val=='3'){
                    $('.option_item.category').show();
                }
                else if(_val=='4'){
                    $('.option_item.category,.option_item.sub_category').show();
                }
                else if(_val=='5'){
                    $('.option_item.tailor_category').show();
                }
                else if(_val=='6'){
                    $('.option_item.product').show();
                }
            });
        }
        function handleDeleteRows(){
            // Select all delete buttons
            // const deleteButtons = $(table).find('[data-kt-ecommerce-category-filter="delete_row"]');
            //
            // deleteButtons.forEach(d => {
            // Delete button on click
            $(document).on('click','[data-kt-filter="delete_row"]', function (e) {
                e.preventDefault();

                // Select parent row
                const parent = $(this).closest('tr');

                // Get category name
                const categoryName = parent.find('[data-kt-filter="name"]').text();

                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                Swal.fire({
                    text: "Are you sure you want to delete " + categoryName + "?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Yes, delete!",
                    cancelButtonText: "No, cancel",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        Swal.fire({
                            text: "You have deleted " + categoryName + "!.",
                            icon: "success",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary",
                            }
                        }).then(function () {
                            // Remove current row
                            datatable.row($(parent)).remove().draw();
                        });
                    } else if (result.dismiss === 'cancel') {
                        Swal.fire({
                            text: categoryName + " was not deleted.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary",
                            }
                        });
                    }
                });
            });
            // });
        }

    </script>
@endpush