@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="type">
                    <option></option>
                    <option value="all">الكل</option>
                    <option value="front">أمامي</option>
                    <option value="back">خلفي</option>
                </select>
                <!--end::Select2-->
            </div>
            <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.pocket_forms.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="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">الاسم</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="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <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//stock/ecommerce/71.gif")}}');"></span>
                            </a>
                            <div class="ms-5">
                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-ecommerce-product-filter="product_name">شكل 1</a>
                            </div>
                        </div>

                    </td>
                    <td class="" data-search="front">
                        <span class="badge badge-light-success fs-7 fw-bold" >جيب أمامي</span>
                    </td>
                    <td class="">
                        <a href="">
                            <span class="fw-bold ms-3">23</span>
                        </a>
                    </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.pocket_forms.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="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="1" />
                        </div>
                    </td>
                    <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//stock/ecommerce/72.gif")}}');"></span>
                            </a>
                            <div class="ms-5">
                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-ecommerce-product-filter="product_name">جيب 2</a>
                            </div>
                        </div>
                    </td>
                    <td class="" data-search="back">
                        <span class="badge badge-light-info fs-7 fw-bold">جيب خلفي</span>
                    </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-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.pocket_forms.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 - 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>شكل 1</td>
                        </tr>
                        <tr>
                            <th>نوع الجيب</th>
                            <td><span class="badge badge-light-info fs-7 fw-bold">جيب خلفي</span></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>
                        <tr>
                            <th>الصورة </th>
                            <td>
                                <div class="symbol symbol-100px">
                                    <img src="{{ asset('assets/media//stock/ecommerce/72.gif') }}" class="img-thumbnail" alt="image">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - category - 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: 5 }, // Disable ordering on column 3 (actions)
                ]
            });

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

            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: "هل متأكد من عملية الحذف؟",
                            icon: "warning",
                            showCancelButton: true,
                            buttonsStyling: false,
                            confirmButtonText: "نعم, حذف!",
                            cancelButtonText: "لا, إلغاء",
                            customClass: {
                                confirmButton: "btn fw-bold btn-danger",
                                cancelButton: "btn fw-bold btn-active-light-primary"
                            }
                        }).then(function (result) {
                            if (result.value) {
                                Swal.fire({
                                    text: "تمت عملية الحذف بنجاح.",
                                    icon: "success",
                                    buttonsStyling: false,
                                    confirmButtonText: "إغلاق",
                                    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: " فشلت عملية الحذف",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "إغلاق",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    }
                                });
                            }
                        });
                    });
                // });
            }

            // 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(5).search(value).draw();
                    // console.log(value);
                    // datatable.search(value).draw();
                });
            }
            // Handle type filter dropdown
            function handleTypeFilter() {
                const filterType = document.querySelector('[data-filter="type"]');
                $(filterType).on('change', e => {
                    let value = e.target.value;
                    if(value === 'all'){
                        value = '';
                    }
                    datatable.column(2).search(value).draw();
                    // console.log(value);
                    // datatable.search(value).draw();
                });
            }
        })
    </script>
@endpush