@extends('backend.layouts.app')


@section('content')
<div class="toolbar" id="kt_toolbar">
	<!--begin::Container-->
	<div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
		<!--begin::Page title-->
		<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
			<!--begin::Title-->
			<h1 class="d-flex text-dark fw-bolder fs-3 align-items-center my-1">Categories</h1>
			<!--end::Title-->
			<!--begin::Separator-->
			<span class="h-20px border-gray-300 border-start mx-4"></span>
			<!--end::Separator-->
			<!--begin::Breadcrumb-->
			<ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
				<!--begin::Item-->
				<li class="breadcrumb-item text-muted">
					<a href="https://mongo.us.testmywebsite.in/admin/dashboard">Home</a>
				</li>
				<!--end::Item-->
				<!--begin::Item-->
				<li class="breadcrumb-item">
					<span class="bullet bg-gray-300 w-5px h-2px"></span>
				</li>
				<!--end::Item-->
				<!--begin::Item-->
				 <li class="breadcrumb-item text-muted">Categories</li> 
				<!--end::Item-->
				<!--begin::Item-->
				<li class="breadcrumb-item">
					<span class="bullet bg-gray-300 w-5px h-2px"></span>
				</li>
				<!--end::Item-->
				<!--begin::Item-->
				<li class="breadcrumb-item text-dark"> List</li>
				<!--end::Item-->
			</ul>
			<!--end::Breadcrumb-->
		</div>
		<!--end::Page title-->
		<!--begin::Actions-->
		<div class="d-flex align-items-center gap-2 gap-lg-3">

        <a href="https://mongo.us.testmywebsite.in/admin/categories/create" class="btn btn-sm btn-primary">Create</a>
        <!--end::Primary button-->
		</div>
		<!--end::Actions-->
	</div>
	<!--end::Container-->
</div>


<div class="content d-flex.flex-column.flex-column-fluid">
<div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
            @include('backend.includes.flash-message')
                <div class="card card-flush">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                    <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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <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-kt-feeds-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search Report" /> -->
                            </div>
                            <!--end::Search-->
                            <!--begin::Export buttons-->
                            <div id="kt_ecommerce_report_shipping_export" class="d-none"></div>
                            <!--end::Export buttons-->
                        </div>
                      
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">

                            <!--begin::Toolbar-->
                            <div class="d-flex justify-content-end" data-kt-permissions-table-toolbar="base">
                                <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                    <span class="svg-icon svg-icon-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor"></path>
                                        </svg>
                                    </span>Filter</button>
                                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">
                                        <div class="px-7 py-5">
                                            <div class="fs-5 text-dark fw-bolder">Filter Options</div>
                                        </div>
                                        <div class="separator border-gray-200"></div>
                                        <div class="px-7 py-5" data-kt-permissions-table-filter="form">
                                            
                                            <div class="mb-10">
                                                <label class="form-label fs-6 fw-bold">Role:</label>
                                                <select id="role" name="role" aria-label="Select a Role" data-kt-job-table-filter="role" data-control="select2" data-placeholder="Select a Role..." class="form-select mb-2 select2-hidden-accessible" data-select2-id="select2-data-role" tabindex="-1" aria-hidden="true">
                                                <option value="all" data-select2-id="select2-data-8-hep7">Select Role</option>
                                                    <option value="62b44e759036c64c49420822">super admin</option>
                                                    <option value="62b44e759036c64c49420823">administrator</option>
                                                    <option value="62b44e759036c64c49420824">manager</option>
                                                    <option value="62b44e759036c64c49420825">executive</option>
                                                    <option value="62b44e759036c64c49420826">user</option>
                                                    <option value="62d508977eac15166479a1f2">designer</option>
                                                    <option value="62d5093041d0b802ba6d0d62"></option>
                                                </select><span class="select2 select2-container select2-container--bootstrap5" dir="ltr" data-select2-id="select2-data-7-azf0" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single form-select mb-2" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-role-container" aria-controls="select2-role-container"><span class="select2-selection__rendered" id="select2-role-container" role="textbox" aria-readonly="true" name="Select Role">Select Role</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                                
                                            </div>

                                            <div class="d-flex justify-content-end">
                                                <button type="reset" class="btn btn-light btn-active-light-primary fw-bold me-2 px-6" data-kt-menu-dismiss="true" data-kt-permissions-table-filter="reset">Reset</button>
                                                <button type="submit" class="btn btn-primary fw-bold px-6" data-kt-menu-dismiss="true" data-kt-permissions-table-filter="filter">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <x-buttons.create route='{{ route("backend.$module_name.create") }}' title="{{__('Create')}} {{ ucwords(Str::singular($module_name)) }}"/>
                            <!--begin::Menu-->

                            <div id="kt_ecommerce_report_shipping_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="copy">Copy to clipboard</a>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="excel">Export as Excel</a>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="csv">Export as CSV</a>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="pdf">Export as PDF</a>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end align-items-center d-none" data-kt-permissions-table-toolbar="selected">
                                <div class="fw-bolder me-5">
                            </div>
                        </div>
                    </div>
                    
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <div id="kt_report_permissions_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <table id="datatable" class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" aria-describedby="kt_report_permissions_table_info" style="width: 1203px;">
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <!-- <th class="w-10px pe-2 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 29.5px;">
                                    <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="#kt_report_permissions_table .form-check-input" value="">
                                    </div>
                                    </th> -->
                                    <th class="min-w-100px sorting_disabled" rowspan="1" colspan="1" aria-label="Name" style="width: 144.5px;">Sr.No.</th>
                                    <th class="min-w-75px sorting_disabled" rowspan="1" colspan="1" aria-label="Assigned To" style="width: 609.5px;">Name</th>
                                    <th class="min-w-100px sorting_disabled" rowspan="1" colspan="1" aria-label="Created Date" style="width: 203.5px;">Updated At</th>
                                    <th class="min-w-100px sorting_disabled" rowspan="1" colspan="1" aria-label="Action" style="width: 141.25px;">Action</th></tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-bold">
                        
                            </tbody>
                            <!--end::Table body-->
                        </table>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
       </div>
     </div>
    </div>
</div>


@endsection

@push ('after-styles')
<!-- DataTables Core and Extensions -->
<link rel="stylesheet" href="{{ asset('vendor/datatable/datatables.min.css') }}">

@endpush

@push ('after-scripts')
<!-- DataTables Core and Extensions -->
<script type="text/javascript" src="{{ asset('vendor/datatable/datatables.min.js') }}"></script>

<script type="text/javascript">

    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        ajax: '{{ route("backend.$module_name.index_data") }}',
        columns: [
            {data: '_id', name: '_id'},
            {data: 'name', name: 'name'},
            {data: 'updated_at', name: 'updated_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

</script>
@endpush