<div class="card">
    <div class="card-body">
        <h3>Categories</h3>
    </div>
</div>

<div class="main-content-container container-fluid px-4">
    <div class="row">
        <div class="col-11 card m-3 p-3">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form method="POST" action="category">
                        <input type="hidden" name="_token" value="6sHC49YAPqFTH4vDZgDLlrD8Gk8x6KCjMr5HG8bZ"> <label for="cat">Add New Category</label>
                        <div class="input-group">
                            <input id="cat" name="cat" type="text" class="form-control" placeholder="Category Name" required="">
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary">Add Category <i class="material-icons">send</i></button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    <hr>
                    <div class="table-responsive">
                        <div id="catTable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <div class="dataTables_length" id="catTable_length"><label>Show <select name="catTable_length" aria-controls="catTable" class="custom-select custom-select-sm form-control form-control-sm">
                                                <option value="10">10</option>
                                                <option value="25">25</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select> entries</label></div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <div id="catTable_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="catTable"></label></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="catTable" class="table table-hover table-sm table-bordered datatable dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="catTable_info">
                                        <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="catTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="#: activate to sort column descending" style="width: 143.2px;">#</th>
                                                <th class="sorting" tabindex="0" aria-controls="catTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 498.2px;">Name</th>
                                                <th class="sorting" tabindex="0" aria-controls="catTable" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending" style="width: 413.2px;">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>









                                            <tr role="row" class="odd">
                                                <td class="sorting_1">1</td>
                                                <td data-id="1">Men's</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">2</td>
                                                <td data-id="3">Women's</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">3</td>
                                                <td data-id="4">Mobile</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">4</td>
                                                <td data-id="5">Home &amp; Living</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">5</td>
                                                <td data-id="6">Electronics</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">6</td>
                                                <td data-id="7">CTG Groceries</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">7</td>
                                                <td data-id="8">Kid's &amp; Toys</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">8</td>
                                                <td data-id="10">Heath Care</td>
                                                <td>
                                                    <button onclick="editCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <div class="dataTables_info" id="catTable_info" role="status" aria-live="polite">Showing 1 to 8 of 8 entries</div>
                                </div>
                                <div class="col-sm-12 col-md-7">
                                    <div class="dataTables_paginate paging_simple_numbers" id="catTable_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button page-item previous disabled" id="catTable_previous"><a href="#" aria-controls="catTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
                                            <li class="paginate_button page-item active"><a href="#" aria-controls="catTable" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
                                            <li class="paginate_button page-item next disabled" id="catTable_next"><a href="#" aria-controls="catTable" data-dt-idx="2" tabindex="0" class="page-link">Next</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-11 card m-3 p-3">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form method="POST" action="category.sub">
                        <input type="hidden" name="_token" value="6sHC49YAPqFTH4vDZgDLlrD8Gk8x6KCjMr5HG8bZ"> <label for="sub_cat">Add New Sub Category</label>
                        <div class="input-group">
                            <div class=" input-group-prepend">
                                <select required="" name="cat_id" id="" class="form-control">
                                    <option hidden="" selected="" disabled="">Select one Category</option>
                                    <option value="1">
                                        Men's
                                    </option>
                                    <option value="3">
                                        Women's
                                    </option>
                                    <option value="4">
                                        Mobile
                                    </option>
                                    <option value="5">
                                        Home &amp; Living
                                    </option>
                                    <option value="6">
                                        Electronics
                                    </option>
                                    <option value="7">
                                        CTG Groceries
                                    </option>
                                    <option value="8">
                                        Kid's &amp; Toys
                                    </option>
                                    <option value="10">
                                        Heath Care
                                    </option>
                                </select>
                            </div>
                            <input id="sub_cat" name="sub_cat" type="text" class="form-control" placeholder="Sub Category Name" required="">
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary">Add Sub Category <i class="material-icons">send</i></button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    <hr>
                    <div class="table-responsive">
                        <div id="subCatTable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <div class="dataTables_length" id="subCatTable_length"><label>Show <select name="subCatTable_length" aria-controls="subCatTable" class="custom-select custom-select-sm form-control form-control-sm">
                                                <option value="10">10</option>
                                                <option value="25">25</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select> entries</label></div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <div id="subCatTable_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="subCatTable"></label></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="subCatTable" class="table table-hover table-sm table-bordered datatable dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="subCatTable_info">
                                        <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="subCatTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="#: activate to sort column descending" style="width: 60.2px;">#</th>
                                                <th class="sorting" tabindex="0" aria-controls="subCatTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 473.2px;">Name</th>
                                                <th class="sorting" tabindex="0" aria-controls="subCatTable" rowspan="1" colspan="1" aria-label="Category Name: activate to sort column ascending" style="width: 297.2px;">Category Name</th>
                                                <th class="sorting" tabindex="0" aria-controls="subCatTable" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending" style="width: 198.2px;">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">1</td>
                                                <td data-id="2">Shirt</td>
                                                <td data-id="2">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">2</td>
                                                <td data-id="3">T-Shirt</td>
                                                <td data-id="3">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">3</td>
                                                <td data-id="4">Polo Shirts</td>
                                                <td data-id="4">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">4</td>
                                                <td data-id="5">Panjabi</td>
                                                <td data-id="5">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">5</td>
                                                <td data-id="6">Pants</td>
                                                <td data-id="6">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">6</td>
                                                <td data-id="7">Short Pants &amp; Cargos</td>
                                                <td data-id="7">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">7</td>
                                                <td data-id="8">Lungi</td>
                                                <td data-id="8">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">8</td>
                                                <td data-id="9">Watch</td>
                                                <td data-id="9">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="odd">
                                                <td class="sorting_1">9</td>
                                                <td data-id="10">Bag &amp; Balt</td>
                                                <td data-id="10">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                            <tr role="row" class="even">
                                                <td class="sorting_1">10</td>
                                                <td data-id="11">Shavs &amp; Trims</td>
                                                <td data-id="11">Men's</td>
                                                <td>
                                                    <button onclick="editSubCategory(this)" class="btn btn-sm btn-outline-primary icn-btn"><i class="material-icons md-18">edit</i></button>
                                                    <button onclick="delete_sub_cat(this)" class="btn btn-sm btn-outline-danger  icn-btn"><i class="material-icons md-18">delete</i></button>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <div class="dataTables_info" id="subCatTable_info" role="status" aria-live="polite">Showing 1 to 10 of 68 entries</div>
                                </div>
                                <div class="col-sm-12 col-md-7">
                                    <div class="dataTables_paginate paging_simple_numbers" id="subCatTable_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button page-item previous disabled" id="subCatTable_previous"><a href="#" aria-controls="subCatTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
                                            <li class="paginate_button page-item active"><a href="#" aria-controls="subCatTable" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="2" tabindex="0" class="page-link">2</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="3" tabindex="0" class="page-link">3</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="4" tabindex="0" class="page-link">4</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="5" tabindex="0" class="page-link">5</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="6" tabindex="0" class="page-link">6</a></li>
                                            <li class="paginate_button page-item "><a href="#" aria-controls="subCatTable" data-dt-idx="7" tabindex="0" class="page-link">7</a></li>
                                            <li class="paginate_button page-item next" id="subCatTable_next"><a href="#" aria-controls="subCatTable" data-dt-idx="8" tabindex="0" class="page-link">Next</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>





<script>
    // $.ajax({
    //   type: "get",
    //   url: "https://myadmin.mali-mart.com/category",
    //   data: "data",
    //   dataType: "json",
    //   success: function (res) {
    //     console.log(res);
    //   }
    // });
</script>