@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="@lang('general.search')" />
            </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="@lang('admin.status')" data-kt-ecommerce-product-filter="status">
                    <option></option>
                    <option value="all">@lang('admin.all')</option>
                    <option value="enabled">@lang('admin.active')</option>
                    <option value="disabled">@lang('admin.inactive')</option>
                </select>
                <!--end::Select2-->
            </div>
            <!--begin::Add product-->
            <a href="{{route('admin.lengths.add')}}" class="btn btn-primary">@lang('admin.add_new')</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 text-center 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="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#cs_datatable .form-check-input.selector" value="1" />
                    </div>
                </th>
                <th class="min-w-200px">@lang('admin.title')</th>
                <th class="min-w-100px">@lang('admin.number_of_products')</th>
                <th class=" min-w-100px">@lang('admin.created_date')</th>
                <th class=" min-w-100px">@lang('admin.status')</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">

                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" >طول 1</a>

                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

                        <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-danger me-2">
                            <i class="fas fa-trash fs-4"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <td>
                        <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-filter="name" > طول   2</a>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">38</span>
                        </a>
                    </td>
                    <td >
                        14 Dec 2020, 8:43 pm
                    </td>
                    <td class="" data-order="Inactive">
                        <label class="form-check form-switch  form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value=""/>
                            <span class="form-check-label">
                            تفعيل
                            </span>
                        </label>
                    </td>
                    <td class="">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-primary me-2">
                            <i class="fas fa-eye fs-4"></i>
                        </a>
                        <a href="{{ route('admin.lengths.edit') }}" class="btn btn-icon btn-sm btn-warning me-2">
                            <i class="fas fa-pen fs-4"></i>
                        </a>

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

            </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>@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>





            $(document).ready(function(){
                var table = '#cs_datatable';
                // 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: 5 }, // Disable ordering on column 3 (actions)
                    ]
                });

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

                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