@extends('layout.store_layout.master')
@section('content')
<!--begin::Products-->
<div class="card card-flush">

    <!--begin::Card body-->
    <div class="card-body">
        <!--begin:::Tabs-->
        <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x border-transparent fs-4 fw-semibold ">
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-5 active" data-bs-toggle="tab" href="#general_tab">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen001.svg-->
                    <span class="svg-icon svg-icon-2 me-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 2.375L2 9.575V20.575C2 21.175 2.4 21.575 3 21.575H9C9.6 21.575 10 21.175 10 20.575V14.575C10 13.975 10.4 13.575 11 13.575H13C13.6 13.575 14 13.975 14 14.575V20.575C14 21.175 14.4 21.575 15 21.575H21C21.6 21.575 22 21.175 22 20.575V9.575L13 2.375C12.4 1.875 11.6 1.875 11 2.375Z" fill="currentColor" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    هوية المتجر
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-5" data-bs-toggle="tab" href="#app_tab">
                    <!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm004.svg-->
                    <span class="svg-icon svg-icon-2 me-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="currentColor" />
                            <path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="currentColor" />
                            <path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="currentColor" />
                            <path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="currentColor" />
                            <path opacity="0.3" d="M14 4H10V10H14V4Z" fill="currentColor" />
                            <path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="currentColor" />
                            <path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="currentColor" />
                            <path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="currentColor" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    التواصل و التطبيق
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-active-primary pb-5" data-bs-toggle="tab" href="#marking_tab">
                    <!--begin::Svg Icon | path: icons/duotune/communication/com014.svg-->
                    <span class="svg-icon svg-icon-2 me-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z" fill="currentColor" />
                            <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor" />
                            <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z" fill="currentColor" />
                            <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    التسويق و الطلب
                </a>
            </li>
        </ul>
        <!--end:::Tabs-->
        <div class="tab-content" id="myTabsContent">
            <div class="tab-pane fade show active" id="general_tab" role="tabpanel">
                @include('pages.store_admin.settings._sections.general')
            </div>

            <div class="tab-pane fade " id="app_tab" role="tabpanel">
                @include('pages.store_admin.settings._sections.app')
            </div>

            <div class="tab-pane fade " id="marking_tab" role="tabpanel">
                @include('pages.store_admin.settings._sections.marking')
            </div>
        </div>
    </div>
    <!--end::Card body-->
</div>


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

            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-row-bordered table-striped" >
                        <tbody>
                        <tr>
                            <th>الاسم</th>
                            <td>طول 2</td>
                        </tr>
                        <tr>
                            <th>عدد المنتجات</th>
                            <td>30</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>
                        </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